<template>
  <Modal v-model="showModal" width="100" class="modal-footer-none full-screen">
    <p slot="header">{{modalTitle}}</p>
    <div>
      <Row>
        <!--查询-->
        <Col span="24">
          <Form id="search-form-details" ref="formObj" :label-width="70" :model="formObj" v-show="searchOpen"
                inline onsubmit="return false">
            <label class="label-sign"></label>
            <Form-item class="search-item" label="委托单位:" prop="cname">
              <Input v-model="formObj.client" @on-enter="_formSearch" placeholder="请输入委托单位" clearable/>
            </Form-item>
            <Form-item class="search-item" label="委托编号:" prop="code">
              <Input v-model="formObj.entrustCode" @on-enter="_formSearch" placeholder="请输入委托编号" clearable/>
            </Form-item>
            <Form-item class="search-btn">
              <Button @click="_formSearch" type="primary">搜索</Button>
            </Form-item>
          </Form>
        </Col>
        <Col span="24">
          <btn-list :msg="btn" :open="searchOpen" :showSearchBtn="true" @on-result-change="_btnClick"
                   class="contHide" style="height: 30px;"></btn-list>
        </Col>
        <Col span="24">
          <PTVXETable ref="pageTable" :tableHeight="tableHeight"
                      @on-result-change="_tableResultChange" :getPage="getPage" select-data>
            <vxe-table-column
              :field="item.key"
              :title="item.title"
              :min-width="item.width?item.width:200"
              :fixed="item.fixed?item.fixed:undefined"
              v-for="item in pageColumns"
              :key="item.key" sortable>
              <template slot-scope="scope">
                <span v-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</span>
                <div v-else>{{scope.row[item.key]}}</div>
              </template>
            </vxe-table-column>
          </PTVXETable>
        </Col>
      </Row>
    </div>
  </Modal>
</template>

<script>
import { meterSample } from '../../../api'
export default {
  data() {
    return {
      modalTitle: '',
      showModal: false,
      getPage: {},
      pageColumns: [
        { title: '委托单位', key: 'client' },
        { title: '委托编号', key: 'entrustCode' },
        { title: '委托金额', key: 'fee', width: 90 },
        { title: '联系人', key: 'person', width: 120 },
        { title: '联系电话', key: 'tel', width: 120 },
        { title: '委托日期', key: 'edate', width: 120, date: true }
      ],
      formObj: {
        entrustDate: undefined,
        client: undefined,
        entrustCode: undefined
      },
      dateList: [],
      btn: [
        // { type: '', id: '', name: '导出' }
      ],
      searchOpen: true,
      selectData: []
    }
  },
  computed: {
    tableHeight() {
      if (this.searchOpen) {
        return this.$tableHeight('', 200)
      } else {
        return this.$tableHeight('', 150)
      }
    }
  },
  methods: {
    _btnClick(msg) {
      console.log(msg)
      switch (msg) {
        case '导出':
          this._exportContract()
          break
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    /** *********************************导出合同-begin*********************************************/
    _exportContract() {
      let result = []
      if (this.selectData.length === 0) {
        // 导出全部数据
        this.$Modal.confirm({
          title: '提示',
          content:
            this.selectData.length === 0
              ? '确定导出全部数据（最多导出5000条）？'
              : '确定导出这' + result.length + ' 条数据？',
          onOk: () => {
            this.$store
              .dispatch('FoodContract/barYearContract', this._searchParams())
              .then(() => {
                result = this.$store.state.FoodContract.page.records
                this.$exportExcel(
                  'yearContractNumDetail',
                  '委托明细',
                  this.pageColumns,
                  result
                )
              })
          }
        })
      } else {
        // 只导出选中的数据
        result = this.selectData
        this.$Modal.confirm({
          title: '提示',
          content:
            this.selectData.length === 0
              ? '确定导出全部数据（最多导出5000条）？'
              : '确定导出这' + result.length + ' 条数据？',
          onOk: () => {
            this.$exportExcel(
              'yearContractNumDetail',
              '委托明细',
              this.pageColumns,
              result
            )
          }
        })
      }
    },
    // 参数
    _searchParams() {
      const data = this.$serializeFormSearch(this.formObj)
      return this.$extend(data, { page: 1, rows: 5000 })
    },
    /** *********************************导出合同-end*********************************************/
    _open(data) {
      this.modalTitle = data.entrustDate + ' -- 委托列表 '
      this.showModal = true
      this.$refs.formObj.resetFields()
      this.formObj.entrustDate = data.entrustDate
      this.formObj.ctimeBegin = undefined
      this.formObj.ctimeEnd = undefined
      this.dateList = []
      this._page()
    },
    _page: async function() {
      // this.$refs.pageTable._page(
      //   'search-form-details',
      //   'FoodContract/barYearContract',
      //   this.$serializeFormSearch(this.formObj)
      // )
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      console.log('this.formObj', this.formObj)
      const result = await meterSample.pageAnnualEntrustDetail(this.formObj)
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.FoodContract.page
          break
        case 'selectData':
          this.selectData = data
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _search() {
      this._page()
    },
    // 查询-接收日期
    _signDateChange(data) {
      this.formObj.ctimeBegin = data[0]
      this.formObj.ctimeEnd = data[1]
    }
  }
}
</script>
