<template>
  <div class="content-layout">
    <el-form :model="queryForm" inline v-form>
      <ht-form-item label="所属企业">
        <ht-org-selector-input
          v-model="queryForm.orgname"
          display-style="block"
          :config="{ id: 'queryForm.orgId' }"
          append-to-body
        ></ht-org-selector-input>
      </ht-form-item>
      <el-form-item label="所属划区">
        <el-select v-model="queryForm.ssqhs" multiple collapse-tags placeholder="请选择">
          <el-option
            v-for="item in hqOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计指标">
        <el-select v-model="queryForm.code" placeholder="请选择">
          <el-option
            v-for="item in tjzbOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="handleSearch">统计</el-button>
        <el-button icon="el-icon-refresh-left" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="chartContiner">
      <PieChart chart-id="chartOne" :data="chartDataOne" class="pieBox" :tiplabel="'土地面积'"></PieChart>
    </div>
  </div>
</template>
<script>

import PieChart from "@/views/components/PieChart.vue";
import {getqhList, getZdList, getzdtjList} from "@/api/tongjiInfo";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      queryForm: {
        orgId: '',
        orgname: '',
        ssqhs: [],
        code: ''
      },
      qyOptions: [],
      hqOptions: [],
      tjzbOptions: [],
      chartDataOne: [],
    }
  },
  created() {
    this.resetForm()
  },
  async mounted() {
    await this.fentchData()
    this.getChartData()
  },
  methods: {
    async fentchData() {
      await this.getqhOptions()
      await this.getZdtjzbOptions()
    },
    resetForm() {
      this.queryForm = {
        orgId: '',
        orgname: '',
        ssqhs: [],
        code: this.tjzbOptions.length > 0 ? this.tjzbOptions[0].value : ''
      }
    },
    //宗地统计指标下拉
    async getZdtjzbOptions() {
      await getzdtjList([]).then(res => {
        this.tjzbOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.VALUE,
            value: item.CODE
          }
        }) : []

        if (this.tjzbOptions.length > 0) {
          this.queryForm.code = this.tjzbOptions[0].value
        }
      })
    },
    //获取所属区划
    async getqhOptions() {
      let postData = {
        pageBean: {page: 1, pageSize: 999, showTotal: true, total: 0}
      }
      await getqhList(postData).then(res => {
        this.hqOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    getChartData() {
      let querydata = {}
      if (this.queryForm.orgId) {
        querydata.qyids = this.queryForm.orgId
      }
      if (this.queryForm.ssqhs.length > 0) {
        querydata.ssqhs = this.queryForm.ssqhs.join(',')
      }
      if (this.queryForm.code) {
        querydata.code = this.queryForm.code
      }
      getZdList(querydata).then(res => {
          this.chartDataOne = res.list || []
      }).catch((e) => {
        console.log("e",e)
      }).finally(() => {

      })
    },
    //统计
    handleSearch(){
      this.getChartData()
    },
    //重置
    handleReset(){
      this.resetForm()
      this.getChartData()
    },
  }
}
</script>

<style lang="scss" scoped>
@mixin background-color {
  background-color: $base-color-white;
}

.content-layout {
  height: 100%;
  //overflow-y: auto;
  position: relative;
  box-sizing: border-box;
  padding: 16px;
  @include background-color;
}
.chartContiner {
  width: 100%;
  height: calc(100% - 80px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow-y: auto;
}
.pieBox {
  width: 100%;
  height: 100%;
}
</style>
