<template>
  <div>
    <Modal v-model="showModal" v-drag width="1000" class="modal-footer-none">
      <p slot="header">检测任务详情 (检测任务：<span class="red-color">{{total}}</span>)</p>
      <Form :label-width="70" inline onsubmit="return false">
        <label class="label-sign"></label>
        <Form-item class="search-item" label="检测人:">
          <Input v-model="formObj.tester" @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: {
        tester: '',
        day: '',
        queryPersonal: false
      },
      getPage: {
        records: []
      },
      pageColumns: [
        { title: '委托编号', key: 'code', width: 180 },
        { title: '项目名称', key: 'itemName', width: 160 },
        { title: '数量', key: 'itemTotal', width: 140 },
        { title: '计划完成时间', key: 'planEndDate', width: 140, date: true },
        { title: '检测人', key: 'testers', width: 140 }
      ],
      total: ''
    }
  },
  methods: {
    _open(day, queryPersonal, total) {
      this.showModal = true
      this.getPage.records = []
      this.total = total
      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(
        '',
        'FoodItem/testTask',
        this.$serializeFormSearch(this.formObj)
      )
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.FoodItem.page
          break
        default:
          this._page()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    }
  }
}
</script>

<style scoped>
</style>
