<template>
  <div>
    <div v-if="this.loading==true">
      <a-spin tip="Loading...">
        <div class="spin-content">
        </div>
      </a-spin>
    </div>
    <div v-if="this.loading==false">
      <a-row>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <PieData :result-data="pieResultData" :title-text="[title=='' ? '省属企业'  : title ]+'土地地块数量获取方式占比'"></PieData>
          </a-card>

        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <j-vxe-table
              :columns="columns"
              :data-source="data"
            >
              <a slot="name" slot-scope="text">{{ text }}</a>

            </j-vxe-table>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <PieData :result-data="pieAreaResultData" :title-text="[title=='' ? '省属企业'  : title ]+'土地地块面积获取方式占比'"></PieData>

          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <j-vxe-table
              :columns="areaColumns"
              :data-source="areaData"

            >
              <a slot="name" slot-scope="text">{{ text }}</a>

            </j-vxe-table>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <DoughnutData :result-data="this.DoughnutResultData" :pie-color="color1" :title-text="[title=='' ? '省属企业'  : title ]+'权证登记比例情况'"
            ></DoughnutData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <j-vxe-table
              :columns="registerColumns"
              :data-source="registerData"

            >
              <a slot="name" slot-scope="text">{{ text }}</a>

            </j-vxe-table>
          </a-card>
        </a-col>

        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <DoughnutData :result-data="this.doughnutByXzResultData" :pie-color="color1" :title-text="[title=='' ? '省属企业'  : title ]+'土地使用现状占比'"
            ></DoughnutData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <j-vxe-table
              :columns="registerColumns"
              :data-source="xzData"

            >
              <a slot="name" slot-scope="text">{{ text }}</a>
            </j-vxe-table>
          </a-card>
        </a-col>

        <a-col :sm="24" :md="12" :xl="18">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <BarData :result-x-data="this.barBysjytResultData" :dw="'亩'" :title-text="[title=='' ? '省属企业'  : title ]+'土地实际用途情况'" :seriesName="'地块数量'"></BarData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <j-vxe-table
              :columns="sjytDataColumns"
              :data-source="sjytData"
              :height="300"
            >
              <a slot="name" slot-scope="text">{{ text }}</a>
            </j-vxe-table>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="18">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
          <BarData :result-x-data="this.barResultData" :dw="'亩'" :title-text="[title=='' ? '省属企业'  : title ]+'实际占用面积'" :seriesName="'地块面积（亩）'"></BarData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
                        <j-vxe-table
                          :columns="xqDataColumns"
                          :data-source="xqData"
                          :height="300"
                        >
                          <a slot="name" slot-scope="text">{{ text }}</a>
                        </j-vxe-table>
          </a-card>
        </a-col>
      </a-row>

    </div>
  </div>

</template>

<script>
import BarMultid from "@/components/chart/BarMultid";
import Bar from "@/components/chart/Bar";
import BarData from "@views/tj/compoent/BarData";
import Pie from "@/components/chart/Pie";
import DoughnutData from "@views/tj/compoent/DoughnutData";
import PieData from "@views/tj/compoent/PieData";
import {JVXETypes} from '@/components/jeecg/JVxeTable';

export default {
  name: "listTab",
  data() {
    return {
      pieData: {},
      number: 0,
      pieResultData: [],
      DoughnutData: [],
      DoughnutResultData: [],
      color1: ['#8c42a1', '#4fa5e7'],
      registerData: [],

      columns: [
        {
          title: '获取方式',
          dataIndex: 'type',
          key: 'type',

        },
        {
          title: '地块数量',
          dataIndex: 'number',
          key: 'number',
          type: JVXETypes.inputNumber,
          statistics: ['sum']
        },

      ],
      sjytDataColumns:[
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '数量',
          dataIndex: 'number',
          key: 'number',
          type: JVXETypes.inputNumber,
          statistics: ['sum']
        },
      ],
      areaColumns: [
        {
          title: '获取方式',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '地块面积（亩）',
          dataIndex: 'number',
          key: 'number',
          type: JVXETypes.inputNumber,
          statistics: ['sum']
        },
      ],
      xqDataColumns:[
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '面积（亩）',
          dataIndex: 'number',
          key: 'number',
          type: JVXETypes.inputNumber,
          statistics: ['sum']
        },
      ],
      registerColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '数量',
          dataIndex: 'number',
          key: 'number',
          type: JVXETypes.inputNumber,
          statistics: ['sum']
        },
      ],
      data: [],
      barData: [],
      barResultData: {},
      areaData: [],
      sjytName:[],
      sjytValue:[],
      va:[],
      nan:[],
      xzData: [],
      xqData: [],
      pieAreaResultData: [],
      doughnutByXzResultData: [],
      barBysjytResultData:{},
      sjytData:[]
    }
  },
  components: {
    PieData,
    Bar,
    Pie,
    BarData,
    BarMultid,
    DoughnutData,

  },
  watch: {

    resultData() {
      this.$nextTick(function () {
        this.pieData = this.resultData[0]
        this.barData = this.resultData[1]
        this.doughnutByXzData = this.resultData[2]
        this.pieArea = this.resultData[3]
        this.DoughnutData = this.resultData[4]
        this.barBySjyt = this.resultData[5]
        for (let key in this.pieData) {
          this.pieResultData.push({name: key.toString(), value: parseInt(this.pieData[key])})
          this.data.push({type: key.toString(), number: parseInt(this.pieData[key])})
        }
        for (let key in this.pieArea) {
          this.pieAreaResultData.push({name: key.toString(), value: this.pieArea[key]})
          this.areaData.push({type: key.toString(), number: this.pieArea[key].toFixed(2)})
        }
        for (let key in this.DoughnutData) {
          if (key != '证书') {
            this.number = this.number + this.DoughnutData[key]
          }
          this.registerData.push({type: key.toString(), number: this.DoughnutData[key]})
        }
        this.DoughnutResultData.push({name: '有证', value: this.DoughnutData['证书']},
          {name: '无证', value: this.number})

        for (let key in this.doughnutByXzData) {
          this.doughnutByXzResultData.push({name: key.toString(), value: this.doughnutByXzData[key]})
          this.xzData.push({type: key.toString(), number: this.doughnutByXzData[key].toFixed(2)})
        }
        for (let key in this.barData) {
          this.nan.push(key.toString())
          this.va.push(parseFloat(this.barData[key].toFixed(2)))
          this.xqData.push({type: key.toString(), number: this.barData[key].toFixed(2)})
        }
        this.barResultData.name=this.nan;
        this.barResultData.value=this.va;

        for (let key in this.barBySjyt) {
          this.sjytName.push(key.toString())
          this.sjytValue.push(this.barBySjyt[key])
          this.sjytData.push({type: key.toString(), number: this.barBySjyt[key]})
        }
        this.barBysjytResultData.name=this.sjytName;
        this.barBysjytResultData.value=this.sjytValue;

      })
    }
  },
  mounted() {

  },
  methods: {
    getData() {

    }


  },
  props: {
    loading: {
      default: true
    },
    title:{
      default: ''
    },
    resultData: {}
  }
}
</script>

<style scoped>
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
</style>