<template>
  <el-dialog title="详情" v-model="setCrewShow" :before-close="cancel" fullscreen>
    <div class="tabs-container">
      <el-tabs v-if="setCrewShow" v-model="activeName">
        <el-tab-pane label="零件信息" name="1"> </el-tab-pane>
        <el-tab-pane label="工艺编制" name="2"> </el-tab-pane>
      </el-tabs>
      <div class="content-right">
        <p v-if="showProcessVersion">工艺版本：202510191001</p>
      </div>
      <div v-show="activeName === '1'">
        <el-card class="box-card-info">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">基本信息</span>
          </div>
          <el-form
            ref="testForm"
            :model="formData"
            label-width="120px"
            label-position="right"
            :validate-on-rule-change="false"
            class="vd-form-three"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="零件号:" prop="partCode">
                  {{ formData.partCode }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="零件名称:" prop="partName">
                  {{ formData.partName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品型号:" prop="productType">
                  {{ formData.productType }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '烧结'">
                <el-form-item label="是否为玻璃饼:" prop="isGlassCake">
                  {{ formData.isGlassCake ? '是' : '否' }}
                </el-form-item>
              </el-col>

              <el-col :span="8" v-if="partType == '烧结'">
                <el-form-item label="是否印字:" prop="printing">
                  <span v-if="!formData.isGlassCake">
                    {{ formData.isPrint == 1 ? '否' : formData.printing == 2 ? '单' : '双' }}
                  </span>
                  <span v-if="formData.isGlassCake">
                    {{ formData.printing == 2 ? '是' : '否' }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '烧结' && formData.isGlassCake">
                <el-form-item label="材料:" prop="glassCailiao">
                  {{ formData.material }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '烧结' && formData.isGlassCake">
                <el-form-item label="粉重:" prop="powderWeight">
                  {{ formData.powderWeight }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '烧结' && formData.isGlassCake">
                <el-form-item label="成型厚度:" prop="formingThickness">
                  {{ formData.formingThickness }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '烧结' && formData.isGlassCake">
                <el-form-item label="面积(dm²):" prop="area">
                  {{ formData.area }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="硬度:" prop="hardness">
                  {{ formData.hardness }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="材料:" prop="material">
                  {{ formData.material }}
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="partType == '热表' || (partType == '烧结' && formData.isGlassCake)"
              >
                <el-form-item label="物料编码:" prop="wuliaobianma">
                  <el-select v-model="value" placeholder="请选择" style="width: 250px" disabled>
                    <el-option label="物料一" value="1" />
                    <el-option label="物料二" value="2" />
                    <el-option label="物料三" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="镀种1:" prop="plate">
                  <el-select
                    v-model="formData.plate"
                    placeholder="请选择"
                    style="width: 250px"
                    disabled
                  >
                    <el-option label="镀种一" value="1" />
                    <el-option label="镀种二" value="2" />
                    <el-option label="镀种三" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="镀层代号1:" prop="plateCode">
                  {{ formData.plateCode }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="面积1(dm²):" prop="area">
                  {{ formData.area }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="镀种2:" prop="plateTwo">
                  <el-select
                    v-model="formData.plateTwo"
                    placeholder="请选择"
                    style="width: 250px"
                    disabled
                  >
                    <el-option label="镀种一" value="1" />
                    <el-option label="镀种二" value="2" />
                    <el-option label="镀种三" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="镀层代号2:" prop="plateCodeTwo">
                  {{ formData.plateCodeTwo }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="面积2(dm²):" prop="areaTwo">
                  {{ formData.areaTwo }}
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="partType == '热表'">
                <el-form-item label="镀层厚度:" prop="plateThickness">
                  {{ formData.plateThickness }}
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="产品应用领域:" prop="plateThickness">
                  {{ formData.productApplicationArea }}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="工艺路线:" prop="craftWay">
                  {{ formData.craftWay }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="有效期:" prop="periodOfValidity">
                  {{ formData.periodOfValidity == 1 ? '长期有效' : '自定义' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="有效周期(天):" prop="expirationPeriod">
                  {{ formData.expirationPeriod }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="到期提醒(天):" prop="advanceRemind">
                  {{ formData.advanceRemind }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="涂色标个数:" prop="tsbNum">
                  {{ formData.tsbNum }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="涂色带个数:" prop="tsdNum">
                  {{ formData.tsdNum }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="涂箭头个数:" prop="tjtNum">
                  {{ formData.tjtNum }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="色标色带:" prop="memo">
                  {{ formData.memo }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="关键信息:" prop="keyInfo">
                  {{ formData.keyInfo }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col
                :span="24"
                v-if="partType == '热表' || (partType == '烧结' && !formData.isGlassCake)"
              >
                <el-form-item label="工艺校验:" prop="sinTer">
                  <el-checkbox v-model="formData.goldMark" v-if="partType == '热表'" disabled
                    >镀金标识</el-checkbox
                  >
                  <el-checkbox v-model="formData.markingsTest" disabled>涂色标</el-checkbox>
                  <el-checkbox
                    v-model="formData.fluorescenceCheck"
                    v-if="partType == '热表'"
                    disabled
                    >荧光检</el-checkbox
                  >
                  <el-checkbox v-model="formData.hotDispose" v-if="partType == '热表'" disabled
                    >热处理检验</el-checkbox
                  >
                  <el-checkbox v-model="formData.inkjetPrinting" v-if="partType == '热表'"
                    >喷码</el-checkbox
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card
          class="box-card"
          v-if="formData.isSintering == '1' && !formData.isGlassCake"
          style="margin-top: 24px"
        >
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">子件信息</span>
          </div>
          <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            v-model="form"
            ref="crud"
          >
          </avue-crud>
        </el-card>
      </div>
      <div v-show="activeName === '2'" 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">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="重要度:" prop="zhongyaodu"> </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产标识:" prop="qualityGrade"> </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注:" prop="beizhu">
                  {{ form.beizhu }}
                </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>
          <el-table :data="form1.tableData1" style="width: 100%" v-if="activeName == '1'">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="processNo" label="工序号"></el-table-column>
            <el-table-column prop="processName" label="工序">
              <template #header>
                <span><i style="color: red">*</i>工序</span>
              </template>
            </el-table-column>
            <el-table-column prop="craftName" label="工艺能力">
              <template #header>
                <span><i style="color: red">*</i>工艺能力</span>
              </template>
            </el-table-column>
            <el-table-column prop="proDes" label="工序描述">
              <template #header>
                <span><i style="color: red">*</i>工序描述</span>
              </template>
            </el-table-column>
            <el-table-column prop="proHours" label="定额工时(分钟)">
              <template #header>
                <span><i style="color: red">*</i>定额工时(分钟)</span>
              </template>
            </el-table-column>
            <el-table-column prop="setoutHours" label="准备工时(分钟)"> </el-table-column>
            <el-table-column prop="isMain" label="是否主工序">
              <template #default="scope">
                <el-select v-model="scope.row.isMain" placeholder="请选择" disabled>
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="form2.tableData2" style="width: 100%" v-if="activeName == '2'">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="trialNo" label="工序号"></el-table-column>
            <el-table-column prop="projectName" label="检验项目">
              <template #header>
                <span><i style="color: red">*</i>检验项目</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectStandard" label="检验标准">
              <template #header>
                <span><i style="color: red">*</i>检验标准</span>
              </template>
            </el-table-column>
            <el-table-column prop="proHours" label="定额工时(分钟)">
              <template #header>
                <span><i style="color: red">*</i>定额工时(分钟)</span>
              </template>
            </el-table-column>
            <el-table-column prop="prepareHours" label="准备工时(分钟)"></el-table-column>
          </el-table>
          <el-table :data="form3.tableData3" style="width: 100%" v-if="activeName == '3'">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="trialNo" label="工序号"></el-table-column>
            <el-table-column prop="testType" label="镀前镀后">
              <template #header>
                <span><i style="color: red">*</i>镀前镀后</span>
              </template>
              <template #default="scope">
                {{ scope.row.testType == 1 ? '镀前' : '镀后' }}
              </template>
            </el-table-column>
            <el-table-column prop="tool" label="量具">
              <template #header>
                <span><i style="color: red">*</i>量具</span>
              </template>
            </el-table-column>
            <el-table-column prop="toolSize" label="量具尺寸"></el-table-column>
            <el-table-column prop="toolInfo" label="图纸尺寸"></el-table-column>
          </el-table>
          <el-table :data="form4.tableData4" style="width: 100%" v-if="activeName == '4'">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="trialNo" label="工序号"></el-table-column>
            <el-table-column prop="moldCode" label="对应工装">
              <template #header>
                <span><i style="color: red">*</i>对应工装</span>
              </template>
            </el-table-column>
            <el-table-column prop="moldName" label="工装名称"></el-table-column>
            <el-table-column prop="isPrint" label="是否印字"></el-table-column>
            <el-table-column prop="printNo" label="印字版编号"></el-table-column>
            <el-table-column prop="testFixtureNo" label="测试夹具号"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <!-- <el-button type="primary" @click="cancel()"> 确认 </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>
<script>

import dsPartBasicInfo from './dsPartBasicInfo.vue';
import processPlanning from './processPlanning.vue';
import {
  getPartManagementDetail,
  getProcessManagementAuthorized,
  getPartDetail,
  getProcessAuthorized,
} from '@/api/processManagement/taskProcessing';

export default {
  name: 'DsPartIndex',
  components: {
    dsPartBasicInfo,
    processPlanning,
  },
  props: {
    partType: {
      type: String,
      default: '',
    },
    isOpen: {
      type: Boolean,
      default: false,
    },

    dialogType: {
      type: String,
      default: '',
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
    detailsType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showProcessVersion:false,
      setCrewShow: false,
      activeName: '1',
      craftData: {},
      formData: {},
      form: {},
      processLevel: '1',
      rankList: [],
      priorityList: [],
      form1: {
        tableData1: [], //工序
      },
      form2: {
        tableData2: [], //项目
      },
      form3: {
        tableData3: [], //量具
      },
      form4: {
        tableData4: [], //工装
      },
      activeName: '1',
      treeLeave: 2, //组织树选中层级
      data: [],
      option: {
        tip: false,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        dialogWidth: '60%',
        border: true,
        selection: false,
        viewBtn: true,
        menuWidth: 240,
        dialogClickModal: false,
        excelBtn: true,
        viewBtn: false,
        editBtnText: '编辑',
        refreshBtn: false,
        searchShowBtn: false,
        gridBtn: false,
        menu: false,
        header: false,
        index: true,
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        align: 'center',
        column: [
          {
            label: '零件号',
            prop: 'subCode',
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: '零件名称',
            prop: 'subName',
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: '产品型号',
            prop: 'productType',
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: '数量',
            prop: 'quota',
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: '总面积',
            prop: 'quota',
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: '零件类型',
            prop: 'productType',
            search: false,
            sortable: true,
            overHidden: true,
            type: 'select',
            cell: true,
            dicData: [
              {
                label: '插针',
                value: '1',
              },
              {
                label: '壳体',
                value: '2',
              },
              {
                label: '石墨模',
                value: '5',
              },
              {
                label: '自制玻璃饼',
                value: '3',
              },
              {
                label: '其他',
                value: '4',
              },
            ],
          },
        ],
      },
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {
    this.setCrewShow = this.isOpen;

    
    this.getPartInfo();
    this.getCcraftInfo();
  },
  methods: {
    // 组织树点击
    handleNodeClick(nodes, node, self) {
      if (nodes.disabled) {
        return false;
      }
      this.treeNodes = nodes;
      this.treeLeave = node.level;

      // 清空现有表格数据
      this.form1.tableData1 = [];
      this.form2.tableData2 = [];
      this.form3.tableData3 = [];
      this.form4.tableData4 = [];
      // 根据节点层级切换标签页
      if (this.treeLeave === 2) {
        this.activeName = '1';
        this.form1.tableData1 = nodes.processList;
      }
      // 根据节点层级加载对应数据
      if (this.treeLeave === 3) {
        this.activeName = '2';
        // 三级节点：工序级，加载工序相关数据
        const { processInfo, projectList, measuringToolList, moldToolList } = nodes.rawData;

        // 加载项目表格数据
        this.form2.tableData2 = projectList

        // 加载量具表格数据
        this.form3.tableData3 = measuringToolList

        // 加载工装表格数据
        this.form4.tableData4 = moldToolList
      }
    },
    setDataLocal() {
      this.$setItem('零件信息信息验证', this.validateObj);
    },
    
    leavelChange(value) {
      console.log('工艺级别', value);
    },
    // 获取工艺信息
    getCcraftInfo() {
      // 零件工艺管理-详情
      if (this.detailsType == 'processPlanning') {
        let query = {
          partId: 4,
          partVersion: '1.3',
          rank: '2',
        };
        getProcessManagementAuthorized(query).then(res => {
          this.data = this.transformCraftTree(res.data.data);
        });
      } else if (this.detailsType === 'taskProcessing') {
         let query = {
          partId: 4,
          partVersion: '1.3',
          rank: '2',
        };
        getProcessAuthorized({ partId: this.partId, taskId: this.rowData.id }).then(res => {
          this.craftData = res.data.data;
          this.data = this.transformCraftTree(res.data.data);
        });
      }
    },
    // 获取零件信息
    getPartInfo() {
      // 零件工艺管理-详情
      if (this.detailsType == 'processPlanning') {
        let query = {
          partId: 4,
          partVersion: '1.3',
          rank: '2',
        };
        getPartManagementDetail(query).then(res => {
          this.formData = res.data.data.dsPartEntity;
        });
      } else if (this.detailsType === 'taskProcessing') {
        getPartDetail(this.rowData.id).then(res => {
          this.formData = res.data.data.dsPartEntity;
        });
      }
    },
    // 组织树转换
    transformCraftTree(responseData) {
      const { partInfo, craftList } = responseData;
      const partCode = partInfo.partCode;

      // 构建树形结构并保留原始数据引用
      const tree = [
        {
          label: partCode,
          disabled: true,
          rawData: partInfo, // 保存零件原始数据
          children: craftList.map(craft => {
            const { craftInfo, processList } = craft;
            // 拼接二级节点标签：roamNo-craftNo
            const craftLabel =  `${craftInfo.roamNo}-${craftInfo.craftNo}`;

            return {
              ...craftInfo,
              label: craftLabel,
              processList: processList.map(process => {
                return process.processInfo;
              }),
              rawData: craftInfo, // 保存工艺原始数据
              children: processList.map(process => {
                const { processInfo, projectList, measuringToolList, moldToolList } = process;
                // 三级节点：工序名称
                const processLabel = processInfo.processName;

                return {
                  ...processInfo,
                  label: processLabel,
                  rawData: {
                    processInfo,
                    projectList,
                    measuringToolList,
                    moldToolList,
                  }, // 保存工序及关联数据
                  children: projectList.map(project => ({
                    label: project.projectName, // 四级节点：项目名称
                    rawData: project, // 保存项目原始数据
                    disabled: true,
                  })),
                };
              }),
            };
          }),
        },
      ];

      return tree;
    },
    handleClick(value) {
      console.log(999999, value);
    },
    partSubRefLoad() {
      this.$refs.partSubRef.loadData(this.partId, true);
    },
    cancelClose(flag, dsPart) {
      if (flag) {
        this.cancel(true);
      } else {
        this.partId = dsPart.partId;
      }
    },
    cancel(refresh) {
      this.activeName = '1';
      this.setCrewShow = false;
      this.$emit('cancel', typeof refresh === 'boolean' && refresh);
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-container {
  position: relative;
}

.content-right {
  width: 200px;
  position: absolute;
  right: -24px;
  top: -5px;
  /* 或者使用 flex: 0 0 200px; 根据需要调整宽度 */
}
.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>
