<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="list"
      max-height="calc(100vh - 605px)"
      tool-class="ele-toolbar-form"
      cache-key="inspectionClassify"
      row-key="qualityLevelId"
    >
      <template v-slot:textType="{ row }">
        {{
          row.textType == 1
            ? '数值'
            : row.textType == 2
            ? '选择'
            : row.textType == 3
            ? '上下限'
            : row.textType == 4
            ? '规格'
            : row.textType == 5
            ? '时间'
            : row.textType == 6
            ? '范围'
            : ''
        }}
      </template>

      <template v-slot:type="{ row }">
        {{ getDictValue('质检标准类型', row.qualityStandardType) }}
      </template>

      <template v-slot:defaultValue="{ row }">
        <div style="display: flex">
          <div
            v-if="row.textType == 3"
            style="display: flex; align-items: center"
          >
            {{ row.minValue }} {{ row.unit }}
            <span>&nbsp;&nbsp;-</span>
            {{ row.maxValue }}{{ row.unit }}
          </div>

          <div v-else> {{ row.defaultValue }} {{ row.unit }} </div>
        </div>
      </template>

      <template v-slot:qualityResultValue="{ row }">
        <el-input v-model="row.qualityResultValue"></el-input>
      </template>

      <template v-slot:qualityResult="{ row }">
        <el-select
          v-model="row.qualityResult"
          placeholder="请选择"
          style="width: 100%"
          clearable
          :disabled="isDetails"
        >
          <el-option
            v-for="item in qualityList"
            :label="item.name"
            :key="item.value"
            :value="item.value"
          />
        </el-select>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getByCode } from '@/api/system/dictionary-data';

  export default {
    components: {},
    mixins: [dictMixins],
    props: {
      qualityParam: {
        type: Array
      },

      isDetails: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      qualityParam: {
        handler(val) {
          this.list = val;
          this.$forceUpdate();
        },
        deep: true,
        immediate: true
      }
    },

    data() {
      return {
        list: [],
        dictList: [],

        qualityList: [
          {
            name: '合格',
            value: 1
          },
          {
            name: '不合格',
            value: 2
          },
          {
            name: '让步接受',
            value: 3
          }
        ],

        columns: [
          {
            prop: 'categoryLevelName',
            label: '质检类型',
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'inspectionName',
            label: '质检名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '工艺参数',
            align: 'center',
            minWidth: 180
          },

          {
            label: '工艺要求',
            prop: 'inspectionStandard',
            formatter: (row, column, cellValue) => {
              return row.symbol + ' ' + cellValue + ' ' + row.unit;
            },
            minWidth: 350
          },

          {
            prop: 'qualityResultValue',
            slot: 'qualityResultValue',
            label: '质检结果参数',
            align: 'center',
            minWidth: 160
          },

          {
            prop: 'qualityResult',
            slot: 'qualityResult',
            label: '质检结果',
            align: 'center',
            minWidth: 100
          }
        ]
      };
    },

    created() {
      this.requestDict('质检标准类型');
      // this.getDictList('mathematical_symbol');
    },

    methods: {
      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      getDate() {
        return this.list;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .content_box {
    width: 100%;
    margin-top: 12px;
    max-height: 42vh;
    overflow-y: scroll;
  }

  .content_ll_case {
    display: flex;
    flex-wrap: wrap;
    background: #e6f7ff;
    line-height: 30px;
  }

  .content_ll {
    height: 30px;
    width: 23%;
    display: flex;
    flex-direction: row;
    align-items: center;

    margin: auto;

    .name {
      color: #000;
      font-weight: 500;
      margin-right: 8px;
    }
  }

  ::v-deep .el-table--medium .el-table__cell {
    padding: 4px 0 !important;
  }

  ::v-deep .el-form-item__content {
    line-height: 28px !important;
  }
</style>
