<template>
  <v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
import {onMounted, ref, onUnmounted, watch} from "vue";
import mittBus from "@/utils/mitt";
const props = defineProps({
  content: {
    type: Array,
    default: () => [],
  },
});
const option = ref({});
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",
    },
    grid: {
      left: "40px",
      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,
      }
    ],
  };
};
watch(()=>props.content,(val:any)=>{
  let data = {
    xData: [],
    inData: [],
    outData: [],
  }
  val.forEach((item: any) => {
    data.xData.push(item.time)
    data.inData.push(item.out)
    data.outData.push(item.in)
  });
  setTimeout(() => {
    setOption(data);
  }, 100);
})
onMounted(() => {
  mittBus.on('BsSeatStateDataShowArea1', (res: any) => {
    let data = {
      xData: [],
      inData: [],
      outData: [],
    }
    res.forEach((item: any) => {
      data.xData.push(item.time)
      data.inData.push(item.out)
      data.outData.push(item.in)
    });
    setTimeout(() => {
      setOption(data);
    }, 100);
  });
});
onUnmounted(() => {
  mittBus.off('BsSeatStateDataShowArea1');
});
</script>
<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}
</style>
