<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对账单</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/resize.js"></script>
    <script src="./js/moent.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
      [v-cloak] {
        display: none
      }

      .content {
        width: 100%;
        height: 100vh;
        background: #f3f3f3;
      }

      .head {
        /* 头部 */
        background: #848484;
        padding: .3rem .3rem 1rem;
        box-sizing: border-box;
        color: #fff;
        position: relative;
      }

      .shareTime {
        text-align: center;
        margin-bottom: .2rem;
      }

      .tip {
        font-weight: bold;
      }

      .tipDesc {
        font-weight: bold;
        font-size: .24rem;
        line-height: .5rem;
      }

      .orderInfo {
        background: #fff;
        box-sizing: border-box;
        padding: .2rem;
        width: calc(100% - .4rem);
        border-radius: .3rem;
        overflow: hidden;
        position: absolute;
        bottom: -1.9rem;
        left: .2rem;
        color: #333;
      }

      .downLoadTip,
      .downLoadUrl {
        max-width: 83%;
        font-size: .25rem;
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
      }

      .downLoadTip {
        margin-top: .2rem;
        line-height: .4rem;
        color: #999;
      }

      .downLoadUrl {
        color: #007aff;
      }

      .amount {
        font-weight: bold;
      }

      .amountName {
        font-weight: bold;
      }

      .handleOrder {
        color: #999;
        padding: 0rem .2rem .2rem;
      }

      .handleOrder span:last-child {
        color: #007aff;
      }

      /* 滚动盒子 */
      .oederBox {
        flex-grow: 1;
        overflow: auto;
      }

      .oederList {
        background: #fff;
        border-bottom: .01rem solid #e0e0e0;
        padding: .2rem;
        box-sizing: border-box;
      }

      .order-l {
        flex: 1;
      }

      .order-t,
      .order-b {
        font-size: .12rem;
        color: #999;
      }

      .order-t span:first-child {
        color: #333;
      }

      .order-b,
      .list-b {
        line-height: .5rem;
      }

      .order-b span {
        color: #f0ad4e;
        vertical-align: middle;
      }

      .order-r img {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        object-fit: contain;
        margin-left: .2rem;
      }

      /* 折叠列表 */
      .otherList {
        width: 100%;
        box-sizing: border-box;
        padding-left: .4rem;
        background-color: #fff;
      }

      .list {
        box-sizing: border-box;
        padding: .2rem;
        border-bottom: .01rem solid #e0e0e0;
        font-size: .12rem;
      }

      .list:last-child {
        border-bottom: 0 solid #e0e0e0;
      }

      .list-b div:first-child {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 70%;
      }

      .list-b {
        color: #999;
      }

      .downLoadCon {
        position: relative;
      }

      .finishImg {
        width: 1rem;
        height: 1rem;
        position: absolute;
        right: .06rem;
        bottom: -.1rem;
      }

      .amount_list {
        margin-bottom: 0.06rem;
      }
    </style>
  </head>

  <body>
    <div id="app" class="content flex flex-column">
      <div class="head">
        <div class="shareTime">
          分享时间：{{info.createDate}}
        </div>
        <div class="tip" v-if="info.customer">
          尊敬的“{{info.customer.customerName || '--'}}”，您好！
        </div>
        <div class="tipDesc">
          以下是您在本店的未结账单，请查阅。
        </div>
        <div class="orderInfo"
          :style="{bottom:(info.discountAmount && info.discountAmount*1 !=0 ? '-1.9rem':'-1.3rem' )}">
          <div class="amount_list flex align_center flex-between">
            <span class="amountName">货款金额</span>
            <span class="amount" v-if="info.totalAmount"
              :style="{color:!info.discountAmount? '#f0ad4e':'#333333'}">￥{{toThousands(info.totalAmount,2)}}</span>
            <span class="amount" v-else :style="{color:!info.discountAmount ? '#f0ad4e':'#333333'}">￥0.00</span>
          </div>
          <div v-if="info.discountAmount && info.discountAmount*1!=0">
            <div class="amount_list flex align_center flex-between">
              <span class="amountName">折让金额</span>
              <span class="amount" v-if="info.discountAmount">-￥{{toThousands(info.discountAmount,2)}}</span>
              <span class="amount" v-else>￥0.00</span>
            </div>
            <div class="amount_list flex align_center flex-between">
              <span class="amountName">折后金额</span>
              <span class="amount" style="color: #f0ad4e"
                v-if="info.settleAmount">￥{{toThousands(info.settleAmount,2)}}</span>
              <span class="amount" style="color: #f0ad4e" v-else>￥0.00</span>
            </div>
          </div>
          <div class="downLoadCon">
            <div class="downLoadTip">
              单据明细Excel下载请点击下面的链接：
            </div>
            <div class="downLoadUrl" @click="downLoad">
              http://iscm.360arrow.com/bill/对账单明细.xls
            </div>
            <img v-if="info.billStatus != 'UNSETTLE'" src="./img/finishImg.png" alt="" class="finishImg">
          </div>
        </div>
      </div>
      <div class="orderCon flex flex-column"
        :style="{paddingTop:(info.discountAmount && info.discountAmount*1 !=0 ? '2.1rem':'1.5rem' )}">
        <div class="handleOrder flex flex-between align_center">
          <span>共{{saleList ? saleList.length : 0}}个销售单</span>
          <span v-if="!flag" @click="openAll">全部展开</span>
          <span v-else @click="openAll">全部关闭</span>
        </div>
        <div class="oederBox">
          <div v-for="(item,i) in saleList" :key="item.bizSn">
            <div class="oederList flex align_center" @click="openInfoList(i)">
              <div class="order-l">
                <div class="order-t flex align_center flex-between">
                  <span>{{item.bizDate.substr(0,10)}}</span>
                  <span>{{item.bizNo}}</span>
                </div>
                <div class="order-b  flex align_center flex-between">
                  <div>应付：￥{{toThousands(item.bizAmount,2)}}</div>
                  <div>已付：￥{{toThousands(item.settledAmount,2)}}</div>
                  <div>
                    待付：<span>￥{{item.unsettleAmount ? toThousands(item.unsettleAmount,2): 0}}</span>
                  </div>
                </div>
              </div>
              <div class="order-r">
                <img src="./img/close.png" alt="" v-if="!item.isShow">
                <img src="./img/open.png" alt="" v-else>
              </div>
            </div>
            <div class="otherList" v-show="item.isShow">
              <div class="list" v-for="(con,j) in item.list" :key="con.id">
                <div class="list-t flex align_center flex-between">
                  <span>{{con.dealerProductEntity.code}}</span>
                  <span>￥{{con.price?toThousands(con.price,2):0}}</span>
                </div>
                <div class="list-b flex align_center flex-between">
                  <div>
                    {{con.dealerProductEntity.productBrandName}}{{con.dealerProductEntity.productTypeName3}}
                  </div>
                  <div>x{{con.qty}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data: {
        ajaxUrl: 'http://p.iscm.360arrow.com/qpls-md/',
        saleList: [],
        saleDetailList: [],
        info: {},
        flag: false
      },
      created () {
        this.ajaxUrl = window.location.origin + '/qpls-md/'
        this.loadData()
      },
      methods: {
        loadData () {
          const ajaxData = {
            verifySn: this.getUrlParam(1),
            tenantId: this.getUrlParam(0)
          }
          axios.post(this.ajaxUrl + 'verify/findBySn', ajaxData).then((res) => {
            this.info = res.data.data
            document.title = res.data.data.dealerName
            res.data.data.detailList.forEach(item => {
              item.isShow = false
              item.list = []
            })
            this.saleList = res.data.data.detailList

            this.getALlList(res.data.data.detailList)
          }).catch((error) => {
            console.log(error)
          })
        },
        handleShow (con, i) {
          const req_data = {
            salesBillSn: con.bizSn
          }
          axios.post(this.ajaxUrl + 'salesDetail/queryList', req_data).then((res) => {
            this.saleList[i].list = res.data.data
          }).catch((error) => {
            console.log(error)
          })
        },
        openInfoList (i) {
          this.saleList[i].isShow = !this.saleList[i].isShow
          this.flag = this.saleList.every(item => { return item.isShow })
          this.saleList.splice()
        },
        downLoad () {
          window.location.href = this.ajaxUrl + 'verify/exportExcel?verifySn=' + this.getUrlParam(1) +
            '&dealerSn=' + this.getUrlParam(0)
        },
        getUrlParam (index) {
          const urlArr = window.location.search.substr(1).split('&')
          const newArr = urlArr.map(item => { return item.replace('=', '') })
          return newArr[index] // 返回参数值
        },
        openAll () {
          this.flag = !this.flag
          this.saleList.forEach((item, i) => {
            if (this.flag) {
              item.isShow = true
            } else {
              item.isShow = false
            }
          })
        },
        getALlList (list) {
          list.forEach((item, i) => {
            this.handleShow(item, i)
          })
        }
      }
    })
  </script>

</html>
