mall-web-ssr/pages/mobile/center/vendor/btobapCheck.vue

<template>
  <div>
    <div class="mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>应收对账
        <!--<span @click="addApCheck"><i class="icon-sousuo iconfont"></i>新增对账单</span>-->
      </p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="btobapCheck-wrapper">
      <div class="order-tab">
        <div class="order-tab-wrapper clearfix">
          <div class="fl active tab">B2B</div>
          <nuxt-link class="fl tab" to="/mobile/center/vendor/payCenter" tag="div" >
            商城
          </nuxt-link>
        </div>
      </div>
      <div class="order-nav">
        <div :class="activeType === 'all' ? 'active': ''" @click="ChangeList('all')"><span>未对账</span></div>
        <!--<div :class="activeType === 'todo' ? 'active' : ''" @click="ChangeList('todo')"><span>待确认</span></div>-->
        <div :class="activeType === 'done' ? 'active': ''" @click="ChangeList('done')"><span>已对账</span></div>
        <div :class="activeType === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已作废</span></div>
      </div>
      <div v-show="activeType !== 'all'">
        <div class="search-content mi-search-content">
          <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="单据编号/客户名称/物料名称">
          <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="btobapCheck-wrapper-scroll" id="btobapCheck-wrapper-scroll">
          <div class="filter-wrapper">
            <base-filter
              v-for="filterOption in filterOptions"
              :key="filterOption.selectOption"
              :selectItems="filterOption.selectItems"
              :defaultVal="filterOption.defaultVal"
              :selectOption="filterOption.selectOption"
              @selectAction="onSelectAction"
              @valueAction="onValueAction"
              :title="filterOption.title">
            </base-filter>
          </div>
          <div v-if="resourceList.content && resourceList.content.length > 0">
            <div class="invoice-btob-list" v-for="item in resourceList.content">
              <div class="invoice-btob-wrapper-top">
                <span class="read" v-if="!isUnread(item.id)" style="margin-right: 0.3rem">已读</span>
                <span class="noread" v-if="isUnread(item.id)" style="margin-right: 0.3rem">未读</span>
                <span  style="margin-right: 0.3rem">{{item.recordDate | time}}</span>
                <span class="isPut" v-if="item.status">已提交</span>
                <span class="noPut" v-else>未提交</span>
              </div>
              <div class="invoice-btob-wrapper-middle">
                <div class="invoice-btob-wrapper-middle-title">{{item.custName}}</div>
                <div @click="lookDetails(item.id)"><span>单据编号：</span><a>{{item.code}}</a></div>
              </div>
              <div class="invoice-btob-wrapper-content">
                <div><span>对账期间：</span>{{item.beginDate | time}} - {{item.endDate | time}}</div>
                <div><span>对账金额：</span>{{isUser ? '-' : item.checkAmount}}</div>
                <div><span>明细条目：</span>{{item.items && item.items.length}}条</div>
                <div><span>对账人：</span>{{item.recorder}}</div>
                <!--<div><span>商品总数：</span>{{item.getTotalProd}}</div>-->
                <!--<div><span>对账结果：</span>{{item.checkStatus}}</div>-->
              </div>
            </div>
          </div>
          <empty-status
            v-else
            :text="'暂无对账信息'"
            :showLink="false"
          ></empty-status>
          <pull-up :fixId="'btobapCheck-wrapper-scroll'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
        </div>
      </div>

      <div v-show="activeType === 'all'">
        <div class="search-content mi-search-content">
          <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="客户名称">
          <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="timeLine-wrapper">
          <div class="inline-block left" @click="addMonth('out', 'outTimeMonth', -1)">
            <i class="iconfont icon-xiangzuo" style="font-size: 0.3rem"></i>
          </div>
          <div class="inline-block timeLine" style="text-indent: 0.12rem" @click="ShowMonthChoose('out', 'outTimeMonth')">{{outTimeMonth}}<i class="iconfont icon-arrow-down" style="font-size: 0.3rem"></i></div>
          <div class="inline-block right" @click="addMonth('out', 'outTimeMonth', 1)" v-show="MouthOutShow">
            <i class="iconfont icon-xiangyou" style="font-size: 0.3rem"></i>
          </div>
        </div>
        <div class="btobapCheck-wrapper-scroll btobapCheck-wrapper-scroll2" id="btobapCheck-wrapper-scroll2">
          <div v-if="resourceList.content && resourceList.content.length > 0">
            <div class="invoice-btob-list" v-for="item in resourceList.content">
              <div class="invoice-btob-wrapper-middle" style="border-top: 0">
                <div class="invoice-btob-wrapper-middle-title">{{item.myEnterprise && item.myEnterprise.enName}}</div>
              </div>
              <div class="invoice-btob-wrapper-middle">
                <div v-if="item.thisMonthCount && item.thisMonthCount.length > 0">
                  <span class="inline-block"  style="vertical-align: top">本期间应收：</span>
                  <div class="inline-block" style="vertical-align: top" >
                    <div v-for="count in item.thisMonthCount" v-if="count.amount > 0">
                      <span>{{count.currency}}：{{count.amount | computeNum(2)}}</span>
                    </div>
                  </div>
                </div>
                <div v-else><span>本期间应收：0</span></div>
                <div v-if="item.totalCount && item.totalCount.length > 0">
                  <span class="inline-block"  style="vertical-align: top">应收总额：</span>
                  <div class="inline-block" style="vertical-align: top" >
                    <div v-for="count in item.totalCount"  v-if="count.amount > 0">
                      <span>{{count.currency}}：{{count.amount | computeNum(2)}}</span>
                    </div>
                  </div>
                </div>
                <div v-else><span>应收总额：0</span></div>
              </div>
              <div class="invoice-btob-wrapper-middle" @click="showApcheckList(item)">
                <div class="middle_btn">对账明细</div>
              </div>
            </div>
          </div>
          <empty-status
            v-else
            :text="'暂无对账信息'"
            :showLink="false"
          ></empty-status>
          <pull-up :fixId="'btobapCheck-wrapper-scroll2'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
        </div>
      </div>
    </div>

    <modal-wrapper :title="isShowApcheckList.enName" :showModal="isShowApcheckList.show" @closeAction="deleteCheck" :bgColor="'#f1f3f6'" :hasFooter="true">
      <div slot="header" class="modal-h">
        <div class="modal-h-top">
           <span class="item inline-block" @click="checkAll()"  v-show="!isShowApcheckList.showApcheck">
              <label class="mobile-cart-check" :class="{active: !isCheckAll}"></label>
           </span>
          <span class="inline-block overflowhidden">
            应收客户：{{isShowApcheckList.enName}}
          </span>
        </div>
        <div class="timeLine-wrapper clearfix">
          <div v-show="!isShowApcheckList.showApcheck">
            <div style="margin-left: 0.5rem">
              <div class="inline-block left" @click="addMonth('inside', '', -1)">
                <i class="iconfont icon-xiangzuo" style="font-size: 0.3rem"></i>
              </div>
              <div class="inline-block timeLine" style="text-indent: 0.12rem" @click="ShowMonthChoose('inside')">{{isShowApcheckList.thisMonth}}<i class="iconfont icon-arrow-down" style="font-size: 0.3rem"></i></div>
              <div class="inline-block right" @click="addMonth('inside', '', 1)" v-show="MouthinShow">
                <i class="iconfont icon-xiangyou" style="font-size: 0.3rem"></i>
              </div>
            </div>
            <div style="clear:both"></div>
            <base-filter
              ref="baseFilter"
              v-for="filterOption in ApcheckfilterOptions"
              :ShowTitle="ShowTitle"
              :key="filterOption.selectOption"
              :selectItems="filterOption.selectItems"
              :defaultVal="filterOption.defaultVal"
              :selectOption="filterOption.selectOption"
              @selectAction="ApcheckonSelectAction"
              @valueAction="ApcheckonValueAction"
              :title="filterOption.title">
            </base-filter>
          </div>
          <div v-show="isShowApcheckList.showApcheck" style="line-height: 1.4rem;text-align: center">
            {{isShowApcheckList.startTime}} ~ {{isShowApcheckList.endTime}}
          </div>
        </div>
        <div style="height: 0.2rem; width: 100%;"></div>
        <!--<div class="timeLine" @click="ShowMonthChoose('inside')" style="text-indent: 0.12rem">{{isShowApcheckList.thisMonth}}<i class="iconfont icon-arrow-down" style="font-size: 0.3rem"></i></div>-->
        <!--<input type="month" v-model="isShowApcheckList.thisMonth" @change="showApcheckList()"/>-->
      </div>
      <div class="btobapCheck-modal">
        <div class="choosescreen-result">
          <div v-if="isShowApcheckList.list.length > 0">
          <div class="clearfix choosescreen-result-list" v-for="(item, index) in isShowApcheckList.list">
            <div>
              <div class="choosescreen-result-list-content">
                <div style="border-bottom: 1px solid #D3D3D3;padding-bottom: 0.2rem">
                  <span class="item inline-block" @click="checkItem(item, index)" v-show="!isShowApcheckList.showApcheck">
                    <label class="mobile-cart-check" :class="{active: item.check}"></label>
                  </span>
                  <div class="inline-block" style="margin-left: 0.15rem">
                    <div class="OverHidden">采购单：<span>{{item.ordercode}}</span></div>
                    <div class="OverHidden">物料名称：<span>{{item.prodtitle}}</span></div>
                    <div class="OverHidden">规格型号：<span>{{item.prodspec}}</span></div>
                    <div class="OverHidden">发货单：<span>{{item.sendcode}}</span></div>
                    <!--<div class="OverHidden">序号：<span>{{index + 1}}</span></div>-->
                    <!--<div class="OverHidden">类型：<span>{{item.piclass}}</span></div>-->
                    <!--<div class="OverHidden">单据日期：<span>{{item.pidate | time}}</span></div>-->
                  </div>
                </div>
                <div style="padding-top: 0.2rem">
                  <span class="item inline-block" style="opacity: 0"  v-show="!isShowApcheckList.showApcheck">
                    <label class="mobile-cart-check"></label>
                  </span>
                  <div class="inline-block" style="margin-left: 0.15rem">
                    <div class="OverHidden">发货数量：<span>{{item.qty}}</span></div>
                    <div class="OverHidden">验收单：<span>{{item.inoutno}}</span></div>
                    <div class="OverHidden">验收数量：<span>{{item.thischeckqty}}</span></div>
                    <div class="OverHidden">单价：<span>{{item.currency}}：{{item.orderprice}}</span></div>
                    <!--<div class="OverHidden">发货单：<span>{{item.sendcode}}</span></div>-->
                    <div class="OverHidden">税率：<span>{{item.taxrate}}%</span></div>
                    <!--<div class="OverHidden">客户料号：<span>{{item.prodcode}}</span></div>-->
                    <!--<div class="OverHidden">金额：<span>{{}}</span></div>-->
                  </div>
                </div>
              </div>
              <div class="clearfix" style="border-top:1px solid #D9D9D9;padding: 0 0.15rem;line-height: 0.8rem" >
                <div class="fl" style="font-size: 0.26rem">小计：</div>
                <div class="fr" style="color: #FF3208;font-size: 0.26rem">{{(item.qty || 0) * (item.orderprice || 0) | computeNum(2)}}</div>
              </div>
            </div>
          </div>
          </div>
          <empty-status
            v-else
            :text="'暂无对账信息'"
            :showLink="false"
          ></empty-status>
        </div>
      </div>
      <div slot="footer" class="footerBtn clearfix">
         <span class="item inline-block" @click="checkAll()" v-show="!isShowApcheckList.showApcheck">
            <label class="mobile-cart-check" :class="{active: !isCheckAll}"></label>全选
         </span>
        <div class="fr bbgoresult" @click="goTopayfor" v-show="!isShowApcheckList.showApcheck">对账</div>
        <div class="fr" style="margin-right: 0.2rem" v-show="!isShowApcheckList.showApcheck">合计：<a style="color: #001408;">{{allMoney | priceFilter}}</a></div>
        <div class="fl" style="margin-left: 0.2rem" v-show="isShowApcheckList.showApcheck">合计：<a style="color: #001408;">{{allMoney | priceFilter}}</a></div>
        <!--<div class="fr bbgoresult" v-show="isShowApcheckList.showApcheck" @click="submitCheck">提交</div>-->
        <!--<div class="fr bbgoresult cancel" v-show="isShowApcheckList.showApcheck" @click="deleteCheck">取消</div>-->
      </div>
    </modal-wrapper>
    <modal-wrapper :title="'新增对账单'" :showModal="showModal" @closeAction="showModal = false">
      <div class="btobapCheck-modal">
        <div class="search-content mi-search-content">
          <input type="text" placeholder="选择对账客户">
          <span @click="toChooseUser"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div style="padding-left: 0.15rem">
          <span class="title inline-block" style="font-size: 0.28rem;color: #666666;line-height: 0.5rem;margin-top:0.18rem">单据时间：</span>
          <div class="date-wrap">
            <label>
              <i class="iconfont icon-ico-date"></i>
              <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
              <p v-if="dateObj.fromDate">{{dateObj.fromDate | date}}</p>
            </label>
            <span>—</span>
            <label>
              <i class="iconfont icon-ico-date"></i>
              <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
              <p v-if="dateObj.toDate">{{dateObj.toDate | date}}</p>
            </label>
          </div>
        </div>
        <div class="choosescreen clearfix">
          <div class="fr">{{'收起'}}筛选条件<i class="iconfont icon-arrow-up"></i></div>
        </div>
        <div class="choosescreen-list">
          <div><span>应付供应商：</span><input type="text" v-model="screenObj.key" placeholder="可用应付供应商名称筛选" /></div>
          <div><span>物料名称：</span><input type="text" placeholder="请输入物料名称" /></div>
          <div><span>税率：</span><input type="text" placeholder="请输入税率" /></div>
          <div><span>送货工厂：</span><input type="text" placeholder="请输入送货工厂名称" /></div>
          <div><span>规格：</span><input type="text" placeholder="请输入物料规格" /></div>
        </div>
        <div class="choosescreen-result">
          <div class="clearfix choosescreen-result-list">
            <span class="item inline-block">
                <label class="mobile-cart-check"></label>
              </span>
            <div class="choosescreen-result-list-content">
              <div>本次对账数：<span>1</span></div>
              <div>客户名称：<span>1</span></div>
              <div>单据编号：<span>1</span></div>
              <div>发货单号：<span>1</span></div>
              <div>序号：<span>1</span></div>
              <div>类型：<span>1</span></div>
              <div>单据日期：<span>1</span></div>
              <div>应付供应商：<span>1</span></div>
              <div>客户采购单：<span>1</span></div>
              <div>客户料号：<span>1</span></div>
              <div>客户物料名称：<span>1</span></div>
              <div>客户规格型号：<span>1</span></div>
              <div>送货工厂：<span>1</span></div>
              <div>数量：<span>1</span></div>
              <div>单价：<span>1</span></div>
              <div>币别：<span>1</span></div>
              <div>税率：<span>1</span></div>
              <div>金额：<span>1</span></div>
              <div>本次对账金额：<span>1</span></div>
            </div>
          </div>
        </div>
      </div>
    </modal-wrapper>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <div class="fixedPicker" v-show="isShowMonthChoose">
      <picker :slots="slots" @change="onValuesChange" :showToolbar="true" ref="picker">
        <div class="titls">选择当前时间</div>
        <div class="leftBtn" @click="isShowMonthChoose=false">取消</div>
        <div class="rightBtn" @click="resultMonth">确定</div>
      </picker>
    </div>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui'
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  import { PullUp, EmptyStatus, RemindBox } from '~components/mobile/common'
  function years() {
    let _d = new Date()
    let _year = Number(_d.getFullYear())
    let arr = []
    let num = 2000
    for (let i = 2000; i < _year; i++) {
      num++
      arr.push(num + '年')
    }
    return arr
  }
  function getMonth() {
    let sdateTo = new Date()
    // console.log(sdateTo.getMonth() - 1)
    return sdateTo.getMonth() - 1
  }
  function getYear() {
    let num = 2000
    let sdateTo = new Date()
    let _year = sdateTo.getFullYear()
    for (let i = 0; i < 99; i++) {
       num++
       if (num === Number(_year)) {
         num = i
         break
       }
    }
    return num
  }
  export default {
    layout: 'mobileNoHeader',
    middleware: 'authenticated',
    data() {
      return {
        MouthinShow: true,
        MouthOutShow: true,
        ShowTitle: false,
        collectResult: '',
        timeoutCount: 0,
        isShowMonthChoose: false,
        slots: [
          {
            flex: 1,
            values: years(),
            className: 'slot1',
            textAlign: 'center',
            defaultIndex: getYear()
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
            className: 'slot3',
            textAlign: 'center',
            defaultIndex: getMonth()
          }
        ],
        activeType: 'all',
        filterParams: {
          keyword: '',
          page: 1,
          count: 10
        },
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        resourceList: {
          content: []
        },
        isUser: false,
        unreadCode: [],
        showModal: false,
        dateObj: {},
        screenObj: {},
        outTimeMonth: '',
        isShowApcheckList: {
          show: false,
          enName: '',
          thisMonth: '',
          list: [],
          showApcheck: false,
          id: '',
          startTime: '',
          endTime: '',
          objTime: {}
        },
        ApcheckfilterOptions: [
          {
            title: '',
            selectOption: 'date',
            selectItems: [{
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        ShowApcheckChooseTime: false
      }
    },
    created() {
      this.$http.get('/account/role/isUser').then(res => {
        this.isUser = res.data.isUser
      })
      this.getUnread()
      let sdateTo = new Date()
      this.isShowApcheckList.thisMonth = sdateTo.getFullYear() + '-' + sdateTo.getMonth()
      this.outTimeMonth = sdateTo.getFullYear() + '-' + sdateTo.getMonth()
    },
    // mounted() {
    //   this.$nextTick(() => {
    //     this.$refs.picker.change()
    //   })
    // },
    methods: {
      onValuesChange(picker, value) {
        // console.log(picker.getValues())
        if (!this.$value) {
          picker.setSlotValue(0, '2018年')
          picker.setSlotValue(1, '11月')
          this.$picker = picker
        }
        let _ns = value[0].replace('年', '')
        let _my = value[1].replace('月', '')
        this.$value = _ns + '-' + _my
      },
      // 选择月份完毕
      resultMonth() {
        this.isShowMonthChoose = false
        if (this.$monthType === 'out') {
          let _time2 = this.computedTime(this.$value + '-01')
          let _d = this.computedTime(new Date())
          if (_time2.getTime() > _d.getTime()) {
            this.setRemindText('所选对账日期不能超过当前时间')
            return
          }
          let _sp = new Date()
          if (_time2.getTime() >= _sp.getTime()) {
            this.MouthOutShow = false
          } else {
            this.MouthOutShow = true
          }
          this.outTimeMonth = this.$value
          this.filterParams.page = 1
          this.setSelect('', '', true)
        } else {
          let _time2 = this.computedTime(this.$value + '-01')
          let _d = this.computedTime(new Date())
          if (_time2.getTime() > _d.getTime()) {
            this.setRemindText('所选对账日期不能超过当前时间')
            return
          }
          let _sp = new Date()
          if (_time2.getTime() > _sp.getTime()) {
            this.MouthinShow = false
          } else {
            this.MouthinShow = true
          }
          this.$monthClick = true
          this.isShowApcheckList.thisMonth = this.$value
          this.ShowApcheckChooseTime = false
          this.$refs.baseFilter[0].setSelect(1)
          this.isShowApcheckList.show = true
          this.getApcheckDetailsinfo()
        }
      },
      // 立即对账
      addApCheck() {
        this.showModal = true
      },
      setRemindText: function (str) {
        this.collectResult = str
        this.timeoutCount++
      },
      setDate (type) {
        if (this.dateObj[type]) {
          // 初始化为00:00:00
          alert(this.dateObj[type])
          this.dateObj[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
          if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate > this.dateObj.toDate) {
            if (type === 'fromDate') {
              this.setRemindText('起始时间不能大于结束时间')
            } else {
              this.setRemindText('结束时间不能小于起始时间')
            }
            this.dateObj[type] = null
          }
//          else {
//            if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate === this.dateObj.toDate) {
//              // 23:59:59
//              this.dateObj.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
//            }
//          }
          // 23:59:59
          if (this.dateObj.toDate && type === 'toDate') {
            this.dateObj.toDate += (23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000)
          }
        } else {
          this.dateObj[type] = null
        }
      },
      toChooseUser() {
        console.log('选择客户')
      },
      onPullUpAction () {
        this.filterParams.page++
        this.setSelect(this.$selectObj.key, this.$selectObj.value, false)
      },
      getUnread() {
        this.$http.get('/sale/apCheck/unread').then(res => {
          this.unreadCode = res.data.content
        })
      },
      lookDetails(id) {
        console.log('前往详情并且设置为已读')
        // if (!this.isUnread(id)) { } else {
        //   let sourceId = []
        //   sourceId.push(id)
        //   this.$http.post('/sale/tender/setRead', sourceId).then(res => {
        //     this.getUnread()
        //   })
        // }
      },
      isUnread: function (id) {
        for (let i in this.unreadCode) {
          if (id === this.unreadCode[i]) {
            return true
          }
        }
      },
      ChangeList(tp) {
        this.activeType = tp
        this.filterParams.page = 1
        this.setSelect(this.$selectObj.key, this.$selectObj.value, true)
      },
      onFilter() {
        this.filterParams.page = 1
        this.setSelect(this.$selectObj.key, this.$selectObj.value, true)
      },
      onSelectAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      onValueAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      ApcheckonSelectAction(selectObj) {
        if (this.$monthClick) return
        this.ShowApcheckChooseTime = true
        this.isShowApcheckList.objTime = selectObj
        this.getApcheckDetailsinfo(selectObj.key, selectObj.value)
      },
      ApcheckonValueAction(selectObj) {
        // if (this.$monthClick) return
        // this.isShowApcheckList.objTime = selectObj
        // this.getApcheckDetailsinfo(selectObj.key, selectObj.value)
      },
      // B2B未对账
      // NotapCheck () {
      //   console.log('未对账')
      // },
      // 未对账详情
      showApcheckList(item) {
        this.isShowApcheckList.show = true
        this.isShowApcheckList.enName = item ? item.myEnterprise.enName : this.isShowApcheckList.enName
        this.isShowApcheckList.thisMonth = this.outTimeMonth
        this.getApcheckDetailsinfo()
      },
      // 未对账详情获取数据
      getApcheckDetailsinfo (...objTime) {
        if (!this.isShowApcheckList.show) return
        let _params = {
          params: {
            checkDate: this.isShowApcheckList.thisMonth,
            suuorname: this.isShowApcheckList.enName
          }
        }
        // 是否打开自定义时间选项 且
        if (this.ShowApcheckChooseTime && !this.$monthClick) {
          // let _fromDate = new Date(this.outTimeMonth + '-01 00:00:00').getTime()
          // let _d = this.computedTime(this.isShowApcheckList.thisMonth).getTime()
          _params = {
            params: {
              fromDate: objTime[1].fromDate,
              endDate: objTime[1].toDate,
              suuorname: this.isShowApcheckList.enName
            }
          }
        }
        this.$http.get('/sale/apCheck/getAllByKeywords', _params).then(res => {
          res.data.details.forEach(item => {
            item.check = true
          })
          this.$monthClick = false
          this.isShowApcheckList.list = res.data.details
          this.$nextTick(() => {
            this._initscroll()
          })
        })
      },
      // 对账全选
      checkAll() {
        let fl = true
        if (this.isCheckAll === 0) {
          fl = false
        }
        this.isShowApcheckList.list.forEach(item => {
          item.check = fl
        })
      },
      checkItem(item, index) {
        if (item.check) {
          item.check = false
        } else {
          this.$set(this.isShowApcheckList.list[index], 'check', true)
        }
      },
      // 对账按钮
        goTopayfor() {
        let apCheck = {
          custUu: '',
          custName: '',
          enUu: '',
          apDate: '',
          beginDate: '',
          endDate: '',
          checkStatus: '未对账',
          checkAmount: 0,
          currency: '',
          rate: '',
          items: [],
          taxrate: ''
        }
        // 保存来源单据相关信息
        let sourceInfos = []

        // 所允许的本次对账最大最小数量
        this.isShowApcheckList.list.maxThisCheckQty = 0
        this.isShowApcheckList.list.minThisCheckQty = 0

        let sameCust = true
        let validQty = true
        let _list = []
        this.isShowApcheckList.list.forEach((check) => {
          // 保存应收对账单明细行数据
          let item = {
            inoutno: '',
            inoutnodetno: '',
            orderCode: '',
            orderClass: '',
            orderDetno: '',
            price: '',
            checkQty: '',
            amount: '',
            sourceId: '',
            sourceTable: '',
            oldYCheckQty: '',
            status: 0,
            receiveCode: '',
            receiveName: '',
            prodCode: '',
            prodTitle: '',
            prodUnit: '',
            prodSpec: '',
            taxrate: '',
            sendcode: '',
            whname: '',
            custUserUU: ''
          }

          // 应收对账单明细行来源表信息
          let sourceInfo = {
            sourceId: '',
            sourceTable: '',
            newYCheckQty: ''
          }

          // 此次对账后新的已转数
          if (check.check === true) {
            _list.push(check)
            apCheck.custName = check.custname
            apCheck.enUu = check.enuu
            apCheck.checkAmount += (check.thischeckqty || 0) * (check.orderprice || 0)
            apCheck.apDate = check.pidate
            apCheck.rate = check.rate

            // 必须是同一家客户才能生成对账单，否则提示错误
            if (apCheck.custUu === '') {
              apCheck.custUu = check.custuu
            } else if (apCheck.custUu !== check.custuu) {
              sameCust = false
              this.setRemindText('请选择同一家客户')
            }

            // 必须是相同币别才能生成对账单，否则提示错误
            if (apCheck.currency === '') {
              apCheck.currency = check.currency
            } else if (apCheck.currency !== check.currency) {
              sameCust = false
              this.setRemindText('请选择同一种币别')
            }
            let re = /^[0-9]+.?[0-9]*$/
            // 必须是相同税率才能生成对账单，否则提示错误
            if (!re.test(apCheck.taxrate)) {
            // if (!angular.isNumber(apCheck.taxrate)) {
              apCheck.taxrate = check.taxrate
            } else if (apCheck.taxrate !== check.taxrate) {
              sameCust = false
              this.setRemindText('请选择相同的税率')
            }

            // 本次对账数量必须小于总对账数量
            if (check.qty > 0) {
              this.isShowApcheckList.list.maxThisCheckQty = check.qty
              this.isShowApcheckList.list.minThisCheckQty = 0
              if (check.qty - (check.ycheckqty || 0) < check.thischeckqty || check.thischeckqty < 0 || check.thischeckqty === 0) {
                validQty = false
                this.setRemindText('本次对账数量,填写有误!')
              }
            } else if (check.qty < 0) {
              this.isShowApcheckList.list.maxThisCheckQty = 0
              this.isShowApcheckList.list.minThisCheckQty = check.qty
              if (((-check.qty) - (-check.ycheckqty) < (-check.thischeckqty)) || check.thischeckqty > 0 || check.thischeckqty === 0) {
                validQty = false
                this.setRemindText('本次对账数量,填写有误!')
              }
            }
            if (this.ShowApcheckChooseTime) {
              let _time1 = this.isShowApcheckList.objTime.value.fromDate
              _time1 = _time1.replace(/-/g, '/')
              let _start = new Date(_time1)
              let _time2 = this.isShowApcheckList.objTime.value.fromDate
              _time2 = _time2.replace(/-/g, '/')
              let _end = new Date(_time2)
              // 获取筛选时间的开始时间为对账的开始时间
              apCheck.beginDate = _start.getTime()
              // 获取筛选的截止时间为对账的截止时间
              apCheck.endDate = _end.getTime()
            } else {
              this.isShowApcheckList.startTime = this.isShowApcheckList.thisMonth + '-01'
              let _time1 = this.isShowApcheckList.startTime
              _time1 = _time1.replace(/-/g, '/')
              let _d = new Date(_time1)
              _d.setDate(1)
              _d.setMonth(_d.getMonth() + 1)
              _d.setDate(_d.getDate() - 1)

              // 获取筛选时间的开始时间为对账的开始时间
              let _time2 = this.isShowApcheckList.startTime
              _time2 = _time2.replace(/-/g, '/')
              apCheck.beginDate = new Date(_time2).getTime()
              // 获取筛选的截止时间为对账的截止时间
              apCheck.endDate = _d.getTime()
            }

            // 应收对账单明细行数据
            item.orderCode = check.ordercode
            item.orderClass = check.piclass
            item.orderDetno = check.orderdetno
            item.price = check.orderprice
            item.checkQty = check.thischeckqty
            item.amount = (check.thischeckqty || 0) * (check.orderprice || 0)
            item.sourceId = check.sourceid
            item.sourceTable = check.sourcetable
            item.oldYCheckQty = check.ycheckqty
            item.prodCode = check.prodcode
            item.prodTitle = check.prodtitle
            item.prodSpec = check.prodspec
            item.prodUnit = check.produnit
            item.inoutno = check.inoutno
            item.inoutnodetno = check.detno
            item.taxrate = check.taxrate
            item.receiveCode = check.receivecode
            item.receiveName = check.receivename
            item.sendcode = check.sendcode
            item.whname = check.whname
            item.custUserUU = check.custuseruu

            // 来源表相关信息
            sourceInfo.sourceid = check.sourceid
            sourceInfo.sourcetable = check.sourcetable
            sourceInfo.newYCheckQty = ((check.ycheckqty || 0) + check.thischeckqty)

            sourceInfos.push(sourceInfo)
            apCheck.items.push(item)
            // haveSelected = true
            // 如果是同一家客户，生成对账单的同时，关闭模态框
          }
        })
        if (sameCust && validQty) {
          this.saveApCheck(apCheck, _list)
        }
      },
      // 对账提交
      saveApCheck(apCheck, _list) {
        if (apCheck.items.length === 0) {
          this.setRemindText('请先选择需要对账的数据')
        } else {
          this.$http.post('/sale/apCheck/operation/save', apCheck).then(res => {
            this.isShowApcheckList.list = _list
            this.setRemindText('生成应收对账成功')
            this.isShowApcheckList.id = res.data.id
            this.isShowApcheckList.showApcheck = true
            if (this.ShowApcheckChooseTime) {
              let _time1 = this.isShowApcheckList.objTime.value.fromDate
              _time1 = _time1.replace(/-/g, '/')
              let _start = new Date(_time1)
              let _time2 = this.isShowApcheckList.objTime.value.toDate
              _time2 = _time1.replace(/-/g, '/')
              let _end = new Date(_time2)
              this.isShowApcheckList.startTime = _start.getFullYear() + '-' + (_start.getMonth() + 1) + '-' + _start.getDate()
              this.isShowApcheckList.endTime = _end.getFullYear() + '-' + (_end.getMonth() + 1) + '-' + _end.getDate()
            } else {
              this.isShowApcheckList.startTime = this.isShowApcheckList.thisMonth + '-01'
              let _d = this.computedTime(this.isShowApcheckList.startTime)
              this.isShowApcheckList.endTime = _d.getFullYear() + '-' + (_d.getMonth() + 1) + '-' + _d.getDate()
            }
            this.ShowApcheckChooseTime = false
          }, err => {
            this.setRemindText(err.response.data || err)
          })
        }
      },
      // 提交对账单
      submitCheck() {
        this.$http.post('/sale/apCheck/operation/updateStatus?id=' + this.isShowApcheckList.id).then(res => {
          this.setRemindText('新增成功')
          this.isShowApcheckList.showApcheck = false
          this.isShowApcheckList.show = false
          this.isShowApcheckList.id = ''
        })
      },
      // 删除对账单
      deleteCheck() {
        // if (this.isShowApcheckList.id === '') {
        this.isShowApcheckList.showApcheck = false
        this.isShowApcheckList.show = false
        this.isShowApcheckList.id = ''
        // return
        // }
        // this.$http.post('/sale/apCheck/operation/deleteApCheck?id=' + this.isShowApcheckList.id, {}).then(res => {
        //   this.isShowApcheckList.showApcheck = false
        //   this.isShowApcheckList.show = false
        //   this.isShowApcheckList.id = ''
        //
        //   let sourceInfos = []
        //   this.isShowApcheckList.list.forEach(item => {
        //     let sourceInfo = {
        //       sourceId: '',
        //       sourceTable: '',
        //       newYCheckQty: ''
        //     }
        //     sourceInfo.sourceId = item.sourceid
        //     sourceInfo.sourceTable = item.sourcetable
        //     sourceInfo.newYCheckQty = item.oldYCheckQty
        //     sourceInfos.push(sourceInfo)
        //   })
        //   this.$http.post('/sale/apCheck/update', sourceInfos).then(res => {})
        // }, err => {
        //   this.setRemindText(err.response.data)
        // })
      },
      // 月份+1
      addMonth(tp, key, val) {
        if (tp === 'inside') {
          let _sp = new Date()
          this.ShowApcheckChooseTime = false
          this.$monthClick = true
          let _d = this.computedTime(this.isShowApcheckList.thisMonth + '-01', val)
          let _m = Number(_d.getMonth() + 1) < 10 ? '0' + (_d.getMonth() + 1) : (_d.getMonth() + 1)
          this.isShowApcheckList.thisMonth = _d.getFullYear() + '-' + _m
          if (_d.getTime() >= _sp.getTime()) {
            this.MouthinShow = false
          } else {
            this.MouthinShow = true
          }
          this.$refs.baseFilter[0].setSelect(1)
          this.isShowApcheckList.show = true
          this.getApcheckDetailsinfo()
        } else {
          let _sp = new Date()
          let _d = this.computedTime(this[key] + '-01', val)
          let _m = Number(_d.getMonth() + 1) < 10 ? '0' + (_d.getMonth() + 1) : (_d.getMonth() + 1)
          this[key] = _d.getFullYear() + '-' + _m
          if (_d.getTime() >= _sp.getTime()) {
            this.MouthOutShow = false
          } else {
            this.MouthOutShow = true
          }
          this.filterParams.page = 1
          this.setSelect('', '', true)
        }
      },
      computedTime(num, val) {
        if ((typeof num === 'object') && num.constructor === Date) {} else {
          num = num.replace(/-/g, '/')
        }
        let _d = new Date(num)
        if (val !== undefined) {
          _d.setMonth(_d.getMonth() + val)
        }
        _d.setDate(1)
        _d.setMonth(_d.getMonth() + 1)
        _d.setDate(_d.getDate() - 1)
        return _d
      },
      async setSelect(...val) {
        let _url = '/sale/apCheck/info/search'
        let itemL = {}
        if (this.activeType === 'all') {
          let _fromDate = this.outTimeMonth + '-01 00:00:00'
          let _d = this.computedTime(_fromDate)
          let _endDate = _d.getFullYear() + '-' + (_d.getMonth() + 1) + '-' + _d.getDate() + ' 00:00:00'
          _endDate = _endDate.replace(/-/g, '/')
          _endDate = new Date(_endDate).getTime()
          _fromDate = _fromDate.replace(/-/g, '/')
          _fromDate = new Date(_fromDate).getTime()
           _url = '/sale/apCheck/customer'
          itemL = {
            params: {
              count: 20,
              page: this.filterParams.page,
              keyword: this.filterParams.keyword,
              searchFilter: {'fromDate': _fromDate, 'endDate': _endDate},
              sorting: { 'recordDate': 'desc' }
            }
          }
        } else {
          itemL = {
            params: {
              count: this.filterParams.count,
              page: this.filterParams.page,
              searchFilter: {'keyword': this.filterParams.keyword || '', 'fromDate': val[1].fromDate, 'endDate': val[1].toDate},
              sorting: {'recordDate': 'desc'},
              _state: this.activeType
            }
          }
        }
        let { data } = await this.$http.get(_url, itemL)
        if (!this.resourceList.content) {
          this.resourceList.content = []
        }
        data.content = data.content || []
        if (this.activeType !== 'all') {
          data.content.forEach(item => {
            item.checkAmount = item.checkAmount.toFixed(2)
            item.getTotalProd = 0
            item.items.forEach(im => {
              item.getTotalProd += im.checkQty
            })
          })
        } else {
          data.content.forEach((item) => {
            let _mouthArr = []
            let _totalArr = []
            item.thisMonthCount && item.thisMonthCount.forEach(count => {
              if (count.amount > 0) {
                _mouthArr.push(count)
              }
            })
            item.totalCount && item.totalCount.forEach(count => {
              if (count.amount > 0) {
                _totalArr.push(count)
              }
            })
            item.totalCount = _totalArr
            item.thisMonthCount = _mouthArr
          })
          console.log(data.content)
        }
        if (!val[2]) {
          this.resourceList.content.push(...data.content)
          data.content = this.resourceList.content
        } else {
          this.resourceList.content = []
        }
        this.resourceList = data
      },
      // 选择月份
      ShowMonthChoose(tp, key) {
        this.$monthType = tp
        if (tp === 'inside') {
          this.ShowApcheckChooseTime = false
          this.$monthClick = true
          this.$refs.baseFilter[0].setSelect(1)
          let _m = this.isShowApcheckList.thisMonth.split('-')[1].length < 2 ? '0' + this.isShowApcheckList.thisMonth.split('-')[1] : this.isShowApcheckList.thisMonth.split('-')[1]
          this.$picker.setSlotValue(0, this.isShowApcheckList.thisMonth.split('-')[0] + '年')
          this.$picker.setSlotValue(1, _m + '月')
        } else {
          let _m = this[key].split('-')[1].length < 2 ? '0' + this[key].split('-')[1] : this[key].split('-')[1]
          this.$picker.setSlotValue(0, this[key].split('-')[0] + '年')
          this.$picker.setSlotValue(1, _m + '月')
        }
        this.isShowMonthChoose = true
      }
    },
    computed: {
      allPage () {
        return Math.ceil(this.resourceList.totalElement / 10)
      },
      isEmpty () {
        return this.resourceList.content.length === 0
      },
      allMoney() {
        let sum = 0
        this.isShowApcheckList.list.forEach(obj => {
          if (obj.check) {
            sum += obj.qty * (obj.orderprice || 0)
          }
        })
        return sum
      },
      isCheckAll() {
        if (this.isShowApcheckList.list.length === 0) {
          return true
        }
        return this.isShowApcheckList.list.filter(item => {
          return item.check === false
        }).length
      }
    },
    components: {
      ModalWrapper,
      BaseFilter,
      PullUp,
      EmptyStatus,
      Picker,
      RemindBox
    },
    filters: {
      time: function (time) {
        if (typeof time === 'number') {
          if (!time) {
            return '无'
          } else {
            let d = new Date(time)
            let year = d.getFullYear()
            let month = d.getMonth() + 1
            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
            return year + '-' + month + '-' + day
          }
        }
      },
      computeNum: function(price, num) {
        return Math.floor(price * 100) / 100
         // price.toString().toFixed(num)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fixedPicker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    .picker {
      width: 100%;
      left: 0;
      bottom: 0;
      position: absolute;
      background: #fff;
    }
    .titls {
      text-align: center;
      font-size: 0.24rem;
      line-height: 0.5rem
    }
    .leftBtn {
      color: #666;
      font-size: 0.24rem;
      position: absolute;
      left: 0.2rem;
      top: 0.1rem
    }
    .rightBtn {
      top: 0.1rem;
      color: #3e82f5;
      font-size: 0.24rem;
      position: absolute;
      right: 0.2rem;
    }
  }
  .mobile-header{
    position: fixed;
    top: 0;
    z-index: 100;
    width:100%;
    height: 1.26rem;
    line-height: 1.26rem;
    /*border-bottom:.01rem solid #ccc;*/
    background: #3e82f5;
    padding:0 .2rem 0 .1rem;
    color:#fff;
  }
  .mobile-header p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:.36rem;
    text-align: center;
    width: 6rem;
    padding-left: 1rem;
  }
  .mobile-center-header p.en-name {
    font-size: .3rem;
  }
  .mobile-header a{
    font-size:.28rem;
    color:#fff;
    position: absolute;
  }
  .mobile-header a i{
    font-size: .48rem;
    margin-right: -.1rem;
  }
  .mobile-header p span {
    position: absolute;
    right: .4rem;
    font-size: .28rem;
  }
  .mobile-header p span i {
    font-size: .28rem;
  }
  .btobapCheck-wrapper {
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    .search-content {
      padding: .24rem 0;
      text-align: center;
      background: #f1f3f6;
      input {
        width: 6.48rem;
        height: .58rem;
        line-height: .58rem;
        border-radius: .14rem;
        margin: 0 0 0 .11rem;
        font-size: .26rem;
        padding: 0 .71rem 0 .21rem;
        border: 1px solid #3f84f6;
      }
    }
    .order-tab {
      background: #3f84f6;
      padding-bottom: 0.2rem;
      .order-tab-wrapper {
        border: solid 1px #ffffff;
        width: 7.06rem;
        margin: 0 auto;
        border-radius: 0.04rem;
        line-height: 0.72rem;
        height: 0.72rem;
        overflow: hidden;
        div {
          color: #ffffff;
          font-size: 0.28rem;
          text-align: center;
          width: 50%;
          &.active {
            background-color: #ffffff;
            color: #3f84f6;
          }
        }
      }
    }
    .order-nav {
      background: #fff;
      div {
        height: 0.82rem;
        line-height: 0.82rem;
        display: inline-block;
        width: 33.3%;
        text-align: center;
        font-size: .28rem;
        color: #666;
        &.active span{
          color: #3f84f6;
          border-bottom: 0.04rem solid #3f84f6;
          padding-bottom: 0.2rem;
        }
      }
    }
    .btobapCheck-wrapper-scroll {
      height: calc(100vh - 1.26rem - 0.98rem - 0.82rem - 1.06rem - 0.92rem);
      overflow-y: auto;
      &.btobapCheck-wrapper-scroll2 {
        height: calc(100vh - 1.26rem - 0.98rem - 0.82rem - 1.06rem - 0.92rem - 1.3rem);
      }
    }
    .filter-wrapper{
      width: 7.1rem;
      margin: 0 auto 0.27rem;
      background: #fff;
      padding: 0.27rem 0.2rem;
      border-radius: 0.05rem;
    }
    .invoice-btob-list {
      width: 7.1rem;
      margin: 0 auto 0.2rem;
      background: #FFFFFF;
      border-radius: 0.05rem;
      padding: 0 0.24rem;
    }
    .invoice-btob-wrapper-top {
      height: 0.8rem;
      span{
        margin-top: 0.24rem;
        display: inline-block;
        font-size: 0.28rem;
        color: #333333;
        height:0.25rem;
        &.read {
          color: #15B262;
        }
        &.noread {
          color: #DE4545;
        }
        &.isPut {
          background: #15B262;
          color: #FFFFFF;
          font-size: 0.24rem;
          border-radius: 0.04rem;
        }
        &.noPut {
          font-size: 0.24rem;
          background: #DE4545;
          color: #FFFFFF;
          border-radius: 0.04rem;
        }
      }
    }
    .invoice-btob-wrapper-middle {
      border-top: 1px solid #D9D9D9;
      @include overFlowHidden();
      padding-top: 0.15rem;
      font-size: 0.28rem;
      color: #151515;
      line-height: 0.5rem;
      padding-bottom: 0.15rem;
      span {
        color: #666666;
      }
      .invoice-btob-wrapper-middle .tilte{
        color: #333333;
      }
      .middle_btn {
        text-align: center;
        font-size: 0.26rem;
        color: #333333;
      }
    }
    .invoice-btob-wrapper-content {
      border-top: 1px solid #D9D9D9;
      @include overFlowHidden();
      padding-top: 0.15rem;
      font-size: 0.28rem;
      color: #151515;
      line-height: 0.5rem;
      padding-bottom: 0.15rem;
      span {
        color: #666666;
      }
    }
  }
  .btobapCheck-modal {
    .search-content input {border: 1px solid #3f84f6;}
    .date-wrap{
      text-align: center;
      display: inline-block;
      label {
        width: 2.3rem;
        height: .5rem;
        line-height: .5rem;
        border-radius: .04rem;
        border: 1px solid #bfbfbf;
        background: url(/images/mobile/select-arrow.png) no-repeat;
        background-size: .12rem .06rem;
        vertical-align: middle;
        background-color: #fff;
        background-position: 2.1rem .2rem;
        position: relative;
        margin: .2rem 0 0 0;
        i {
          font-size: .28rem;
          color: #3f84f6;
          margin-left: .1rem;
          float: left;
        }
        input {
          opacity: 0;
          width: 2.22rem;
          height: .5rem;
          position: absolute;
          left: 0;
          z-index: 1;
        }
        p {
          font-weight: normal;
          font-size: .22rem;
          color: #3E81F6;
          text-align: left;
          text-indent: 10px;
        }
      }
      span {
        color: #a0a0a0;
        margin: 0.3rem .05rem 0;
        width: .3rem;
        display: inline-block;
        text-align: center;
        vertical-align: top;
      }
    }
    .choosescreen {
      padding: 0 0.15rem;
      font-size: 0.28rem;
      color: #418DF6;
      line-height: 0.52rem;
      i {
        font-size: 0.28rem;
      }
    }
    .choosescreen-list {
      margin: 0 0.15rem;
      padding-bottom: 0.28rem;;
      border-bottom: 1px solid #D9D9D9;
      div {
        line-height: 0.76rem;
        span {
          font-size: 0.28rem;
          color: #666666;
          display: inline-block;
          width: 1.68rem;
        }
        input {
          height: 0.5rem;
          line-height: 0.5rem;
          width: 4.44rem;
          margin-left: 0.18rem;
          font-size: 0.28rem;
          color: #333;
          border: 1px solid #AEAEAE;
          text-indent: 0.12rem;
        }
      }
    }
    .choosescreen-result {
      .choosescreen-result-list {
        /*padding: 0 0.15rem 0rem;*/
        background: #fff;
        margin:0 0 0.2rem;
      }
      .choosescreen-result-list-content {
        /*display: inline-block;*/
        vertical-align: middle;
        margin: 0 0.15rem;
        div.OverHidden {
          @include overFlowHidden();
          width: 5.5rem;
        }
        padding-top: 0.15rem;
        font-size: 0.28rem;
        color: #151515;
        line-height: 0.5rem;
        padding-bottom: 0.15rem;
        span {
          color: #666666;
        }
      }
    }
  }

  .timeLine-wrapper {
    background: #fff;
    border-radius: 0.05rem;
    height: 1.1rem;
    width: 7.1rem;
    margin: 0 auto 0.2rem;
    padding: 0.3rem 0 0 2rem;
    position: relative;
    .left {
      background: #fff;
      color: #333;
      padding: 0rem 0.1rem;
      /*box-shadow: 0 0 2px #a0a0a0;*/
      text-align: center;
      margin-right: 0.2rem;
      height: 0.5rem;
      line-height: 0.5rem;
      border: 1px solid #BFBFBF;
    }
    .right {
      text-align: center;
      background: #fff;
      color: #333;
      padding: 0rem 0.1rem;
      /*box-shadow: 0 0 2px #a0a0a0;*/
      margin-left: 0.2rem;
      height: 0.5rem;
      line-height: 0.5rem;
      border: 1px solid #BFBFBF;
    }
    .rightBtn {
      margin: 0.1rem 0.2rem 0 0;
    }
  }
  .modal-h {
    background: #F3F3F3;
    .modal-h-top {
      padding: 0.15rem;
    }
    .overflowhidden {
      @include overFlowHidden();
      width: 5.9rem;
      font-size: 0.28rem;
      color: #333333;
      margin-left: 0.1rem;
    }
    .timeLine-wrapper {
      width: 100%;
      padding: 0.1rem 0 0.1rem 0rem;
      height: 1.4rem;
      margin: 0
    }
  }
  div.timeLine {
    background: #FFFFFF;
    border: 1px solid #BFBFBF;
    border-radius: 4px;
    font-size: 0.28rem;
    color: #3E81F6;
    width: 1.7rem;
    display: inline-block;
    height: 0.5rem;
    line-height: 0.5rem
  }
  .footerBtn {
    padding: 0 0 0 0.15rem;
    height: 1rem;
    line-height: 1rem;
    background: #fff;
    font-size: 0.26rem;
    color: #666666;
    border-top: 1px solid #D3D3D3;
    .bbgoresult {
      background: #008BF7;
      color: #fff;
      width: 1.3rem;
      text-align: center;
    }
    .cancel {
      background: #fff;
      color: #333;
      height: 0.98rem;
    }
  }
</style>