<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>