<template>
  <div class="app-container">
    <div class="container-custom">
      <h2 class="custom-h2">投入品需求概况</h2>
      <div ref="searchBarRef" class="search-box">
        <div class="search-bar">
          <div class="search-bar-left">
            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
              <el-form-item label="" style="margin-left: -15px">
                <AreaCascader :region-code="formInline.regionCode" :grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="statistics-cont">
        <el-row :gutter="20">
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">产出品产量数据</p>
            <customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
          </el-col>
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">肥料需求数据</p>
            <customEchartPie ref="pie1" :chart-data="chartData2" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
          </el-col>
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">农药需求数据</p>
            <customEchartPie ref="pie1" :chart-data="chartData3" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
          </el-col>
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">种植种苗需求排名前十</p>
            <customEchartBar ref="pie1" :chart-data="chartData4" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
          </el-col>
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">肥料需求排名前十</p>
            <customEchartBar ref="pie1" :chart-data="chartData5" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
          </el-col>
          <el-col :span="8" class="statistics-echart-box">
            <p class="statistics-echart-title">农药 需求排名前十</p>
            <customEchartBar ref="pie1" :chart-data="chartData6" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import customEchartPie from '@/components/custom-echart-pie';
import customEchartBar from '@/components/custom-echart-bar';
import { ElMessage } from 'element-plus';

// 查询条件
const formInline = reactive({
  regionCode: '',
  regionName: '',
  gridId: '',
  gridName: '',
});
const searchForm = ref(null);

const chartData1 = ref([
  { value: 1048, name: '蔬菜类' },
  { value: 735, name: '水果类' },
  { value: 484, name: '药材类' },
]);
const chartData2 = ref([
  { value: 1048, name: '磷肥' },
  { value: 735, name: '钾肥' },
  { value: 484, name: '复合肥' },
  { value: 563, name: '微量元素肥' },
  { value: 734, name: '氮肥' },
]);
const chartData3 = ref([
  { value: 1048, name: '杀虫剂' },
  { value: 735, name: '植物增长调节剂' },
  { value: 484, name: '除草剂' },
  { value: 343, name: '杀菌剂' },
]);
// 此处数据要大的在下，展示出来是按照这个数据的倒序展示的
const chartData4 = ref([
  { value: 30.57, name: '凤梨' },
  { value: 44.43, name: '铁皮石斛' },
  { value: 52.87, name: '芒果' },
  { value: 65.43, name: '榴莲' },
  { value: 74.54, name: '香蕉' },
  { value: 85.88, name: '苦瓜' },
  { value: 93.669, name: '丝瓜' },
  { value: 103.67, name: '小米椒' },
  { value: 118.98, name: '圆茄' },
  { value: 127.65, name: '黄皮甘蔗' },
]);
const chartData5 = ref([
  { value: 33.57, name: '氮化镓' },
  { value: 44.43, name: '磷酸二铵' },
  { value: 58.87, name: '磷酸一铵' },
  { value: 69.43, name: '硝酸钙' },
  { value: 74.54, name: '硝酸钠' },
  { value: 87.88, name: '硝酸铵' },
  { value: 98.669, name: '碳酸氪铵' },
  { value: 109.67, name: '硫酸钾' },
  { value: 111.98, name: '磷酸二氢钾' },
  { value: 120.65, name: '尿素' },
]);
const chartData6 = ref([
  { value: 34.57, name: '三氟吡啶腋' },
  { value: 47.43, name: '氯虫苯甲酰铵' },
  { value: 52.87, name: '高效氨氟氰菊酯' },
  { value: 69.43, name: '草甘辫铵盐' },
  { value: 75.54, name: '草铵瞵硝磺草酮' },
  { value: 83.88, name: '螨双醚' },
  { value: 97.669, name: '氟吡菌酰腋' },
  { value: 102.67, name: '芸苔素' },
  { value: 119.98, name: '赤酶素' },
  { value: 125.65, name: '氯吡苯腺' },
]);
const option = reactive({
  tooltip: {
    formatter: '{b} ({c} 吨)',
  },
});
const option2 = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow', // 阴影指示器
    },
    formatter: '{b}: {c} 吨', // 提示框格式
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true, // 包含坐标轴标签
  },
  xAxis: {
    type: 'value',
    name: '吨',
    axisLabel: {
      formatter: '{value} 吨',
    },
  },
  yAxis: {
    type: 'category',
    data: ['凤梨', '铁皮石斛', '芒果', '榴莲', '香蕉', '苦瓜', '丝瓜', '小米椒', '圆茄', '黄皮甘蔗'],
    axisLabel: {
      interval: 0,
    },
  },
});
const onSubmit = () => {
  console.log(formInline);
};

onMounted(() => {
  // onSubmit();
});
</script>
<style lang="scss" scoped></style>
