<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:30px">经营日报表</div>
        <div class="reportcom-header-title">2019.02.27</div>
      </div>
      <div class="reportcom-header-sub"></div>
      <div class="reportcom-header-sub-two"></div>
    </div>
    <!-- 订货 -->
    <div class="daily-sale">
      <div class="daily-sale-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoshoudingdan"></use>
        </svg>
        订货
      </div>
      <div class="daily-sale-amt">今日订单金额：<span class="daily-sale-amt-value">1,200,000元</span></div>
      <!-- 客户订货 -->
      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          客户订货Top5
        </div>

        <div class="daily-sale-cust-list" v-for="(cusitem,index) in custlist" :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>{{cusitem.cusname}}</div>
            <div class="daily-sale-cust-amt">{{cusitem.amt}}元</div>
          </div>
        </div>
      </div>


      <!-- 产品订货 -->
      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          产品订货Top5
        </div>

        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :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>{{mtrlitem.mtrlname}}</div>
            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="daily_liubai"></div>
    <!-- 发货 -->
    <div class="daily-sale">
      <div class="daily-sale-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoshoudingdan"></use>
        </svg>
        发货
      </div>
      <div class="daily-sale-amt">今日发货金额：<span class="daily-sale-amt-value">1,000,000元</span></div>
      <!-- 客户发货 -->
      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          客户发货Top5
        </div>

        <div class="daily-sale-cust-list" v-for="(cusitem,index) in custlist" :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>{{cusitem.cusname}}</div>
            <div class="daily-sale-cust-amt">{{cusitem.amt}}元</div>
          </div>
        </div>
      </div>

      <!-- 产品发货 -->
      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          产品发货Top5
        </div>

        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :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>{{mtrlitem.mtrlname}}</div>
            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
          </div>
        </div>
      </div>
    </div>


    <div class="daily_liubai"></div>

    <!-- 库存 -->
    <div>
      <div class="daily-sale-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-kucun"></use>
        </svg>
        库存
      </div>
      <div class="daily-sale-amt">今日成品进仓金额：<span class="daily-sale-amt-value">1,000,000元</span></div>
      <div class="daily-sale-amt">今日材料耗用金额：<span class="daily-sale-amt-value">420,000元</span></div>

      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          成品进仓Top5
        </div>
        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :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>{{mtrlitem.mtrlname}}</div>
            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
          </div>
        </div>

      </div>

      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          材料耗用Top5
        </div>
        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in cailiaolist" :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>{{mtrlitem.mtrlname}}</div>
            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
          </div>
        </div>

      </div>

    </div>

    <div class="daily_liubai"></div>
    <!-- 收支 -->
    <div class="daily-money">
      <div class="daily-sale-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caiwuguanli"></use>
        </svg>
        收支
      </div>
      <div class="daily-sale-amt">今日收入：<span class="daily-sale-amt-value">1,000,000元</span></div>
      <div class="daily-sale-amt">今日支出：<span class="daily-sale-amt-value">300,000元</span></div>

      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          帐户收支情况
        </div>

        <div class="daily-sale-cust-list" v-for="(accitem,index) in acclist" :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>{{accitem.accname}}</div>
            <div class="daily-sale-cust-amt"><span class="daily-money-account-in">收：{{accitem.inamt}}元</span><span
                class="daily-money-account-out">支：{{accitem.outamt}}元</span></div>
          </div>
        </div>
      </div>

      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          项目收入情况
        </div>

        <div class="daily-sale-cust-list" v-for="(accitem,index) in accinlist" :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>{{accitem.itemname}}</div>
            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
          </div>
        </div>
      </div>

      <div class="daily-sale-cust">
        <div class="daily-sale-cust-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paixingbang"></use>
          </svg>
          项目支出情况
        </div>

        <div class="daily-sale-cust-list" v-for="(accitem,index) in accoutlist" :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>{{accitem.itemname}}</div>
            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    name: 'daily',
    data() {
      return {
        custlist: [{
          cusname: "某某区某某家具商城",
          amt: "600,000",
        }, {
          cusname: "顺德区张三经销商",
          amt: "300,000",
        }, {
          cusname: "红某美某龙某卖场",
          amt: "100,000",
        }, {
          cusname: "上海某某经销商",
          amt: "50,000",
        }, {
          cusname: "北京某某经销商",
          amt: "49,000",
        }],
        mtrllist: [{
          mtrlname: "T189头层牛皮沙发",
          pz: "1+2+3",
          amt: "400,000",
          qty: "20套"
        }, {
          mtrlname: "F889大班椅",
          pz: "扶手:#88|背:#998|座:#098|底盘:电镀",
          amt: "200,000",
          qty: "200张"
        }, {
          mtrlname: "C870大理石茶几",
          pz: "面料颜色:米黄",
          amt: "100,000",
          qty: "60张"
        }, {
          mtrlname: "G798餐柜",
          pz: "规格:1800*1500*1500|颜色:原色|板面:光面|板材:E0级板材|",
          amt: "50,000",
          qty: "80个"
        }, {
          mtrlname: "O998仿皮沙发",
          pz: "左+贵妃",
          amt: "40,000",
          qty: "20张"
        }],
        acclist: [{
          accname: "工商银行",
          inamt: "400,000",
          outamt: "150,000"
        }, {
          accname: "建设银行",
          inamt: "300,000",
          outamt: "50,000"
        }, {
          accname: "农业银行",
          inamt: "200,000",
          outamt: "60,000"
        }, {
          accname: "顺德农商银行",
          inamt: "100,000",
          outamt: "40,000"
        }],
        accinlist: [{
          itemname: "营业收入",
          amt: "900,000"
        }, {
          itemname: "退税",
          amt: "100,000"
        }],
        accoutlist: [{
          itemname: "材料采购",
          amt: "200,000"
        }, {
          itemname: "销售返利",
          amt: "50,000"
        }, {
          itemname: "广告宣传",
          amt: "30,000"
        }, {
          itemname: "软件费",
          amt: "20,000"
        }],
        cailiaolist: [{
            mtrlname: "中纤板",
            amt: "100,000",
            qty: "2,000块"
          }, {
            mtrlname: "夹板",
            amt: "80,000",
            qty: "1,800块"
          }, {
            mtrlname: "小牛皮",
            amt: "70,000",
            qty: "300平方"
          }, {
            mtrlname: "介棉布",
            amt: "40,000",
            qty: "600平方"
          },
          {
            mtrlname: "喷棉",
            amt: "8,000",
            qty: "100Kg"
          }
        ]
      }
    }
  }

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

  .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; */
  }

  /* .daily-header {
    width: 100%;
    height: 150px;
    background: linear-gradient(rgba(253, 145, 83, 1), rgba(253, 145, 83, 0))
  }

  .daily-header-logo-warp {
    border-top: 5px solid #fd9153;
  }

  .daily-header-logo {
    padding: 2px 5px;
    background-color: #fd9153;
  }

  .daily-img-responsive {
    display: inline-block;
    height: auto;
    max-width: 50%;
  } */

  /* .daily-header-title {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    padding: 0 20px;
    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
  }

  .daily-header-date {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    padding: 0 20px;
    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
  } */

  .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: 2px 0 0 0;
  }

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

  .daily-sale-cust-index {
    flex: 0 0 10%;
    text-align: center;
  }

  .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 30%;
    /* text-align: center; */
    color: #f5772f;
  }

  .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;
  }

</style>
