<template>
  <div class="card">
    <div class="card-tit">
      <div class="card-tit_label"> {{ title }}</div>
      <div class="card-tit_value">
        <div class="card-tit_value-item" v-for="item in colors" :key="item.color">
          <div class="card-tit_value-color" :style="{ background: item.color }" />
          <div class="card-tit_value-info">
            {{ item.label }}
          </div>
        </div>
        <div class="card-tit_value-item" v-if="hasSafe">
          <div class="card-tit_value-color" :style="{ background: safeColor }" />
          <div class="card-tit_value-info"> 正常范围 </div>
        </div>
      </div>
    </div>
    <div class="card-charts" ref="chartRef" :style="{ height, width }" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, PropType, ref, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  // import { clinicStats } from '/@/api/infusion/busClinicApi';
  const props = defineProps({
    // 宽
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    // 高
    height: {
      type: String as PropType<string>,
      default: '400px',
    },
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 标题右侧颜色值
    colors: {
      type: Array as any,
      default: () => [],
    },
    // 是否有正常范围
    hasSafe: {
      type: Boolean,
      default: false,
    },
    safeColor: {
      type: String,
      default: 'rgba(33, 201, 153, 0.12)',
    },
    safeRange: {
      type: Array,
      default: () => [
        {
          // name: '60分到80分',
          yAxis: 0,
        },
        {
          yAxis: 10,
        },
      ],
    },
    // 图表数据
    infoData: {
      type: Array,
      default: () => [],
    },
    dateData: {
      type: Array,
      default: () => [],
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  // 各种信息数据集
  const infoData = ref([]);
  // 上传时间
  const dateData = ref([]);
  const start = ref();
  const markArea = ref();
  const series = ref([]);
  onMounted(async () => {
    // const resData = await clinicStats({
    //   type: '',
    //   id: '123',
    // });
    // console.log(resData);
    // infoData.value = resData.validCount || [];
    // dateData.value = resData.uploadTimes || [];
    infoData.value = props.infoData || [10, 25, 30, 16, 36, 10];
    dateData.value = props.dateData || [
      '2023-05-10',
      '2023-05-11',
      '2023-05-12',
      '2023-05-13',
      '2023-05-14',
      '2023-05-15',
    ];
    // 数据显示
    start.value = infoData.value.length > 10 ? 80 : 0;
    markArea.value = props.hasSafe
      ? {
          silent: false,
          itemStyle: {
            color: props.safeColor,
          },
          data: [props.safeRange],
        }
      : { silent: false };
    series.value = props.colors.map(ele => {
      return {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        name: ele.label,
        // label: {
        //   show: true,
        //   position: 'top',
        // },
        lineStyle: {
          color: ele.color,
        },
        itemStyle: {
          color: ele.dot,
        },
        data: infoData.value || [],
        markArea: markArea.value,
      };
    });
    setOptions({
      tooltip: {
        trigger: 'axis',
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            title: '保存为图片',
          },
        },
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dateData.value,
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: ['rgba(235, 235, 235, 1)'],
            type: 'dashed',
          },
        },
      },
      dataZoom: start.value
        ? [
            {
              type: 'inside',
              start: start.value,
              end: 100,
            },
            {
              start: start.value,
              end: 100,
            },
          ]
        : [],
      series: series.value,
    });
  });
</script>
<style lang="less" scoped>
  .card {
    border-radius: 4px;
    border: 1px solid #efefef;
    background-color: #fff;

    &-tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
      height: 56px;
      line-height: 56px;
      background: #f6f8fa;
      margin-bottom: 20px;

      &_label {
        font-size: 18px;
        font-weight: 600;
        color: #000a18;
      }

      &_value {
        display: flex;
        align-items: center;

        &-item {
          display: flex;
          align-items: center;
          margin-right: 40px;

          &:last-child {
            margin-right: 0;
          }
        }

        &-color {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 2px;
          margin-right: 6px;
        }

        &-info {
          color: #818694;
        }
      }
    }

    &-charts {
      padding: 10px;
    }
  }
</style>
