<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="应出证书日期:">
                  <!--<DatePicker type="month" style="width:90px" v-model="startDate" @on-change="_beginDateChange"-->
                  <!--:editable="false"></DatePicker>-->
                  <!--<label class="line-color">——</label>-->
                  <!--<DatePicker type="month" style="width:90px" v-model="endDate" :editable="false"-->
                  <!--@on-change="_endDateChange"></DatePicker>-->
                  <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="marginLeft-70" style="margin-left: -60px;">
                  <Button @click="_getData" type="primary" class="width-80">搜索</Button>
                </Form-item>
              </Form>
            </div>
            <div class="clear"></div>
          </Col>
          <!--内容-->
          <Col span="24" style="margin-bottom: 10px">
            <Row :gutter="16">
              <Col span="10">
                <!--pie-->
                <ReportTimelyPie ref="contractPieModal" @on-result-change="_pieResult"></ReportTimelyPie>
              </Col>
              <Col span="14">
                <!--table-->
                <ReportTimelyTable ref="contractTableModal"></ReportTimelyTable>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { meterSample } from '../../../api'
import ReportTimelyTable from './ReportTimelyTable'
import ReportTimelyPie from './ReportTimelyPie'

export default {
  components: {
    ReportTimelyTable,
    ReportTimelyPie
  },
  data() {
    const date = this.$dateformat(new Date(), 'yyyy-mm')
    const nextMonth = this.$dateformat(
      new Date().setMonth(new Date().getMonth() + 1),
      'yyyy-mm'
    )
    return {
      forObject: {
        edateBegin: undefined,
        edateEnd: undefined
      },
      tempData: {
        beginDate: date,
        endDate: nextMonth
      },
      pieData: {
        beginDate: date,
        endDate: date
      },
      queryDate: [date, nextMonth]
    }
  },
  mounted() {
    const str = this.tempData.endDate
    const arr = str.split('-')
    const lastday = this.mGetDate(arr[0], arr[1]).getTime() - 1
    this.forObject.edateBegin = this.tempData.beginDate
    // this.forObject.edateEnd = this.tempData.endDate
    this.forObject.edateEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
    this._getData()
    // this._search();
  },
  methods: {
    mGetDate(year, month) {
      const d = new Date(year, month, 1)
      return d
    },
    _dateChange(data) {
      if (data) {
        this.tempData.beginDate = data[0]
        this.tempData.endDate = data[1]
        this.pieData.beginDate = data[0]
        this.pieData.endDate = data[1]
        this.forObject.edateBegin = data[0]
        this.forObject.edateEnd = data[1]
        const str = data[1]
        const arr = str.split('-')
        const lastday = this.mGetDate(arr[0], arr[1]).getTime() - 1
        this.forObject.edateEnd = this.$dateformat(
          lastday,
          'yyyy-mm-dd HH:MM:ss'
        )
      } else {
        this.tempData.beginDate = ''
        this.tempData.endDate = ''
        this.pieData.beginDate = ''
        this.pieData.endDate = ''
        this.forObject.edateBegin = undefined
        this.forObject.edateEnd = undefined
      }
      this.$refs.contractTableModal._changeDate(this.tempData)
    },
    _pieResult(res) {
      this.$refs.contractTableModal._pieOpen(res)
    },
    _getData: async function() {
      console.log('选择时间后的请求', this.forObject)
      const result = await meterSample.pageCertificateRateStatistics(
        this.forObject
      )
      if (result) {
        console.log('result=>', result)
        this._open(result)
      }
      this._search()
    },

    _open(result) {
      this.$refs.contractPieModal._openPie(result)
    },
    _search() {
      this.$refs.contractTableModal._searchTable({
        beginDate: this.forObject.edateBegin,
        endDate: this.forObject.edateEnd
      })
      // this.$refs.contractPieModal._searchPie({
      //   beginDate: this.pieData.beginDate,
      //   endDate: this.pieData.endDate
      // })
    },
    _export() {
      this.$refs.contractTableModal._exportSampleForm()
    }
  }
}
</script>
