<template>
  <div>
    <Modal v-model="showModal" width="1200" class="modal-footer-none">
      <p slot="header">详情</p>
      <div>
        <!--内容-->
        <Row>
          <!--查询-->
          <Col span="24">
          <Form id="search-personal-detail" :label-width="70" inline onsubmit="return false">
            <label class="label-sign"></label>
            <Form-item style="width:32%" label="录入时间:">
              <Date-picker :editable="false" @on-change="_dateChange" v-model="dateList"
                           type="daterange" placeholder="录入时间" format="yyyy-MM-dd"
                           style="width:100%"></Date-picker>
              <input v-model="formObj.testDateBegin" type="hidden" name="testDateBegin">
              <input v-model="formObj.testDateEnd" type="hidden" name="testDateEnd">
              <input v-model="groupIds" type="hidden" name="groupIds">
              <input v-model="testerIds" type="hidden" name="testerIds">
            </Form-item>
            <Form-item style="width:32%" label="检测科室:">
              <SelMultiGroup ref="groupModal" @on-result-change="_groupResult"></SelMultiGroup>
            </Form-item>
            <Form-item style="width:32%" label="检测人:">
              <!--显示某几个科室下的人员 isGroupIds为标识-->
              <SelMultiUserGroup ref="userModal" @on-result-change="_userResult" is-group-ids></SelMultiUserGroup>
            </Form-item>
            <Form-item style="width:32%" label="检测项目:">
              <Input v-model="formObj.name" @on-enter="_formSearch" name="name" placeholder="请输入检测项目" clearable/>
            </Form-item>

            <Form-item style="width:32%" label="检测依据:">
              <Input v-model="formObj.testBasis" @on-enter="_formSearch" name="testBasis" 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" @on-result-change="_btnClick" class="contHide"></btn-list>
          </Col>
          <Col span="24">
          <PTVXETable id="groupStatisticTable" ref="pageTable" :tableHeight="tableHeight"
                        @on-result-change="_tableResultChange" :getPage="getPage" select-data>
            <vxe-table-column
              v-for="item in pageColumns"
              :key="item.key"
              :field="item.key"
              :title="item.title"
              :width="item.width"
              :min-width="200"
              :fixed="item.fixed?item.fixed:undefined"
              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-if="item.status">{{scope.row[item.key]?scope.row[item.key].display:''}}</span>
                <span v-else>{{scope.row[item.key]}}</span>
              </template>
            </vxe-table-column>
          </PTVXETable>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
/* 个人检测量统计------项目查看项目详情 */
import SelMultiUserGroup from '../../../components/user-info/SelMultiUserGroup'
import SelMultiGroup from '../../../components/user-info/SelMultiGroup'

export default {
  components: { SelMultiUserGroup, SelMultiGroup },
  data() {
    return {
      btn: [{ type: '', id: '', name: '导出' }],
      showModal: false,
      selectData: [],
      getPage: {},
      pageColumns: [
        { title: '样品编号', key: 'num', width: 180, fixed: 'left' },
        { title: '样品名称', key: 'sampleName', width: 180 },
        { title: '检测项目', key: 'name', width: 120 },
        { title: '检测值', key: 'testValue', width: 140 },
        { title: '单位', key: 'unit', width: 100 },
        { title: '结果判定', key: 'qualified', width: 100, status: true },
        { title: '单项结论', key: 'singleConclusion', width: 100 },
        { title: '复测值', key: 'retestValue', width: 100 },
        { title: '检出类别', key: 'detectionType', width: 100 },
        { title: '检出限', key: 'detection', width: 100 },
        { title: '检测依据', key: 'testBasis', width: 200 },
        { title: '检测依据名称', key: 'testBasisName', width: 200 },
        { title: '检测方法', key: 'testMethod', width: 200 },
        { title: '判定依据', key: 'judgeBasis', width: 200 },
        { title: '判定依据名称', key: 'judgeBasisName', width: 200 },
        { title: '限量', key: 'limitDefault', width: 100 },
        { title: '检测科室', key: 'groupName', width: 100 },
        { title: '检测人', key: 'tester', width: 100 },
        { title: '录入时间', key: 'testDate', width: 120, date: true }
      ],
      dateList: [],
      formObj: {
        name: '',
        testDateBegin: '',
        testDateEnd: '',
        testBasis: ''
      },
      groupIds: [],
      testerIds: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tableModal')
    }
  },
  methods: {
    // 选择科室返回
    _groupResult(data) {
      this.groupIds = data
      // 查询科室下的人员
      if (data.length === 0) {
        this.testerIds = []
      }
      this.$refs.userModal._openUserByGroup(data)
    },
    // 选择人员返回
    _userResult(data) {
      this.testerIds = data
    },
    _dateChange(data) {
      this.formObj.testDateBegin = data[0]
      this.formObj.testDateEnd = data[1]
    },
    _open(formObj) {
      // 显示科室信息
      this.groupIds = formObj.groupIds
      this.$refs.groupModal._open(this.groupIds)
      // 显示人员信息
      this.testerIds = formObj.testerIds
      this.$refs.userModal._openUserByGroup(this.groupIds, this.testerIds)

      this.selectData = []
      this.formObj = this.$resetFields(this.formObj)
      /** ***********时间处理*********/
      const beginDate = formObj.beginDate ? formObj.beginDate + '-01' : ''
      const endDate = formObj.endDate ? formObj.endDate.split('-') : ''

      this.formObj.testDateBegin = beginDate || ''
      this.formObj.testDateEnd = formObj.endDate
        ? formObj.endDate + '-' + this.$getLastDay(endDate[0], endDate[1])
        : ''

      if (formObj.beginDate) {
        this.dateList = [
          new Date(this.formObj.testDateBegin),
          new Date(this.formObj.testDateEnd)
        ]
      } else {
        this.dateList = []
      }
      /** ***********时间处理*********/
      this.showModal = true
      this.$nextTick(function() {
        // this._page()
      })
    },
    _page() {
      this.$refs.pageTable._page(
        'search-personal-detail',
        'FoodItem/yearTestDetail',
        this.$serializeFormSearch(this.formObj)
      )
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.FoodItem.page
          break
        case 'selectData':
          this.selectData = data
          break
        case 'changeSize':
          // this._page()
          break
      }
    },
    _btnClick(msg) {
      switch (msg) {
        case '导出':
          if (this.getPage.records.length === 0) {
            this.$Message.warning('暂无数据，不可导出！')
          } else {
            this._export()
          }
          break
      }
    },
    /** *********************************************导出*****************************************/
    _export() {
      if (this.selectData.length === 0) {
        // 导出全部数据
        this._exportOk(this.getPage.total)
      } else {
        // 只导出选中的数据
        this._exportOk(this.selectData.length)
      }
    },
    _exportOk(length) {
      this.$Message.destroy()
      this.$Modal.confirm({
        title: '提示',
        content: '确定导出这' + length + '条数据？',
        onOk: () => {
          if (this.selectData.length > 0) {
            this.$exportExcel(
              'groupStatisticTable',
              '项目统计信息',
              this.pageColumns,
              this.selectData
            )
          } else {
            this.$Message.loading({
              content: '正在处理，请稍后...',
              duration: 0
            })
            this.$store
              .dispatch('EnvItem/yearTestDetail', this._searchParams())
              .then(() => {
                const result = this.$store.state.EnvItem.page.records
                this.$exportExcel(
                  'groupStatisticTable',
                  '项目统计信息',
                  this.pageColumns,
                  result
                )
              })
          }
        }
      })
    },
    // 参数
    _searchParams() {
      const data = this.$serialize('search-personal-detail')
      Object.assign(data, this.formObj)
      return this.$extend(data, { page: 1, rows: this.$exportRows() })
    }
    /** *********************************************导出*****************************************/
  }
}
</script>
