
<template>
  <div class="daily">
    <div class="reportcom-header-wap">
      <div class="reportcom-header">
        <!-- <div class='reportcom-logo'>
          <img src="../../assets/longjoe.png" class="reportcom-img-responsive"></img>
        </div> -->
        <div class="reportcom-header-title" style="font-size:28px">销售订单收款统计表</div>
        <!-- <div class="reportcom-header-title" style="font-size:28px">新增销售订单统计表</div> -->
        <div class="reportcom-header-title" style="font-size:18px">2019.01 ~ 2019.06
          <span style="font-size:15px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xuanze1"></use>
            </svg>
          </span>
        </div>
      </div>
      <div class="reportcom-header-sub"></div>
      <div class="reportcom-header-sub-two"></div>
    </div>

    <!-- <div class="report_selection">
      <div class='report_selection_check'>销售额</div>
      <div style="margin-left:50px">利润</div>
    </div> -->



    <div class="daily-sale">
      <div style="font-size:14px;color:#666;display:flex">
          <div style="margin:0 auto">
        <span>总金额:7900万</span>
        <span style="margin-left:10px">柜数:700</span>
        <span style="margin-left:10px">客户数:48</span>
        <span style="margin-left:10px">订单数:680</span>
          </div>
      </div>
      <div class="img_wap">
        <div style="flex:0 0 90%;margin: 0 auto;">
          <img src="../../assets/zhexian_0619_01.jpg" class="img-bingtu"></img>
        </div>
      </div>

      <div class="liubai"></div>

      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
        <div style="margin:0 auto">区域占比</div>
      </div>
      <div class="img_wap">
        <div style="flex:0 0 90%;margin: 0 auto;">
          <img src="../../assets/bingtu_0619_01.jpg" class="img-bingtu"></img>
        </div>
      </div>

      <div class="liubai"></div>


      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
        <div style="margin:0 auto">业务员占比</div>
      </div>

      <div class="daily-sale-cust">

        <div class="daily-sale-cust-list" v-for="(saleritem,index) in saleramtlist" :key="index">
          <div class="daily-sale-cust-index">
            <div v-if="index>2">
              {{index+1}}
            </div>
            <svg class="icon" aria-hidden="true" v-if="index<=2">
              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
            </svg>
          </div>
          <div class="daily-sale-cust-name">

            <!-- <div v-if="reporttype==1">{{saleritem.cusname}}</div>
            <div v-if="reporttype==2">{{saleritem.mtrlname}}</div> -->
            <div style="display:flex;align-items: center">
              <div style="margin-right:30px" >{{saleritem.salername}}</div>
              <div class="daily-sale-cust-amt">{{saleritem.amt}}元</div>
              <div class="saler_percent">占比 {{saleritem.percent}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="report_other">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tishi"></use>
        </svg>
        您还可以查看其它报表：</div>
      <div class="report_other_link">业务员销售排名统计表</div>
      <div class="report_other_link">客户销售排名统计表</div>
      <div class="report_other_link">产品销售排名统计表</div>
      <div class="report_other_link">在进行出口订单异常统计表</div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'daily',
    data() {
      return {
        reporttype: 2, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
        saleramtlist: [{
            salername: "张小姗",
            cusname: "沙特石油王子有限公司",
            mtrlname: "经理椅 NF-8920",
            amt: "3,000,000",
            percent: "30%"
          },
          {
            salername: "李小四",
            cusname: "俄罗斯老铁有限公司",
            mtrlname: "经理椅 NF-8927",
            amt: "2,000,000",
            percent: "20%"
          },
          {
            salername: "王小五",
            cusname: "英国王室有限公司",
            mtrlname: "职员椅 NF-3343",
            amt: "1,500,000",
            percent: "15%"
          },
          {
            salername: "吴小丽",
            cusname: "法国浪漫有限公司",
            mtrlname: "电竞椅 S-150",
            amt: "1,000,000",
            percent: "10%"
          },
          {
            salername: "陆小六",
            cusname: "意大利时尚有限公司",
            mtrlname: "电竞椅 S-103",
            amt: "500,000",
            percent: "5%"
          },
          {
            salername: "刘小七",
            cusname: "丹麦饼匠有限公司",
            mtrlname: "电竞椅 S-120",
            amt: "400,000",
            percent: "4%"
          },
          {
            salername: "方小八",
            cusname: "德国战车有限公司",
            mtrlname: "职员椅 NF-6004M",
            amt: "300,000",
            percent: "3%"
          },
          {
            salername: "冯小轩",
            cusname: "澳大利亚袋鼠有限公司",
            mtrlname: "办公布椅 NF-513V",
            amt: "200,000",
            percent: "2%"
          },
          {
            salername: "马小梅",
            cusname: "新加坡花园有限公司",
            mtrlname: "办公布椅 NF-513M",
            amt: "100,000",
            percent: "1%"
          },
          {
            salername: "高小松",
            cusname: "美利坚老鹰有限公司",
            mtrlname: "休闲椅 901",
            amt: "90,000",
            percent: "0.9%"
          }
        ]
      }
    }
  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: "微软雅黑";
  }

  .img_wap {
    display: flex;
    margin-top: 20px;
  }

  .img-bingtu {
    width: 100%;
  }

  .reportcom-header-wap {
    width: 100%;
    height: 150px;
    overflow: hidden;
  }

  .reportcom-header {
    width: 120%;
    height: 100px;
    background-color: #fd9153;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    left: -10%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9999;
  }

  .reportcom-header-sub {
    width: 130%;
    height: 98px;
    background-color: #ffba92;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    top: -120px;
    left: -23%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9998;
  }

  .reportcom-header-sub-two {
    width: 140%;
    height: 98px;
    background-color: #fddecc;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    top: -240px;
    left: -35%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9997;
  }

  .reportcom-logo {
    width: 60%;
    position: relative;
    left: 10%;
  }

  .reportcom-img-responsive {
    display: inline-block;
    height: auto;
    max-width: 60%;
  }

  .reportcom-header-title {
    position: relative;
    left: 13%;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    /* margin: 10px 0; */
  }

  .report_selection {
    display: flex;
    /* align-items: center; */
    /* margin-left: 33%; */
    width: 150px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
  }

  .report_selection div {
    /* margin-right: 20px; */
    padding-bottom: 3px;
  }

  .report_selection_check {
    border-bottom: 5px solid #fd7526;
  }


  .daily-sale-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 20px;
  }

  .daily-sale-amt {
    margin-left: 30px;
    font-size: 15px;
  }

  .daily-sale-amt-value {
    font-size: 18px;
    font-weight: bold;
    color: #fd7526
  }

  .daily-sale-cust {
    margin: 10px 20px;
    font-size: 16px;
    font-weight: bold;

  }

  .daily-sale-cust-list {
    display: flex;
    padding: 4px 0 4px 0;
  }

  .daily-sale-cust-title {
    font-weight: bold;
    color: #606060;
  }

  .daily-sale-cust-index {
    flex: 0 0 10%;
    text-align: center;
    font-size: 22px;
    font-family: 'Courier New', Courier, monospace
  }

  .daily-sale-cust-name {
    flex: 0 0 80%;
  }

  .daily-sale-cust-name-pz {
    font-size: 13px;
    color: #606060;
  }

  .daily-sale-cust-amt {
    flex: 0 0 45%;
    /* text-align: center; */
    color: #f5772f;
  }

  .saler_percent {
    color: #606060;
    font-size: 13px
  }

  .daily-money-account-in {
    color: #ff2f2f
  }

  .daily-money-account-out {
    color: #31b831;
    margin-left: 20px;
  }

  .daily_liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

  .report_other {
    background-color: rgb(246, 246, 246);
    padding: 10px 15px;
    margin: 20px 10px;
    font-size: 14px;
    border-radius: 15px;
    color: #666
  }

  .report_other div {
    padding: 4px 0 4px 0
  }

  .report_other_link {
    color: #6495ed;
    margin-left: 18px;
  }

  .liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

</style>
