<script setup>
import { ref,reactive,toRefs,computed } from 'vue'
import { useRouter } from 'vue-router'
import { dataMainInterface } from "@/api/api.js";
import { useAppStore } from '@/store/modules/app'
import { InfoFilled } from '@element-plus/icons-vue'
import { useChart } from './hooks/use-chart'
import Chart from './components/chart.vue'

const $router = useRouter()

const appStore = useAppStore();

const dataAuth = computed(() => appStore.dataAuth)

const showData = ref(false)

const staticLabels = [
  {
    label: "正式客户数",
  },
  {
    label: "试用客户数",
  },
  {
    label: "新签客户数",
  },
  {
    label: "续约客户数",
  },
  {
    label: "未续约客户数",
  },
]

const dataState = reactive({
  dataInfo: {},
  total_formal: 0, //正式客户数
  total_trial: 0, //试用客户数
  total_newsign: 0, //新签客户数
  total_renew: 0, //续约客户数
  total_notrenew: 0, //未续约客户数
})
 // 获取数据
function getWorkdata() {
  dataMainInterface.workdata().then((res) => {
    if (res.Ret === 200) {
      dataState.dataInfo = res.Data;

      dataState.total_formal = res.Data.FormalCompanyCount;
      dataState.total_trial = res.Data.TrialCompanyTotal;
      dataState.total_newsign = res.Data.NewCompanyTotal;
      dataState.total_renew = res.Data.RenewalCompanyTotal;
      dataState.total_notrenew = res.Data.NotRenewalCompanyTotal;
      showData.value = true;

      getChartsOpts()
    }
  });
}
getWorkdata()

// 获取图表option
const optionState = reactive({
  incremeOption: null,
  expireOption: null,
  incomeOption: null,
  moneyOption: null,
  contractOption: null,
  formalCompanyOption: null,
})
function getChartsOpts() {
  optionState.incremeOption = useChart('bar',dataState.dataInfo.IncrementalCompanyChartList);

  optionState.expireOption = useChart('bar',dataState.dataInfo.WillExpireChartList); 

  optionState.incomeOption = useChart('line',dataState.dataInfo.IncomeChartList);

  optionState.moneyOption = useChart('pie',dataState.dataInfo.ContractData,'MoneyTotal');

  optionState.contractOption = useChart('pie',dataState.dataInfo.ContractData,'ContractTotal');

  optionState.formalCompanyOption = useChart('pie',dataState.dataInfo.ContractData,'FormalCompanyCount');
}

//顶部数据块点击跳转
function handleTopGo(type) {
  if (type === "正式客户数") {
    $router.push({
      path: "/customList",
      query: {
        act_status: "正式",
      },
    });
  } else if (type === "试用客户数") {
    $router.push({
      path: "/customList",
      query: {
        act_status: "试用",
      },
    });
  } else if (type === "新签客户数") {
    $router.push({
      path: "/stocklist",
      query: {
        type: "新签客户",
      },
    });
  } else if (type === "续约客户数") {
    $router.push({
      path: "/stocklist",
      query: {
        type: "续约客户",
      },
    });
  } else if (type === "未续约客户数") {
    $router.push({
      path: "/stocklist",
      query: {
        type: "未续约客户",
      },
    });
  }
}

/* 页面跳转 */
const pathMap = {
  'incre': '/incrementalist',
  'expire': '/expiringlist',
  'income': '/incomelist',
  'contract': '/contractlist',
}
function linkHandle(type) {
  $router.push({
    path: pathMap[type]
  });
}

const { dataInfo,total_formal,total_trial,total_newsign,total_renew,total_notrenew } = toRefs(dataState)
</script>
<template>
  <div class="workbench-container" :loading="!showData">
    <div class="workbench_top">
      <h3>系统实时数据（每30分钟更新）</h3>
      <el-row type="flex" justify="space-between" class="label-row">
        <el-col v-for="item in staticLabels" :key="item.label" :span="4">
          <el-card class="base-card" @click.native="handleTopGo(item.label)" shadow="hover">
            <template #header>
              <div class="clearfix">
                <span>
                  {{ item.label }}
                  <el-tooltip
                    v-if="item.label === '新签客户数' || item.label === '续约客户数' || item.label === '未续约客户数'"
                    class="item"
                    effect="dark"
                    :content="
                      item.label === '新签客户数'
                        ? '当前状态为正式，且处于新签合同的存续期内的客户'
                        : item.label === '续约客户数'
                        ? '当前状态为正式，且处于续约合同的存续期内的客户'
                        : '历史上有过正式转试用记录，且查询时间点为非正式、非永续状态的客户'
                    "
                    placement="top"
                  >
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </span>
              </div>
            </template>
            <div class="card-cont">
              {{ item.label === '正式客户数'
                    ? total_formal
                    : item.label === '试用客户数'
                    ? total_trial
                    : item.label === '新签客户数'
                    ? total_newsign
                    : item.label === '续约客户数'
                    ? total_renew
                    : item.label === '未续约客户数'
                    ? total_notrenew
                    : '' }}
              <!-- <countTo
                :duration="2000"
                :startVal="0"
                :endVal="
                  item.label === '正式客户数'
                    ? total_formal
                    : item.label === '试用客户数'
                    ? total_trial
                    : item.label === '新签客户数'
                    ? total_newsign
                    : item.label === '续约客户数'
                    ? total_renew
                    : item.label === '未续约客户数'
                    ? total_notrenew
                    : ''
                "
              /> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row type="flex" justify="space-between" class="label-row" style="margin-top: 40px"  v-if="showData">
      <el-col :span="11">
        <el-card shadow="never" class="chart-item">
          <span class="editsty lookdtl" @click="linkHandle('incre')" v-if="dataAuth">查看数据详情>></span>
          <h2 class="pie-title">
            {{ dataInfo.IncrementalCompanyChartList.Title }}
            <el-tooltip class="item" effect="dark" placement="top-start">
              <template #content>
                <div>
                  新签客户：新签合同的起始日期包含在所选时间段内的客户 <br />续约客户：续约合同的起始日期包含在所选时间段内且不包含在新签合同存续期内的客户
                </div>
              </template>
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </h2>
          <Chart id="barChart1" :options="optionState.incremeOption"/>
        </el-card>
      </el-col>
      <el-col :span="11" :pull="1">
        <el-card shadow="never" class="chart-item">
          <span class="editsty lookdtl" @click="linkHandle('expire')" v-if="dataAuth">查看数据详情>></span>
          <h2 class="pie-title">
            {{ dataInfo.WillExpireChartList.Title }}
            <el-tooltip class="item" effect="dark" content="合同截止日期在所选时间段内的客户" placement="top-start">
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </h2>
          <Chart id="barChart2" :options="optionState.expireOption"/>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card shadow="never" class="chart-item">
          <span class="editsty lookdtl" @click="linkHandle('income')" v-if="dataAuth">查看数据详情>></span>
          <h2 class="pie-title">
            {{ dataInfo.IncomeChartList.Title }}
            <el-tooltip class="item" effect="dark" placement="top-start">
              <template #content>
                <div>合同数：合同起始日期在所选月份区间内的合同数 <br />合同金额：合同金额的总和</div>
              </template>
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </h2>
          <Chart id="lineChart" :options="optionState.incomeOption"/>
        </el-card>
      </el-col>
      <el-col :span="11" :pull="1">
        <el-card shadow="never" class="chart-item">
          <span class="editsty lookdtl" @click="linkHandle('contract')" v-if="dataAuth">查看数据详情>></span>
          <h2 class="pie-title">
            {{ dataInfo.ContractData.Title }}
            <el-tooltip class="item" effect="dark" placement="top-start">
              <template #content>
                <div>有效合同数：当前未到期的合同总数量(合同截止日期≥所选日期) <br />合同总金额：当前未到期的合同金额总和 <br />正式客户数：当前处于有效合同执行期的客户数</div>
              </template>
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </h2>
          <div class="pie-cont">
            <Chart id="pieChart1" :options="optionState.contractOption"/>

            <Chart id="pieChart2" :options="optionState.moneyOption"/>

            <Chart id="pieChart3" :options="optionState.formalCompanyOption"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped lang="scss">
.workbench-container {
  .label-row {
    margin-top: 20px;
    flex-wrap: wrap;
    .base-card {
      color: #999;
      font-size: 16px;
      cursor: pointer;
      .card-cont {
        font-size: 30px;
        color: #333;
      }
    }
    .chart-item {
      min-height: 500px;
      border: 1px solid #e6e6e6;
      box-shadow: -2px 3px 6px rgba(172, 172, 172, 0.13);
      margin-bottom: 40px;
      .lookdtl {
        display: block;
        text-align: right;
        margin-bottom: 15px;
        &:hover {
          text-decoration: underline;
        }
      }
      .pie-cont {
        display: flex;
        justify-content: space-around;
        margin-top: 60px;
      }
      .pie-title {
        font-size: 19px;
        color: #555;
      }
    }
  }
}
</style>
