<template>
  <div class="left_bottom_wrap" >
      <div class="left_number">
          <div>
            <span>登录坐席数量：</span>
            <CountUp :endVal="loginCount"/>
          </div>
          <div>
            <span>呼入接通数量：</span>
            <CountUp :endVal="state.count.inOn"  />
          </div>
          <div>
            <span>有效接通数量：</span>
            <CountUp :endVal="state.count.validOn"  />
          </div>
          <div>
            <span>未接通数量：</span>
            <CountUp :endVal="state.count.inNoOn"  />
          </div>
          <div>
            <span>呼出接通数量：</span>
            <CountUp :endVal="state.count.outOn"  />
          </div>
          <div>
            <span>队列挂断数量：</span>
            <CountUp :endVal="state.count.inQueueNoOn"  />
          </div>
      </div>
    <div class="right_chart">
      <v-chart class="chart" :option="option" />
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, computed, onUnmounted, watch} from "vue";
import mittBus from "@/utils/mitt";
import CountUp from "@/components/count-up";
import dayjs from "dayjs";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  content: {
    type: Object,
    default: () => {},
  },
});
const option = ref({});
const state = reactive<any>({
  count:{
    inNoOn: 0,
    inOn: 0,
    inQueueNoOn: 0,
    outOn: 0,
    validOn: 0,
  }
});
const setOption = async (newData: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    legend: {
      data: ["呼入", "呼出",'呼出平均','呼入平均'],
      textStyle: {
        color: "#fff",
      },
      top: "0",
      left: "80px",
      icon: 'roundRect',
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20,
    },
    grid: {
      left: "50px",
      right: "10px",
      bottom: "30px",
      top: "20px",
    },
    xAxis: {
      data: newData.xData,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          formatter: "{value}% ",
        },
      },
    ],
    series: [
      {
        name: "呼入",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {   //添加背景颜色
          opacity: 0.3,   //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        data: newData.inData,
      },
      {
        name: "呼出",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {   //添加背景颜色
          opacity: 0.3,   //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.outData,
      },
      {
        name: "呼入平均",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {   //添加背景颜色
          opacity: 0.3,   //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.inAverageData,
      },
      {
        name: "呼出平均",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {   //添加背景颜色
          opacity: 0.3,   //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.outAverageData,
      },
    ],
  };
};
const seatsList = ref<any>([]);
// 登录坐席数量
const loginCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state !== 'logout').length;
});
watch(()=>props.content,(val:any)=>{
  state.count = val.count[0];
  let data = {
    xData: [],
    inData: [],
    outData: [],
    inAverageData: [],
    outAverageData: [],
  }
  val.list.forEach((item: any) => {
    data.xData.push(item.time)
    data.inData.push(item.out)
    data.outData.push(item.in)
    data.inAverageData.push(item.inAverag)
    data.outAverageData.push(item.outAverag)
  });
  setTimeout(() => {
    setOption(data);
  }, 100);
});
watch(
  () => props.data,
  (newData:any) => {
    seatsList.value = newData;
  },
  { immediate: true }
);
onMounted(() => {
  mittBus.on('SeatState', (res: any) => {
    const item = seatsList.value.find((item: any) => item.telNo === res.telNo);
    if (item) {
      item.state = res.state;
    }
  });
  mittBus.on('BsSeatStateDataShowArea3', (res: any) => {
    state.count = res[0];
  });
  mittBus.on('BsSeatStateDataShowArea4', (res: any) => {
    let data = {
      xData: [],
      inData: [],
      outData: [],
      inAverageData: [],
      outAverageData: [],
    }
    res.forEach((item: any) => {
      data.xData.push(item.time)
      data.inData.push(item.out)
      data.outData.push(item.in)
      data.inAverageData.push(item.inAverag)
      data.outAverageData.push(item.outAverag)
    });
    console.log(res, dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
    setTimeout(() => {
      setOption(data);
    }, 100);
  });
});
onUnmounted(() => {
  mittBus.off('SeatState');
  mittBus.off('BsSeatStateDataShowArea3');
  mittBus.off('BsSeatStateDataShowArea4');
});
</script>
<style scoped lang="scss">
.left_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: var(--el-font-size-base);
  .left_number{
    margin: 20px 0;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 130px;
    div{
      display: flex;
      justify-content: space-between;
    }
  }
  .right_chart{
    flex: 1;
    height: 100%;

  }
}
</style>
