<template>
    <div class="box-card">
        <div class="process-left">
            <div class="process-select">
                <!-- 工艺级别：-->
                <el-form :model="form" label-width="auto">
                    <el-form-item label="工艺级别:">
                        <el-select v-model="processLevel" placeholder="请选择" style="width: 220px" @change="leavelChange">
                            <el-option label="一级工艺" value="1" />
                            <el-option label="二级工艺" value="2" />
                            <el-option label="三级工艺" value="3" /> 
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <el-tree style="width:240px" :data="data" :props="defaultProps" @node-click="handleNodeClick"
                :default-expand-all="true" :expand-on-click-node="false" />

        </div>
        <div class="process-right">
            <el-form :model="form" label-width="auto" :rules="rules">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="重要度:" prop="zhongyaodu">
                            <el-select v-model="form.zhongyaodu" :placeholder="'请选择'">
                                <el-option v-for="item in priorityList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生产标识:" prop="qualityGrade">
                            <el-select v-model="form.qualityGrade" :placeholder="'请选择'">
                                <el-option v-for="item in rankList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注:" prop="beizhu">
                            <el-input v-model="form.beizhu" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="工序" name="1" v-if="treeLeave == 2"></el-tab-pane>
                <el-tab-pane label="项目" name="2" v-if="treeLeave == 3"></el-tab-pane>
                <el-tab-pane label="尺寸、量具" name="3" v-if="treeLeave == 3"></el-tab-pane>
                <el-tab-pane label="工装、模具表" name="4" v-if="treeLeave == 3"></el-tab-pane>
            </el-tabs>
            <div class="table-btn">
                <div class="table-btn-left">
                    <el-button type="primary" plain @click="addTable()">插入一行</el-button>
                    <el-button type="danger" plain @click="delTable()">删除选择行</el-button>
                </div>
                <div class="table-btn-right" v-if="!(activeName=='3'||activeName=='4')">
                    <el-select v-model="processLevel" placeholder="选择工艺模板" style="width: 220px;margin-right: 12px;">
                        <el-option label="模板一" value="1" />
                        <el-option label="模板二" value="2" />
                        <el-option label="模板三" value="3" />
                    </el-select>
                    <el-button type="primary">导入模板</el-button>
                </div>
            </div>
            <el-table :data="tableData1" style="width: 100%" v-if="activeName == '1'">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="date" label="工序号"></el-table-column>
                <el-table-column prop="name" label="工序">
                    <template #header>
                        <span><i style="color:red">*</i>工序</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="工艺能力">
                    <template #header>
                        <span><i style="color:red">*</i>工艺能力</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="工序描述">
                    <template #header>
                        <span><i style="color:red">*</i>工序描述</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="定额工时(分钟)">
                    <template #header>
                        <span><i style="color:red">*</i>定额工时(分钟)</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="准备工时(分钟)">
                </el-table-column>
                <el-table-column prop="address" label="是否主工序">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option  label="是"  value="1"></el-option>
                        <el-option  label="否"  value="2"></el-option>
                    </el-select>
                </el-table-column>
            </el-table>
            <el-table :data="tableData2" style="width: 100%" v-if="activeName == '2'">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="date" label="工序号"></el-table-column>
                <el-table-column prop="date" label="检验项目">
                    <template #header>
                        <span><i style="color:red">*</i>检验项目</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="检验标准">
                    <template #header>
                        <span><i style="color:red">*</i>检验标准</span>
                    </template>
                </el-table-column>
                  <el-table-column prop="date" label="标准值">
                    
                </el-table-column>
                <el-table-column prop="date" label="上限">
                    
                </el-table-column>
                <el-table-column prop="date" label="下限">
                    
                </el-table-column>
                <el-table-column prop="date" label="定额工时(分钟)">
                    <template #header>
                        <span><i style="color:red">*</i>定额工时(分钟)</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="准备工时(分钟)"></el-table-column>
            </el-table>
            <el-table :data="tableData3" style="width: 100%" v-if="activeName == '3'">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="date" label="工序号"></el-table-column>
                <el-table-column prop="date" label="镀前镀后">
                    <template #header>
                        <span><i style="color:red">*</i>镀前镀后</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="量具">
                    <template #header>
                        <span><i style="color:red">*</i>量具</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="量具尺寸"></el-table-column>
                <el-table-column prop="date" label="图纸尺寸"></el-table-column>
            </el-table>
            <el-table :data="tableData4" style="width: 100%" v-if="activeName == '4'">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="date" label="工序号"></el-table-column>
                <el-table-column prop="date" label="对应工装">
                    <template #header>
                        <span><i style="color:red">*</i>对应工装</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="工装名称"></el-table-column>
                <el-table-column prop="date" label="是否印字"></el-table-column>
                <el-table-column prop="date" label="印字版编号"></el-table-column>
                <el-table-column prop="date" label="测试夹具号"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    name: 'CraftIndex',
    components: {},
    props: {
        height: {
            type: Number,
            default: 600
        },
        partId: {
            type: [Number, String],
            default: null
        },
        dialogType: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            processLevel: '2',
            data: [
                {
                    label: 'Level one 1',
                    disabled: true,
                    children: [
                        {
                            label: 'Level two 1-1',
                            children: [
                                {
                                    label: 'Level three 1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Level one 2',
                    disabled: true,
                    children: [
                        {
                            label: 'Level two 2-1',
                            children: [
                                {
                                    label: 'Level three 2-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Level two 2-2',
                            children: [
                                {
                                    label: 'Level three 2-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            form: {
                zhongyaodu: '',
                qualityGrade: '',//生产标识
                beizhu: '',//备注
            },
            rules: {
                zhongyaodu: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ]
            },
            priorityList: [
                {
                    label: '本次使用',
                    value: 1
                },
                {
                    label: '正式工艺',
                    value: 2
                },
                {
                    label: '临时工艺',
                    value: 3
                }
            ],
            rankList: [
                {
                    label: '一级',
                    value: 1
                },
                {
                    label: '二级',
                    value: 2
                },
                {
                    label: '三级',
                    value: 3
                }
            ],
            activeName: '1',
            treeLeave: {},//组织树选中层级
        }
    },
    methods: {
        // 组织树点击
        handleNodeClick(nodes, node, self) {
            if (nodes.disabled) {
                // 阻止默认的点击行为
                return false;
            }
            this.treeLeave = node.level
            if (this.treeLeave == 3) {
                this.activeName = '2'
            }
        },
        // 右侧tab切换
        handleClick(value) {
            console.log(999999, value)

            
        },
        // 切换等级
        leavelChange(){
            this.$message.success('保存成功')

        },
        // 插入一行
        addTable() {
            if (this.activeName == '1') {

            }
            if (this.activeName == '2') {

            }
            if (this.activeName == '3') {

            }
            if (this.activeName == '4') {

            }
        },
        // 删除选择行
        delTable() {
            if (this.activeName == '1') {

            }
            if (this.activeName == '2') {

            }
            if (this.activeName == '3') {

            }
            if (this.activeName == '4') {

            }
        },
    }
}

</script>
<style lang="scss" scoped>
.box-card {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 200px);

    .process-left {
        // padding: 20px;
        border: 1px solid #ccc;

        .process-select {
            padding: 12px;
            background: #e4e7ed;

            :deep(.el-form-item) {
                margin-bottom: 0px !important;
            }
        }
    }

    .process-right {
        padding: 12px;
        flex: 1;
        border: 1px solid #ccc;
        border-left: 0;

        .table-btn {
            width: 100%;
            height: 50px;

            .table-btn-left {
                float: left;
            }

            .table-btn-right {
                float: right;
            }
        }
    }
}
</style>