<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-drawer v-model="visible" size="100%" direction="rtl" :close-on-press-escape="false">
    <div class="page-container form-container">
      <div class="form-btns-container" style="display: flex; align-items: center">
        <span class="title-label"><el-icon>
            <Document />
          </el-icon>
          打印合格证</span>
        <el-button :disabled="form.generateTime != null" style="margin-left: 30px" type="primary" icon="Check"
          @click="handleGenerate">生成
        </el-button>
        <el-button style="margin-left: 30px" type="primary" icon="Check" @click="handlePrint">预览并打印
        </el-button>
        <el-button icon="Close" @click="cancel">取 消 </el-button>
        <div class="close-btn" @click="cancel">
          <i class="fa fa-times" aria-hidden="true" />
          <!-- <span>关闭</span> -->
        </div>
      </div>
      <!-- 报工选择工序、完成状态、箱号部分 -->
      <div style="padding: 0px 16px 0px 16px">
        <el-row :gutter="30" style="margin-top: 10px; padding-top: 10px">
          <el-col :span="3">
            <span class="leftInfo">打印信息</span>
          </el-col>
        </el-row>
        <el-form :model="form" ref="queryRef" :inline="true"
          style="margin-right: 0px; font-size: 15px; padding-top: 10px" label-width="100px">
          <el-row :gutter="30" style="margin-top: 10px; padding-top: 10px">
            <el-col :span="6">
              <el-form-item label="生产批号：" prop="lotCode">
                <el-input disabled v-model="form.lotCode" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品描述：" prop="productDescription">
                <el-input disabled v-model="form.productDescription" placeholder="" style="width: 210px"
                  :title="form.productDescription" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户简称：" prop="companyName">
                <el-input disabled v-model="form.companyName" placeholder="" style="width: 210px"> <template #append>
                    <el-button :disabled="form.generateTime != null" icon="Edit"
                      @click="showCompanyNameDialog"></el-button>
                  </template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格：" prop="specification">
                <el-input disabled v-model="form.specification" placeholder="" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="图号：" prop="drawingNumber">
                <el-input disabled v-model="form.drawingNumber" placeholder="" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生成日期：" prop="printDate">
                <el-date-picker :disabled="form.generateTime != null" v-model="form.printDate" value-format="YYYY-MM-DD"
                  style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产工段：" prop="deptName">
                <el-input readonly :disabled="form.generateTime != null" v-model="form.deptName" placeholder=""
                  style="width: 210px">
                  <template #append>
                    <el-button :disabled="form.generateTime != null" icon="Search"
                      @click="showDeptChoiceDialog"></el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="包装线号：" prop="packageLineNo">
                <el-input readonly :disabled="form.generateTime != null" v-model="form.packageLineNo" placeholder=""
                  style="width: 210px">
                  <template #append>
                    <el-button :disabled="form.generateTime != null" icon="Search"
                      @click="showLineChoiceDialog"></el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年：" prop="year">
                <el-input disabled v-model="form.year" placeholder="" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="包装箱号：" prop="packageCode">
                <el-input readonly :disabled="form.generateTime != null" v-model="form.packageCode" placeholder=""
                  style="width: 210px">
                  <template #append>
                    <el-button :disabled="form.generateTime != null" icon="Search"
                      @click="showPackageChoiceDialog"></el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签数量：" prop="labelNumber">
                <el-input-number :disabled="form.generateTime != null" v-model="form.labelNumber" :step="1"
                  step-strictly :controls="false" @change="handleLabelNumberChange" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="打印份数：" prop="printPages">
                <el-input :disabled="form.generateTime != null" v-model="form.printPages" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="包装数量：" prop="number">
                <el-input disabled v-model="form.number" style="width: 210px" />
                <el-tooltip style="margin-left: 10px;" effect="dark" content="包装数量=批次数量+零取数量-零存数量" placement="top">
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="包装尺寸：" prop="packageStandard">
                <el-input disabled v-model="form.packageStandard" placeholder="" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="包装形式码：" prop="packageTypeCode">
                <el-input disabled v-model="form.packageTypeCode" placeholder="" style="width: 210px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合格证种类：" prop="type">
                <el-select v-model="form.type" :disabled="form.generateTime != null" clearable filterable
                  placeholder="请选择合格证种类" @change="changeType" style="width: 210px">
                  <el-option v-for="dict in certificate_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <DeptChoiceDialog ref="deptChoiceDialogRef" @handleSelectBelongingDept="handleDeptChoice" />
    <PackageLineChoiceDialog ref="packageLineChoiceDialogRef" @singleChoice="handlePackageLineChoice" />
    <PackageTypeChoiceDialog ref="packageTypeChoiceDialogRef" @singleChoice="handlePackageTypeChoice" />
    <companyDialog ref="companyDialogRef" @inputSuccess="handleCompanySuccess" />
  </el-drawer>
</template>
<script setup>
import { ref } from "vue";
import {
  getCertificate,
  generateQrCode,
  printPdf,
  newCertificate,
  copyCertificate,
} from "@/api/business/certificate";
import { setP2Certificate } from "@/api/business/p2.js";
import useUserStore from "@/store/modules/user";
import { debounce } from "lodash";
import DeptChoiceDialog from "./DeptChoiceDialog.vue";
import PackageLineChoiceDialog from "./PackageLineChoiceDialog.vue";
import PackageTypeChoiceDialog from "./PackageTypeChoiceDialog.vue";
import companyDialog from "./companyDialog.vue";
import { ElLoading } from "element-plus";
const fullscreenLoading = ref(false);

/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
});
const deptChoiceDialogRef = ref(null);
const packageLineChoiceDialogRef = ref(null);
const packageTypeChoiceDialogRef = ref(null);

const { getList } = toRefs(props);
const { proxy } = getCurrentInstance();
const { certificate_type } = proxy.useDict("certificate_type");
let previousDeptId = 0;

const loading = ref(false);
const visible = ref(false);
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const dayworkItem = ref({
  qualifiedNum: 0,
  rejectNum: 0,
});

const data = reactive({
  daywoerkItem: {},
  daywork: {},
  rules: {},
});
const form = ref({});
const { daywork, daywoerkItem, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (row) => {
  visible.value = true;
  daywork.value = row;
  if (row) {
    newCertificate(row).then((res) => {
      form.value = res.data;
      form.value.type = certificate_type.value[0].value;
    });
  }
};

/** 取消按钮 */
const cancel = () => {
  visible.value = false;
  reset();
  getList.value();
};

function changeType(code) {
  form.value.type = code;
}
function handleCompanySuccess(data) {
  form.value.companyName = data;
}
function showCompanyNameDialog() {
  proxy.$refs.companyDialogRef.open(form.value.companyName);
}

function handleGenerate() {
  console.log(form.value);
  console.log(certificate_type.value);
  // 生成判断
  if (form.value.deptId == null) {
    proxy.$modal.msgError("请先选择生产工段");
    return;
  }
  if (form.value.packageLineNo == null) {
    proxy.$modal.msgError("请先选择包装线");
    return;
  }
  if (form.value.labelNumber == null) {
    proxy.$modal.msgError("请填写标签数量");
    return;
  }
  if (form.value.printPages == null || form.value.printPages == 0) {
    proxy.$modal.msgError("请填写打印份数");
    return;
  }
  if (form.value.packageId == null) {
    proxy.$modal.msgError("请先选择包装");
    return;
  }
  if (!form.value.type) {
    proxy.$modal.msgError("请先选择合格证样式");
    return;
  }
  const loading = ElLoading.service({
    lock: true,
  });
  console.log(form.value);
  generateQrCode(form.value).then((res) => {
    loading.close();
    if (res.code === 200) {
      form.value = res.data;
      proxy.$modal.msgSuccess("生成成功");
    } else {
      proxy.$modal.msgError("生成失败");
    }
  });
}

/** 表单重置 */
function reset() {
  daywork.value = {};
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    deptId: null,
  };

  proxy.resetForm("queryRef");
}

function handlePrint() {
  // 生成判断
  if (form.value.deptId == null) {
    proxy.$modal.msgError("请先选择生产工段");
    return;
  }
  if (form.value.packageLineNo == null) {
    proxy.$modal.msgError("请先选择包装线");
    return;
  }
  if (form.value.printPages == null || form.value.printPages == 0) {
    proxy.$modal.msgError("请填写打印份数");
    return;
  }
  if (form.value.packageId == null) {
    proxy.$modal.msgError("请先选择包装");
    return;
  }
  if (form.value.generateTime == null) {
    proxy.$modal.msgError("请先生成二维码");
    return;
  }
  printPdf({ ...form.value, lots: null }).then((_) => {
    copyCertificate(form.value).then((res) => {
      if (res.code === 200) {
        let companyName = form.value.companyName;
        res.data.companyName = companyName;
        setP2Certificate({ id: form.value.id });
        form.value = res.data;
      }
    });
  });
}

function showDeptChoiceDialog() {
  previousDeptId = form.value.deptId;
  deptChoiceDialogRef.value.open();
}

function handleDeptChoice(item) {
  // console.log(item)
  form.value.deptName = item.deptName;
  form.value.deptId = item.deptId;
  if (previousDeptId != form.value.deptId) {
    form.value.deptNo = null;
    form.value.packageLineNo = null;
    form.value.year = null;
    form.value.packageResourceGroupId = null;
    form.value.packageResourceGroupName = null;
  }
}

function showLineChoiceDialog() {
  if (form.value.deptId) {
    packageLineChoiceDialogRef.value.open({ deptId: form.value.deptId });
  } else {
    proxy.$modal.msgError("请先选择生产工段");
  }
}

function handlePackageLineChoice(item) {
  form.value.deptNo = item.deptNo;
  form.value.packageLineNo = item.packageLineNo;
  form.value.year = item.year;
  form.value.packageResourceGroupId = item.id;
  form.value.packageResourceGroupName = item.name;
}

function handleLabelNumberChange(value) {
  console.log(form.value.number);
  console.log(Number.isNaN(form.value.number));
  form.value.printPages =
    Number.isNaN(form.value.number) || Number.isNaN(form.value.labelNumber)
      ? 0
      : Math.floor(form.value.number / form.value.labelNumber);
}

function showPackageChoiceDialog() {
  packageTypeChoiceDialogRef.value.open({
    productId: form.value.productId,
    companyId: form.value.companyId,
  });
}

function handlePackageTypeChoice(item) {
  console.log(item);
  form.value.packageCode = item.packageCode;
  form.value.packageStandard = item.packageStandard;
  form.value.packageId = item.accessoriesId;
  form.value.packageTypeCode = item.packageTypeCode;
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.leftInfo {
  color: #000;
  font-size: 15px;
  width: 120px;
  /* display: inline-block; */
}

.middleInfo {
  color: #000;
  font-size: 15px;
  width: 65px;
  display: inline-block;
}

.switch-container {
  font-size: 15px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.ml-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.table-container {
  max-width: 600px;
  /* 或者你希望的最大宽度 */
}

.rightInfo {
  font-size: 16px;
  padding-left: 0px;
}
</style>
