<template>
  <div>
    <Modal v-model="showModal" v-drag width="1000" class="modal-footer-none">
      <p slot="header">报告任务详情</p>
      <Form :label-width="70" inline onsubmit="return false">
        <label class="label-sign"></label>
        <Form-item class="search-item" label="委托编号:">
          <Input v-model="formObj.code" @on-enter="_formSearch" placeholder="请输入委托编号" clearable/>
        </Form-item>
        <Form-item class="search-btn">
          <Button @click="_formSearch" type="primary">搜索</Button>
        </Form-item>
      </Form>
      <element-table ref="pageTable" :table-height="400" :getPage="getPage"
                    @on-result-change="_tableResultChange" hide-checkbox>
        <el-table-column
          :prop="item.key"
          :label="item.title"
          :min-width="item.width"
          :fixed="item.fixed?item.fixed:undefined"
          v-for="item in pageColumns"
          :key="item.id"
          show-overflow-tooltip sortable>
          <template slot-scope="scope">
            <span
              v-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>
        </el-table-column>
      </element-table>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      formObj: {
        code: '',
        day: '',
        queryPersonal: false
      },
      getPage: {
        records: []
      },
      pageColumns: [
        { title: '委托单位', key: 'cusName', width: 140 },
        { title: '委托编号', key: 'code', width: 180 },
        { title: '报告数量', key: 'reportCount', width: 160 },
        { title: '应出报告日期', key: 'dueDate', width: 140 }
      ]
    }
  },
  methods: {
    _open(day, queryPersonal) {
      this.showModal = true
      this.getPage.records = []
      this.formObj = this.$resetFields(this.formObj)
      this.formObj.day = this.$dateformat(day, 'yyyy-mm-dd')
      this.formObj.queryPersonal = queryPersonal || false
      this._page()
    },
    _page() {
      this.$refs.pageTable._page(
        '',
        'FoodSampleReport/reportTask',
        this.$serializeFormSearch(this.formObj)
      )
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.FoodSampleReport.page
          break
        default:
          this._page()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    }
  }
}
</script>

<style scoped>
</style>
