<template>
  <div class="page-header">
    <div class="headerTitle">本周任务</div>
    <div id="taskMonthEcharts" style="width: 100%; height: 300px;"></div>
    <div>
      <el-row :gutter="30" style="margin: 20px 0px; padding:50px 0px 16px 0px; border-top: 1px solid #EFEFEF;">
        <el-col :span="8">
          <div class="cardBox">
            <div class="header-text2">
              <div class="text2Span1">已完成</div>
              <div class="text2Span2">{{ dataInfo.Completed ?? 0 }}</div>
            </div>
            <div class="header-text3">
              较昨日
              <span :style="'margin: 0 3px; color: ' + getFontColor(dataInfo.YOYCompleted ?? 0)">
                <el-icon v-if="getIcon(dataInfo.YOYCompleted ?? 0)">
                  <CaretTop />
                </el-icon>
                <el-icon v-else>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="cardBox">
            <div class="header-text2">
              <div class="text2Span1">未完成</div>
              <div class="text2Span2">{{ dataInfo.ToBeCompleted }}</div>

            </div>
            <div class="header-text3">
              较昨日
              <span :style="'margin: 0 3px; color: ' + getFontColor(dataInfo.YOYToBeCompleted ?? 0)">
                <el-icon v-if="getIcon(dataInfo.YOYToBeCompleted ?? 0)">
                  <CaretTop />
                </el-icon>
                <el-icon v-else>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="cardBox">
            <div class="header-text2">
              <div class="text2Span1">已超期</div>
              <div class="text2Span2">{{ dataInfo.Expired ?? 0 }}</div>

            </div>
            <div class="header-text3">
              较昨日
              <span :style="'margin: 0 3px; color: ' + getFontColor(dataInfo.YOYExpired ?? 0)">
                <el-icon v-if="getIcon(dataInfo.YOYExpired ?? 0)">
                  <CaretTop />
                </el-icon>
                <el-icon v-else>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </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';

let chartDom1 = null
const followSituationData = ref({})
onMounted(() => {
  chartDom1 = document.getElementById('taskMonthEcharts');
  // selectPlComplete()
  getWeekTask()
})
function getFontColor (value) {
  let resultColor = ''
  if (!value) {
    return ''
  }
  if (value < 0) {
    resultColor = '#F56C6C'
  } else if (value >= 0) {
    resultColor = '#67C23A'
  }
  return resultColor
}
function getIcon (value) {
  let resultFlag = ''
  if (!value) {
    return false
  }
  if (value < 0) {
    resultFlag = false
  } else if (value >= 0) {
    resultFlag = true
  }
  return resultFlag
}

const dataInfo = ref({});

const getWeekTask = () => {
  getPageListData('/SfPlanReport/getWeekTask').then((res) => {
    if (res.data) {
      dataInfo.value = res.data;
      const data = [
        { value: res.data.ToBeCompleted ?? 0, name: '待随访' },
        { value: res.data.SoonOverdue ?? 0, name: '未完成' },
        { value: res.data.Completed ?? 0, name: '已完成' },
        { value: res.data.Expired ?? 0, name: '已超期' },
      ];

      echarts.init(chartDom1).setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
              color: function (colors) {
                var colorList = [
                  '#CEE5FC',
                  '#5F9CF8',
                  '#84B7F9',
                  '#2478F2',
                ];
                return colorList[colors.dataIndex];
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data,
          }
        ]
      });

      // 底部数量

    }
  })
}

</script>

<style scoped lang="scss">
.wrap {
  background-color: #EFEFEF;
  height: 100%;

  .page-header {
    background-color: #ffffff;
    margin: 15px;
    padding: 15px;
    border-radius: 10px;

    .headerTitle {
      font-size: 22px;
      line-height: 30px;
      margin-bottom: 15px;
    }

    .cardBox {
      display: flex;

      .header-text2 {
        /* margin-left: 30px; */
        .text2Span1 {
          font-size: 14px;
        }
        .text2Span2 {
          font-size: 32px;
        }
      }

      .header-text3 {
        /* margin-left: 15px; */
        margin-top: 26px;
        font-size: 12px;
      }
    }
  }

}
</style>