<template>
  <div>
    <div class="layout-content-padding">
      <div class="layout-content-main">
        <Row style="margin-top: 10px;">
          <!--查询条件-->
          <Col span="24">
          <div class="fl">
            <Form id="search-form" :label-width="100" inline onsubmit="return false">
              <label class="label-sign"></label>
              <Form-item label="复核通过时间:">
                <el-date-picker
                  v-model="queryDate"
                  @change="_dateChange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  size="small"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </Form-item>
              <Form-item label="检测项目:">
                <Input v-model="formObj.name" @on-enter="_search" clearable placeholder="请输入检测项目" style="width:100%"/>
              </Form-item>
              <Form-item class="search-btn">
                <Button @click="_getData" type="primary" class="width-80">
                  搜索
                </Button>
              </Form-item>
            </Form>
          </div>
          <div class="clear"></div>
          </Col>
          <!--内容-->
          <Col span="24">
            <PTVXETable ref="pageTable" :table-height="tableHeight" :form-id="formId" :loading="true"
                        :get-page="getPage" @on-result-change="_tableResultChange">
              <vxe-table-column
                v-for="item in pageColumns"
                :key="item.key"
                :field="item.key"
                :title="item.title"
                :min-width="item.width?item.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>
                  <div v-else-if="item.status">
                    <span v-if="scope.row[item.key].display === '委托单评审驳回'" style="color: red;">{{ scope.row[item.key] === undefined ? '': scope.row[item.key].display }}</span>
                    <span v-else>{{ scope.row[item.key] === undefined ? '': scope.row[item.key].display }}</span>
                  </div>
                  <span v-else-if="item.key==='backReasons'" style="color: red">{{scope.row[item.key]}}</span>
                  <span v-else>{{scope.row[item.key]}}</span>
                </template>
              </vxe-table-column>
            </PTVXETable>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/named
import { soilStatistics } from '../../../api'

export default {
  components: {},
  data() {
    const date = this.$dateformat(new Date(), 'yyyy-mm-dd')
    const nextMonth = this.$dateformat(
      new Date().setMonth(new Date().getMonth() + 1),
      'yyyy-mm-dd'
    )
    return {
      formId: 'TestItem',
      beginDate: new Date(),
      endDate: new Date(),
      groupId: '',
      groupName: '',
      tester: '',
      testerId: '',
      pageColumns: [
        { title: '检测项目', key: 'name', width: 100 },
        { title: '数量', key: 'itemCount', width: 110 }
      ],
      groupData: [],
      getPage: {},
      tempData: {
        groupId: '',
        groupName: '',
        beginDate: date,
        endDate: nextMonth
      },
      formObj: {
        checkTimeBeg: undefined,
        checkTimeEnd: undefined
      },
      testerData: [],
      queryDate: [date, nextMonth],
      serviceType: '',
      serviceTypeList: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('search')
    }
  },
  mounted() {
    this.$refs.pageTable._hideLoading()
    const str = this.tempData.endDate
    const arr = str.split('-')
    const lastday = this.mGetDate(arr[0], arr[1], arr[2]).getTime() - 1
    this.formObj.checkTimeBeg = this.tempData.beginDate
    this.formObj.checkTimeEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
    this._getData()
  },
  methods: {
    _dateChange(data) {
      if (data) {
        this.tempData.beginDate = data[0]
        this.tempData.endDate = data[1]
        this.formObj.checkTimeBeg = data[0]
        // this.formObj.checkTimeEnd = data[1]
        const str = data[1]
        const arr = str.split('-')
        const lastday = this.mGetDate(arr[0], arr[1], arr[2]).getTime() - 1
        this.formObj.checkTimeEnd = this.$dateformat(
          lastday,
          'yyyy-mm-dd HH:MM:ss'
        )
      } else {
        this.tempData.beginDate = ''
        this.tempData.endDate = ''
        this.formObj.checkTimeBeg = undefined
        this.formObj.checkTimeEnd = undefined
      }
    },
    mGetDate(year, month, day) {
      const d = new Date(year, month - 1, day, 24)
      return d
    },
    // 服务类型
    _getData: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilStatistics.pageStatistics(
        this.$serializeFormSearch(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    },
    // 检测项目详情
    _contHide() {
      this.tempData.beginDate = this.$dateformat(new Date(), 'yyyy-mm')
      this.tempData.endDate = this.$dateformat(new Date(), 'yyyy-mm')
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _search() {
      this._formSearch()
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'changeSize':
          this._getData()
          break
      }
    }
    // 参数
  }
}
</script>
