<template>
  <div>
    <Title title="生长态势">
      <template v-slot:title-slot>
        <div class="slot-right">
          <div class="btn yse-events">异常复盘</div>
          <div class="btn yse-events">态势详情</div>
        </div>
      </template>
    </Title>
    <div class="content-box">
      <div ref="chartDom" class="charts yse-events"></div>
      <div class="info">
        <el-select
          v-model="value"
          class="select yse-events"
          effect="dark"
          popper-class="v-select-popper-ns"
        >
          <el-option
            v-for="item in optionsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="desc" v-html="desc"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
import Title from "../../../components/title";

// 在组件或全局监听器中监听自定义事件
function handleStorageUpdate(e) {
  curGardenId.value = e.detail;
  initData();
}
// 在组件或全局监听器中监听自定义事件
window.addEventListener("storageChanged", handleStorageUpdate);

// 组件销毁前移除监听
onBeforeUnmount(() => {
  window.removeEventListener("storageChanged", handleStorageUpdate);
});

const getters = useStore().getters;
const curPeriodId = ref(getters.userinfo.curPeriodId);
const curGardenId = ref(getters.userinfo.curGardenId);
let chartDom = ref(null);
let myChart = null;

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  initData();
});

function legendDispose(data) {
  data = data.replace(/([']*)/g, '')
  let jsonStr = data.replace(/([a-zA-Z]+):/g, '"$1":');
  jsonStr = `{${jsonStr.slice(1, -1)}}`;
  const obj = JSON.parse(jsonStr);
  return obj;
}

function formatDate(list, obj, text) {
  const arr = list.map((item) => {
    return {
      ...item,
      value: obj[item.field],
      text,
    };
  });
  return arr;
}

const sData1 = ref([]);
const sData2 = ref([]);
const sData3 = ref([]);

const desc = ref('')

const colorList = [
  "#92e0d2",
  "#ffacb9",
  "#ed6d52",
  "#f9d949",
  "#90cca3",
  "#60b177",
  "#296218",
];

//数据模型类
function dataModel(name, radius, mData) {
  let data = {
    name: name || "第一层环",
    type: "pie",
    z: 3,
    tooltip: {
      show: true,
    },
    center: ["50%", "38%"],
    radius: radius || ["24%", "30%"],
    hoverAnimation: false,
    clockWise: true,
    itemStyle: {
      normal: {
        color: function (params) {
          return colorList[params.dataIndex];
        },
      },
    },
    label: {
      show: false,
    },
    data: mData,
  };
  return data;
}

const options = {
  tooltip: {
    trigger: "item",
    borderColor: "rgba(5,209,199,.5)",
    backgroundColor: "rgba(47, 87, 97.1)",
    borderWidth: 1,
    padding: 0,
    textStyle: {
      color: "#fff",
      fontSize: 11,
    },
    formatter: function (parms) {
      var str = `<div class='v-echarts-tooltip'>
                    <div>${parms.data.text}</div>
                    <span>${parms.data.name}: ${parms.percent}%</span>
                </div>`;
      return str;
    },
  },
  legend: {
    icon: "circle",
    bottom: "0%",
    textStyle: {
      color: "#fff",
    },
    itemWidth: 8,
    data:[],
    // data: ["萌动", "小叶", "红叶", "黄叶", "初绿", "翠绿", "老熟"],
  },
  color: colorList,
  series: [],
};

const initData = async () => {
  const { code, data } = await VE_API.znxy.szList({
    gardenId: curGardenId.value,
  });
  desc.value = data[0].text

  const sData1Value = legendDispose(data[0].data);
  const sData1Date = data[0].createDate.split(" ");

  const sData2Value = legendDispose(data[1].data);
  const sData2Date = data[1].createDate.split(" ");

  const sData3Value = legendDispose(data[2].data);
  const sData3Date = data[2].createDate.split(" ");

  const res = await VE_API.znxy.szLegend({
    periodId: curPeriodId.value,
  });
  options.legend.data = res.data.map(item =>{
    return {
      name:item.name,
      itemStyle:{
        color:item.color
      }
    }
  })

  sData1.value = formatDate(res.data, sData1Value, sData1Date[0]);
  sData2.value = formatDate(res.data, sData2Value, sData2Date[0]);
  sData3.value = formatDate(res.data, sData3Value, sData3Date[0]);

  options.series[0] = new dataModel("第三层环", ["40%", "46%"], sData1.value);
  options.series[1] = new dataModel("第三层环", ["53%", "59%"], sData2.value);
  options.series[2] = new dataModel("第三层环", ["66%", "72%"], sData3.value);

  myChart.clear();
  options && myChart.setOption(options);
};

const value = ref("7");

const optionsList = [
  {
    value: "7",
    label: "7天",
  },
  {
    value: "3",
    label: "3天",
  },
];
</script>

<style lang="scss" scoped>
.slot-right {
  width: 70%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 12px;
  .btn {
    cursor: pointer;
    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
      100%;
    margin-right: 5px;
    color: rgba(180, 255, 251, 0.8);
    font-weight: bold;
    font-size: 15px;
    width: 92px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
}
.content-box {
  width: 100%;
  height: calc(100% - 48px);
  padding: 8px 11px;
  box-sizing: border-box;
  color: #fffdfd;
  display: flex;
  justify-content: space-between;
  .info {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .select {
      width: 40%;
      margin-bottom: 20px;
      ::v-deep {
        .el-select__wrapper {
          background: transparent;
          border: 1px solid rgba(81, 233, 240, 0.6);
          box-shadow: none;
          .el-select__placeholder {
            color: #b4fffb;
          }
          .el-select__caret {
            color: #b4fffb;
          }
        }
      }
    }
  }
  .desc {
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    line-height: 20px;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 5; /* 设置显示的行数 */
    background: url("@/assets/img/znxy/ts_bg.png") no-repeat center center /
      100% 100%;
    box-sizing: border-box;
    padding: 5px;
  }
  .charts {
    width: 50%;
    height: 100%;
  }
}
</style>
