//销售订单利润统计表
<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:25px">销售订单利润统计表</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-weight:bold;color:#666;">
        <div style="margin:0 15px;display:flex;font-size:14px;">
          <div style="flex:0 0 25%;text-align: center;">销售额</div>
          <div style="flex:0 0 25%;text-align: center;">总成本</div>
          <div style="flex:0 0 25%;text-align: center;">总利润</div>
          <div style="flex:0 0 25%;text-align: center;">利润率</div>
        </div>
        <div style="margin:0 15px;display:flex;font-size:16px;line-height:24px">
          <div style="flex:0 0 25%;text-align: center;">6000万</div>
          <div style="flex:0 0 25%;text-align: center;">4000万</div>
          <div style="flex:0 0 25%;text-align: center;">2000万</div>
          <div style="flex:0 0 25%;text-align: center;">33%</div>
        </div>
      </div>

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

      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
        <div style="margin:0 auto">订单利润明细</div>
      </div>

      <div style="padding:10px 15px 5px 15px;font-size:13px;border-top: 1px solid #eee" v-for="(ditem,index) in yclist"
        :key="index">
        <div style="display:flex">
          <div style="flex:0 0 60%">订单编号：{{ditem.taskcode}}</div>
          <div style="position: absolute;right:20px">相关号：{{ditem.relcode}}</div>
        </div>
        <div>客户名称：{{ditem.cusname}}</div>
        <div style="display:flex">
          <div style="flex:0 0 70%">交货日期：{{ditem.trqdate}}</div>
          <div style="position: absolute;right:20px">业务员：{{ditem.saler}}</div>
        </div>

        <!-- <div style="display:flex">
          <div style="flex:0 0 30%">销售额：100万</div>
          <div style="flex:0 0 30%">总成本：70万</div>
          <div style="flex:0 0 30%">利润：30万</div>
        </div> -->

        <div
          style="display:flex;background-color: #f8f8f8;border-radius: 10px;padding:2px;align-items: center;margin:2px 0;color:#666">
          <div style="flex:0 0 80%;">
            <div>
              <div style="display:flex;font-size:13px;">
                <div style="flex:0 0 25%;text-align: center;">销售额</div>
                <div style="flex:0 0 25%;text-align: center;">总成本</div>
                <div style="flex:0 0 25%;text-align: center;">利润</div>
                <div style="flex:0 0 25%;text-align: center;">利润率</div>
              </div>
              <div style="display:flex;font-size:13px;line-height:20px">
                <div style="flex:0 0 25%;text-align: center;">100万</div>
                <div style="flex:0 0 25%;text-align: center;">70万</div>
                <div style="flex:0 0 25%;text-align: center;">30万</div>
                <div style="flex:0 0 25%;text-align: center;">30%</div>
              </div>
            </div>
          </div>
          <div style="color: #6495ed">查看详细</div>
        </div>

        <!-- <div style="display:flex">
          <div>共2000件商品</div>
          <div style="position: absolute;right:20px;color:#ff6000;font-weight:bold">￥50万</div>
        </div>
        <div style="color:#888">包括：电竞椅S-150 500张；经理椅NF-8927 300张...</div> -->
      </div>


      <!-- <div style="display:flex">
        <div style="font-size:14px;color:#6495ed;margin: 10px auto">查看更多销售订单信息</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>

    <!-- 弹出详细信息 -->
    <div v-show="ifmx==1">
      <div class="quote_edit_mask"></div>

      <div style="z-index: 9999;
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    height: 75%;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 0;">
        <div style="display:flex">
          <div style="margin:0 auto;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">利润组成明细</div>
          <div style="position: absolute;
            right: 20px;
            color: #ccc;
            font-size: 12px;
            line-height:26px;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>
        </div>

        <div style="font-size:14px;margin:5px 0 ;padding:0 15px">
          <div style="display:flex">
            <div style="flex:0 0 60%">订单编号：SG190610009</div>
            <div style="position: absolute;right:20px">相关号：AX1900005</div>
          </div>
          <div>客户名称：英国王室有限公司</div>
          <div style="display:flex">
            <div style="flex:0 0 70%">交货日期：2019-06-18</div>
            <div style="position: absolute;right:20px">业务员：李小四</div>
          </div>

          <div style="display:flex">
            <div>共2000件商品</div>
            <!-- <div style="position: absolute;right:20px;color:#ff6000;font-weight:bold">￥50万</div> -->
          </div>
          <div style="color:#888">包括：电竞椅S-150 500张；经理椅NF-8927 300张...</div>
        </div>
        <div class="liubai"></div>

        <div style="font-size:15px;padding:0 15px;font-weight:bold;color:#666">
          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
            <div style="width:100px">销售额</div>
            <div style="position: absolute;right:30px;color:#888">100万</div>
          </div>

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">总成本 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">70万</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>销售成本</div>
                <div style="position: absolute;right:30px;">5万</div>
              </div>

              <div style="display:flex;">
                <div>材料成本</div>
                <div style="position: absolute;right:30px;">35万</div>
              </div>

              <div style="display:flex;">
                <div>人力成本</div>
                <div style="position: absolute;right:30px;">10万</div>
              </div>

              <div style="display:flex;">
                <div>外协成本</div>
                <div style="position: absolute;right:30px;">10万</div>
              </div>

              <div style="display:flex;">
                <div>管理费用</div>
                <div style="position: absolute;right:30px;">5万</div>
              </div>

              <div style="display:flex;">
                <div>其它费用</div>
                <div style="position: absolute;right:30px;">5万</div>
              </div>
            </div>
          </div>
          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
            <div style="width:100px">利润</div>
            <div style="position: absolute;right:30px;color:#888">30万</div>
          </div>

          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
            <div style="width:100px">利润率</div>
            <div style="position: absolute;right:30px;color:#888">30%</div>
          </div>
        </div>
        <div style="display:flex">
          <div style="font-size:14px;color:#6495ed;margin: 30px auto">查看销售订单详细信息</div>
        </div>

      </div>

    </div>

  </div>
</template>
<script>
  export default {
    name: 'daily',
    data() {
      return {
        ifmx: 0,
        delaylist: [{
          taskcode: "SG190601002",
          relcode: "AX1900001",
          cusname: "英国王室有限公司",
          saler: "李小四",
          rqdate: "2019-06-16",
          dday: 4
        }, {
          taskcode: "SG190604016",
          relcode: "AX1900002",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          rqdate: "2019-06-17",
          dday: 3
        }, {
          taskcode: "SG190605022",
          relcode: "AX1900003",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          rqdate: "2019-06-18",
          dday: 2
        }, {
          taskcode: "SG190606009",
          relcode: "AX1900004",
          cusname: "英国王室有限公司",
          saler: "李小四",
          rqdate: "2019-06-19",
          dday: 1
        }],
        yclist: [{
          taskcode: "SG190610009",
          relcode: "AX1900005",
          cusname: "英国王室有限公司",
          saler: "李小四",
          trqdate: "2019-06-18",
          tname: "收唛头",
          dday: 2
        }, {
          taskcode: "SG190611003",
          relcode: "AX1900006",
          cusname: "英国王室有限公司",
          saler: "李小四",
          trqdate: "2019-06-18",
          tname: "收唛头",
          dday: 2
        }, {
          taskcode: "SG190611005",
          relcode: "AX1900007",
          cusname: "俄罗斯老铁有限公司",
          saler: "王小五",
          trqdate: "2019-06-18",
          tname: "报关",
          dday: 2
        }, {
          taskcode: "SG190612011",
          relcode: "AX1900008",
          cusname: "沙特石油王子有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订柜",
          dday: 1
        }, {
          taskcode: "SG190612015",
          relcode: "AX1900009",
          cusname: "沙特石油王子有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订柜",
          dday: 1
        }, {
          taskcode: "SG190612015",
          relcode: "AX1900010",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订唛头料",
          dday: 1
        }]
      }
    }
  }

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

  .quote_edit_mask {
    height: 100%;
    width: 100%;
    background-color: #1d1d1d;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    z-index: 9998;
  }

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

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

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

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

  .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: #f6f6f6;
    margin: 10px 0;
  }

</style>
