<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.cname" @on-enter="_formSearch" placeholder="请输入委托单位" clearable/>
            </Form-item>
            <Form-item class="search-item" label="委托编号:" prop="code">
              <Input v-model="formObj.code" @on-enter="_formSearch" placeholder="请输入委托编号" clearable/>
            </Form-item>
            <Form-item class="search-item" label="业务员:" prop="salesman">
              <Input v-model="formObj.salesman" @on-enter="_formSearch" placeholder="请输入业务员" clearable/>
            </Form-item>
            <Form-item class="search-item" label="制单日期:">
              <Date-picker @on-change="_signDateChange" v-model="dateList" type="daterange" split-panels
                           style="width:100%;" placeholder="请选择制单日期"/>
            </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"></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>
export default {
  data() {
    return {
      modalTitle: '',
      showModal: false,
      getPage: {},
      pageColumns: [
        { title: '委托单位', key: 'cname' },
        { title: '委托名称', key: 'name' },
        { title: '委托编号', key: 'code' },
        { title: '委托金额', key: 'contractAmount', width: 90 },
        { title: '已收金额', key: 'bereturnedAmount', width: 90 },
        { title: '业务员', key: 'salesman', width: 120 },
        { title: '制单日期', key: 'ctime', width: 120, date: true },
        { title: '制单人', key: 'uname', width: 120 }
      ],
      formObj: {
        yearMonth: '',
        ctimeBegin: '',
        ctimeEnd: '',
        cname: '',
        code: '',
        salesman: ''
      },
      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.yearMonth + ' -- 委托列表 '
      this.showModal = true
      this.$refs.formObj.resetFields()
      this.formObj.yearMonth = data.yearMonth
      this.formObj.ctimeBegin = ''
      this.formObj.ctimeEnd = ''
      this.dateList = []
      // this._page()
    },
    _page() {
      this.$refs.pageTable._page(
        'search-form-details',
        'FoodContract/barYearContract',
        this.$serializeFormSearch(this.formObj)
      )
    },
    _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>
