<template>
  <div class="home">
    <el-row :gutter="25">
      <el-col :span="16">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>客户简报</span>
          </div>
          <div class="shang-list">
            <el-row :gutter="5">
              <el-col :span="12">
                <div class="shang-list-item">
                  <div class="icon">
                    <i class="iconfont iconVerifiedcustomername"></i>
                  </div>
                  <div class="title">新建客户</div>
                  <div class="result">{{Briefing.customerNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.customerRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.customerRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.customerRate > 0, 'green': Briefing.customerRate < 0}">{{Briefing.customerRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon orange">
                    <i class="iconfont iconlianxiren"></i>
                  </div>
                  <div class="title">新建联系人</div>
                  <div class="result">{{Briefing.contactNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.contactRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.contactRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.contactRate > 0, 'green': Briefing.contactRate < 0}">{{Briefing.contactRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon green">
                    <i class="iconfont iconshangji-"></i>
                  </div>
                  <div class="title">新建商机</div>
                  <div class="result">{{Briefing.businessNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.businessRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.businessRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.businessRate > 0, 'green': Briefing.businessRate < 0}">{{Briefing.businessRate}}</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon grey">
                    <i class="iconfont icongenjin"></i>
                  </div>
                  <div class="title">新建跟进</div>
                  <div class="result">0</div>
                  <!-- <div class="eq">
                    较上月
                    <i class="iconfont iconzujiantubiaokupx_- red"></i>
                    <span class="val red">40%</span>
                  </div> -->
                </div>
              </el-col>
              <el-col :span="12">
                <div class="shang-list-item">
                  <div class="icon blue">
                    <i class="iconfont icondingdan"></i>
                  </div>
                  <div class="title">新建订单</div>
                  <div class="result">{{Briefing.orderNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.orderRate > 0, 'green': Briefing.orderRate < 0}">{{Briefing.orderRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon red">
                    <i class="iconfont iconjine"></i>
                  </div>
                  <div class="title">订单金额</div>
                  <div class="result">{{Briefing.orderPriceNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderPriceRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderPriceRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.orderPriceRate > 0, 'green': Briefing.orderPriceRate < 0}">{{Briefing.orderPriceRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon zi">
                    <i class="iconfont iconmoney"></i>
                  </div>
                  <div class="title">新建收款</div>
                  <div class="result">{{Briefing.financePriceNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-else-if="Briefing.financePriceRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.financePriceRate > 0, 'green': Briefing.financePriceRate < 0}">{{Briefing.financePriceRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon yellow">
                    <i class="iconfont iconbaifang"></i>
                  </div>
                  <div class="title">新建拜访</div>
                  <div class="result">0</div>
                  <!-- <div class="eq">
                    较上月
                    <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
                    <i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
                    <i class="iconfont iconchiping" v-else></i>
                    <span class="val red">100%</span>
                  </div> -->
                </div>
              </el-col>
            </el-row>

          </div>
        </el-card>
        <el-card shadow="never" style="margin-top:25px;">
          <div slot="header" class="clearfix">
            <span>能力评级</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tic-card" shadow="never">
          <div class="tic-content">
            <el-row :gutter="10">
              <el-col :span="8">
                <img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;" />
              </el-col>
              <el-col :span="16">
                <div class="money-box">
                  <small>￥</small>
                  {{Briefing.totalCommission}}
                </div>
                <div class="tips">本月提成</div>
              </el-col>
            </el-row>
          </div>
          <div class="tic-chart" v-if="Briefing.sixMonthCommissionList">
            <ticheng :MYdata="Briefing.sixMonthCommissionList" />
          </div>
        </el-card>
        <el-card class="zhou-card" shadow="never">
          <el-row :gutter="10">
            <el-col :span="10" class="title">本周销冠</el-col>
            <el-col :span="14" class="money-box">
              <small>￥</small>
              {{Briefing.model.TotalPrice}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span class="zhou-head">
                <img :src="Briefing.model.EmployeeImg" alt />
              </span>
            </el-col>
          </el-row>
          <div class="zhou-name">{{Briefing.model.EmployeeName}}</div>
          <div class="zhou-depart">
            {{Briefing.model.BranchName}}
            <b>·</b>
            {{Briefing.model.DeptName}}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="25" style="margin-top:25px;">
      <el-col :span="10">
        <el-card class="sum-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>数据汇总</span>
          </div>
          <div class="sum-list">
            <div class="sum-list-item">
              <div class="icon"></div>
              <div class="item-name">客户汇总</div>
              <div class="item-hui">
                新建客户
                <b>{{Briefing.allCustomerCount}}</b>个
              </div>
              <div class="item-hui">
                转成交客户
                <b>{{Briefing.caclCount}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon green"></div>
              <div class="item-name">跟进汇总</div>
              <div class="item-hui">
                跟进客户
                <b>{{Briefing.followUpCount}}</b>个
              </div>
              <div class="item-hui">
                新建客户中未跟进
                <b>{{Briefing.notFollowUpCount}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon blue"></div>
              <div class="item-name">商机汇总</div>
              <div class="item-hui">
                新建商机
                <b>{{Briefing.allBusinessCount}}</b>个
              </div>
              <div class="item-hui">
                赢单商机
                <b>{{Briefing.winningBusiness}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon zi"></div>
              <div class="item-name">订单汇总</div>
              <div class="item-hui">
                新建订单
                <b>{{Briefing.allOrderCount}}</b>个
              </div>
              <div class="item-hui">
                订单金额
                <b>{{Briefing.allOrderPrice}}</b>万
              </div>
            </div>
            <!-- <div class="sum-list-item">
                  <div class="icon qing"></div>
                  <div class="item-name">待收款金额汇总</div>
                  <div class="item-hui">未收金额<b>0</b>万</div>
                  <div class="item-hui">已收金额<b>0</b>万</div>
            </div>-->
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="notinmoney-card" shadow="never">
          <div class="title">待收款汇总</div>
          <div class="money">
            <small>￥</small>
            {{Briefing.DueInMoney}}
          </div>
          <div class="charts-box" v-if="Briefing.sixOrderList">
            <notincome :MYdata="Briefing.sixOrderList" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="sum-card ding" shadow="never">
          <div slot="header" class="clearfix">
            <span>遗忘提醒</span>
          </div>
          <div class="sum-list">
            <div class="sum-list-item">
              <div class="icon"></div>
              <div class="item-name">超过7天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.sevenDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon green"></div>
              <div class="item-name">超过15天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.fifteenDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon blue"></div>
              <div class="item-name">超过30天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.ThirtyDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon zi"></div>
              <div class="item-name">超过3个月未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.threeMonthNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon qing"></div>
              <div class="item-name">超过6个月未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.sixMonthNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon block"></div>
              <div class="item-name">逾期未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.beOverdueNum}}</b>个
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="25" style="margin-top:25px;">
      <el-col :span="16">
        <el-card class="rank-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="12">
                <span>排行榜</span>
              </el-col>
              <el-col :span="12" class="option-item" style>
                <el-select
                  v-model="rankType"
                  size="mini"
                  style="width:120px;"
                  placeholder="请选择"
                  @change="GetRankingList"
                >
                  <el-option label="销售额排名" :value="1"></el-option>
                  <el-option label="新建客户排名" :value="2"></el-option>
                  <el-option label="新建商机排名" :value="3"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="rank-list">
            <div class="rank-list-item" v-for="(item, index) in RankingList" :key="index">
              <div class="rank red">NO.{{item.RankNum}}</div>
              <div class="head">
                <el-avatar :size="40" :src="item.EmpPhoto"></el-avatar>
              </div>
              <div class="rank-name">
                <div class="rn">{{item.EmpName}}</div>
                <div>{{item.DeptName}}</div>
              </div>
              <div class="score">{{item.TotalNum}}</div>
            </div>
            <div v-if="RankingList.length < 1" class="nodata font-color-info">
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="loudou-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="12">
                <span>销售漏斗</span>
              </el-col>
              <el-col :span="12" class="option-item" style>
                <el-select v-model="rankType2" size="mini" style="width:120px;" placeholder="请选择">
                  <el-option label="商机漏斗图" value="1"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div style="width:100%;height:100%;">
            <!-- <sjld :MYdata="[]"/> -->
            <div v-if="RankingList.length < 1" class="nodata font-color-info">
              <p>努力开发中</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou";
export default {
  components: {
    ticheng,
    notincome,
    sjld,
  },
  data() {
    return {
      rankType: 1,
      rankType2: "1",
      RankingList: [],
      Briefing: { model: { TotalPrice: 0 } },
    };
  },
  mounted() {
    this.GetRankingList();
    this.GetBriefing();
  },
  methods: {
    GetBriefing() {
      this.apipost("/api/CustomerDashboard/GetBriefing", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.Briefing = res.data.data;
        }
      });
    },
    GetRankingList() {
      this.apipost(
        "/api/CustomerDashboard/GetRankingList",
        { rankType: this.rankType },
        (res) => {
          if (res.data.resultCode == 1) {
            this.RankingList = res.data.data;
          }
        }
      );
    },
  },
};
</script>

<style>
.home {
  width: 100%;
  margin-bottom: 25px;
}
.el-card__header {
  font-family: perfectFont;
  font-weight: bold;
}
.el-card,
.el-message {
  border-radius: 0 !important;
}
.box-card .shang-list {
}
.box-card,
.sum-card,
.rank-card {
  padding-bottom: 20px;
}
.box-card .el-card__body,
.sum-card .el-card__body,
.rank-card .el-card__body {
  height: 358px;
  overflow-y: hidden;
  padding: 0px 20px !important;
  margin-top: 20px;
}
.box-card .el-card__body {
  height: 237px;
}
/* .box-card .el-card__body:hover, */
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover {
  overflow-y: auto;
  padding-right: 16px !important;
}
.box-card .shang-list .shang-list-item {
  margin-bottom: 5px;
  height: 54px;
  background: rgba(242, 242, 242, 1);
  display: flex;
  align-items: center;
}
.box-card .icon {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: #409efe;
  color: #fff;
  margin: 0 25px;
}
.box-card .shang-list .shang-list-item .title {
  font-size: 14px;
  color: #333333;
  width: 80px;
  padding-top: 18px;
  font-weight: bold;
  font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .result {
  flex: 1;
  padding-left: 130px;
  font-size: 20px;
  font-family: perfectFont;
  color: #000;
  font-weight: bold;
  text-align: right;
  padding-right: 25px;
}
.box-card .shang-list .shang-list-item .eq {
  width: 200px;
  font-size: 12px;
  color: gray;
}
.box-card .shang-list .shang-list-item .eq i {
  font-size: 26px;
  margin-left: 30px;
  margin-right: 15px;
  color: #333;
  vertical-align: sub;
}
.box-card .shang-list .shang-list-item .eq .val {
  font-size: 20px;
  font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .eq .green {
  color: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .eq .red {
  color: rgb(195, 0, 82);
}
.box-card .icon i {
  font-size: 14px;
}
.box-card .icon.green {
  background: rgb(16, 124, 16);
}
.box-card .icon.blue {
  background: rgb(0, 99, 177);
}
.box-card .icon.orange {
  background: rgb(202, 80, 16);
}
.box-card .icon.grey {
  background: rgb(118, 118, 118);
}
.box-card .icon.red {
  background: rgb(195, 0, 82);
}
.box-card .icon.zi {
  background: rgb(136, 23, 152);
}
.box-card .icon.yellow {
  background: rgb(255, 185, 0);
}
.tic-card {
  padding: 0px;
  height: 196px;
  border: none;
}
.tic-card .el-card__body,
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
  padding: 0px;
}
.tic-card .tic-content {
  height: 83px;
  width: 100%;
}
.tic-card .tic-content .money-box {
  margin-top: 20px;
  margin-right: 30px;
  color: #00c5c8;
  font-family: perfectFont;
  text-align: right;
  font-size: 26px;
  font-weight: bold;
}
.tic-card .tic-content .money-box small {
  font-size: 12px;
  font-weight: 500;
}
.tic-card .tic-content .tips {
  font-size: 14px;
  color: #666;
  margin-right: 30px;
  text-align: right;
}
.tic-card .tic-chart {
  height: 111px;
  width: 100%;
}
.zhou-card {
  padding: 0px;
  border: none;
  background: #409efe;
  margin-top: 25px;
  height: 236px;
}
.zhou-card .el-card__body {
  padding: 0px;
  background: url("../assets/img/home/zhouguan.png") #409efe;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.zhou-card .title {
  font-size: 20px;
  font-family: perfectFont;
  color: #fff;
  padding: 10px 0 0 0px;
  text-indent: 20px;
}
.zhou-card .money-box {
  margin-top: 10px;
  padding-right: 20px !important;
  color: #fff;
  font-family: perfectFont;
  text-align: right;
  font-size: 26px;
  font-weight: bold;
}
.zhou-card .money-box small {
  font-size: 12px;
  font-weight: 500;
}
.zhou-card .zhou-head {
  margin: 10px auto;
  display: block;
  width: 70px;
  height: 70px;
  background: rgba(85, 189, 233, 0.2);
  padding: 4px;
  border-radius: 100%;
}
.zhou-card .zhou-head img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.zhou-card .zhou-name {
  font-size: 14px;
  color: #fff;
  font-family: perfectFont;
  font-weight: bold;
  text-align: center;
}
.zhou-card .zhou-depart {
  font-size: 14px;
  color: #fff;
  font-family: perfectFont;
  text-align: center;
  margin-top: 15px;
}
.sum-card .el-card__body {
  height: 165px;
  overflow-y: hidden;
  padding-right: 20px;
}
.sum-card .sum-list {
}
.sum-card .sum-list .sum-list-item {
  height: 45px;
  border-bottom: 1px solid #e2e4ef;
  display: flex;
  align-items: center;
}
.sum-card .sum-list .sum-list-item .icon {
  width: 4px;
  height: 12px;
  margin-right: 10px;
  background: #ffa475;
}
.sum-card .sum-list .sum-list-item .icon.green {
  background: #94b877;
}
.sum-card .sum-list .sum-list-item .icon.blue {
  background: #409efe;
}
.sum-card .sum-list .sum-list-item .icon.zi {
  background: rgb(210, 197, 240);
}
.sum-card .sum-list .sum-list-item .icon.qing {
  background: #55bde9;
}
.sum-card .sum-list .sum-list-item .icon.black {
  background: #333;
}
.sum-card .sum-list .sum-list-item .item-name {
  width: 90px;
  font-size: 12px;
}
.ding .sum-list .sum-list-item .item-name {
  width: 150px;
}
.sum-card .sum-list .sum-list-item .item-hui {
  flex: 1;
  font-size: 12px;
  text-align: right;
}
.sum-card .sum-list .sum-list-item .item-hui b {
  font-weight: bold;
  font-size: 22px;
  font-family: perfectFont;
  margin: 0 5px;
}
.notinmoney-card {
  height: 268px;
}
.notinmoney-card .title {
  font-size: 17px;
  font-family: perfectFont;
  color: #000;
  padding: 10px 0 0 0px;
  text-indent: 20px;
  font-weight: bold;
}
.notinmoney-card .money {
  font-size: 30px;
  font-family: perfectFont;
  color: #000;
  padding: 10px 0 0 0px;
  text-indent: 20px;
  font-weight: bold;
  color: #ffa475;
}
.notinmoney-card .charts-box {
  height: 178px;
}
.notinmoney-card .money small {
  font-size: 12px;
  font-weight: 400;
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
  height: 358px;
  overflow-y: hidden;
  padding-right: 20px;
}
.rank-list {
}
.rank-list .rank-list-item {
  height: 85px;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
}
.rank-list .rank-list-item:hover {
  background: #f4f5f9;
}
.rank-list .rank-list-item .rank {
  width: 200px;
  font-size: 18px;
  color: #999;
  font-family: perfectFont !important;
  font-weight: bold;
}
.rank-list .rank-list-item .rank.blue {
  color: #409efe;
}
.rank-list .rank-list-item .rank.red {
  color: rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi {
  color: rgb(136, 23, 152);
}
.rank-list .rank-list-item .head {
  width: 70px;
}
.rank-list .rank-list-item .rank-name {
  width: 200px;
  font-size: 12px;
  color: #666;
}
.rank-list .rank-list-item .rank-name .rn {
  font-family: perfectFont !important;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}
.rank-list .rank-list-item .score {
  font-size: 22px;
  font-family: perfectFont !important;
  font-weight: bold;
  color: #333;
  text-align: right;
  flex: 1;
}
.option-item {
  text-align: right;
}
.option-item .el-select > .el-input {
  display: block;
  background: #409efe;
  border-radius: 0;
}
.option-item .el-input--mini .el-input__inner {
  height: 28px;
  line-height: 28px;
  background: #409efe;
  border-radius: 0;
  color: #f1f1f1;
}
.option-item .el-select .el-input.is-focus .el-input__inner {
  border-color: #409efe;
}
.el-select-dropdown {
  border-radius: 0px !important;
}
.el-select-dropdown__item.selected {
  font-family: perfectFont !important;
  color: #409efe !important;
}
.el-select-dropdown__item {
  /* font-family: perfectFont !important; */
  font-size: 12px !important;
}
.loudou-card .el-card__header {
  border: none;
}
</style>
