<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">
        <a-descriptions title="" :column="2">
          <a-descriptions-item label="报告编码">{{ baseData1.code }}</a-descriptions-item>
          <a-descriptions-item label="报告名称">{{ baseData1.name }}</a-descriptions-item>
          <a-descriptions-item label="送货日期">{{ baseData1.sendDate }}</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.supplierName }}</a-descriptions-item>
          <a-descriptions-item label="采购订单号">{{ baseData1.buyOrderno }}</a-descriptions-item>
          <a-descriptions-item label="送货单号">{{ baseData1.sendNo }}</a-descriptions-item>
          <a-descriptions-item label="报告类型">{{
            baseData1.reportType == '1' ? '按单' : '按物料'
          }}</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-form ref="formRef" :model="formData" :labelCol="{ span: 6 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="异常报告编号" name="errorNo" required>
              <a-input
                v-model:value="formData.errorNo"
                placeholder="请输入编码"
                :readonly="formData.isSysNum == '1'"
                :disabled="!rowData.isUpdate"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="" name="isSysNum">
              <a-checkbox
                :disabled="!rowData.isUpdate"
                v-model:checked="formData.isSysNumBoolean"
                @change="handleSysChange"
              >
                用系统编号
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="不良类别" name="errorType" required>
              <a-select
                mode="multiple"
                :options="errorTypeOptions"
                placeholder="请选择"
                v-model:value="formData.errorType"
                :disabled="!rowData.isUpdate"
                allowClear
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="不良数" name="errorNum" required>
              <a-input-number
                style="width: 100%"
                :min="0"
                :step="1"
                :disabled="!rowData.isUpdate"
                v-model:value="formData.errorNum"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="不良率(%)" name="errorRate" required>
              <a-input-number
                style="width: 100%"
                :min="0"
                :step="1"
                :disabled="!rowData.isUpdate"
                v-model:value="formData.errorRate"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="判定依据" name="judgeResult" required>
              <a-select
                :options="judgeResultOptions"
                placeholder="请选择"
                v-model:value="formData.judgeResult"
                :disabled="!rowData.isUpdate"
                allowClear
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-col :span="24">
          <a-form-item label="问题描述" name="remark" :labelCol="{ span: 3 }">
            <a-textarea
              :disabled="!rowData.isUpdate"
              v-model:value="formData.remark"
              placeholder="请输入"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
        </a-col>
      </a-form>
    </div>
    <a-divider />
    <div
      style="
        padding: 10px 16px;
        text-align: right;
        background: white;
        border-top: 1px solid rgb(240, 240, 240);
        border-radius: 0px 0px 2px 2px;
        position: absolute;
        bottom: 1px;
        width: 98%;
      "
      v-if="rowData.isUpdate"
    >
      <a-button @click="handleClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" style="margin-left: 12px">确认</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { getMesQbCheckstandardList, getDicItem, getAutoCode } from '/@/api/mes/common';

  import { getMesQlIncheckreport } from '/@/api/mes/mesincheckreport';
  import {
    addMesQlIncheckerror,
    getMesQlIncheckerror,
    updateMesQlIncheckerror,
  } from '/@/api/mes/mesqlincheckerror';
  // import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  import AutoCodeRule from '/@/components/Form/src/components/AutoCodeRule.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 { 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 baseData1 = ref<any>({});

  // const format = ref('YYYY-MM-DD HH:mm:ss');

  const formData = ref<any>({
    errorNo: '',
    isSysNum: '',
    isSysNumBoolean: true,
    errorNum: '',
    errorRate: '',
    errorType: [],
    remark: '',
  });

  const emit = defineEmits(['cancel', 'success']);
  const formRef = ref();
  onMounted(async () => {
    rowData.id = props.rowData.id;
    rowData.reportId = props.rowData.reportId;
    rowData.isUpdate = props.rowData.isUpdate;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);
    getDetailData();
    errorTypeOptions.value = await getDicItem('1686641031350390786');
    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 errorTypeOptions = ref<any[]>([]);
  const judgeResultOptions = ref<any[]>([]);

  async function handleSysChange() {
    console.log('chg===', rowData, formData, formData.value.isSysNumBoolean);
    if (!rowData.isUpdate) return;

    if (formData.value.isSysNumBoolean) {
      formData.value.errorNo = await getAutoCode('mescheckErrorNo');
      formData.value.isSysNum = '1';
    } else {
      formData.value.errorNo = '';
      formData.value.isSysNum = '';
    }
  }
  const getDetailData = async () => {
    const data = await getMesQlIncheckreport(rowData.reportId);
    console.log(data, '上部分信息');
    baseData1.value = data;

    formData.value.reportId = data.id;
    formData.value.reportNo = data.code;
    formData.value.reportName = data.name;
    if (!rowData.id) {
      formData.value.isSysNum = '1';
      handleSysChange();
    } else {
      const res = await getMesQlIncheckerror(rowData.id);
      if (res) {
        formData.value.id = res.id;
        formData.value.reportId = res.reportId;
        formData.value.reportNo = res.reportNo;
        formData.value.reportName = res.reportName;
        formData.value.errorNo = res.errorNo;
        formData.value.isSysNum = res.isSysNum;
        formData.value.errorNum = res.errorNum;
        formData.value.errorRate = res.errorRate;
        if (res.errorType) formData.value.errorType = res.errorType.split(',');
        formData.value.remark = res.remark;
        formData.value.judgeResult = res.judgeResult;
      }
    }
  };
  async function handleSubmit() {
    try {
      let values = await formRef.value?.validate();
      values.reportId = formData.value.reportId;
      values.reportNo = formData.value.reportNo;
      values.reportName = formData.value.reportName;
      values.id = formData.value.id;
      values.isSysNum = formData.value.isSysNumBoolean ? '1' : '';
      if (values.errorType instanceof Array) values.errorType = values.errorType.join(',');
      console.log('values', values, formData.value, baseData1);

      // TODO custom api
      if (!values.id) {
        //false 新增
        await addMesQlIncheckerror(values);
        notification.success({
          message: 'Tip',
          description: t('新增异常报告成功！'),
        }); //提示消息
      } else {
        await updateMesQlIncheckerror(values);
        notification.success({
          message: 'Tip',
          description: t('修改异常报告成功！'),
        }); //提示消息
      }
      formRef.value.resetFields();
      emit('success');
    } finally {
    }
  }

  function handleClose() {
    emit('cancel');
  }
</script>

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

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

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