<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div class="dzfxxxtj">
    <div class="leafTotal">
      <i>重点灾害信息统计</i>
    </div>
    <div class="total222">
      <a-tabs v-model:activeKey="activeKey" @change="(key) => changeTabs(key)" class="userTab" v-show="isDzxxListShow">
        <a-tab-pane key="1">
          <template #tab>
            <span> 灾害类型 </span>
          </template>
          <div id="chart" style="width: 100%; height: 218px"></div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span> 危险性分级 </span>
          </template>
          <div id="chart2" style="width: 100%; height: 218px"></div>
        </a-tab-pane>
      </a-tabs>

      <dzxx-list @eventShowDzxx="eventShowDzxx" :dzxxDataList="dzxxDataListFilter" v-if="!isDzxxListShow" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useGeologicalStore } from '/@/store/modules/geological';
import dzxxList from './components/dzxxList.vue';

export default defineComponent({
  name: 'TotalStatis',
  components: { dzxxList },

  setup() {
    const { proxy } = getCurrentInstance();
    const echarts = proxy.$echarts;
    const geologicalStore = useGeologicalStore();

    let isDzxxListShow = ref(true); //灾害类型列表统计
    const dzxxDataList = ref([]); //缓存灾害信息列表，用于点击
    const dzxxDataListFilter = ref([]); //筛选列表，用于列表展示

    let dzlxList = [];
    var chart = null;
    function GetDzRiskTypeList() {
      // geologicalStore.GetDzRiskTypeList().then((res) => {
      setTimeout(() => {
        // console.log('GetDzRiskTypeListGetDzRiskTypeList------------------', res);

        console.log(dzxxDataList, '这是未经过类型筛选的灾害数据');
        let arr = dzxxDataList.value;
        if (arr) {
          // 使用reduce函数创建新数组
          var newArr = arr.reduce(function (acc, obj) {
            // 检查新数组中是否已存在该name属性的对象
            var existingObj = acc.find(function (item) {
              return item.name === obj.dzlxmc;
            });

            // 如果存在，则增加计数器
            if (existingObj) {
              existingObj.value++;
            } else {
              // 否则，创建新的对象，并初始化计数器为1
              var newObj = {
                name: obj.dzlxmc,
                value: 1,
              };
              acc.push(newObj);
            }

            return acc;
          }, []);

          // res.map((e) => {
          //   newArr.map((a) => {
          //     if (e.name == a.name) {
          //       a.dzlxid = e.dzlxid;
          //     }
          //   });
          // });

          //这个数据用于渲染灾害类型的图表
          dzlxList = newArr;

          console.log(newArr, '这是经过筛选后的arr');
        }
        if (dzlxList) chart = createChart('chart', dzlxList);
      }, 200);
      // });
    }
    let dzdjList = [];
    var chart2 = null;
    function GetDzRiskLevelList() {
      // geologicalStore.GetDzRiskLevelList().then((res) => {
      setTimeout(() => {
        // console.log('GetDzRiskLevelList----------------', res);

        console.log(dzxxDataList, '这是未经过类型筛选的灾害数据');

        let arr2 = dzxxDataList.value;
        console.log(arr2, 'arr2');
        if (arr2) {
          // 使用reduce函数创建新数组
          var newArr2 = arr2.reduce(function (acc, obj) {
            // 检查新数组中是否已存在该name属性的对象
            var existingObj = acc.find(function (item) {
              return item.name === obj.wxxfjmc;
            });

            // 如果存在，则增加计数器
            if (existingObj) {
              existingObj.value++;
            } else {
              // 否则，创建新的对象，并初始化计数器为1
              var newObj = {
                name: obj.wxxfjmc,
                value: 1,
              };
              acc.push(newObj);
            }

            return acc;
          }, []);
          console.log(newArr2, '经过类型筛选的危险性数据');

          //这个数据用于渲染灾害类型的图表
          dzdjList = newArr2;
        }
        //  dzdjList = res;
      }, 200);
      // });
    }

    onMounted(() => getDzList());

    const createChart = (id, trafficWay, title) => {
      title = trafficWay.map((i) => i.value).reduce((a, b) => a + b, 0);
      const chart = echarts.init(document.getElementById(id));

      var img =
        'data:image/png;base64, ';

      var data = [];
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 0.3,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [75, 79],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                overflow: 'none',
                color: '#ddd',
                fontSize: 15,
                fontWeight: 'normal',
                fontFamily: 'AgencyFB',
                offset: [-10, 0],
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + '\n' + '{value|' + params.value + '}' + '个';
                  } else {
                    return '';
                  }
                },
                rich: {
                  value: {
                    fontSize: 20,
                    align: 'center',
                  },
                },
              },
              fontSize: 20,
              labelLine: {
                length: 10,
                length2: 20,
                show: true,
                color: '#fff',
              },
            },
          },
          data: data,
        },
      ];
      const option = {
        color: color,
        title: [
          {
            text: title, //主标题
            left: '45%', //标题的位置 默认是left，其余还有center、right属性
            top: '37%',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 34,
              fontWeight: 'normal',
              fontFamily: 'AgencyFB',
            },
          },
          {
            subtext: '总数', //副标题
            itemGap: 20, //主副标题间距
            left: '44%', //标题的位置 默认是left，其余还有center、right属性
            top: '47%',
            subtextStyle: {
              color: '#FFFFFF',
              fontSize: 14,
              fontWeight: 'normal',
              textAlign: 'center',
              fontFamily: 'AlimamaShuHeiTi',
            },
          },
        ],
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 128,
                height: 128,
              },
              left: 'center',
              top: 'center',
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      chart.setOption(option);

      //echart 饼图点击事件
      chart.on('click', function (param) {
        //添加点击事件
        console.log('灾害信息列表echart饼图', param.name);
        // myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
        // if (param.dataIndex !== number) {
        //   // 当鼠标点击的时候 消除上一个扇区的高亮
        //   myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
        // }
        // number = param.dataIndex; //接住当前扇区的dataIndex

        if (param.name.length > 0) {
          dzxxDataListFilter.value = dzxxDataList.value.filter((item) => {
            if (id == 'chart') {
              return item['dzlxmc'] == param.name;
            } else {
              return item['wxxfjmc'] == param.name;
            }
          });
        } else {
          dzxxDataListFilter.value = dzxxDataList.value;
        }
        if (dzxxDataListFilter.value.length <= 0) {
          message.info('所选类型无数据!');
          return;
        }
        console.log('灾害信息列表echart饼图筛选值', dzxxDataListFilter.value);

        isDzxxListShow.value = false;
      });

      return chart;
    };

    const changeTabs = (e) => {
      setTimeout(() => {
        if (e == 1 && !chart) {
          chart = createChart('chart', dzlxList);
        } else if (e == 2 && !chart2) {
          chart2 = createChart('chart2', dzdjList);
        }
      }, 0);
    };

    /**
     * @description 功能：获取灾害相关信息
     */
    function getDzList() {
      let params = {
        type: 'all',
      };
      geologicalStore.DzdxInfo(params).then((res) => {
        console.log('灾害信息列表getDzList:', res);
        // console.log('能打印出来吗',dzlxList);
        let zdArr = [];
        res.map((e) => {
          if (e.gztyp === '重点关注') {
            zdArr.push(e);
          }
        });
        console.log('新的灾害信息列表getDzList:', zdArr);
        dzxxDataList.value = zdArr;
        console.log(dzxxDataList.value, 'dzxxDataList.value');

        GetDzRiskTypeList();
        GetDzRiskLevelList();
      });
    }

    /**
     * @description 子组件实现
     */
    const eventShowDzxx = (value) => {
      console.log('子组件的值', value);
      isDzxxListShow.value = value;
    };

    return {
      activeKey: ref('1'),
      changeTabs,

      isDzxxListShow,
      dzxxDataList,
      dzxxDataListFilter,
      eventShowDzxx,
    };
  },
  mounted() {
    // debugger
    // console.log($echarts)
  },
});
</script>

<style lang="less" scoped>
.dzfxxxtj {
  padding: 0px;
  margin: 0px;

  @font-face {
    font-family: 'AlimamaShuHeiTi';
    src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
  }
  @font-face {
    font-family: 'AgencyFB';
    src: url('../../assets/font/AgencyFB-Bold.ttf');
  }
  ::v-deep(.ant-tabs-nav-animated > div) {
    display: flex;
    justify-content: center;
  }
  ::v-deep(.ant-tabs-nav-animated > div > div) {
    flex: 1;
    text-align: center;
  }
  ::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active) {
    // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
    background: url('../../assets/images/tab.png') no-repeat;
    // width: 45px;
    background-position: 6px 3px;
    background-size: 100% 100%;
    height: 54px;
    line-height: 40px;
    margin-top: -6px;
    margin-left: -10px;
    color: #c9d1d9;

    // background: url(/src/assets/images/tab.png) no-repeat;
    //   width: 195px;
    //   background-position: 6px 3px;
    //   background-size: 100% 100%;
    //   line-height: 40px;
    //   margin-top: -6px;
    //   margin-left: -6px;
  }
  ::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active) {
    // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
    background: url('../../assets/images/tab.png') no-repeat;
    // width: 45px;
    background-position: 6px 3px;
    background-size: 100% 100%;
    height: 54px;
    line-height: 40px;
    margin-top: -6px;
    // margin-left: -6px;
  }
  ::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab) {
    margin-left: -10px;
    padding: 7px 10px 4px 26px;
  }
  ::v-deep(.ant-tabs-top-bar) {
    margin-bottom: 0px !important;
  }
  ::v-deep(.ant-tabs-ink-bar) {
    visibility: hidden;
  }

  ::v-deep(
      .ant-tabs-top > .ant-tabs-nav::before,
      .ant-tabs-bottom > .ant-tabs-nav::before,
      .ant-tabs-top > div > .ant-tabs-nav::before,
      .ant-tabs-bottom > div > .ant-tabs-nav::before
    ) {
    border-bottom: 0px;
  }
  ::v-deep(.ant-tabs) {
    color: #fff;
  }
  ::v-deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #ffe75c;
  }
  ::v-deep(.ant-tabs-tab) {
    // font-size: 18px;
    // font-weight: bold;
    font-size: 16px;
    font-weight: normal !important;
  }
  .ant-tabs-tab-active {
    background-color: yellow;
  }
  .tab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 24px;
  }

  .icon {
    margin-right: 16px;
  }

  .text {
    color: #333;
  }
  ::v-deep(.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list) {
    height: 32px;
  }
  .total222 {
    position: relative;
    // padding: 15px 20px;
    margin: 0px;
    padding: 0px;
    width: 400px;
    height: 270px;
    color: #fff;
    border: 1px solid transparent;
    background: rgba(3, 49, 79, 0.4);
    border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;

    .userTab {
      padding: 15px 20px;
    }
  }

  .total222:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border-left: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
    // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
  }
  .total222:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  }
  .leafTotal {
    width: 400px;
    height: 47px;
    background: url('../../assets/images/jcsbtj.png') no-repeat;
    // background: url('../../assets/images/panels.png') no-repeat;
    // background-position: -14px -13px;
    // background-size: 101% 131%;
    font-size: 19px;
    font-weight: bold;
    color: #fff;
    line-height: 38px;
    margin: 29px 0px 5px 0px;
  }
  .leafTotal i {
    margin-left: 32px;
    font-family: 'AlimamaShuHeiTi';
    margin-right: 98px;
    font-weight: bold;
    // font-style: normal;
    margin-left: 39px;
    margin-right: 98px;

    // background-image: -webkit-linear-gradient(bottom, #6fcfff, #fff);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
  }
  .leafTotal b {
    font-weight: normal;
    font-size: 15px;
    color: #a7e6fa;
  }
}
</style>
