<template>
    <div class="page-header" style="position: relative;">
        <div class="headerTitle">随访结果</div>
        <div class="filter-btn">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="filterListChange"
            />
        </div>
        <div id="flllowUpEcharts" style="width: 100%; height: 230px;"></div>
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { getPageListData } from '@/api/main/system/system';
    import * as echarts from 'echarts';
    import moment from 'moment';
  
    let chartDom1

    const dateRange = ref([])
    onMounted(() => {
        chartDom1 = document.getElementById('flllowUpEcharts');
        getResults()
    })
    function filterListChange() {
      getResults()
    }

    const isShow = ref(false)

    const getResults = () => {
      const params = {}

      if (dateRange.value && dateRange.value.length === 2) {
        params.beginTime = moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
        params.endTime = moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
      }

      getPageListData("/SfPlanReport/selectFollowUpResults", params).then((res) => {
        if (res.data && res.data.length) {
          isShow.value = true
          // 转换数据格式
          let names = [];
          let values = [];
          res.data.map(item => {
            names.push(item.callState)
            values.push(item.total)
          })

          echarts.init(chartDom1).setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: names,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '数量',
                type: 'bar',
                barWidth: '60%',
                data: values
              }
            ]
          });
        } else {
          isShow.value = false
        }
      }).catch((err) => {
        isShow.value = false
      })
    }
    
  </script>
  
  <style scoped lang="scss">
    .wrap {
        background-color: #EFEFEF;
        height: 100%;
        .page-header {
          background-color: #ffffff;
          margin: 15px;
          padding: 15px;
          border-radius: 10px;
          margin-right: 0px;
          .headerTitle{
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
            
          }
          .filter-btn{
            position: absolute;
            right: 30px;
            top:20px
          }
        }

    }
  </style>