<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="2">
          <a-descriptions-item :label="'巡检报告编号'">{{
            baseData1.reportNo
          }}</a-descriptions-item>
          <a-descriptions-item :label="'报告抬头'">{{ baseData1.reportName }}</a-descriptions-item>
          <a-descriptions-item label="车间">
            <span v-if="baseData1.carId">
              <span v-for="item in carIdOptions" :key="item.key">
                <span v-if="item.value == baseData1.carId">{{ item.label }}</span>
              </span>
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="产线">
            <span v-if="baseData1.lineId">
              <span v-for="item in lineIdOptions" :key="item.key">
                <span v-if="item.value == baseData1.lineId">{{ item.label }}</span>
              </span>
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="班组">
            <span v-if="baseData1.stationId">
              <span v-for="item in groupIdOptions" :key="item.key">
                <span v-if="item.value == baseData1.stationId">{{ item.label }}</span>
              </span>
            </span>
          </a-descriptions-item>

          <a-descriptions-item label="检验日期">{{ baseData1.checkDate }}</a-descriptions-item>
          <a-descriptions-item label="检验员">{{ baseData1.checkUserName }}</a-descriptions-item>
          <a-descriptions-item label="报告生成日期">{{ baseData1.createDate }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>

    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">检测数据</div>

      <a-table
        :columns="filterColum(columnsProp.columns)"
        :bordered="true"
        :pagination="true"
        :data-source="detailList"
        :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 === 'checkType'">
            <span v-if="record.checkType">
              <span v-for="(re, i) in record.checkType.split(',')" :key="i">
                <span v-for="item in checkTypeOptions" :key="item.key">
                  <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
                </span>
              </span>
            </span></template
          >
          <template v-if="column.dataIndex === 'checkProduct'">
            <span v-if="record.checkProduct" style="display: flex; flex-wrap: wrap">
              <div
                v-for="(re, i) in record.checkProduct.split(',')"
                :key="i"
                style="
                  background: #eef4ff;
                  border-radius: 2px 2px 2px 2px;
                  opacity: 1;
                  border: 1px solid #5e95ff;
                  margin-left: 5px;
                "
              >
                <span v-for="item in checkProductOptions" :key="item.key">
                  <span style="color: #5e95ff" v-if="item.value == re">{{ item.label }}</span>
                </span>
              </div>
            </span></template
          >
          <template v-if="column.dataIndex === 'checkStandard'">
            <span v-if="record.checkStandard">
              <span v-for="(re, i) in record.checkStandard.split(',')" :key="i">
                <span v-for="item in judgeResultOptions" :key="item.key">
                  <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
                </span>
              </span></span
            ></template
          >
          <template v-if="column.dataIndex === 'checkMethod'">
            <span v-if="record.checkMethod">
              <span v-for="(re, i) in record.checkMethod.split(',')" :key="i">
                <span v-for="item in checkMethodOptions" :key="item.key">
                  <span v-if="item.value == re">{{ i > 0 ? ',' : '' }}{{ item.label }}</span>
                </span>
              </span></span
            ></template
          >
          <template v-if="column.dataIndex === 'judgeResult'">
            <span v-if="record.judgeResult == 1">合格</span>
            <span v-if="record.judgeResult == 2" style="color: red">不合格</span>
          </template>
          <template v-if="column.dataIndex === 'imgFile'">
            <Upload
              v-if="record.imgFile"
              :disabled="true"
              v-model:value="record.imgFile"
              listType="dragger"
              :style="{ display: 'none' }"
            />
          </template>
        </template>
      </a-table>
    </div>
    <!-- <div class="padding">
      <div style="font-weight: bold; font-size: 16px"></div>
      <div class="back_color padding marginTop" v-if="baseData1">
        <span style="font-weight: bold; font-size: 14px; padding-right: 20px">检测报告编号</span
        >{{ baseData1.checkReportNo }}
      </div>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px">检测结果</div>
      <div class="back_color padding marginTop" v-if="baseData1">
        <span style="font-weight: bold; font-size: 14px; padding-right: 20px; color: #fcb46c"
          >整体判定</span
        ><span
          style="
            width: 80%;
            text-align: center;
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
          "
        >
          <span v-if="baseData1.judgeResult == 1">合格</span>
          <span v-if="baseData1.judgeResult == 2" style="color: red">不合格</span>
        </span>
      </div>
    </div>

    <div class="padding">
      <div class="back_color padding marginTop" v-if="baseData1">
        <span style="font-weight: bold; font-size: 14px; padding-right: 20px"
          >备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        ><span style="width: 80%; text-align: center; display: inline-block">{{
          baseData1.remark
        }}</span>
      </div>
    </div> -->
    <a-divider />
  </div>
</template>
<script lang="ts" setup>
  import { uploadApi } from '/@/api/sys/upload';
  import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import {
    getMesQbCheckTypeList,
    getMesFactoryListByType,
    // getMesQbCheckstandardList,
    getMesGoupList,
    getMesQbCheckProductList,
    getMesQbCheckMethodList,
  } from '/@/api/mes/common';

  import { getMesQpProcessPatrol } from '/@/api/mes/mesprocesspartol';
  // import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  // import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { commentProps } from 'ant-design-vue/lib/comment';
  // import { Modal } from 'ant-design-vue';
  const { notification } = useMessage();
  const { t } = useI18n();
  let props = defineProps(['rowData']);
  const rowData: {
    id: string;
    reportId: string;
    isUpdate: boolean;
    flag: string;
  } = reactive({
    id: '',
    reportId: '',
    isUpdate: false,
    flag: '',
  });

  const detailList = ref<any[]>([]);
  // const format = ref('YYYY-MM-DD HH:mm:ss');
  const multipleDialog = ref<boolean>(false);
  function filterColum(column) {
    return column.filter((o) => {
      return o.show == false ? false : true;
    });
  }
  const baseData1 = ref<any>({});
  const emit = defineEmits(['cancel', 'success']);
  onMounted(async () => {
    rowData.id = props.rowData.id;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);

    getDetailData();

    // errorLevelOptions.value = await getDicItem('1688808042268565506');
    // disJudgeOptions.value = await getDicItem('1688808244736008194');
    checkTypeOptions.value = await getMesQbCheckTypeList();
    carIdOptions.value = await getMesFactoryListByType(1, '');
    lineIdOptions.value = await getMesFactoryListByType(2, '');
    groupIdOptions.value = await getMesGoupList();

    checkMethodOptions.value = await getMesQbCheckMethodList();
    checkProductOptions.value = await getMesQbCheckProductList();
    // judgeResultOptions.value = await getMesQbCheckstandardList();
  });

  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 checkTypeOptions = ref<any[]>([]);
  // const judgeResultOptions = ref<any[]>([]);
  // const disJudgeOptions = ref<any[]>([]);
  const checkProductOptions = ref<any[]>([]);
  const carIdOptions = ref<any[]>([]);
  const lineIdOptions = ref<any[]>([]);
  const groupIdOptions = ref<any[]>([]);
  const checkMethodOptions = ref<any[]>([]);

  const getDetailData = async () => {
    const data = await getMesQpProcessPatrol(rowData.id);
    baseData1.value = data;
    detailList.value = data.mesQpProcessPatroldataList;
  };

  function handleClose() {
    emit('cancel');
  }
  const columnsProp = {
    mainKey: 'mesQpProcessPatroldataList',
    columns: [
      {
        key: '1f1a609e32d242298a59c0036f1547bd',
        title: '首件报告编号',
        dataIndex: 'firstId',
      },
      {
        key: '54b13f97de424e0ea9d654966a605934',
        title: '首件报告编号',
        dataIndex: 'firstNo',
      },
      // {
      //   key: 'ca31619d6dd5423dbd6e631c1132fb1f',
      //   title: '销售单号ID',
      //   dataIndex: 'saleId',
      // },
      {
        key: '231f3ca6216c43958fd2652bbcbc4cf6',
        title: '销售单号',
        dataIndex: 'saleNo',
      },
      // {
      //   key: 'a3e88b554b104f4a9f71ad1771964014',
      //   title: '产品ID',
      //   dataIndex: 'productId',
      // },
      {
        key: '27c472ffaedf46008f3f7514fba7f184',
        title: '产品编码',
        dataIndex: 'productCode',
      },
      {
        key: '02f13f4afdb2438c81227766a7691ab0',
        title: '产品名称',
        dataIndex: 'productName',
      },
      // {
      //   key: '2812a67a61bf4438901b3831460ac958',
      //   title: '物料ID',
      //   dataIndex: 'materialId',
      // },
      {
        key: '10aac9998dba4af7b37c5dae4281106c',
        title: '物料编码',
        dataIndex: 'materialNo',
      },
      {
        key: '1afda6e9a56e44bbbe43db45aacfb0dc',
        title: '物料名称',
        dataIndex: 'materialName',
      },
      {
        key: '19a3de1065ec4d1385c8d8cea2445407',
        title: '巡检时间',
        dataIndex: 'checkTime',
      },
      {
        key: '19e603ed42064081a3550603b83297b8',
        title: '检测数量',
        dataIndex: 'checkNum',
      },
      {
        key: '1f0a3d0d58564a69b3decebd7950b7b1',
        title: '单位',
        dataIndex: 'checkUnit',
      },
      {
        key: '0b1958e661844d348168ea77ca1d3fce',
        title: '检测类别',
        dataIndex: 'checkType',
      },
      {
        key: 'd042872304d84f42b78069e8f2e321b1',
        title: '检测项目',
        dataIndex: 'checkProduct',
      },
      {
        key: '6c336992cc314fa29e64c28f2e425c4a',
        title: '基准值',
        dataIndex: 'referenceValue',
      },
      {
        key: 'eda5c14e2e6244bcad630bb75aa57543',
        title: '上公差',
        dataIndex: 'upTolerance',
      },
      {
        key: 'e6030a3f079f49e6bbf7b6d736a90ed4',
        title: '下公差',
        dataIndex: 'downTolerance',
      },
      {
        key: 'db9ab1a4ea424bd8b12e880c9d7a0493',
        title: '测量值',
        dataIndex: 'measuredValue',
      },
      {
        key: '72091ab8708f497da5b9baa32ead8088',
        title: '不良数',
        dataIndex: 'errorNum',
      },
      {
        key: 'b33dcdb58f904470ab0a4f11d34211d5',
        title: '不良处理方式',
        dataIndex: 'errorMethod',
        componentType: 'Input',
      },
      {
        key: '1395b1af977a4b3ba1f2dca17c13ddc6',
        dataIndex: 'imgFile',
        title: '附件',
        componentType: 'Upload',
      },
    ],
  };
</script>

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

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

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