<template>
  <el-row class="data-home-index">
    <el-col :span="6" class="left-charts">
      <div class="left-charts-item">
        <customBack top-title="全县投入品数量占比" :top-postion="'left'">
          <template #back>
            <inputsOne :data="state.data.one" />
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="产业运营平台投入品数量" :top-postion="'left'">
          <template #back>
            <inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="全县投入品使用情况" :top-postion="'left'">
          <template #back>
            <inputsThere :data="state.data.there" />
          </template>
        </customBack>
      </div>
    </el-col>
    <el-col :span="12">
      <inputsMap></inputsMap>
    </el-col>

    <el-col :span="6" class="right-charts">
      <div class="right-charts-item">
        <customBack top-title="今日投入品价格" :top-postion="'right'">
          <template #back>
            <inputsSix :data="state.data.BlackWhite" />
          </template>
        </customBack>
      </div>
      <div class="right-charts-item">
        <customBack top-title="投入品管控情况" :top-postion="'right'">
          <template #back>
            <inputsTwo :data="state.data.InputDetector" />
          </template>
        </customBack>
      </div>
      <div class="right-charts-item">
        <customBack
          top-title="产业运营平台订单统计"
          :top-postion="'right'"
          :down-title="'按日'"
          :label-field="'label'"
          :value-field="'value'"
          :down-width="'100px'"
          :options="[
            { label: '按日', value: '0' },
            { label: '按月', value: '1' },
            { label: '按季度', value: '2' },
            { label: '按年', value: '3' },
          ]"
          :is-down="true"
          command="handleCommand"
        >
          <template #back>
            <inputsFour :data="state.data.ProductEntity" />
          </template>
        </customBack>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue';
import inputsOne from './components/inputsOne.vue';
import inputsTwo from './components/inputsTwo.vue';
import inputsThere from './components/inputsThere.vue';
import inputsFour from './components/inputsFour.vue';
import inputsFive from './components/inputsFive.vue';
import inputsSix from './components/inputsSix.vue';
import inputsMap from './components/inputsMap.vue';
import { useApp } from '@/hooks';
import { sleep } from '@/utils';
import { GetInputsInfo } from '@/apis/inputs';

const app = useApp();
const fiveRef = ref(null);

const state = reactive({
  loading: false,
  data: {},
  queryCode: '',
});

// 加载
const loadData = async () => {
  state.loading = true;
  // GetInputsInfo()
  //   .then((res) => {
  //     if (res.code === 200) {
  //       state.data = res.data;
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //   });
  await sleep(500);
  state.data = {
    one: [
      {
        label: '监管机构',
        value: 88,
        unit: '家',
      },
      {
        label: '监管人员',
        value: 106,
        unit: '人',
      },
      {
        label: '村级监管员',
        value: 38,
        unit: '人',
      },
      {
        label: '农资经营单位',
        value: 27,
        unit: '家',
      },
      {
        label: '生产主体',
        value: 154,
        unit: '家',
      },
      {
        label: '检测机构',
        value: 16,
        unit: '家',
      },
    ],
    InputDetector: [{ JCFGL: 33.33, JCYPPC: 15684, zero_count: 13, JCHGL: 86.67, counts: 45 }],
    there: [
      { value: 530, name: '种子' },
      { value: 1215, name: '化肥' },
      { value: 2312, name: '农药' },
      { value: 916, name: '地膜' },
      { value: 108, name: '水' },
    ],
    ProductEntity: [
      { manufacturerCount: 2, percentage: 16.67, category: '种源企业' },
      { manufacturerCount: 5, percentage: 41.67, category: '农药厂家' },
      { manufacturerCount: 5, percentage: 41.67, category: '肥料厂家' },
    ],
    five: [
      { value: 10, name: '2020' },
      { value: 66, name: '2021' },
      { value: 100, name: '2022' },
      { value: 120, name: '2023' },
      { value: 150, name: '2024' },
      { value: 80, name: '2025' },
    ],
    BlackWhite: [
      {
        id: 43,
        dataType: '2',
        currentRating: 'r',
        comName: '灭百草',
        totalScore: '99',
        companyType: '经销商',
        belongCompany: '灭百草集团',
        ratingReason: '效果不明显',
      },
      {
        id: 42,
        dataType: '2',
        currentRating: 'r',
        comName: '欧锰化肥',
        totalScore: '99',
        companyType: '经销商',
        belongCompany: '灭百草集团',
        ratingReason: '效果不明显',
      },
      {
        id: 41,
        dataType: '2',
        currentRating: 'r',
        comName: '史丹欧化肥',
        totalScore: '99',
        companyType: '经销商',
        belongCompany: '康瑞企业',
        ratingReason: '效果不明显',
      },
      {
        id: 40,
        dataType: '2',
        currentRating: 'r',
        comName: '史丹力气化肥',
        totalScore: '99',
        companyType: '经销商',
        belongCompany: '康瑞企业',
        ratingReason: '效果不明显',
      },
      {
        id: 39,
        dataType: '2',
        currentRating: 'r',
        comName: '史丹蒙化肥',
        totalScore: '99',
        companyType: '经销商',
        belongCompany: '康瑞企业',
        ratingReason: '效果不明显',
      },
      {
        id: 38,
        dataType: '2',
        currentRating: 'r',
        comName: '史丹利化肥',
        totalScore: '99',
        companyType: '生产商',
        belongCompany: '康瑞企业',
        ratingReason: '效果不明显',
      },
      {
        id: 37,
        dataType: '2',
        currentRating: 'r',
        comName: '丹正企化肥',
        totalScore: '99',
        companyType: '生产商',
        belongCompany: '康瑞企业',
        ratingReason: '效果不明显',
      },
      {
        id: 36,
        dataType: '1',
        currentRating: 'r',
        comName: '丹正企化肥',
        totalScore: '99',
        companyType: '生产商',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 35,
        dataType: '1',
        currentRating: 'r',
        comName: '丹非化肥',
        totalScore: '99',
        companyType: '生产商',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 34,
        dataType: '1',
        currentRating: 'r',
        comName: '史丹化肥',
        totalScore: '99',
        companyType: '生产商',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 22,
        dataType: '2',
        currentRating: 'b',
        comName: '泰龙药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 23,
        dataType: '2',
        currentRating: 'b',
        comName: '泰龙药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 20,
        dataType: '2',
        currentRating: 'b',
        comName: '猪得壮',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 21,
        dataType: '2',
        currentRating: 'b',
        comName: '泰龙药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 19,
        dataType: '2',
        currentRating: 'b',
        comName: '龙飞起药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 18,
        dataType: '2',
        currentRating: 'b',
        comName: '正阳药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '正阳企业',
        ratingReason: '效果不明显',
      },
      {
        id: 16,
        dataType: '2',
        currentRating: 'b',
        comName: '九九药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '九九企业',
        ratingReason: '效果不明显',
      },
      {
        id: 17,
        dataType: '2',
        currentRating: 'b',
        comName: '蒙发利',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
      {
        id: 15,
        dataType: '2',
        currentRating: 'b',
        comName: '史丹利',
        totalScore: '22',
        companyType: '',
        belongCompany: '史丹利企业',
        ratingReason: '效果不明显',
      },
      {
        id: 13,
        dataType: '2',
        currentRating: 'b',
        comName: '玖梦药业',
        totalScore: '22',
        companyType: '',
        belongCompany: '泰富企业',
        ratingReason: '效果不明显',
      },
    ],
  };
  state.loading = false;
};

loadData();

const handleCommand = (data) => {
  state.queryCode = data.value;
  // console.info('data=', data);
  // nextTick(() => {
  //   fiveRef.value && fiveRef.value.refresData();
  // });
};
</script>
<style lang="scss" scoped>
.data-home-index {
  width: 100%;
  height: 100%;

  .left-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .left-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
  }

  .right-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .right-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
  }
}
</style>
