<!--  -->
<template>
  <div class="workbench-container">
    <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">
            <div slot="header" 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>
            <div class="card-cont">
              <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">
              <div slot="content">
                新签客户：新签合同的起始日期包含在所选时间段内的客户 <br />续约客户：续约合同的起始日期包含在所选时间段内且不包含在新签合同存续期内的客户
                <!-- <br/>未续约客户：由正式状态转为试用状态的日期，包含在所选时间段内的客户 -->
              </div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </h2>
          <Barchart :datasetProps="dataInfo.IncrementalCompanyChartList" />
        </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">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </h2>
          <Barchart :datasetProps="dataInfo.WillExpireChartList" />
        </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">
              <div slot="content">合同数：合同起始日期在所选月份区间内的合同数 <br />合同金额：合同金额的总和</div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </h2>
          <Linechart :datasetProps="dataInfo.IncomeChartList" />
        </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">
              <div slot="content">有效合同数：当前未到期的合同总数量(合同截止日期≥所选日期) <br />合同总金额：当前未到期的合同金额总和 <br />正式客户数：当前处于有效合同执行期的客户数</div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </h2>
          <div class="pie-cont">
            <el-col>
              <Piechart title="有效合同数" :datasetProps="dataInfo.ContractData.ContractTotal" />
            </el-col>
            <el-col>
              <Piechart title="有效合同金额" :datasetProps="dataInfo.ContractData.MoneyTotal" bgcolor="#FE4545" />
            </el-col>
            <el-col>
              <Piechart title="正式客户数" :datasetProps="dataInfo.ContractData.FormalCompanyCount" bgcolor="#486CFF" />
            </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Linechart from "./components/Linechart";
import Barchart from "./components/Barchart";
import Piechart from "./components/Piechart";
import { dataMainInterface } from "@/api/api.js";
import countTo from "vue-count-to";
import { filterMoney } from "@/common/js/util";
export default {
  components: { Linechart, Barchart, Piechart, countTo },
  data() {
    return {
      showData: false,
      staticLabels: [
        {
          label: "正式客户数",
        },
        {
          label: "试用客户数",
        },
        {
          label: "新签客户数",
        },
        {
          label: "续约客户数",
        },
        {
          label: "未续约客户数",
        },
      ],
      dataInfo: {},
      total_formal: 0, //正式客户数
      total_trial: 0, //试用客户数
      total_newsign: 0, //新签客户数
      total_renew: 0, //续约客户数
      total_notrenew: 0, //未续约客户数
    };
  },
  computed: {
    dataAuth() {
      return this.$store.state.dataAuth;
    },
  },
  methods: {
    //顶部数据块点击跳转
    handleTopGo(type) {
      if (type === "正式客户数") {
        this.$router.push({
          path: "/customList",
          query: {
            act_status: "正式",
          },
        });
      } else if (type === "试用客户数") {
        this.$router.push({
          path: "/customList",
          query: {
            act_status: "试用",
          },
        });
      } else if (type === "新签客户数") {
        this.$router.push({
          path: "/stocklist",
          query: {
            type: "新签客户",
          },
        });
      } else if (type === "续约客户数") {
        this.$router.push({
          path: "/stocklist",
          query: {
            type: "续约客户",
          },
        });
      } else if (type === "未续约客户数") {
        this.$router.push({
          path: "/stocklist",
          query: {
            type: "未续约客户",
          },
        });
      }
    },

    // 获取数据
    getWorkdata() {
      dataMainInterface.workdata().then((res) => {
        if (res.Ret === 200) {
          this.dataInfo = res.Data;
          // this.total_formal = filterMoney(res.Data.FormalCompanyCount);
          // this.total_trial = filterMoney(res.Data.TrialCompanyTotal);
          // this.total_newsign = filterMoney(res.Data.NewCompanyTotal);
          // this.total_renew = filterMoney(res.Data.RenewalCompanyTotal);
          // this.total_notrenew = filterMoney(res.Data.NotRenewalCompanyTotal);
          this.total_formal = res.Data.FormalCompanyCount;
          this.total_trial = res.Data.TrialCompanyTotal;
          this.total_newsign = res.Data.NewCompanyTotal;
          this.total_renew = res.Data.RenewalCompanyTotal;
          this.total_notrenew = res.Data.NotRenewalCompanyTotal;
          this.showData = true;
        }
      });
    },
    /* 页面跳转 */
    linkHandle(type) {
      this.$router.push({
        path: type === "incre" ? "/incrementalist" : type === "expire" ? "/expiringlist" : type === "income" ? "/incomelist" : type === "contract" ? "/contractlist" : "",
      });
    },
  },
  created() {
    this.getWorkdata();
  },
};
</script>
<style 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;
        margin-top: 60px;
      }
      .pie-title {
        font-size: 19px;
        color: #555;
      }
    }
  }
}
</style>
