<template>
    <div class="page-content" style="position: relative; margin-bottom: 0px; padding-bottom: 0px; ">
        <div id="mainEcharts1" style="width: 105%; height: 230px; margin-top: 30px;"></div>
        <div class="filter-btn">
            <el-radio-group v-model="dateType" @change="filterListBtn" style="margin-right: 30px; margin-top: -2px;">
                <el-radio-button label="日"  value="1"/>
                <el-radio-button label="周"  value="2"  />
                <el-radio-button label="月"  value="3"  />
                <el-radio-button label="年"  value="4" />
            </el-radio-group>
            <!-- margin-top: 15px;  -->
            <el-date-picker
                style="float: right; width: 220px;"
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="filterListChange"
            />
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import {
CaretBottom,
CaretTop,
} from '@element-plus/icons-vue'
import { getPageListData } from '@/api/main/system/system';
import * as echarts from 'echarts';
import moment from 'moment';
const echarts1Url = new URL('@/assets/images/echarts1.png', import.meta.url).href
const echarts2Url = new URL('@/assets/images/echarts2.png', import.meta.url).href

let chartDom1

const dateType = ref('1')
const dateRange = ref([])
const boardObj = ref({})
const activeName = ref('first')
const completeData = ref()
const sfCompleteData = ref([])
const callDurationData = ref({})
const optionxData2 = ref([])
const optionyData2 = ref([])
const myChart2 = ref()
const followSituationData = ref({})
onMounted(() => {
  chartDom1 = document.getElementById('mainEcharts1');
  selectPlDataBoard()
  selectPlComplete()
  getSfComplete()
  geFollowSituation() // 随访管理
})

function handleClick(value) {
  console.log(value);
  myChart2.value.setOption(optionData2());
  setTimeout(()=>{
      myChart2.value.resize()
  })
  

}
function filterListBtn() {
  console.log(dateType.value);
  dateRange.value = []
  if (dateType.value === '1') {
      dateRange.value.push(moment().format("YYYY-MM-DD"))
      dateRange.value.push(moment().format("YYYY-MM-DD"))
  } else if (dateType.value === '2'){
      dateRange.value.push(moment().weekday(1).format("YYYY-MM-DD")) 
      dateRange.value.push(moment().format("YYYY-MM-DD"))
  } else if (dateType.value === '3'){
      dateRange.value.push(moment().startOf("month").format("YYYY-MM-DD"))
      dateRange.value.push(moment().format("YYYY-MM-DD"))
  } else if (dateType.value === '4'){
      dateRange.value.push(moment().startOf('year').format("YYYY-MM-DD"))
      dateRange.value.push(moment().format("YYYY-MM-DD"))
  }
  getSfComplete()
  selectPlComplete()
}
function filterListChange() {
  dateType.value = 0
  getSfComplete()
  selectPlComplete()
}
// 随访管理
function geFollowSituation() {
  getPageListData("/SfPlanReport/getFollowSituation").then((res)=>{
      if (res.data) {
          followSituationData.value = res.data
      }
  })
}
// 坐席完成量
function getSfComplete() {
  let params = {}
  if (dateType.value) {
      params = {
          type:dateType.value,
      }
  }else{
      params = {
          beginTime :dateRange.value && moment(dateRange.value[0]).format('YYYY-MM-DD'),
          endTime : dateRange.value && moment(dateRange.value[1]).format('YYYY-MM-DD'),
          type:dateType.value,
      }
  }
  getPageListData("/SfPlanReport/selectComplete",params).then((res)=>{ 
      if (res.data) {
          sfCompleteData.value = res.data
      }
  })
}

// 随访量
function selectPlComplete() {
  let params = {}
  if (dateType.value) {
      params = {
          type:dateType.value,
      }
  }else{
      params = {
          beginTime :dateRange.value && moment(dateRange.value[0]).format('YYYY-MM-DD'),
          endTime : dateRange.value && moment(dateRange.value[1]).format('YYYY-MM-DD'),
          type:dateType.value,
      }
  }
  getPageListData("/SfPlanReport/getSfNumber",params).then((res)=>{
      if (res.data) {
          completeData.value = res.data
          let xData = []
          let yData = []
          xData = Object.keys(completeData.value) 
          yData = Object.values(completeData.value) 

          let myChart1 = echarts.init(chartDom1);
          myChart1.setOption(optionData1(xData,yData));
      }
  })
}
// 数据看板
function selectPlDataBoard() {
  const params = {
      plId:2
  }
  getPageListData("/SfPlanReport/selectPlDataBoard",params).then((res)=>{
      if (res.data) {
          boardObj.value = res.data
      }
  })
}

function getFontColor(value) {
  let resultColor = ''
  if (!value) {
      return ''
  }
  if (value.split('%')[0] < 0) {
      resultColor =  '#F56C6C'  
  } else if (value.split('%')[0] >= 0) {
      resultColor =  '#67C23A'  
  }
  return resultColor
}
function getIcon(value) {
  let resultFlag = ''
  if (!value) {
      return false
  }
  if (value.split('%')[0] < 0) {
      resultFlag =  false 
  } else if (value.split('%')[0] >= 0) {
      resultFlag =  true
  }
  return resultFlag
}

function optionData1(xData,yData) {
  let resultData = {
      tooltip: {
          trigger: 'axis'
      },
      grid: {
          left: '2%',
          right:'0%'
      },
      xAxis: {
          type: 'category',
          data: xData
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              data: yData,
              barWidth : 15,
              type: 'bar'
          }
      ]
  }
  return resultData
}
function optionData2() {

  let resultData = {
      tooltip: {
          trigger: 'item'
      },
      grid: {
          left: '2%',
          right:'0%'
      },
      legend: {
          data: ['接通率']
      },
      xAxis: {
          type: 'category',
          data: optionxData2.value
      },
      yAxis: {
          type: 'value',

      },
      series: [
          {
          name: '接通率',
          type: 'line',
          stack: 'Total',
          data:optionyData2.value
          },
          
      ]

  }
  return resultData
}

</script>

<style scoped lang="scss">
.wrap {
  .page-header {
      .header-text1 {
          color: #919191;
          line-height: 36px;
      }

      .header-text2 {
          font-size: 32px;
          line-height: 50px;
      }

      .header-text3 {
          margin-top: 23px;

          span {
              margin-right: 30px;
          }
      }
  }

  .page-content {
      .filter-btn{
          position: absolute;
          top: -3px;
          right: 15px;
          /* display: flex; */
          flex-direction: row;
          justify-content: left;
          align-items: center;
      }
      .card-title {
          width: 100%;
          text-align: center;
          margin: 30px 0px;
      }

      .card-list {
          margin-bottom: 10px;
          line-height: 20px;
          text-align: center;
          .titleRank-active{
              border-radius: 50%;
              width: 20px;
              height: 20px;
              font-size: 16px;
              color: #ffffff;
              background: #919191;
              margin:  0 auto;
          }
          .titleRank{
              width: 20px;
              height: 20px;
              margin:  0 auto;
          }
      }

  }
}</style>