<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="销售单号">{{ baseData1.saleNo }}</a-descriptions-item>
          <a-descriptions-item label="产品编码">{{ baseData1.productCode }}</a-descriptions-item>
          <a-descriptions-item label="产品名称">{{ baseData1.productName }}</a-descriptions-item>
          <a-descriptions-item label="物料编码">{{ baseData1.materialNo }}</a-descriptions-item>
          <a-descriptions-item label="物料名称">{{ baseData1.materialName }}</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 {
    getDicItem,
    getAutoCode,
    getMesFactoryListByType,
    getMesQbCheckstandardList,
    getMesQbCheckTypeList,
    getMesQbCheckProductList,
    getMesQbCheckMethodList,
  } from '/@/api/mes/common';

  import { getMesQpProcessFirst } from '/@/api/mes/mesprocessfirst';
  // 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');

    // carIdOptions.value = await getMesFactoryListByType(1, '');
    checkTypeOptions.value = await getMesQbCheckTypeList();
    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 errorLevelOptions = ref<any[]>([]);
  const judgeResultOptions = ref<any[]>([]);
  const disJudgeOptions = ref<any[]>([]);
  const checkProductOptions = ref<any[]>([]);
  const carIdOptions = ref<any[]>([]);
  const checkTypeOptions = ref<any[]>([]);
  const checkMethodOptions = ref<any[]>([]);

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

  function handleClose() {
    emit('cancel');
  }
  const columnsProp = {
    mainKey: 'mesQpProcessFirstdataList',
    columns: [
      {
        key: 'd611f5267c4d4914ad4af9426bca4068',
        title: '检测类别',
        dataIndex: 'checkType',
        componentType: 'XjrSelect',
        componentProps: {},
      },
      {
        key: 'dc29488a10d649cca821ce6626628fb3',
        title: '检测项目',
        dataIndex: 'checkProduct',
        componentType: 'XjrSelect',
        componentProps: {},
      },
      {
        key: '78141813d32a4e88b685a1d9fa4478ab',
        title: '检验标准',
        dataIndex: 'checkStandard',
        componentType: 'XjrSelect',
        componentProps: {},
      },
      {
        key: '01f60f941b424b5ba89962f5789b6777',
        title: '检验方法',
        dataIndex: 'checkMethod',
        componentType: 'XjrSelect',
        componentProps: {},
      },
      {
        key: '30a628cffbaa44129de72c6fb39f2658',
        title: '基准值',
        dataIndex: 'referenceValue',
        componentType: 'InputNumber',
        componentProps: {},
      },
      {
        key: '044b7fcda71740e4b43e4d0dd93f6cbb',
        title: '上公差',
        dataIndex: 'upTolerance',
        componentType: 'InputNumber',
        componentProps: {},
      },
      {
        key: 'e624df8ee19d401581dc790092707995',
        title: '下公差',
        dataIndex: 'downTolerance',
        componentType: 'InputNumber',
        componentProps: {},
      },
      {
        key: 'f348d3a418994ab8982af2e0a7179b0c',
        title: '测量值',
        dataIndex: 'measuredValue',
        componentType: 'Input',
        defaultValue: '',
        componentProps: {},
      },
      {
        key: '38f395e2ce2a4080b45eae56ad42490f',
        title: '备注',
        dataIndex: 'remark',
        componentType: 'Input',
        defaultValue: '',
        componentProps: {},
      },
      {
        key: '0e4359fe0e094955b9b05648bfbc8699',
        title: '判定',
        dataIndex: 'judgeResult',
        componentType: 'ApiRadioGroup',
        componentProps: {},
      },
      {
        key: '1395b1af977a4b3ba1f2dca17c13ddc6',
        dataIndex: 'imgFile',
        title: '图片',
        componentType: 'Upload',
        componentProps: {},
      },
      // { title: '操作', key: 'action', fixed: 'right', width: '50px' },
    ],
  };
</script>

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

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

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