<template>
  <div class="container">
    <div class="index">
      <el-row :gutter="10">
        <el-col :span="8">
          <data-panel title="基地概况">
            <div class="main flex fdc">
              <el-row :gutter="10" class="flex1">
                <el-col :span="8" class="h100 flex aic"
                  ><data-box icon="el-icon-s-data" backgroundColor="#5470c6" text="基地面积(亩)" :value="baseInfo.areaCount" class="flex1"></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-finance"
                    backgroundColor="#91cc75"
                    text="种养种类(种)"
                    :value="baseInfo.germplasmCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box icon="el-icon-s-grid" backgroundColor="#fac858" text="地块数量(块)" :value="baseInfo.diCount" class="flex1"></data-box
                ></el-col>
              </el-row>
              <el-row :gutter="10" class="margin-top-10 flex1">
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-custom"
                    backgroundColor="#ee6666"
                    text="人员总数(位)"
                    :value="baseInfo.employeeCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box
                    icon="el-icon-s-claim"
                    backgroundColor="#73c0de"
                    text="种植批次(批)"
                    :value="baseInfo.batchCount"
                    class="flex1"
                  ></data-box
                ></el-col>
                <el-col :span="8" class="h100 flex aic"
                  ><data-box icon="el-icon-s-shop" backgroundColor="#3ba272" text="大棚数量(个)" :value="baseInfo.pengCount" class="flex1"></data-box
                ></el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="设备统计" more="更多设备" link="Device">
            <div class="main">
              <div ref="deviceChart" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="8">
          <data-panel title="种植批次面积" more="更多种植批次" link="Batch">
            <div class="main">
              <div ref="plantChart" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="margin-top-10">
        <el-col :span="8">
          <data-panel title="溯源统计" more="更多溯源" link="TraceRF">
            <div class="main">
              <div ref="traceChart" class="h100"></div>
            </div>
          </data-panel>
          <data-panel title="农事统计" more="更多农事" link="Task" class="margin-top-10">
            <div class="main">
              <el-row class="h100" :gutter="10">
                <el-col :md="10" class="h100"><div ref="taskChart" class="h100"></div></el-col>
                <el-col :md="7" v-for="item in taskInfo" :key="item.name" class="h50 flex fdc jcsa">
                  <data-box
                    icon="el-icon-s-promotion"
                    backgroundColor="red"
                    :text="item.name + '(条)'"
                    :value="item.value"
                    :isBorder="false"
                    :isIcon="false"
                  ></data-box>
                </el-col>
              </el-row>
            </div>
          </data-panel>
        </el-col>
        <el-col :span="16">
          <data-panel title="基地地图" more="基地地图" link="Map">
            <div class="mapMain">
              <div id="indexMap" class="h100"></div>
            </div>
          </data-panel>
        </el-col>
      </el-row>
    </div>
    <!-- 浮动选择基地 -->
    <base-select v-model="baseId" :type="2"></base-select>
  </div>
</template>

<script>
import { selectBaseInfo, selectDeviceInfo, selectBatchInfo, selectTaskInfo } from '@/api/agriculture/dataStatistics';
import { selectRecordGroupByMonth } from '@/api/trace/dataStatistics';
import { listLand } from '@/api/agriculture/land';
import { listDevice } from '@/api/iot/device';

import DataPanel from './components/DataPanel';
import DataBox from './components/DataBox';

export default {
  name: '',
  components: {
    DataPanel,
    DataBox,
  },
  data() {
    return {
      baseId: null,
      landList: [],
      deviceList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      baseInfo: {
        areaCount: 0,
        germplasmCount: 0,
        diCount: 0,
        employeeCount: 0,
        batchCount: 0,
        pengCount: 0,
      },
      taskInfo: [],
    };
  },
  watch: {
    baseId: {
      handler: function (n) {
        this.baseId = n;
        this.$nextTick(() => {
          this.initPage();
        });
      },
    },
  },
  async mounted() {
    //this.initPage();
  },
  methods: {
    /** 初始化页面 */
    async initPage() {
      this.initMap();
      await this.getBaseInfo();
      this.initDeviceChart();
      this.initBatchChart();
      this.initTraceChart();
      this.initTaskChart();
      await this.getDeviceList();
      await this.getLandList();
      this.addFeatures();
    },
    /** 初始化map */
    async initMap() {
      this.map = new this.AMap.Map('indexMap', {
        //设置地图容器id
        //pitch: 40,
        viewMode: '3D', //是否为3D地图模式
        mapStyle: 'amap://styles/802500eb9c17892dd91047988cc1ece1',
        zoom: 16, //初始化地图级别
        //center: this.$zb, //初始化地图中心点位置
        layers: [new this.AMap.TileLayer.Satellite()],
      });
      /** 添加空间 控件 */
      this.map.addControl(new this.AMap.Scale());
      //this.map.addControl(new AMap.ToolBar());
      this.map.addControl(new this.AMap.MapType());
    },
    /** 获取地块列表 */
    async getLandList() {
      const { rows } = await listLand({ baseId: this.baseId });
      this.landList = rows;
    },
    /** 获取设备列表 */
    async getDeviceList() {
      const { rows } = await listDevice({ baseId: this.baseId });
      this.deviceList = rows;
    },
    /** 地图添加覆盖 */
    addFeatures() {
      this.landList.forEach((item) => {
        let { landPath, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight, landName } = item;
        let path = landPath && landPath.split('|').map((item) => item.split(','));
        let centerPoint = this.getAreaCenter(path);
        if (path) {
          this.map.add(
            new this.AMap.Polygon({
              path,
              fillColor,
              fillOpacity,
              strokeColor,
              strokeOpacity,
              strokeWeight,
            })
          );
          this.map.add(
            new this.AMap.Text({
              position: centerPoint,
              anchor: 'center',
              text: landName,
              style: { background: 'none', border: 'none', color: '#fff' },
            })
          );
        }
      });
      this.deviceList.forEach((device) => {
        // console.log(this.baseUrl+device.imgUrl[1])
        if (device.longitude && device.latitude) {
          let marker = new this.AMap.Marker({
            icon: new this.AMap.Icon({
              image: this.baseUrl + device.imgUrl.split(',')[1],
              imageSize: new this.AMap.Size(26, 26),
            }),
            position: [device.longitude, device.latitude],
            title: device.deviceName,
            anchor: 'bottom-center',
            extData: {
              device: device,
            },
          });
          marker.on('click', ({ target }) => {
            const { deviceId, productId, isCamera } = target._opts.extData.device;
            this.$router.push({
              path: '/iot/device-view',
              query: {
                t: Date.now(),
                deviceId: deviceId,
                productId: productId,
                isCamera: isCamera,
              },
            });
          });
          this.map.add(marker);
        }
      });
      this.map.setFitView();
    },
    /** 计算地块中心点 */
    getAreaCenter(points) {
      var total = points.length;
      var X = 0,
        Y = 0,
        Z = 0;
      points.forEach((lnglat) => {
        var lng = (lnglat[0] * Math.PI) / 180;
        var lat = (lnglat[1] * Math.PI) / 180;
        var x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      var Lng = Math.atan2(Y, X);
      var Hyp = Math.sqrt(X * X + Y * Y);
      var Lat = Math.atan2(Z, Hyp);
      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
    },
    /** 设备统计图表 */
    async initDeviceChart() {
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}台(占比{d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          data: [],
        },
        series: [
          {
            name: '设备统计',
            type: 'pie',
            // radius: ["60%", "70%"],
            center: ['60%', '50%'],
            color: ['#f2ca6b', '#9eca7f', '#de6e6a', '#85bedb'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      //设备信息
      const { rows } = await selectDeviceInfo(this.baseId);
      option.legend.data = [];
      rows.forEach((item) => {
        option.legend.data.push(item.name);
      });
      option.series[0].data = rows;
      let myChart = this.$echarts.init(this.$refs.deviceChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 种植情况统计 */
    async initBatchChart() {
      let option = {
        tooltip: {
          trigger: 'axis', // 触发类型，'axis'表示坐标轴触发
          formatter: '{c}亩',
        },
        label: {
          show: true, //开启显示
          position: 'top', //在上方显示
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true, // 确保标签也被包含在计算布局中
        },
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}亩', // 为纵坐标的每个值添加"m"作为单位
          },
        },
        series: [
          {
            data: [],
            color: ['#f2ca6b', '#9eca7f', '#de6e6a', '#85bedb'],
            type: 'bar',
            barWidth: 20,
          },
        ],
      };
      const { rows } = await selectBatchInfo(this.baseId);
      option.xAxis.data = [];
      option.series[0].data = [];
      rows.forEach((item) => {
        option.xAxis.data.push(item.name);
        option.series[0].data.push(item.value);
      });
      let myChart = this.$echarts.init(this.$refs.plantChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 溯源情况统计 */
    async initTraceChart() {
      let option = {
        tooltip: {
          trigger: 'axis', // 触发类型，'axis'表示坐标轴触发
          formatter: '{c}次',
        },
        label: {
          show: true, //开启显示
          position: 'top', //在上方显示
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true, // 确保标签也被包含在计算布局中
        },
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}次', // 为纵坐标的每个值添加"m"作为单位
          },
        },
        series: [
          {
            data: [],
            color: ['#f2ca6b', '#9eca7f', '#de6e6a', '#85bedb'],
            type: 'bar',
          },
        ],
      };
      const { rows } = await selectRecordGroupByMonth(this.baseId);
      option.xAxis.data = [];
      option.series[0].data = [];
      rows.forEach((item) => {
        option.xAxis.data.push(item.name);
        option.series[0].data.push(item.value);
      });
      let myChart = this.$echarts.init(this.$refs.traceChart);
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    /** 农事任务统计 */
    async initTaskChart() {
      let option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '完成情况',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['60%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: [],
              rich: {
                a: {
                  fontSize: '30px',
                  fontWeight: 'bold',
                },
                b: {
                  color: '#666',
                  lineHeight: 40,
                },
              },
            },
            data: [],
          },
        ],
      };
      const { rows } = await selectTaskInfo(this.baseId);
      //填充数据
      option.series[0].data = rows;
      let myChart = this.$echarts.init(this.$refs.taskChart);
      //图表中间的合计
      let total = rows.reduce((sum, item) => sum + item.value, 0);
      option.series[0].label.formatter = [`{a|${total}}`, `{b|${'合计'}}`].join('\n');
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
      this.taskInfo = rows;
    },
    /** 获取基地情况统计 */
    async getBaseInfo() {
      if (this.baseId) {
        //基地信息
        const res = await selectBaseInfo(this.baseId);
        this.baseInfo = res.rows[0];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$margin: 10px;
.container {
  background: #edeef0;
  overflow: hidden;
}
.index {
  height: calc(100vh - 84px - #{$margin} * 2);
  margin: $margin;
}
.main {
  box-sizing: border-box;
  height: calc((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3);
  padding: 10px;
}
.mapMain {
  box-sizing: border-box;
  height: calc(((100vh - 84px - #{$margin} * 4 - 51px * 3) / 3) * 2 + #{$margin} + 51px);
  padding: 5px;
  min-height: calc(180px * 2 + #{$margin} + 51px);
}
</style>
