<template>
  <div>
    <Row>
      <!--查询-->
      <Col span="24">
        <Form id="data-input-contract-right" :label-width="90" inline onsubmit="return false">
          <label class="label-sign"></label>
          <Form-item class="search-item-select">
            <SelectInput ref="selInput1" :option-list="optionList" :judge-list="judgeList"
                         compare-keyword="testBasis" keyword="name"
                         placeholder="请输入检测项目"
                         @on-result-change="_selInputResult1"></SelectInput>
          </Form-item>
          <Form-item class="search-item-select">
            <SelectInput ref="selInput2" :option-list="optionList" :judge-list="judgeList"
                         compare-keyword="name" keyword="testBasis"
                         placeholder="请输入检测依据"
                         @on-result-change="_selInputResult2"></SelectInput>
          </Form-item>
          <Form-item class="search-btn">
            <Button type="primary" @click="_page">搜索</Button>
          </Form-item>
        </Form>
      </Col>
      <!--操作-->
      <Col span="24">
        <btn-list :msg="btn" :show-btn-num="7" class="contHide" @on-result-change="_btnClick"></btn-list>
      </Col>
      <Col span="24">
        <PTVXETableData
          ref="pageTable"
          :table-height="tableHeight"
          :get-page="getPage"
          :table-name="tableName"
          :page-columns="pageColumns"
          :rows="100"
          @on-result-change="_tableResultChange">
          <vxe-table-column
            v-for="item in userColumns.length > 0 ?userColumns:pageColumns"
            :key="item.key"
            :field="item.key"
            :title="item.title"
            :min-width="item.width?item.width:200"
            :fixed="item.fixed?item.fixed:undefined"
            :edit-render="item.editCell?{autofocus: 'input'}:null"
            sortable
          >
            <template v-slot="{ row }">
              <div v-if="item.date">{{row[item.key]?$dateformat(row[item.key],'yyyy-mm-dd'):''}}</div>
              <div v-else-if="item.key==='progress'">{{row[item.key].display}}</div>
              <div v-else>{{row[item.key]}}</div>
            </template>
          </vxe-table-column>
          <VXESettingCol slot="setting" :page-columns="pageColumns" :user-columns="userColumns"
                         :table-name="tableName" @on-result-change="_page"></VXESettingCol>
        </PTVXETableData>
      </Col>
    </Row>
  </div>
</template>
<script>
import { meterManageItem } from '../../api'
import VXESettingCol from '../../components/base/VXESettingCol'
import SelectInput from './SelectInput'

export default {
  components: {
    VXESettingCol,
    SelectInput
  },
  data() {
    return {
      formObj: {
        aptitudeId: '',
        name: '',
        code: '',
        standardName: ''
      },
      tableName: 'food-data-input-contract-right',
      // 用户自己选中的列
      userColumns: [],
      currentComponent: '',
      edit: false,
      btnModalList: [
        { type: 'primary', name: '更新' },
        { type: 'primary', name: '新增' },
        { type: '', name: '取消' }
      ],
      optionList: [
        { key: 'name', name: '检测项目', placeholder: '请输入检测项目' },
        { key: 'testBasis', name: '检测依据', placeholder: '请输入检测依据' },
        { key: 'num', name: '样品编号', placeholder: '请输入样品编号' },
        { key: 'code', name: '委托编号', placeholder: '请输入委托编号' },
        { key: 'sampleName', name: '样品名称', placeholder: '请输入样品名称' },
        { key: 'firstClass', name: '大类', placeholder: '请输入大类' },
        { key: 'detectType', name: '细类', placeholder: '请输入细类' },
        {
          key: 'sampleRemark',
          name: '样品备注',
          placeholder: '请输入样品备注'
        },
        {
          key: 'planDate',
          name: '计划完成时间',
          placeholder: '请选择计划完成时间',
          date: true
        },
        {
          key: 'reportDueDate',
          name: '应出报告日期',
          placeholder: '请选择应出报告日期',
          date: true
        },
        {
          key: 'receiveDate',
          name: '接收日期',
          placeholder: '请选择接收日期',
          date: true,
          dateToMin: true
        },
        { key: 'limitDefault', name: '限量', placeholder: '请输入限量' }
      ],
      judgeList: [
        { name: '待判定', value: '0' },
        { name: '不判定', value: '5' },
        { name: '合格', value: '7' },
        { name: '不合格', value: '9' }
      ],
      btn: [],
      currentRow: {},
      currentIndex: -1,
      getPage: {
        records: []
      },
      pageColumns: [
        { title: '检测项目', key: 'name', width: 120, fixed: 'left' },
        { title: '比较符', key: 'compare', width: 180, fixed: 'left' },
        { title: '限量值', key: 'limitValue', width: 140 },
        { title: '单位', key: 'unit', width: 160 },
        { title: '是否判定', key: 'judged', width: 120, editCell: true },
        { title: '备注', key: 'remark', width: 120, editCell: true }
      ],
      iconMsg: [],
      iconMsgDisable: [],
      leftSelectIds: [],
      selectIds: [],
      selectData: [],
      selectSampleIds: [],
      personal: '',
      // 检测步骤
      stepId: '',
      // 点击编辑时的当前的key
      currentEditKey: ''
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tabSearch')
    }
  },
  mounted() {
    // this._dicSearch()
  },
  methods: {
    _resultChange(msg) {
      this.$Message.success(msg)
      this._page()
      this.selectIds = []
      this.selectData = []
      this.selectSampleIds = []
    },
    _selInputResult1(msg, data) {
      switch (msg) {
        case 'keyword':
          this.$refs.selInput2._setCompareKeyword(data)
          break
        case 'search':
          this._formSearch()
          break
      }
    },
    _selInputResult2(msg, data) {
      switch (msg) {
        case 'keyword':
          this.$refs.selInput1._setCompareKeyword(data)
          break
        case 'search':
          this._formSearch()
          break
      }
    },
    _open(ids, personal) {
      this.leftSelectIds = ids
      this.formObj.aptitudeId = ids
      this.personal = personal
      if (ids.length === 0) {
        this.$set(this.getPage, 'records', [])
        this.$set(this.getPage, 'total', 0)
        this.$set(this.getPage, 'current', 1)
        this.selectIds = []
        this.selectData = []
        this.selectSampleIds = []
      } else {
        this._page()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'selectIds':
          this.selectIds = data
          this.$emit('on-result-change', this.selectIds)
          break
        case 'selectData':
          this.selectData = data
          this.selectSampleIds = data.map(({ sampleId: i }) => i)
          break
        case 'table-col':
          // 用户选中的表格列
          this.userColumns = data
          break
        case 'changeSize':
          if (this.leftSelectIds.length) {
            this._page()
          }
          break
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await meterManageItem.page(this.formObj)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
        console.log(result)
      }
    },
    // 操作的序号
    _handleRow(data) {
      this.currentRow = data.row
      this.currentIndex = data.index
    },
    _btnClick(msg, componentName) {
      this.currentComponent = componentName
      this.$nextTick(function() {
        switch (msg) {
          case '仪器':
            // this._selectEquipment()
            break
          case '检测项目重置':
            // this._itemResetInfo()
            break
        }
      })
    },
    _copyHisData() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$refs.refModal._open(this.selectIds)
      }
    },
    _confirmResult(name) {
      switch (name) {
        case '更新':
          this._saveToLabOk(0)
          break
        case '新增':
          this._saveToLabOk(1)
          break
      }
    },
    // 导入
    _import() {
      this.$refs.refModal._open()
    },
    _iconClick(res, data, componentName) {
      this.currentComponent = componentName
      this.$nextTick(function() {
        switch (res) {
          case '样品附件':
            this._upload(data.sampleId)
            break
          case '操作日志':
            this._record(data.id)
            break
        }
      })
    }
  }
}
</script>
