<template>
  <ele-modal
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    :maxable="true"
    append-to-body
    width="90%"
  >
    <div class="ele-body">
      <el-card shadow="never" class="tabs_box">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="1">
            <el-form ref="form1" :model="form" label-width="94px">
              <el-row>
                <el-col
                  :span="item.span"
                  v-for="(item, index) in infoList"
                  :key="index"
                >
                  <el-form-item :label="`${item.label}:`">
                    <el-input :value="form[item.prop]" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="样品数">
                    <el-input :value="form.sampleQuantity" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="合格数">
                    <el-input :value="form.qualifiedNumber" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="不合格数">
                    <el-input :value="form.noQualifiedNumber" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-for="el in disposeTypeList">
                  <el-form-item :label="disposalName(el.disposeType)">
                    <el-input :value="el.measureQuantity" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="备注">
                    <el-input :value="form.remark" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="样品信息" name="2">
            <el-form label-width="110px">
              <el-row>
                <el-col :span="6" v-if="showArrange == '1'">
                  <el-form-item label="样品合格数:">
                    <el-input
                      disabled
                      v-model="form.sampleQualifiedNumber"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="showArrange == '1'">
                  <el-form-item label="样品不合格数:">
                    <el-input
                      disabled
                      v-model="form.sampleNoQualifiedNumber"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="样品合格率:">
                    <el-input v-model="form.sampleQualificationRate" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="样品不合格率:">
                    <el-input
                      v-model="form.sampleNoQualificationRate"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="样品类型:">
                    <el-input
                      disabled
                      :value="sampletypeVal(form.conditionType)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="样品数量:">
                    <el-input disabled v-model="form.sampleQuantity" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="样品重量:">
                    <el-input disabled v-model="form.sampleWeight" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="质检内容" name="3">
            <el-tabs v-model="inspectionName">
              <el-tab-pane label="来源清单" name="1">
                <ele-pro-table
                  :columns="tableColumns1"
                  :datasource="sourceData1"
                  :initLoad="false"
                  :needPage="false"
                  :toolkit="[]"
                  height="calc(100vh - 330px)"
                >
                </ele-pro-table>
              </el-tab-pane>
              <el-tab-pane label="样品清单" name="2">
                <ele-pro-table
                  :columns="tableColumns2"
                  :datasource="sourceData2"
                  :initLoad="false"
                  :needPage="false"
                  :toolkit="[]"
                  height="calc(100vh - 330px)"
                >
                </ele-pro-table
              ></el-tab-pane>
              <el-tab-pane label="质检方案" name="3">
                <ele-pro-table
                  :columns="tableColumns3"
                  :datasource="sourceData3"
                  :initLoad="false"
                  :needPage="false"
                  :toolkit="[]"
                  height="calc(100vh - 330px)"
                >
                </ele-pro-table
              ></el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="样品处置" name="4">
            <ele-pro-table
              :columns="tableColumns4"
              :datasource="sourceData4"
              :initLoad="false"
              :needPage="false"
              :toolkit="[]"
              height="calc(100vh - 260px)"
            >
            </ele-pro-table>
          </el-tab-pane>
          <el-tab-pane label="不良品处置" name="5">
            <ele-pro-table
              :columns="tableColumns5"
              :datasource="sourceData5"
              :initLoad="false"
              :needPage="false"
              :toolkit="[]"
              height="calc(100vh - 260px)"
            >
            </ele-pro-table>
          </el-tab-pane>
        </el-tabs>
        <!-- <el-button class="go_back" @click="goBack">返回</el-button> -->
      </el-card>
    </div>
  </ele-modal>
</template>

<script>
  import { getDetailById, planDetails } from '@/api/produce/workPlan';
  import detailMixins from './mixins/detailMixins';
  import { parameterGetByCode, getByCode } from '@/api/system/dictionary-data';
  import { getUserPage } from '@/api/system/organization';
  export default {
    mixins: [detailMixins],
    data() {
      return {
        activeName: '1',
        inspectionName: '1',
        sourceData1: [],
        sourceData2: [],
        sourceData3: [],
        sourceData4: [],
        sourceData5: [],
        disposeTypeList: [],
        form: {},
        showArrange: '0',
        visible: false,
        itemData: {}
      };
    },
    computed: {
      sampletypeVal() {
        return (row) => {
          if (row == 1) return '整样';
          if (row == 2) return '小样';
          return '';
        };
      },
      disposalName() {
        return (type) => {
          return this.disposeTypeMap[type] || '';
        };
      }
    },
    created() {
      // this.getData();
      // 是否展示合格不合格
      // this.getCode();
    },
    methods: {
      getCode() {
        parameterGetByCode({
          code: 'qms_show_arrange'
        }).then((res) => {
          if (res) {
            this.showArrange = res.value || '1';
            // this.time_calc_code = res.value || '0';
          }
        });
      },

      open(item) {
        this.itemData = item;
        this.getCode();
        this.getData();
        this.visible = true;
      },

      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          console.log(res, 'resres');
          this.executorList = res.list;
        } catch (error) {}
      },

      async getData() {
        // let id = this.$route.query.id;
        // let name = this.$route.query.name;
        let id = this.itemData.id;
        let name = '工单';
        try {
          const api = name == '计划' ? planDetails : getDetailById;
          const result = await api(id);
          console.log(result, 'result');
          const res = result.data;
          await this.getUserList({ groupId: res.groupId });
          const qualityName = [];
          if (res.qualityId && this.executorList.length != 0) {
            res.qualityId.split(',').forEach((item) => {
              this.executorList.forEach((el) => {
                if (el.id == item) {
                  qualityName.push(el.name);
                }
              });
            });
          }
          if (qualityName.length != 0) {
            res.qualityName = qualityName.join(',');
          }
          let obj = {};
          this.infoList.map((item) => {
            obj[item.prop] = res[item.prop];
          });
          this.form = obj;
          this.fieldAssign(res, obj);
          this.sampleInfo(res);
        } catch (err) {
          console.log(err, 'err');
        }
      },
      sampleInfo(res) {
        this.$set(
          this.form,
          'sampleNoQualifiedNumber',
          res.sampleNoQualifiedNumber
        );
        this.$set(
          this.form,
          'sampleQualificationRate',
          res.sampleQualificationRate
        );
        this.$set(
          this.form,
          'sampleNoQualificationRate',
          res.sampleNoQualificationRate
        );
        this.$set(this.form, 'conditionType', res.conditionType);
        this.$set(this.form, 'sampleQuantity', res.sampleQuantity);
        this.$set(this.form, 'sampleWeight', res.sampleWeight);
        this.$set(this.form, 'qualifiedNumber', res.qualifiedNumber);
        this.$set(this.form, 'noQualifiedNumber', res.noQualifiedNumber);
        this.$set(this.form, 'remark', res.remark);
        this.sourceData5 = res.unqualifiedDetail || [];
        this.sourceData4 = res.qualitySampleList || [];
        this.sourceData2 = res.qualitySampleList || [];
        this.sourceData3 = res.templateList || [];
        this.sourceData1 = res.qualityInventoryList || [];
        this.disposeTypeList = res.disposeTypeList || [];
      },
      async fieldAssign(res, obj) {
        if (res.qualityMode == 1) {
          obj.qualityModeName = '全检';
        } else if (res.qualityMode == 2) {
          obj.qualityModeName = '抽检';
        } else {
          obj.qualityModeName = '';
        }
        if (res.qualityResults == 1) {
          obj.qualityResultsName = '合格';
        } else if (res.qualityResults == 2) {
          obj.qualityResultsName = '不合格';
        } else {
          obj.qualityResultsName = '';
        }
        let val = res.inspectionStandards;
        obj.inspectionStandardsName = await this.getDictListIqoCode(val);
      },
      async getDictListIqoCode(value) {
        let { data: res } = await getByCode('measurement_type');
        if (value > 0) {
          return res[value - 1][value];
        }
        return '';
      },
      handleClose() {
        this.visible = false;
      },

      goBack() {
        console.log(this.$route.query, '000000000000');
        let path = this.$route.query.path || '';
        if (path) {
          this.$router.push({ path: '/inspectionWork' });
        } else {
          this.$router.go(-1);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    width: 100%;
    height: calc(100% - 32px);
    box-sizing: border-box;

    .el-card {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .el-tabs__content {
    margin-top: 16px;
  }

  .tabs_box {
    position: relative;

    .go_back {
      position: absolute;
      right: 25px;
      top: 19px;
      z-index: 99;
    }
  }
</style>
