<!--
 * @Author: zhp
 * @Date: 2023-02-14 15:02:26
 * @LastEditTime: 2023-07-03 16:24:52
 * @LastEditors: zwq
 * @Description: 
-->
<template>
  <el-form
    :model="dataForm"
    ref="dataForm"
    @keyup.enter.native="dataFormSubmitHandle()"
    label-width="100px"
  >
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="code" :label="$t('basic.code')">
          <el-input v-model="dataForm.code" :placeholder="$t('basic.code')"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="title" :label="$t('code.title')">
          <el-input v-model="dataForm.title" :placeholder="$t('code.title')"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="eightDisciplineType" :label="$t('code.eightDisciplineType')">
          <el-select
            :style="{ width: '100%' }"
            v-model="dataForm.eightDisciplineType"
            :placeholder="$t('code.eightDisciplineType')"
          >
            <el-option
              v-for="item in eightDisciplineTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="orderNo" :label="$t('code.orderNo')">
          <el-input v-model="dataForm.orderNo" :placeholder="$t('code.orderNo')"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="requestResponseCycle" :label="$t('code.requestResponseCycle')">
          <el-input
            v-model="dataForm.requestResponseCycle"
            :placeholder="$t('code.requestResponseCycle')"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="batchNumber" :label="$t('code.batchNumber')">
          <el-input v-model="dataForm.batchNumber" :placeholder="$t('code.batchNumber')"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="sampleAcceptanceTime" :label="$t('code.sampleAcceptanceTime')">
          <el-date-picker
            :style="{ width: '100%' }"
            v-model="dataForm.sampleAcceptanceTime"
            type="datetime"
            :placeholder="$t('code.sampleAcceptanceTime')"
            format="yyyy-MM-dd HH:mm:ss"
            valueFormat="yyyy-MM-ddTHH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="defectSourceId" :label="$t('code.defectSource')">
          <el-select
            :style="{ width: '100%' }"
            v-model="dataForm.defectSourceId"
            :placeholder="$t('code.defectSource')"
          >
            <el-option
              v-for="item in defectList"
              :key="item.dictTypeId"
              :label="item.dictLabel"
              :value="item.dictTypeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="actualResponsePeriod" :label="$t('code.actualResponsePeriod')">
          <el-input
            v-model="dataForm.actualResponsePeriod"
            :placeholder="$t('code.requestResponseCycle')"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="occurrenceDate" :label="$t('code.occurrenceDate')">
          <el-date-picker
            v-model="dataForm.occurrenceDate"
            type="datetime"
            :style="{ width: '100%' }"
            :placeholder="$t('code.occurrenceDate')"
            format="yyyy-MM-dd HH:mm:ss"
            valueFormat="yyyy-MM-ddTHH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          prop="responsibilityAttributionId"
          :label="$t('code.responsibilityAttribution')"
        >
          <el-select
          :style="{ width: '100%' }"
            v-model="dataForm.responsibilityAttributionId"
            :placeholder="$t('code.responsibilityAttribution')"
          >
            <el-option
              v-for="item in dutyList"
              :key="item.dictTypeId"
              :label="item.dictLabel"
              :value="item.dictTypeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="finalCompletionDate" :label="$t('code.finalCompletionDate')">
          <el-date-picker
          :style="{ width: '100%' }"
            v-model="dataForm.finalCompletionDate"
            type="datetime"
            :placeholder="$t('code.finalCompletionDate')"
            format="yyyy-MM-dd HH:mm:ss"
            valueFormat="yyyy-MM-ddTHH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item prop="examineStatus" :label="$t('code.examineStatus')">
          <el-select 
          :style="{ width: '100%' }" 
          v-model="dataForm.examineStatus" 
          :placeholder="$t('code.examineStatus')">
            <el-option
              v-for="item in examineStatusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="teamList" :label="$t('code.eightDTeam')">
          <el-select 
          :style="{ width: '100%' }"
          v-model="dataForm.teamList" 
          :placeholder="$t('code.eightDTeam')" 
          multiple>
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.teamName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
    <el-form-item prop="custom" label="客户">
      <el-select v-model="dataForm.custom"  @change="changeCustom" filterable clearable placeholder="请选择客户">
        <el-option
          v-for="item in urlOptions.optionArr.arr0"
          :key="item.id"
          :label="item.customerName"
          :value="item.id+'+'+item.customerName"
        >
        </el-option>
      </el-select>
    </el-form-item>
      </el-col>
      <el-col :span="8">
    <el-form-item prop="product" label="产品">
      <el-select v-model="dataForm.product"  @change="changeProduct" filterable clearable placeholder="请选择产品">
        <el-option
          v-for="item in urlOptions.optionArr.arr1"
          :key="item.id"
          :label="item.productName"
          :value="item.id+'+'+item.productName"
        >
        </el-option>
      </el-select>
    </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item prop="description" :label="$t('code.description')">
          <el-input v-model="dataForm.description" :placeholder="$t('code.description')"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import debounce from "lodash/debounce";
import basicAdd from "@/mixins/basic-add";
export default {
  mixins: [basicAdd],
  data() {
    return {
      urlOptions: {
        getOption: true,
        submitURL: "/code/startEightDiscipline",
        infoURL: "/code/startEightDiscipline/{id}",
        getDictURL: "/sys/dict/data/page",
        customerListURL: "/basic/qmsCustomer/page",
        productListURL: "/basic/qmsProduct/page",
        teamListURL: "/basic/qmsTeam/page",
        optionArrUrl: ["/basic/qmsCustomer/page", "/basic/qmsProduct/page"],
      },
      defectList: [],
      teamList: [],
      customerList: [],
      productList: [],
      dutyList: [],
      productList: [],
      customList: [],
      examineStatusList: [
        {
          id: 0,
          name: "不需要审批",
        },
        {
          id: 1,
          name: "需要审批",
        },
      ],
      options: [
        {
          value: 0,
          label: "不可用",
        },
        {
          value: 1,
          label: "可用",
        },
      ],
      eightDisciplineTypeList: [
        {
          value: '0',
          label: "重复发生问题 ",
        },
        {
          value: '1',
          label: "1客诉问题",
        },
        {
          value: '2',
          label: "重大质量问题",
        },
      ],
      listQuery: {
        limit: 10,
        page: 1,
      },
      visible: false,
      dataForm: {
        actualResponsePeriod: null,
        batchNumber: null,
        code: null,
        customId: null,
        custom: null,
        customName: null,
        defectSourceId: null,
        description: null,
        eightDisciplineId: null,
        eightDisciplineStatus: 0,
        eightDisciplineType: null,
        examineStatus: null,
        finalCompletionDate: null,
        id: null,
        occurrenceDate: null,
        orderNo: null,
        productId: null,
        product: null,
        productName: null,
        productTypeId: null,
        teamList: undefined,
        requestResponseCycle: null,
        responsibilityAttributionId: null,
        sampleAcceptanceTime: null,
        supportProducts: null,
        title: null,
        userId: null,
      },
    };
  },
  computed: {
    dataRule() {
      return {
        // dictLabel: [
        //   {
        //     required: true,
        //     message: this.$t("validate.required"),
        //     trigger: "blur",
        //   },
        // ],
        // dictValue: [
        //   {
        //     required: true,
        //     message: this.$t("validate.required"),
        //     trigger: "blur",
        //   },
        // ],
        // sort: [
        //   {
        //     required: true,
        //     message: this.$t("validate.required"),
        //     trigger: "blur",
        //   },
        // ],
      };
    },
  },
  mounted() {
    this.getDict();
  },
  methods: {
    init(id) {
      this.dataForm.id = id || "";
      // console.log(11111)
      // this.dataForm.dictTypeId = dictTypeId || "";
      this.visible = true;
      if (this.urlOptions.getOption) {
        this.getArr()
      }
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        } else {
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/code/startEightDiscipline/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
    getDict() {
      this.$http
        .get(this.urlOptions.teamListURL, {
          params: {
            limit: 999,
            page: 1,
          },
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            console.log(res);
            this.teamList = res.data.list;
          }
        })
        .catch(() => {});
      this.$http
        .get(this.urlOptions.getDictURL, {
          params: {
            limit: 999,
            page: 1,
            dictTypeId: "1664162193896206337",
          },
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            console.log(res);
            this.defectList = res.data.list;
          }
        })
        .catch(() => {});
      this.$http
        .get(this.urlOptions.getDictURL, {
          params: {
            limit: 999,
            page: 1,
            dictTypeId: "1664162455184568321",
          },
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            console.log(res);
            this.dutyList = res.data.list;
          }
        })
        .catch(() => {});
    },
    changeCustom(){
      this.dataForm.customId = this.dataForm.custom
            ? this.dataForm.custom.split("+")[0]
            : "";
      this.dataForm.customName = this.dataForm.custom
            ? this.dataForm.custom.split("+")[1]
            : "";
    },
    changeProduct(){
      this.dataForm.productId = this.dataForm.product
            ? this.dataForm.product.split("+")[0]
            : "";
      this.dataForm.productName = this.dataForm.product
            ? this.dataForm.product.split("+")[1]
            : "";
            },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$http[!this.dataForm.id ? "post" : "put"](this.urlOptions.submitURL, this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  console.log(1111);
                  this.visible = false;
                  this.$emit("successSubmit");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
  },
};
</script>
