<template>
  <div class="daily">
    <div class="daily-header-logo-warp">
      <div class="daily-header-logo">
        <img src="../assets/longjoe.png" class="daily-img-responsive "></img>
      </div>
    </div>

    <div class="daily-header">
      <div class="daily-header-title">经营日报表</div>
      <div class="daily-header-date">2019年2月25日</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-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
          </div>
        </div>
      </div>
      <div class="daily-sale-saler"></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 class="daily_liubai"></div>

    <div>
      <div class="daily-sale-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caigou"></use>
        </svg>
        采购
      </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头层牛皮沙发",
          amt: "400,000",
          qty: "20套"
        }, {
          mtrlname: "F889大班椅",
          amt: "200,000",
          qty: "200张"
        }, {
          mtrlname: "C870大理石茶几",
          amt: "100,000",
          qty: "60张"
        }, {
          mtrlname: "G798餐柜",
          amt: "50,000",
          qty: "80个"
        }, {
          mtrlname: "O998仿皮沙发",
          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"
        }]
      }
    }
  }

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

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

  .daily-header-logo-warp {
    background-color: #fd9153;
  }

  .daily-header-logo {
    padding: 10px 0 0 20px;
  }

  .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: 30px;
    font-weight: bold;
    margin: 0 20px;
  }

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

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

  .daily-sale-cust {
    margin: 20px 20px;
    font-size: 18px;
    font-weight: bold;
    /* color: #606060; */
  }

  .daily-sale-cust-list {
    display: flex
  }

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

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

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

</style>
