<template>
  <div class="m-box" v-loading="result==null" :style="{zoom:zoomW}">
    <div v-if="result">
      <div class="c-box">
        <div class="first">
          <div class="fince">
            <div class="canvas-box">
              <fince :data="result.financeWeekList"></fince>
            </div>
            <div class="todayIncome">
              <div class="infos">
                <div class="left-text">
                  <span class="bold">7日累计收款</span>
                  <span>今日新增{{result.toDayAddFinanceNum}}笔收款</span>
                </div>
                <i class="iconfont icon-iconkaobei right-icon"></i>
              </div>
              <div class="sumMoney">
                ￥
                <span class="bold">{{result.totalFinancePrice.toFixed(2)}}</span>
              </div>
            </div>
            <div class="todayIncome daishou">
              <div class="infos">
                <div class="left-text">
                  <span class="bold">累计待收</span>
                  <span>共有{{result.forCollectionNum}}笔待收款</span>
                </div>
                <i class="iconfont icon-iconkaobei1 right-icon red"></i>
              </div>
              <div class="sumMoney">
                ￥
                <span class="mbold">{{result.forCollectionPrice.toFixed(2)}}</span>
              </div>
            </div>
            <div class="title">近7日收款走势</div>
          </div>
          <div class="myorder">
            <div class="title">本月收客走势</div>
            <div class="canvas-box">
              <myorder :result="result.monthGuestLineChart"></myorder>
            </div>
            <div class="infos">
              <span class="bold">{{result.monthGuestNum}}</span>
              <span>本月收客人数</span>
            </div>
          </div>
        </div>
        <div class="orders" v-loading="pageLoading">
          <div class="title">我的订单</div>
          <i class="more iconfont icon-gengduo1" title="查看所有订单" @click="openAllOrders"></i>
          <div class="per-tab">
            <table>
              <thead>
                <th class="blue">订单号</th>
                <th>团号</th>
                <th>人数</th>
                <th>成交单价</th>
                <th>应收总额</th>
                <th>实收</th>
                <th>待收</th>
                <th>状态</th>
                <th>操作</th>
              </thead>
              <tbody>
                <tr v-for="(item, index) in orders" :key="index">
                  <td class="blue bold">{{item.orderId}}</td>
                  <td class="bold">{{item.tcnum}}</td>
                  <td>{{item.guestNum}}</td>
                  <td class="bold">{{item.unit_Price.toFixed(2)}}</td>
                  <td class="bold org">{{item.preferPrice.toFixed(2)}}</td>
                  <td class="bold red">{{item.income.toFixed(2)}}</td>
                  <td class="bold red">{{item.dueInMoney}}</td>
                  <td class="bold">{{item.orderStateStr}}</td>
                  <td class="op" @click="openOrders(item.orderId)">
                    <i title="查看" class="el-icon-view"></i>
                  </td>
                </tr>
                <tr v-if="!orders || orders.length==0">
                  <td colspan="9" style="color:gray;border:none;padding:50px 0;text-align:center">暂时还没有报名单，赶紧行动起来吧</td>
                </tr>
              </tbody>
            </table>
          </div>
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryCommonData.pageIndex"
            layout="total,prev, pager, next, jumper" :page-size="queryCommonData.pageSize"
            :total="queryCommonData.total" v-if="queryCommonData.total>6"></el-pagination>
        </div>
        <!-- 未认款 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="orders" v-loading="RLoading">
              <div class="title">未认款</div>
              <i v-if="CurrentUserInfo.RB_Group_id==2" class="more iconfont icon-gengduo1" title="查看所有未认款" @click="openAllMan"></i>
              <div class="per-tab">
                <table>
                  <thead>
                    <th>编号</th>
                    <th>别名</th>
                    <!-- <th>户名</th> -->
                    <!-- <th>开户行</th>
                    <th>账号</th> -->
                    <th>交易时间</th>
                    <th>收</th>
                    <!-- <th>支</th> -->
                    <th>对方户名</th>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in rList" :key="index">
                      <td class="bold">{{item.ID}}</td>
                      <td class="bold">{{item.Alias}}</td>
                      <!-- <td class="bold">{{item.OpeningBank}}</td>
                      <td>{{item.BackNo | PNumber}}</td> -->
                      <td class="bold">{{item.TradeDate}}</td>
                      <td class="bold org">{{item.Income | MoneyMu}}</td>
                      <!-- <td class="bold red">{{item.Refund | MoneyMu}}</td> -->
                      <td class="bold red">{{item.Remitter}}</td>
                    </tr>
                    <tr v-if="!rList || rList.length==0">
                      <td colspan="8" style="color:gray;border:none;padding:50px 0;text-align:center">暂无数据</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="first">
              <!-- <div class="imbox">
                <div class="title">近期消息</div>
                <imbox></imbox>
              </div> -->
              <div class="imbox" style="padding-top:60px;    margin-top: 20px;">
                <div class="title">公告通知</div>
                <div class="tab">
                  <span class="item" :class="{'active':choseNoticeType==0}" @click="changeNoticeType(0)">公告</span>
                  <span class="item" :class="{'active':choseNoticeType==1}" @click="changeNoticeType(1)">通知</span>
                </div>
                <gonggao v-show="choseNoticeType==0"></gonggao>
                <notice v-show="choseNoticeType==1"></notice>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="first">
          <div class="pingtai">
            <div class="title">成交平台占比</div>
            <pingtai :result="result.orderSourceList" :total='result.totalOrderNum'></pingtai>
          </div>
          <div class="cloud">
            <div class="title">云盘</div>
            <cloud :result="result.cloudStorageList"></cloud>
          </div>
        </div>
      </div>
      <div class="r-box">
        <div class="sell">
          <div class="title">本周销冠</div>
          <i class="more iconfont icon-gengduo1 white" title="查看往期排行" v-if="CurrentUserInfo.RB_Group_id==2" @click="openRank"></i>
          <sell :champion="result.orderRankList"></sell>
        </div>
        <div class="todayOpera">
          <div class="title">今日操作</div>
          <div class="content">
            <todayOpera></todayOpera>
          </div>
        </div>
        <div class="newpersonal">
          <div class="title">新鲜的同事</div>
          <newpersonal :users="result.monthEmployeeList"></newpersonal>
        </div>
        <div class="tousu">
          <div class="title">我的投诉</div>
          <div class="content">
            <tousu :result="result.complainList" :total="result.complainNum"></tousu>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import fince from "./fince";
  import myorder from "./myorder";
  import todayOpera from "./todayOpera";
  import pingtai from "./pingtai";
  import cloud from "./cloud";
  import imbox from "./imbox";
  import gonggao from "./gonggao";
  import notice from "./notice";
  import sell from "./sell";
  import newpersonal from "./newpersonal";
  import tousu from "./tousu";
  export default {
    data() {
      return {
        defaultHeadImg: `this.src="${require("../../assets/img/default_head_img.jpg")}"`,
        zoomW: 0,
        choseNoticeType: 0,
        queryCommonData: {
          pageSize: 6,
          total: 0,
          pageIndex: 1
        },
        result: null,
        orders: [],
        pageLoading: false,
        RLoading: false,
        rList:[],
        CurrentUserInfo: {},
      };
    },
    components: {
      fince,
      myorder,
      todayOpera,
      pingtai,
      cloud,
      imbox,
      gonggao,
      notice,
      sell,
      newpersonal,
      tousu
    },
    filters: {
      PNumber(val) {
        if (val) {
          return val.substr(0, 4) + "****" + val.substr(-4, 4);
        }
      },
      MoneyMu(val) {
        if (val) {
          val = val.toFixed(2);
          let arr = val.split(".");
          let length = arr[0].length;
          if (length < 3) {
            return val;
          } else {
            let str = "*************************";
            return val.substr(0, 2) + str.substr(0, length - 2) + ".**";
          }
        } else {
          return val;
        }
      }
    },
    mounted() {
        this.CurrentUserInfo = this.getLocalStorage();
      this.zoomW = (document.documentElement.clientWidth / 1920).toFixed(2);
      this.init();
      this.queryOrder();
      this.getList();
    },
    methods: {
      openAllMan(id) {
        const {
          href
        } = this.$router.resolve({
          path: "/Maninfo"
        });
        window.open(href, "_blank");
      },
      openRank() {
        const {
          href
        } = this.$router.resolve({
          path: "/saleRnkBefore"
        });
        window.open(href, "_blank");
      },
      getList() {
        let msg = {
          pageIndex: 1,
          pageSize: 6,
          StartTime: "",
          EndTime: "",
          BankAccountId: "",
          Remitter: "",
          SIncome: "",
          EIncome: "",
          SRefund: "",
          ERefund: "",
          AccountName: "",
          Type: -1
        };
        this.RLoading = true;
        this.apipost(
          "Financial_post_GetFinanceRemittanceClaimPageList",
          msg,
          res => {
            this.RLoading = false;
            if (res.data.resultCode == 1) {
              this.rList = res.data.data.pageData;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      handleCurrentChange(index) {
        this.queryCommonData.pageIndex = index;
        this.queryOrder();
      },
      changeNoticeType(t) {
        this.choseNoticeType = t;
      },
      init() {
        this.apipost("customerIndex_post_GetPersonalCenter", {}, r => {
          this.result = r.data.data;
          if (this.result) {
            this.result.totalFinancePrice = 0;
            this.result.financeWeekList.forEach(x => {
              this.result.totalFinancePrice += x.preferPrice;
            });
          }
        });
      },
      queryOrder() {
        this.pageLoading = true;
        this.apipost(
          "customerIndex_post_GetPersonalCenterOrder",
          this.queryCommonData,
          r => {
            this.orders = r.data.data.pageData;
            this.queryCommonData.total = r.data.data.count;
            this.pageLoading = false;
          }
        );
      },
      openOrders(id) {
        let query = {
          id
        };
        const {
          href
        } = this.$router.resolve({
          path: "/groupTourOrder",
          query
        });
        window.open(href, "_blank");
      },
      openAllOrders(id) {
        const {
          href
        } = this.$router.resolve({
          path: "/groupTourOrder"
        });
        window.open(href, "_blank");
      }
    }
  };

</script>
<style scoped>
  .personal .c-box {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 480px;
    background: rgba(242, 243, 248, 1);
    padding: 20px;
  }

  .personal .c-box .first {
    display: flex;
  }

  .personal .r-box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 480px;
    padding: 20px;
    padding-left: 0;
    background: rgba(242, 243, 248, 1);
  }

  .personal .c-box .fince,
  .personal .c-box .myorder,
  .personal .c-box .pingtai,
  .personal .c-box .cloud,
  .personal .c-box .imbox {
    width: 540px;
    height: 360px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
    position: relative;
  }

  .personal .c-box .imbox {
    height: 419px;
  }

  .personal .c-box .pingtai {
    height: 300px;
    margin: 20px 0;
    padding-top: 65px;
  }

  .personal .c-box .cloud {
    height: 300px;
    margin: 20px 0 20px 20px;
    padding: 110px 45px 0 45px;
  }

  .personal .c-box .orders {
    height: 419px;
    background: #fff;
    box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
    border-radius: 6px;
    margin-top: 20px;
    position: relative;
    padding-top: 50px;
  }

  .personal .r-box .todayOpera,
  .personal .r-box .newpersonal {
    height: 460px;
    box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
    border-radius: 6px;
    background: #fff;
    margin-top: 20px;
  }

  .personal .r-box .newpersonal {
    height: auto;
    position: relative;
  }

  .personal .r-box .sell,
  .personal .r-box .tousu {
    height: auto;
    box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
    border-radius: 6px;
    background: #fff;
    position: relative;
    overflow: hidden;
  }

  .personal .r-box .tousu {
    margin-top: 20px;
  }

  .personal .r-box .sell .title {
    height: 73px;
    padding: 0 30px;
    padding-top: 21px;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    background: #8eafec;
  }

  .personal .r-box .tousu .title {
    padding: 20px 30px;
    font-size: 16px;
    color: #2c3343;
  }

  .personal .r-box .tousu .content {
    height: 154px;
  }

  .personal .r-box .todayOpera .title,
  .personal .r-box .newpersonal .title {
    height: 56px;
    line-height: 56px;
    padding-left: 30px;
    border-bottom: 1px solid #ebedf2;
    font-size: 16px;
    color: #2c3343;
  }

  .personal .r-box .todayOpera .content {
    width: 100%;
    height: 403px;
    padding: 15px 30px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .personal .c-box .myorder {
    margin-left: 20px;
  }

  .personal .c-box .fince .canvas-box {
    width: 100%;
    height: 203px;
  }

  .personal .c-box .myorder .canvas-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
  }

  .personal .c-box .fince .todayIncome {
    width: 213px;
    height: 144px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 14px 0px rgba(215, 215, 215, 1);
    border-radius: 6px;
    top: 162px;
    left: 39px;
    position: absolute;
    padding: 25px 27px;
    box-sizing: border-box;
  }

  .personal .c-box .fince .todayIncome .infos {
    display: flex;
  }

  .personal .c-box .myorder .infos {
    margin-top: 80px;
    margin-left: 30px;
    font-size: 12px;
    color: #93959a;
  }

  .personal .c-box .myorder .infos * {
    display: block;
  }

  .personal .c-box .myorder .infos .bold {
    font-size: 28px;
    color: #5d78ff;
    font-family: pingfangR;
  }

  .personal .c-box .fince .todayIncome .infos .left-text {
    flex: 1;
    height: 36px;
    line-height: 21px;
    font-size: 12px;
    color: #93959a;
  }

  .personal .c-box .fince .todayIncome .infos .left-text * {
    display: block;
  }

  .personal .c-box .fince .todayIncome .infos .left-text .bold {
    font-family: pingfangR;
    font-size: 14px;
    color: #0a0919;
  }

  .personal .c-box .fince .todayIncome .infos .right-icon {
    font-size: 36px;
    color: #0abb87;
    width: 36px;
    margin-top: -10px;
  }

  .personal .c-box .fince .todayIncome .infos .right-icon.red {
    color: #dc3545;
  }

  .personal .c-box .fince .todayIncome .sumMoney {
    color: #2c3343;
    font-size: 12px;
    text-align: right;
    margin-top: 20px;
  }

  .personal .c-box .fince .todayIncome .sumMoney .bold {
    font-size: 28px;
    font-family: pingfangR;
  }

  .personal .c-box .fince .todayIncome .sumMoney .mbold {
    font-size: 25px;
    font-family: pingfangR;
  }

  .personal .c-box .fince .title,
  .personal .c-box .myorder .title,
  .personal .c-box .orders .title,
  .personal .c-box .pingtai .title,
  .personal .c-box .cloud .title,
  .personal .c-box .imbox .title {
    height: 15px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 34px;
    position: absolute;
    left: 30px;
    top: 10px;
    font-family: pingfangR;
  }

  .personal .more {
    position: absolute;
    top: 17px;
    right: 20px;
    font-size: 13px;
    color: #8a8894;
    cursor: pointer;
  }

  .personal .more:hover {
    color: #5d78ff;
  }

  .personal .more.white {
    color: #fff;
    opacity: 0.5;
  }

  .personal .more.white:hover {
    opacity: 1;
  }

  .personal .c-box .myorder .title,
  .personal .c-box .orders .title,
  .personal .c-box .pingtai .title,
  .personal .c-box .cloud .title,
  .personal .c-box .imbox .title {
    color: #2c3343;
  }

  .personal .c-box .fince .todayIncome.daishou {
    right: 40px;
    left: unset;
  }

  .personal .per-tab {
    min-height: 295px;
  }

  .personal .per-tab table {
    padding: 0;
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    color: #6c7293;
  }

  .personal .per-tab table thead th {
    font-size: 14px;
    font-family: pingfangR;
    padding: 10px 16px;
    border-bottom: 1px solid #ebedf2;
    text-align: left;
  }

  .personal .per-tab table td.blue,
  .personal .per-tab table th.blue {
    color: #5d78ff;
  }

  .personal .per-tab table td.org,
  .personal .per-tab table th.org {
    color: #ffb822;
  }

  .personal .per-tab table td.red,
  .personal .per-tab table th.red {
    color: #fd397a;
  }

  .personal .per-tab table td {
    padding: 10px 16px;
    font-size: 12px;
    border-bottom: 1px solid #ebedf2;
    text-align: left;
  }

  .personal .per-tab table td.bold {
    font-size: 14px;
    font-family: pingfangR;
  }

  .personal .per-tab table td.op i {
    font-size: 18px;
    color: #5d78ff;
    cursor: pointer;
  }

  .personal .per-tab table td.op i:hover {
    color: #3658ff;
  }

  .personal .el-pagination {
    margin-top: 18px;
    border-top: none;
    font-weight: 400px;
  }

  .personal .c-box .imbox .tab {
    position: absolute;
    top: 18px;
    right: 0px;
    display: flex;
  }

  .personal .c-box .imbox .tab .item {
    margin-right: 40px;
    padding: 7px 8px;
    font-size: 12px;
    color: #757880;
    cursor: pointer;
    border-radius: 2px;
  }

  .personal .c-box .imbox .tab .item.active,
  .personal .c-box .imbox .tab .item:hover {
    background: #eef1ff;
    color: #5d78ff;
  }

</style>