<template>
  <div class="padding" style="height: 700px; overflow: auto">
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">基本信息</div>
      <div class="back_color padding marginTop" v-if="baseData1">
        <a-descriptions title="" :column="6">
          <a-descriptions-item :label="'工序编码'">{{ baseData1.processCode }}</a-descriptions-item>
          <a-descriptions-item :label="'工序名称'">{{ baseData1.processName }}</a-descriptions-item>
          <a-descriptions-item label="工序类型">
            <span v-if="baseData1.processType">
              <span v-for="item in processTypeOptions" :key="item.key">
                <span v-if="item.value == baseData1.processType">{{ item.label }}</span>
              </span>
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="描述">{{ baseData1.remark }}</a-descriptions-item>

          <a-descriptions-item label="创建人">{{ baseData1.createUserName }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ baseData1.createDate }}</a-descriptions-item>
          <a-descriptions-item label="">
            <Upload
              v-model:value="baseData1.imgFile"
              listType="dragger"
              tip=""
              :style="{ display: 'none' }"
              :disabled="true"
          /></a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">工位绑定</div>
      <a-table
        :columns="[
          { title: '工位编码', dataIndex: 'stationCode' },
          { title: '工位名称', dataIndex: 'stationName' },
          { title: '所属生产线', dataIndex: 'factoryId' },
          { title: '所属车间', dataIndex: 'lineId' },
          { title: '所属工厂', dataIndex: 'carId' },
        ]"
        :bordered="true"
        :pagination="true"
        :data-source="baseData1.mesProcessStationList"
        :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key !== 'action'">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'factoryId'">
            <span v-for="(re, i) in record.factoryId.split(',')" :key="i">
              <span v-for="item in factoryIdOptions" :key="item.key">
                <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
              </span>
            </span>
          </template>
          <template v-if="column.dataIndex === 'lineId'">
            <span v-for="(re, i) in record.lineId.split(',')" :key="i">
              <span v-for="item in lineIdOptions" :key="item.key">
                <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
              </span>
            </span>
          </template>
          <template v-if="column.dataIndex === 'carId'">
            <span v-for="(re, i) in record.carId.split(',')" :key="i">
              <span v-for="item in carIdOptions" :key="item.key">
                <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
              </span>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">物料配置</div>

      <a-table
        :columns="[
          { title: '物料编码', dataIndex: 'materialCode' },
          { title: '物料名称', dataIndex: 'materialName' },
          { title: '物料类别', dataIndex: 'materialType' },
          { title: '物料属性', dataIndex: 'materialAttr' },
          { title: '单位', dataIndex: 'unity' },
        ]"
        :bordered="true"
        :pagination="true"
        :data-source="baseData1.mesProcessMaterialList"
        :scroll="{ x: 'max-content' }"
      >
      </a-table>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">工时信息</div>
      <div class="back_color padding marginTop" v-if="baseData1">
        <a-descriptions title="" :column="4">
          <a-descriptions-item :label="'标准工时'"
            >{{ baseData1.standardHour }}分钟</a-descriptions-item
          >
          <a-descriptions-item :label="'辅助工时'"
            >{{ baseData1.auxiliaryHour }}分钟</a-descriptions-item
          >
          <a-descriptions-item label="工序成本">{{ baseData1.processCost }}元</a-descriptions-item>
          <a-descriptions-item label="工序单价">{{ baseData1.processPrice }}元</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">技术参数</div>
      <a-table
        :columns="[
          { title: '参数名称', dataIndex: 'paramName' },
          { title: '参数值', dataIndex: 'paramValue' },
        ]"
        :bordered="true"
        :pagination="true"
        :data-source="baseData1.mesProcessParamList"
        :scroll="{ x: 'max-content' }"
      >
      </a-table>
    </div>

    <a-divider />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import { getMesFactoryListByType, getProcessTypeList } from '/@/api/mes/common';

  import { getMesProcess } from '/@/api/mes/process';

  let props = defineProps(['rowData']);
  const rowData: {
    id: string;
    flag: string;
  } = reactive({
    id: '',
    reportId: '',
    isUpdate: false,
    flag: '',
  });
  const baseData1 = ref<any>({});

  const factoryIdOptions = ref<any[]>([]);
  const carIdOptions = ref<any[]>([]);
  const lineIdOptions = ref<any[]>([]);
  const processTypeOptions = ref<any[]>([]);

  onMounted(async () => {
    rowData.id = props.rowData.id;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);

    getDetailData();

    factoryIdOptions.value = await getMesFactoryListByType(0, '');
    carIdOptions.value = await getMesFactoryListByType(1, '');
    lineIdOptions.value = await getMesFactoryListByType(2, '');
    processTypeOptions.value = await getProcessTypeList();
  });

  watch(
    () => props.rowData,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.id = props.rowData.id;
        rowData.reportId = props.rowData.reportId;
        rowData.isUpdate = props.rowData.isUpdate;
        rowData.flag = props.rowData.flag;
        getDetailData();
      }
    },
  );
  const getDetailData = async () => {
    const data = await getMesProcess(rowData.id);
    baseData1.value = data;
  };
</script>

<style lang="less" scoped>
  .padding {
    padding: 12px;
  }

  .back_color {
    background-color: hsl(0, 0%, 98%);
    position: relative;
  }

  .marginTop {
    margin-top: 12px;
  }
</style>
