<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="委托日期:">
                  <DatePicker v-model="entrustDate" :editable="false" :clearable="false" type="year" style="width:90px"
                              @on-change="_dateChange"></DatePicker>
                </Form-item>
              </Form>
            </div>
            <div class="clear"></div>
          </Col>
          <!--内容-->
          <Col span="24">
            <Row :gutter="16">
              <Col span="16" style="margin-bottom: 10px">
                <!--bar-->
                <YearContractBar ref="barModal"></YearContractBar>
              </Col>
              <Col span="8">
                <!--bar-->
                <YearContractPie ref="pieModal"></YearContractPie>
              </Col>
              <Col span="24">
                <!--table-->
                <YearContractTable ref="tableModal"></YearContractTable>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { meterSample } from '../../../api'
import YearContractTable from './YearContractTable'
import YearContractBar from './YearContractBar'
import YearContractPie from './YearContractPie'

export default {
  components: {
    YearContractTable,
    YearContractBar,
    YearContractPie
  },
  data() {
    return {
      entrustDate: new Date(),
      formObj: {}
    }
  },
  mounted() {
    this._getData(this.entrustDate.getFullYear())
  },
  methods: {
    _getData: async function(data) {
      this.formObj.entrustDate = data
      const result = await meterSample.pageAnnualEntrustStatistics(this.formObj)
      if (result) {
        this._open(result)
      }
    },
    _open(data) {
      this.$refs.tableModal._openTable(this.entrustDate.getFullYear(), data)
      this.$refs.barModal._openBar(this.entrustDate.getFullYear(), data)
      this.$refs.pieModal._openPie(this.entrustDate.getFullYear(), data)
    },
    _dateChange(data) {
      this._getData(data)
    },
    _export() {
      this.$refs.tableModal._exportSampleForm()
    }
  }
}
</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>
