<template>
  <div>
    <Row>
      <!--查询-->
      <Col span="24">
        <Form id="data-input-contract-left" :label-width="70" inline onsubmit="return false">
          <label class="label-sign"></label>
          <Form-item class="search-item-select">
            <SelectInput ref="selInput1" :optionList="optionList" @on-result-change="_selInputResult1"
                         keyword="code" placeholder="请输入委托编号"></SelectInput>
          </Form-item>
          <Form-item class="search-btn">
            <Button @click="_formSearch" type="primary">搜索</Button>
          </Form-item>
        </Form>
      </Col>
      <!--//操作-->
      <Col span="24">
        <btn-list :msg="btn" @on-result-change="_btnClick" class="contHide">
          <!--切换待认领任务-->
          <template slot="processTask" v-if="$showBtn('food-data-input-contract-task')">
            <div class="fr process-task" style="margin-right: 10px">
              <el-checkbox v-model="personal" @change="_page" :true-label="1"
                           :false-label="0" size="medium">个人任务
              </el-checkbox>
            </div>
          </template>
        </btn-list>
      </Col>
      <!-- 表格 -->
      <Col span="24">
        <PTVXETable ref="pageTable" :pageColumns="pageColumns"
                    :table-name="tableName"
          :tableHeight="tableHeight"
          @on-result-change="_tableResultChange"
          :getPage="getPage"
          :rows="100" is-task :isRadio="true" hide-checkbox>
          <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="_page" :table-name="tableName"></VXESettingCol>
        </PTVXETable>
      </Col>
    </Row>
  </div>
</template>
<script>
import { meterManage } from '../../api'
import SelectInput from './SelectInput'
export default {
  components: {
    SelectInput
  },
  data() {
    return {
      currentComponent: '',
      tableName: 'food-data-input-contract-left',
      // 用户自己选中的列
      userColumns: [],
      personal: 1,
      btn: [],
      optionList: [
        { key: 'code', name: '委托编号', placeholder: '请输入委托编号' },
        { key: 'cname', name: '委托单位', placeholder: '请输入委托单位' },
        { key: 'name', name: '委托名称', placeholder: '请输入委托名称' },
        {
          key: 'reportDueDate',
          name: '应出报告日期',
          placeholder: '请选择应出报告日期',
          date: true
        }
      ],
      getPage: {},
      pageColumns: [
        { title: '委托名称', key: 'name', width: 160 },
        { title: '委托编号', key: 'code', width: 180 },
        { title: '委托单位', key: 'cname', width: 200 },
        { title: '服务类型', key: 'serviceType', width: 120 },
        { title: '应出报告日期', key: 'reportDueDate', width: 140, date: true }
      ]
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tabSearch')
    }
  },
  methods: {
    _btnClick() {},
    _selInputResult1(msg, data) {
      switch (msg) {
        case 'search':
          this._formSearch()
          break
      }
    },
    _open() {
      this._page()
    },
    _searchParams() {
      const obj = {}
      const obj1 = this.$refs.selInput1._getFormObj()
      Object.assign(obj, obj1)
      if (this.personal) {
        obj.personal = this.personal
      }
      return obj
    },
    _page: async function() {
      const result = await meterManage.page(this.formObj)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'selectIds':
          this.$emit('on-result-change', data, this.personal)
          break
        case 'singleSelect':
          this.$emit('on-result-change', data.id, this.personal)
          break
        case 'changeSize':
          this._page()
          this._clear()
          break
        case 'table-col':
          // 用户选中的表格列
          this.userColumns = data
          break
      }
    },
    _clear() {
      this.selectIds = []
      this.$emit('on-result-change', [])
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
      this._clear()
    }
  }
}
</script>
