<!--
 * @Author: zhp
 * @Date: 2023-02-14 15:02:26
 * @LastEditTime: 2023-04-12 15:54:19
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <div>
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="150px">
      <el-form-item prop="approvalProcessCode" :label="$t('disqualification.approvalProcessCode')">
        <el-input v-model="dataForm.approvalProcessCode" :placeholder="$t('disqualification.approvalProcessCode')">
        </el-input>
      </el-form-item>
      <el-form-item prop="approvalProcessName" :label="$t('disqualification.approvalProcessName')">
        <el-input v-model="dataForm.approvalProcessName" :placeholder="$t('disqualification.approvalProcessName')">
        </el-input>
      </el-form-item>
      <el-form-item prop="approvalProcessType" :label="$t('disqualification.approvalProcessType')">
        <el-select v-model="dataForm.approvalProcessType" :placeholder="$t('disqualification.approvalProcessType')">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <base-table border :table-props="tableProps" :table-data="tableData" 
      :add-button-show="addButtonShow" @emitFun="inputChange" @emitButtonClick="emitButtonClick" />
  </div>
</template>

<script>
import debounce from "lodash/debounce"
// import basicAdd from "@/mixins/basic-add"
import inputArea from './inputArea'
import selectArea from './selectArea'
import i18n from "@/i18n"
import { kStringMaxLength } from "buffer"
const tableProps = [
  {
    prop: 'step',
    label: i18n.t("disqualification.step"),
    subcomponent: inputArea
  },
  {
    prop: 'teamId',
    label: i18n.t("disqualification.team"),
    subcomponent: selectArea
  }
]
export default {
  // mixins: [basicAdd],
  data() {
    return {
      urlOptions: {
        submitURL: "/nonconform/qmsApprovalProcess",
        infoURL: "/nonconform/qmsApprovalProcess/{ id }",
        stepDetailURL: "/nonconform/qmsApprovalProcessStepDetail",
        stepDetailPageURL: "/nonconform/qmsApprovalProcessStepDetail/page",
      },
      supplierList:[],
      productList:[],
      typeList: [],
      teamList: [],
      tableData:[],
      listQuery: {
        limit: 999,
        page: 1,
        approvalProcessId:null,
      },
      options: [
        {
          value: 1,
          label: '不合格品审批'
      },
      ],
      editData: {
        id:null,
        list:[]
      },
      visible: false,
      tableProps,
      addButtonShow:'新增',
      dataForm: {
        id: null,
        approvalProcessCode: null,
        approvalProcessName: null,
        approvalProcessType: null,
        qmsApprovalProcessStepDetailDTOList:[]
      },
    };
  },
  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",
        //   },
        // ],
      };
    },
  },
  methods: {
    inputChange(val) {
      console.log('=======')
      console.log(val)
      this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
      console.log(this.tableData)
    },
    emitButtonClick() {
      console.log('emitButtonClick')
      let obj = {}
      for (let i of this.tableProps) {
        obj[i.prop] = ''
      }
      this.tableData.push(obj)
      // this.dataForm.qmsApprovalProcessStepDetailDTOList.push(obj)
      // console.log(this.dataForm)
    },
    init(id, ) {
      this.dataForm.id = id || ""
      this.listQuery.approvalProcessId = id || ""
      this.editData.id = id || ""
      // console.log(11111)
      // this.dataForm.dictTypeId = dictTypeId || "";
      this.visible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo()
        } else {
          // this.getCode()
        }
      });
    },
    // getData() {
    //   // this.$http
    //   //   .get(this.urlOptions.getTypeListURL, this.listQuery)
    //   //   .then(({ data: res }) => {
    //   //     if (res.code === 0) {
    //   //       console.log(res.data);
    //   //       this.typeList = res.data.list
    //   //     }
    //   //   })
    //   //   .catch(() => {
    //   //   });
    //   this.$http
    //     .get(this.urlOptions.getSupplierListURL, this.listQuery)
    //     .then(({ data: res }) => {
    //       if (res.code === 0) {
    //         console.log(res.data);
    //         this.supplierList = res.data.list
    //       }
    //     })
    //     .catch(() => {
    //     })
    //   this.$http
    //     .get(this.urlOptions.getProductURL, {
    //       params: this.listQuery,
    //     })
    //     .then(({ data: res }) => {
    //       if (res.code === 0) {
    //         console.log(res.data)
    //         this.productList = res.data.list
    //       }
    //     })
    //     .catch(() => {
    //     })
    // },
    // getCode() {
    //   this.$http.post(this.urlOptions.getCodeURL)
    //     .then(({ data: res }) => {
    //       if (res.code === 0) {
    //         console.log(res);
    //         this.dataForm.customSamplingCode = res.data
    //       }
    //     })
    //     .catch(() => {
    //     });
    // },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/nonconform/qmsApprovalProcess/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => { })
      this.$http
        .get(this.urlOptions.stepDetailPageURL, {params: this.listQuery })
        .then(({ data: res }) => {
          if (res.code === 0) {
            console.log(res.data);
            this.tableData = res.data.list
          }
        })
        .catch(() => {
        });
    },
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.dataForm.id) {
          this.$http.put(this.urlOptions.submitURL, this.dataForm)
            .then(({ data: res }) => {
              if (this.tableData.length === 0) {
                this.editData.list = []
              } else {
                this.editData.list = this.tableData.map((item) => {
                  return {
                    step: item.step,
                    teamId: item.teamId,
                    approvalProcessId: res.data
                  }
                })
             }
              this.$http.put(this.urlOptions.stepDetailURL, this.editData)
                .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: () => {
                      this.visible = false;
                      this.tableData = []
                      this.$emit("refreshDataList");
                    },
                  });
                })
                .catch(() => { });
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
            })
            .catch(() => { })
        } else {
          this.$http.post(this.urlOptions.submitURL, this.dataForm)
            .then(({ data: res }) => {
              if (!this.tableData.length === 0) {
                const data = this.tableData.map((item) => {
                  return {
                    step: item.step,
                    teamId: item.teamId,
                    approvalProcessId: res.data
                  }
                })
                this.$http.post(this.urlOptions.stepDetailURL, data)
                  .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: () => {
                        this.visible = false;
                        this.tableData = []
                        this.$emit("refreshDataList");
                      },
                    });
                  })
                  .catch(() => { });
              } else {
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                  duration: 500,
                  onClose: () => {
                    this.visible = false;
                    this.tableData = []
                    this.$emit("refreshDataList");
                  },
                });
              }
            
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              // this.$message({
              //   message: this.$t("prompt.success"),
              //   type: "success",
              //   duration: 500,
              //   onClose: () => {
              //     this.visible = false;
              //     this.$emit("refreshDataList");
              //   },
              // });
            })
            .catch(() => { })
        }
      });
    },
    formClear() {
      this.$refs.dataForm.resetFields()
      this.tableData = []
    }
    // 表单提交
  },
};
</script>
