<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="70" inline onsubmit="return false">
              <label class="label-sign"></label>
              <Form-item label="委托日期:">
                <el-date-picker
                  v-model="queryDate"
                  @change="_dateChange"
                  type="monthrange"
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  size="small"
                  value-format="yyyy-MM"
                >
                </el-date-picker>
              </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">
          <Row :gutter="16">
            <Col span="10">
            <element-table
              id="table-year"
              ref="pageTable"
              :table-height="tableHeight"
              :get-page="getPage"
              @on-result-change="_tableResultChange"
              :hide-page="true"
              hide-checkbox
            >
              <el-table-column fixed type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column
                v-for="item in pageColumns"
                :key="item.key"
                :prop="item.key"
                :label="item.title"
                :width="item.width"
                :min-width="100"
                :fixed="item.fixed?item.fixed:undefined"
              >
                <template slot-scope="scope">
                  <div v-if="item.detail">
                    <a @click.stop="_detailModal(scope.row)">{{ scope.row[item.key] }}</a>
                  </div>
                  <span v-else>{{ scope.row[item.key] }}</span>
                </template>
              </el-table-column>
            </element-table>
            </Col>
            <Col span="14">
            <!--pie-->
            <UserTestPie ref="testPieModal"></UserTestPie>
            </Col>
          </Row>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    UserTestPie
  },
  data() {
    const date = this.$dateformat(new Date(), 'yyyy-mm')
    const nextMonth = this.$dateformat(
      new Date().setMonth(new Date().getMonth() + 1),
      'yyyy-mm'
    )
    return {
      beginDate: new Date(),
      endDate: new Date(),
      groupId: '',
      groupName: '',
      tester: '',
      testerId: '',
      pageColumns: [
        { title: '委托单位', key: 'client', detail: true, width: 230 },
        { title: '委托数量', key: 'quantity', width: 80 },
        { title: '委托额度', key: 'fee', width: 80 }
      ],
      groupData: [],
      getPage: {
        records: []
      },
      formObj: {
        edateBegin: undefined,
        edateEnd: undefined
      },
      tempData: {
        groupId: '',
        groupName: '',
        beginDate: date,
        endDate: nextMonth
      },
      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]).getTime() - 1
    this.formObj.edateBegin = this.tempData.beginDate
    this.formObj.edateEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
    this._getData()
    // this._getServiceTypeList()
  },
  methods: {
    mGetDate(year, month) {
      const d = new Date(year, month, 1)
      return d
    },
    // 服务类型
    _getData: async function() {
      const result = await soilStatistics.pageCustomer(this.formObj)
      if (result) {
        this.getPage.records = result
        this.$refs.testPieModal._openPie(this.getPage.records)
      }
    },
    // 检测项目详情
    _detailModal(data) {
      const obj = {
        testerIds: [data.testerId],
        groupIds: this.groupIds,
        beginDate: this.tempData.beginDate,
        endDate: this.tempData.endDate
      }
      console.log(obj)
    },
    _dateChange(data) {
      if (data) {
        this.formObj.edateBegin = data[0]
        this.formObj.edateEnd = data[1]
        const str = data[1]
        const arr = str.split('-')
        const lastday = this.mGetDate(arr[0], arr[1]).getTime() - 1
        this.formObj.edateEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
      } else {
        this.tempData.edateBegin = ''
        this.tempData.edateEnd = ''
        this.formObj.edateBegin = undefined
        this.formObj.edateEnd = undefined
      }
    },
    _contHide() {
      this.tempData.beginDate = this.$dateformat(new Date(), 'yyyy-mm')
      this.tempData.endDate = this.$dateformat(new Date(), 'yyyy-mm')
      // this._page()
      // this._getById()
    },
    _page() {
      const data = {}
      if (this.groupId) {
        data.groupId = this.groupId
      }
      if (this.tester && this.testerId) {
        data.testerId = this.testerId
      } else {
        this.testerId = ''
      }
      if (this.tempData.beginDate) {
        data.beginDate = this.tempData.beginDate
      }
      if (this.tempData.endDate) {
        data.endDate = this.tempData.endDate
      }
      if (this.serviceType) {
        data.serviceType = this.serviceType
      }
      this.$refs.pageTable._page(
        'search-form',
        'FoodItem/pagePersonalTask',
        data
      )
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _search() {
      this.tempData.groupId = this.groupId
      this.tempData.groupName = this.groupId ? this.groupName : ''
      this.tempData.serviceType = this.serviceType ? this.serviceType : ''
      this.$refs.testPieModal._openPie(this.tempData)
      this._formSearch()
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'changeSize':
          this._getData()
          break
      }
    },
    // 参数
    _searchParams() {
      const data = {}
      if (this.groupId) {
        data.groupId = this.groupId
      }
      if (this.tester && this.testerId) {
        data.testerId = this.testerId
      } else {
        this.testerId = ''
      }
      if (this.tempData.beginDate) {
        data.beginDate = this.tempData.beginDate
      }
      if (this.tempData.endDate) {
        data.endDate = this.tempData.endDate
      }
      return this.$extend(data, { page: 1, rows: 5000 })
    }
  }
}
</script>
<style>
.border-chart-color {
  border: 1px solid #e9eaec;
}
.chartTitle {
  height: 32px;
  line-height: 32px;
  background: #f8f8f9;
  padding-left: 15px;
  border-bottom: 1px solid #e9eaec;
}
.chartTitle label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
</style>
