<template>
  <Module class="flex-grow h-1/3">
    <!-- :info="bsMeta && bsMeta['emplRate']" -->
    <template #title>养护工区统计</template>
    <template v-if="!loading">
      <div class="statistics">工区统计（个）</div>
      <div class="statisticsTotal">总数量：{{Total}}</div>
      <Ect class="Icome-echarts" :options="ectOpts" />
      <!-- <Empty v-else /> -->
    </template>
  </Module>
</template>

<script lang="ts" setup>
import { computed, defineProps, ref, watch } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { workareaNext } from "@/api/curingManage";
import { useRequest } from "vue-request";
const store = useStore(key);
const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const xAxisList = ref([]);
const optiponsValue = ref([]);
const Total = ref(0);
const params = computed(
  () => selectLevel.value + "&" + selectRoadId.value[selectLevel.value - 1]
);
// level, dimension
const { data, refresh } = useRequest<any>(() =>
  workareaNext({
    level: selectLevel.value,
    dimension: selectRoadId.value[selectLevel.value - 1]
  })
);

// 根据路段变化请求接口
watch(params, v => {
  refresh();
});

const ectOpts = computed(() => {
  console.log("data.value?.msgContent", data.value?.msgContent);
  const opData = data.value?.msgContent || [];
  xAxisList.value = opData.map((item: any) => {
    return item.orgName;
  });
  optiponsValue.value = opData.map((item: any) => {
    return item.workareaCount;
  });
  Total.value = 0;
  for (let index = 0; index < optiponsValue.value.length; index++) {
    Total.value += optiponsValue.value[index];
  }
  const xAxisItemWidth = xAxisList.value.length
    ? (document.querySelector(".Icome-echarts").clientWidth * 0.7) /
      xAxisList.value.length
    : 0;

  const series_data: Array<any> = [];
  let max = 0;
  opData?.map((item: any) => {
    max = item.workareaCount > max ? item.workareaCount : max;
  });
  const polar = opData?.map((item: any) => {
    series_data.push(item.workareaCount);
    return { text: item.orgName, max };
  });
  // return {
  //   tooltip: {
  //     trigger: "item",
  //   },
  //   radar: {
  //     shape: "circle",
  //     center: ["50%", "50%"],
  //     // radius: 40,
  //     splitNumber: 4, // 雷达图圈数设置
  //     splitArea: {
  //       areaStyle: {
  //         color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
  //         shadowColor: "rgba(0, 0, 0, 0.2)",
  //         shadowBlur: 10,
  //       },
  //     },
  //     axisLine: {
  //       lineStyle: {
  //         color: 'rgba(211, 253, 250, 0.8)'
  //       }
  //     },

  //     axisName: {
  //       color: "#fff",
  //       backgroundColor: "#666",
  //       borderRadius: 3,
  //       padding: [3, 5],
  //     },

  //     indicator: polar,
  //   },
  //   series: [
  //     {
  //       type: "radar",
  //       data: [{ name: "养护工区", value: series_data }],
  //       itemStyle: {
  //         normal: {
  //           // color: "#00C9A3",
  //         },
  //       },
  //       areaStyle: {
  //         normal: {
  //           opacity: 0.2,
  //         },
  //       },
  //       emphasis: {
  //         lineStyle: {
  //           width: 4,
  //         },
  //       },
  //     },
  //   ],
  // };
  return {
    // 距离边框，类似于内边距
    grid: {
      left: "%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    color: ["#4999FF"],
    textStyle: {
      fontSize: 10, //字体大小
      color: "#909FAC" //字体颜色
    },
    xAxis: {
      type: "category",
      axisLabel: {
        inside: false,
        color: "#fff",
        interval: 0,
        formatter: function(value) {
          const left = 10 * value.length - xAxisItemWidth;
          if (left > 0) {
            return value.substr(0, Math.ceil(xAxisItemWidth / 10) - 2) + "...";
          }
          return value;
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10,
      data: xAxisList.value
    },
    yAxis: {
      type: "value",
      splitLine: {
        //设置条纹显示 柱状图默认yAxis(true)
        show: true,
        //设置lineStyle即可写入样式即可
        lineStyle: {
          // 背景条纹颜色
          color: "#1b2b3b",
          // 背景条纹细虚线
          type: "dashed"
        }
      }
    },
    series: [
      {
        type: "bar",
        stack: "Total",
        barWidth: 15,
        label: {
          show: true,
          position: "top", // 汉字位于上方
          color: "#fff"
        },
        itemStyle: {
          normal: {
            color: function(params) {
              return {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3caeff"
                  },
                  {
                    offset: 0.5,
                    color: "#3CAEFF"
                  },
                  {
                    offset: 1,
                    color: "#0f2a41"
                  }
                ]
              };
            }
          }
        },
        // 数据数量的内容
        data: optiponsValue.value,
        // 开启有虚淡背景
        showBackground: true,
        backgroundStyle: {
          color: "rgba(59, 152, 219, 0)",
          borderWidth: 25,
          borderColor: "rgba(59, 152, 219, 0.2)"
        }
      }
    ]
  };
});
</script>
<style lang="postcss" scoped>
.statistics {
  font-size: 12px;
  color: #b6d0e6;
  margin-top: 10px;
}
.statisticsTotal {
  position: absolute;
  right: 20px;
  font-size: 12px;
  color: #b6d0e6;
  margin-top: 10px;
}
.jcsstj-outline {
  margin-bottom: 8px;
}
.jcsstj-num {
  width: 20px;
  height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #badeff;
  text-align: center;
  line-height: 24px;
  font-style: oblique;
  margin-right: 10px;
  padding-right: 2px;
}
.jcsstj-num-top {
  color: #ff9a00;
  background: url("@/assets/images/jcsstj-top-num.png");
  background-size: 100% 100%;
}
.jcsstj-text {
  font-size: 14px;
  color: #909fac;
  width: 90px;
}
.jcsstj-blout {
  width: calc(100% - 180px);
  height: 14px;
  padding: 3px;
  border: 1px solid rgba(0, 132, 251, 0.25);
  background: rgba(0, 132, 251, 0.1);
  position: relative;
}
.jcsstj-blout-top {
  border: 1px solid rgba(255, 154, 0, 0.15);
  background: rgba(255, 154, 0, 0.1);
}
.jcsstj-bl {
  height: 6px;
  background: #0084fb;
  background: linear-gradient(to right, #0084fb, #00cbff);
}
.jcsstj-bl-top {
  background: #ff9a00;
  background: linear-gradient(to right, #ff9a00, #ffd697);
}
.jcsstj-cont {
  font-size: 16px;
  color: #ffdaa5;
  width: 50px;
  margin-left: 10px;
}
.bl-hightlinght {
  position: absolute;
  width: 5px;
  height: 14px;
  top: 0;
  left: 100%;
  margin-left: -3px;
  background: #97eaff;
  box-shadow: #0085f8 0px 0px 10px;
}
.bl-hightlinght-top {
  background: #fff1dc;
  box-shadow: #ff9a00 0px 0px 10px;
}
</style>
