<template>
  <div>
    <Row>
      <!--查询-->
      <Col span="24">
        <Form id="task-assign-sample-left" :label-width="70" inline onsubmit="return false">
        <label class="label-sign"></label>
        <Form-item class="search-item" label="试样编号:">
          <Input v-model="formObj.sampleCode" @on-enter="_formSearch" placeholder="请输入试样编号" clearable></Input>
        </Form-item>
        <Form-item class="search-btn">
          <Button @click="_formSearch" type="primary">搜索</Button>
        </Form-item>
      </Form>
      </Col>
      <Col span="24">
      <btn-list @on-result-change="_btnClick" class="contHide" style="margin-bottom: 6px;"></btn-list>
      </Col>
      <!-- 表格 -->
      <Col span="24">
      <PTVXETable ref="pageTable" :pageColumns="pageColumns" :table-name="tableName"
                  :tableHeight="tableHeight"
                    @on-result-change="_tableResultChange" :getPage="getPage" >
        <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"
          :fixed="item.fixed?item.fixed:undefined"
          sortable>
          <template slot-scope="scope">
            <a v-if="item.detail" @click.stop="_detailModal(scope.row)">{{scope.row[item.key]}}</a>
            <span v-else-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</span>
            <span v-else>{{scope.row[item.key]}}</span>
          </template>
        </vxe-table-column>
        <VXESettingCol slot="setting" :pageColumns="pageColumns" :userColumns="userColumns"
                       @on-result-change="_resetColumn" :table-name="tableName"></VXESettingCol>
      </PTVXETable>
      </Col>
    </Row>
  </div>
</template>
<script>
import { soilTest } from '../../../../api'

export default {
  components: {},
  data() {
    return {
      currentComponent: '',
      formObj: {
        entrustId: undefined
      },
      entrustId: '',
      tableName: 'food-task-assign-item-left',
      // 用户自己选中的列
      userColumns: [],
      selectIds: [],
      optionList: [
        { key: 'name', name: '检测项目', placeholder: '请输入检测项目' },
        { key: 'testBasis', name: '检测依据', placeholder: '请输入检测依据' }
      ],
      getPage: {},
      pageColumns: [
        { title: '试样编号', key: 'sampleCode', width: 120 },
        { title: '委托编号', key: 'entrustCode', width: 140 },
        { title: '委托商', key: 'client', width: 200 }
      ]
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tabSearch')
    }
  },
  methods: {
    // 重置column
    _resetColumn(colList) {
      this.userColumns = colList
      this.$refs.pageTable._loadColumn(colList)
    },
    _modalResult() {
      if (this.currentComponent === 'AutoAssignModal') {
        this._formSearch()
      }
    },
    _selInputResult1(msg, data) {
      switch (msg) {
        case 'search':
          this._formSearch()
          break
      }
    },
    _open(id) {
      this.entrustId = id
      this._page()
    },
    _searchParams() {
      const obj = {}
      const obj1 = this.$refs.selInput1._getFormObj()
      Object.assign(obj, obj1)
      return obj
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      this.formObj.entrustId = this.entrustId
      const result = await soilTest.pageExpCheckSample(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        // case 'selectData':
        //   this.$emit('on-result-change', data)
        //   break
        case 'selectIds':
          this.selectIds = data
          this.$emit('on-result-change', this.selectIds.join(','))
          break
        case 'changeSize':
          this._page()
          break
        case 'table-col':
          // 用户选中的表格列
          this.userColumns = data
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _btnClick(msg) {
      switch (msg) {
        case '自动分配':
          this.currentComponent = 'AutoAssignModal'
          this.$nextTick(function() {
            this._autoAssign()
          })
          break
      }
    },
    _autoAssign() {
      this.$store.dispatch('FoodItem/autoAllotNum').then(() => {
        const num = this.$store.state.FoodItem.count
        if (num !== undefined) {
          this.$refs.refModal._open(num)
        }
      })
    }
  }
}
</script>
