<template>
  <Module class="flex-grow h-1/3" :loading="loading" :error="error">
    <!-- :info="bsMeta && bsMeta['emplRate']" -->
    <template #title>公司人员统计</template>
    <template v-if="!loading">
      <Ect :options="ectOpts" />
      <!-- <Empty v-else /> -->
    </template>
  </Module>
</template>
<script lang="ts" setup>
import { computed, defineProps, watch } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { staffCount, staffCountChildNew,staffStatisticsMaintain } 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 { data, refresh } = useRequest<any>(() =>
//    staffCountChildNew({
//         level: selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1]
//       })
// );
const { data, refresh } = useRequest<any>(() =>
  staffStatisticsMaintain({
        level: selectLevel.value,
        dimension: selectRoadId.value[selectLevel.value - 1]
      })
);
console.log(32,data);

// const { data, refresh } = useRequest<any>(() =>
//   selectLevel.value > 2
//     ? staffCount({
//         level: selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1]
//       })
//     : staffCountChildNew({
//         level: selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1]
//       })
// );


watch(selectRoadId, v => {
  refresh();
});
const props = defineProps({
  data: {
    type: Array,
    default() {
      return [];
    }
  }
});
const ectOpts = computed(() => {
  return {
    dataset: {
      // 路段,"养护管理人员", "养护巡查人员", "养护清障人员"
      dimensions: [
        "orgName",
        "usermanagecount",   //管理人员
        "usermaintaincount",   //养护人员
        "userinspectioncount",     //巡查人员
      ],
      source: data.value?.msgContent || []
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    color: ["#08a4fa", "#FFB400", "#E05A55"],
    legend: {
      data: ["管理人员","养护人员","巡查人员"],
      textStyle: {
        fontSize: 13, //字体大小
        color: "#CBE7FF" //字体颜色
      }
    },
    xAxis: {
      type: "category",
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'ba'],
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#778FA4"
        }
      }
    },
    yAxis: [
      {
        type: "value",
        // name: '收入',
        nameTextStyle: {
          color: "#CBE7FF",
          fontSize: 12,
          fontWeight: "bold"
        },
        min: 0,
        // max: 250,
        position: "left",
        axisLine: {
          show: true
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "rgba(68, 79, 203, 1)"
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        type: "value",
        // name: '车流量',
        nameTextStyle: {
          color: "#CBE7FF",
          fontSize: 12,
          fontWeight: "bold"
        },
        min: 0,
        // max: 250,
        position: "right",
        offset: 0,
        axisLine: {
          show: true
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#778FA4"
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "管理人员",
        // data: [120, 130, 150, 80, 70, 110, 130, 70],
        itemStyle: {
          normal: {
            // color: "#08a4fa",
            color: function(params) {
              return {
                colorStops: [
                  {
                    offset: 0,
                    color: "#1268f3"
                  },
                  {
                    offset: 0.6,
                    color: "#08a4fa"
                  },
                  {
                    offset: 1,
                    color: "#01ccfe"
                  }
                ]
              };
            },
            barBorderRadius: [10, 10, 0, 0]
          }
        },
        type: "bar",
        barMaxWidth: "9",
        label: {
              show: true,
              position: 'top', // 汉字位于上方
              color: '#fff',
            },
      },
      {
        name: "养护人员",
        // data: [120, 130, 150, 80, 70, 110, 130, 70],
        itemStyle: {
          normal: {
            // color: "#FFB400",
            color: function(params) {
              return {
                colorStops: [
                  {
                    offset: 0,
                    color: "#FF9B03"
                  },
                  {
                    offset: 0.6,
                    color: "#E6A138"
                  },
                  {
                    offset: 1,
                    color: "#D4AE77"
                  }
                ]
              };
            },
            barBorderRadius: [10, 10, 0, 0]
          }
        },
        type: "bar",
        barMaxWidth: "9",
        label: {
              show: true,
              position: 'top', // 汉字位于上方
              color: '#fff',
            },
      },
      {
        name: "巡查人员",
        // data: [120, 130, 150, 80, 70, 110, 130, 70],
        itemStyle: {
          normal: {
            // color: "#FFB400",
            color: function(params) {
              return {
                colorStops: [
                  {
                    offset: 0,
                    color: "#f6635d"
                  },
                  {
                    offset: 0.6,
                    color: "#f6635d"
                  },
                  {
                    offset: 1,
                    color: "#f6635d"
                  }
                ]
              };
            },
            barBorderRadius: [10, 10, 0, 0]
          }
        },
        type: "bar",
        barMaxWidth: "9",
        label: {
              show: true,
              position: 'top', // 汉字位于上方
              color: '#fff',
            },
      },
     
    ]
  };
});
</script>
<style lang="postcss" scoped>
.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>
