<template>
  <Module
    class="flex-grow"
    :info="bsMeta && bsMeta['emplRanK']"
    :loading="loading"
    :error="error"
  >
    <template #title>每车道收费人员配置</template>
    <!-- <template #end>
      <span class="mr-2">{{ showDate }}</span>
      <Switcher :options="options" v-model="latest" />
    </template> -->
    <template v-if="!loading">
      <!-- {{ dataList }} -->
      <div class="msf-divout">
        <div class="text">数据说明：实际/标准</div>
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="msf-item"
          @mouseout="TipNum = null"
          :style="{
            width: item.style.width + 'px',
            height: item.style.width + 'px',
            left: item.style.left,
            top: item.style.top,
            background: 'url(' + item.style.bg + ')',
            backgroundSize: '100% 100%',
          }"
        >
          <!-- <div
            class="mouseenter-box"
            @mouseover.self="changeIndex(index, item)"
          ></div> -->
          <el-tooltip class="tooltip" placement="top">
            <template #content>
              <div>总人数: {{ item.tollStaff ? item.tollStaff : 0 }}</div>
              <div>总车道数: {{ item.laneCount ? item.laneCount : 0 }}</div>
              <div>ETC车道数: {{ item.etclanes ? item.etclanes : 0 }}</div>
              <div>混合车道数: {{ item.mixedlanes ? item.mixedlanes : 0 }}</div>
            </template>
            <div
              class="msf-item-cont"
              :style="{ fontSize: item.style.fontSize }"
            >
              <div class="msf-item-value">
                <span class="actual" :style="{ color: item.style.color }">{{ item.num }}</span>
                /
                <span>{{ item.standard }}</span>
              </div>
              <div class="msf-item-text" :style="{ color: item.style.color }">
                {{ item.name }}
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </template>
  </Module>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed, watch } from "vue";
import { useStore } from "vuex";
import { comInfo } from "@/store/state";
import { key } from "@/store";
import { formatYearMonth } from "@/utils/util";
import { useGradient } from "@/utils/color";
import { graphic } from "echarts";
import { useRequest } from "vue-request";
import dataBgImg from "@/assets/images/data-bg.png";
import cirbg1 from "@/assets/images/tollEmployee/circle-bg1.png";
import cirbg2 from "@/assets/images/tollEmployee/circle-bg2.png";
import cirbg3 from "@/assets/images/tollEmployee/circle-bg3.png";
import cirbg4 from "@/assets/images/tollEmployee/circle-bg4.png";
import {
  coastLaneStaffConfig,
  coastLaneStaffConfigQueryChild,
} from "@/api/businessOverview";

defineProps({
  info: {
    type: String,
    default: "",
  },
});
const latest = ref(true);
// const options = [
//   { name: "最新", value: true },
//   { name: "七月", value: false },
// ];
let provinceData = ref(null);
const changeIndex = (index: any, item: any) => {
  TipNum.value = index;
  provinceData.value = item.orgCode;
};
const store = useStore(key);
const activeCom = computed(() => store.state.activeCom);
const appDate = computed(() => formatYearMonth(store.state.appDate));
const bsMeta = computed(() => store.getters.bsMeta);
let TipNum = ref(Number);
const showDate = computed(() => {
  return latest.value
    ? employeeData.value?.length > 0
      ? employeeData.value[0]?.accDate
      : ""
    : appDate.value;
});

const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);

const {
  data: coastCountData,
  loading,
  error,
  refresh: coastCountDataRefresh,
} = useRequest<any>(() =>
   coastLaneStaffConfigQueryChild({
        level: selectLevel.value,
        dimension: selectRoadId.value[selectLevel.value - 1],
      })
);

// const {
//   data: coastCountData,
//   loading,
//   error,
//   refresh: coastCountDataRefresh,
// } = useRequest<any>(() =>
//   selectLevel.value > 2
//     ? coastLaneStaffConfig({
//         level: selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1],
//       })
//     : coastLaneStaffConfigQueryChild({
//         level: selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1],
//       })
// );


watch([selectRoadId, provinceData], () => {
  coastCountDataRefresh();
});

const employeeData = computed(() => coastCountData.value?.msgContent);
const comData = computed(() =>
  activeCom.value !== "list" && !loading.value ? employeeData.value : []
);
const dataList = computed(() => {
  let list: any = [];
  employeeData.value?.map((item) => {    
    list.push(
        Object.assign({}, item, {
        name: item.orgName,
        num: item.staffLaneAver || 0,
        orgCode: item.orgCode,
        standard: item.sdStaffPerLane || 0,
      })
    );
  });

  

  let bgcolor = [
    {
      bg: cirbg1,
      color: "#82C5FF",
      fontSize: "12px",
      width: 150,
      left: "30%",
      top: "0%",
    },
    {
      bg: cirbg3,
      color: "#CAB8FF",
      fontSize: "12px",
      width: 140,
      left: "60%",
      top: "22%",
    },
    {
      bg: cirbg3,
      color: "#CAB8FF",
      fontSize: "12px",
      width: 140,
      left: "5%",
      top: "15%",
    },
    // {
    //   bg: cirbg4,
    //   color: '#FFDFC6',
    //   fontSize: '13px',
    //   width: 90,
    //   left: '33%',
    //   top: '50%',
    // },
    // {
    //   bg: cirbg1,
    //   color: '#82C5FF',
    //   fontSize: '13px',
    //   width: 90,
    //   left: '60%',
    //   top: '0%',
    // },
    // {
    //   bg: cirbg2,
    //   color: '#82C5FF',
    //   fontSize: '12px',
    //   width: 80,
    //   left: '24%',
    //   top: '20%',
    // },
    {
      bg: cirbg2,
      color: "#82C5FF",
      fontSize: "12px",
      width: 120,
      left: "60%",
      top: "63%",
    },
    {
      bg: cirbg1,
      color: "#82C5FF",
      fontSize: "12px",
      width: 120,
      left: "10%",
      top: "56%",
    },
    {
      bg: cirbg4,
      color: "#FFDFC6",
      fontSize: "12px",
      width: 120,
      left: "35%",
      top: "65%",
    },
    // {
    //   bg: cirbg2,
    //   color: '#82C5FF',
    //   fontSize: '12px',
    //   width: 60,
    //   left: '8%',
    //   top: '15%',
    // },
  ];
  list.forEach((item, index) => {
    
    item.style = bgcolor[index];
  });
  return list;
});

const staticOptions = {
  grid: {
    top: 20,
    left: 40,
    bottom: 50,
    right: 10,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.8)",
    borderColor: "#000",
    axisPointer: {
      type: "shadow",
    },
    textStyle: {
      fontSize: 12,
      color: "#fff",
    },
  },
  yAxis: {
    splitNumber: 3,
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(0, 154, 248,.5)",
        width: "1",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#009EFF",
      },
    },
    axisLabel: {
      show: true,
      fontSize: 10,
    },
  },
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        color: "#01A3FF",
        width: "1",
      },
    },
    axisTick: {
      alignWithLabel: true,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(0, 154, 248,.5)",
        width: "1",
      },
    },
    axisLabel: {
      rotate: 30,
      fontSize: 12,
      fontWeight: "400",
    },
  },
};

const staicSeriesOptions = {
  name: "每收费车道人员配置",
  type: "line",
  label: {
    show: true,
    position: "top",
    offset: [0, -6],
    verticalAlign: "middle",
    borderRadius: 2,
    backgroundColor: "rgba(0,0,0,0.2)",
    padding: [2, 4],
    color: "#fff",
    lineHeight: 12,
    fontSize: 12,
    fontFamily: "sans-serif",
  },
  lineStyle: {
    color: "#52c1ee",
    width: 1.5,
    shadowColor: "rgba(0,0,0,.5)",
    shadowBlur: 1,
    shadowOffsetY: 5,
    shadowOffsetX: 2,
  },
  itemStyle: {
    color: "#009EFF",
    borderColor: "#fff",
    borderWidth: 2,
    shadowColor: "rgba(0, 0, 0, .8)",
    shadowBlur: 2,
    shadowOffsetY: 1,
    shadowOffsetX: 2,
    lineStyle: {
      color: "#3A84FF",
      width: 1,
    },
  },
  areaStyle: {
    color: new graphic.LinearGradient(0, 1, 0, 0, [
      {
        offset: 0,
        color: "rgba(58,132,255,0)",
      },
      {
        offset: 1,
        color: "rgba(58,132,255,0.9)",
      },
    ]),
  },
  smooth: true,
  symbolSize: 6,
  symbol: "circle",
  encode: {
    x: "roadName",
    y: "actualCurrentNumber",
  },
};

const ectOpts = computed(() => ({
  dataset: {
    source: dataList.value,
    dimensions: ["roadName", "actualCurrentNumber"],
  },
  series: [
    {
      ...staicSeriesOptions,
    },
  ],
  ...staticOptions,
}));
</script>
<style scoped>
.mouseenter-box {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 99999;
  margin-left: 25%;
}
.msf-divout {
  position: relative;
  width: 100%;
  height: 100%;
}
.msf-item {
  position: absolute;
  text-align: center;
  /* line-height: 120px; */
  /* background: url("/src/assets/images/tollEmployee/circle-bg1.png"); */
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  transition: all 0.6s ease-in;
  -webkit-transition: all 0.2s ease-in;
}
.msf-item:hover {
  transform: scale(1.3);
}
.msf-item-cont {
  width: 100%;
  margin: 10px 0;
  text-align: center;
}
.msf-item-text {
  color: #fff;
  font-size: 12px;
}
.tip {
  flex-direction: column;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
}
.tip-item {
  width: 200px;
  position: absolute;
}
.text {
  text-align: right;
  color: #49a0de;
}
.actual {
  font-weight: 800;
  font-size: 18px;
}
</style>
