<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"
                  @on-change="_dateChange"
                  type="year"
                  style="width:90px"
                ></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>
// eslint-disable-next-line import/named
import { soilStatistics } 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 soilStatistics.pageAnnual(this.formObj)
      console.log('result', result)
      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>
