<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 class="search-item" label="人员:">-->
<!--                  <AutoCompletes :value="tester" :blur="true" :down-data="testerData" show-key="realname"-->
<!--                                 placeholder="请选择人员" @on-result-change="_testerChange"-->
<!--                  ></AutoCompletes>-->
<!--                </Form-item>-->
<!--                <Form-item class="search-item" label="服务类型:">-->
<!--                  <Select v-model="serviceType" placeholder="请选择服务类型" clearable>-->
<!--                    <Option v-for="item in serviceTypeList" :value="item.name" :key="item.name">{{ item.name }}</Option>-->
<!--                  </Select>-->
<!--                </Form-item>-->
                <Form-item label="委托日期:">
                  <el-date-picker
                    v-model="queryDate"
                    type="monthrange"
                    range-separator="-"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    size="small"
                    value-format="yyyy-MM"
                    @change="_dateChange">
                  </el-date-picker>
                </Form-item>
                <Form-item class="search-btn">
                  <Button type="primary" class="width-80" @click="_getData">搜索</Button>
                </Form-item>
              </Form>
            </div>
            <div class="clear"></div>
          </Col>
          <!--内容-->
          <Col span="24">
            <Row :gutter="16">
              <Col span="14">
                <ElTableNoPage id="table-year" ref="pageTable" :table-height="tableHeight"
                               :get-page="getPage" hide-checkbox @on-result-change="_tableResultChange" >
                  <el-table-column fixed type="index" label="序号" width="100">
                  </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="200"
                    :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>
                </ElTableNoPage>
              </Col>
              <Col span="10">
                <!--pie-->
                <UserTestPie ref="testPieModal"></UserTestPie>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
    <!--检测项目详情-->
    <Detail ref="detailModal"></Detail>
  </div>
</template>

<script>
import { meterSample } from '../../../api'
import UserTestPie from './UserTestPie'
import Detail from './Detail'

export default {
  components: {
    UserTestPie,
    Detail
  },
  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: 'tester', detail: true },
        { title: '样品量', key: 'total' },
        { title: '样品占比(%)', key: 'ratio' }
      ],
      groupData: [],
      // getPage: [
      //   {
      //     tester: 'wwd',
      //     total: '12',
      //     ratio: '10%',
      //     price: '3500'
      //   },
      //   {
      //     tester: 'wwd',
      //     total: '12',
      //     ratio: '10%',
      //     price: '3500'
      //   },
      //   {
      //     tester: 'wwd',
      //     total: '12',
      //     ratio: '10%',
      //     price: '3500'
      //   }
      // ],
      getPage: {
        records: []
      },
      tempData: {
        groupId: '',
        groupName: '',
        beginDate: date,
        endDate: nextMonth
      },
      formObj: {
        edateBegin: undefined,
        edateEnd: undefined
      },
      testerData: [],
      queryDate: [date, nextMonth],
      serviceType: '',
      serviceTypeList: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('search')
    }
  },
  mounted() {
    this.$refs.pageTable._hideLoading()
    // this._contHide()
    // this._getUserGroup()
    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 meterSample.pagePersonalTaskStatistics(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)
      // this.$refs.detailModal._open(obj)
    },
    _dateChange(data) {
      if (data) {
        this.tempData.beginDate = data[0]
        this.tempData.endDate = data[1]
        this.formObj.edateBegin = data[0]
        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.beginDate = ''
        this.tempData.endDate = ''
        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._page()
          break
      }
    },
    /** *********************************导出-begin*********************************************/
    _exportSampleForm() {
      let result = []
      this.$store
        .dispatch('FoodItem/pagePersonalTask', this._searchParams())
        .then(() => {
          result = this.$store.state.FoodItem.page.records
          this.$Modal.confirm({
            title: '提示',
            content: '确定导出全部数据？',
            onOk: () => {
              this.$exportExcel(
                'personalTestNum',
                '个人检测量统计表',
                this.pageColumns,
                result
              )
            }
          })
        })
    },
    // 参数
    _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 })
    },
    /** *********************************导出样品台账-end*********************************************/
    _getUserGroup() {
      this.$store.dispatch('LmsUserGroup/list').then(() => {
        this.groupData = this.$store.state.LmsUserGroup.list
      })
    },
    // 主检人&检测科室
    _groupChange(data) {
      if (data) {
        this.groupName = data.label
        this.groupId = data.value
        this.testerId = ''
        this.tester = ''
        this._getUserList(data.value)
      }
    },
    _getUserList(groupId, realname) {
      const data = { page: 1, rows: 50 }
      if (groupId) {
        Object.assign(data, { groupId: groupId })
      }
      if (realname) {
        Object.assign(data, { realname: realname })
      }
      this.$store.dispatch('LmsUserGroup/getUserByGroupId', data).then(() => {
        this.testerData = this.$store.state.LmsUserGroup.userPage.records
      })
    },
    _testerChange(msg, data) {
      switch (msg) {
        case 'select':
          this.tester = data.realname
          this.testerId = data.userId
          break
        case 'blur':
          this.tester = ''
          break
        case 'query':
          this.tester = data.realname
          this._getUserList('', data.realname)
          break
      }
    }
  }
}
</script>
