<template>
    <view>
        <view class="billing-content">
            <!--<view class="uni-title uni-common-mt uni-common-pl">开票类型</view>-->
            <!--<view class="uni-list">-->
            <!--<radio-group @change="typeChange">-->
            <!--<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">-->
            <!--<view>-->
            <!--<radio :value="item.value" :checked="index === current" />-->
            <!--</view>-->
            <!--<view>{{item.name}}</view>-->
            <!--</label>-->
            <!--</radio-group>-->
            <!--</view>-->

            <view class="paddinglr30 bg-white uni-text border-bottom-1 pos-rel" @click="detailClick">
                <view class="jy-fix-height34 commonText">
                    <text class="color-black">抬头类型：</text>
                    <text class="color-black">{{invoiceType==0?'个人':'企业'}}</text>
                </view>
                <view class="jy-fix-height34 commonText">
                    <text class="color-black">发票抬头：</text>
                    <text class="color-black">{{name}}</text>
                </view>
                <!--<view class="jy-fix-height34 commonText">-->
                    <!--<text class="color-black">纳税人识别号：</text>-->
                    <!--<text class="color-black">1111</text>-->
                <!--</view>-->
                <view class="jy-fix-height34 commonText" v-if="current === 1">
                    <text class="color-black">电子邮箱：</text>
                    <text class="color-black">{{email}}</text>
                </view>
                <!--<view class="jy-fix-height34 commonText" v-if="current === 1">-->
                    <!--<text class="color-black">邮寄地址：</text>-->
                    <!--<text class="color-black ">北京市海淀区玲珑路中关村产业园15A三层北京市海淀区玲珑路中关村产业园15A三层</text>-->
                <!--</view>-->
                <!--<view class="jy-fix-height34 commonText" v-if="current === 1">-->
                    <!--<text class="color-black">联系方式：</text>-->
                    <!--<text class="color-black">王旭 13810587647</text>-->
                <!--</view>-->
                <view class="jy-fix-height34 commonText">
                    <text class="color-black">备注：</text>
                    <text class="color-black">{{remark}}</text>
                </view>

                <view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
                </view>
            </view>

            <!-- 每项选择 -->
            <view class="billing-list" v-if="content.length>0">
                <checkbox-group name="check" @change="changeCheck" class="check">
                    <!-- 注意v-for不要设在checkbox-group上 -->
                    <label class="uni-list paddingl10 pos-rel " v-for="(item, index) in content" :key="item.id">
                        <view class="pos-abs billing-check">
                            <checkbox :value="item.rltOrderId" :checked="item.checked"/>
                        </view>
                        <view class="">
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-if="type=='1'">停车缴费</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else-if="type=='2'">会员卡缴费</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else>账户充值</view>

                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-if="type=='1'">{{item.carNumber}}</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else-if="type=='2'">{{item.carNumber}}</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else>充值金额</view>


                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-if="item.terminalSource=='4'">充值渠道:云平台</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else-if="item.terminalSource=='11'">充值渠道:微信小程序</view>
                            <view class="jy-fix-height34 paddinglr30 margin-left-5" v-else>充值渠道:商户端微信小程序</view>


                            <view class="pos-abs billing-money">
                                {{(item.orderActFee/100).toFixed(2)}} 元
                            </view>
                        </view>

                    </label>
                </checkbox-group>
            </view>

            <view v-else class="novipcard_Mid"  style="padding-top: 20px;">
                <image class="novipcard" src="../../static/vipcard/novipcard.png" mode="aspectFit"></image>
                <view class="novipcard_txt">
                    暂无记录
                </view>

            </view>

            <view class="billing-total">
                您已选中{{payNum}}笔交易，共{{(moneyTotal/100).toFixed(2)}}元
            </view>
            <!-- 全选 -->
            <checkbox-group name="allCheck" @change="changeAll">
                <label class="billing-all paddinglr30">
                    <checkbox :value="allCheck.value" :checked="allCheck.checked"/>
                    <text>{{allCheck.name}}</text>
                    <button type="primary" class="billing-submit" @click="billingSubmit">提交发票</button>
                </label>
            </checkbox-group>

        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {


      custName: '', // 购买方填写名称（开发票个人或公司名称）公司必填
      invoiceType: '', // 发票类型（个人、公司），0 表示个人，1表示公司,2表示非企业性质单位
      custTaxid: '', // 纳税人识别号（税号） 公司必填
      custEmail: '', // 客户电子邮箱

      payNum: 0,
      moneyTotal: 0,
      items: [{
        value: '1',
        name: '增值税电子普通发票',
        checked: 'true'
      },
        {
          value: '2',
          name: '增值税纸质专用发票',
        }
      ],
      current: 0,
      allCheck: {
        name: '全选',
        value: 'all',
        checked: false
      },
      content: [
      //   {
      //   name: '微信支付',
      //   value: '1',
      //   id: 1,
      //   money: '5000',
      //   time: '2022-01-12',
      //   whether: true
      // },
      //   {
      //     name: '微信支付',
      //     value: '2',
      //     money: '5000',
      //     time: '2022-01-12',
      //     id: 2,
      //     whether: true
      //   },
      //   {
      //     name: '微信支付',
      //     value: '3',
      //     money: '5000',
      //     time: '2022-01-12',
      //     id: 3,
      //     whether: true
      //   },
      //   {
      //     name: '微信支付',
      //     value: '4',
      //     money: '5000',
      //     time: '2022-01-12',
      //     id: 4,
      //     whether: true
      //   },
      //   {
      //     name: '线下公对公',
      //     value: '5',
      //     money: '5000',
      //     time: '2022-01-12',
      //     id: 5,
      //     whether: true
      //   }
      ],
      invoiceType:0,  // 发票类型
      email:'', // 发票邮箱
      name:'', // 发票抬头
      remark:'', // 备注
      type:'1', //
      useTitleIfo:{}
    }
  },
  onLoad(params){
    console.log(params)
    // invoiceType='+i.invoiceType+'&email='+i.email+'&name'+i.name+'&remark'+i.remark
    this.invoiceType = params.invoiceType
    this.custEmail = params.email
    this.custName = params.name
    this.remark = params.remark
    this.useTitleIfo = JSON.parse(uni.getStorageSync('useTitleIfo'))
    this.custTaxid = this.useTitleIfo.taxid
    this.name = params.name

    this.type = uni.getStorageSync('type') // 发票类型。1-停车记录，2-会员卡，3-余额充值
    console.log(this.type)
    console.log(this.custTaxid)
    console.log(this.useTitleIfo)

  },
  onShow() {
    this.queryRntPayOrderForInvoice()
  },
  methods: {
    queryRntPayOrderForInvoice() {
      var queryRntPayOrderForInvoice = this.$common.queryRntPayOrderForInvoice;
      var jsondata = {
        invoiceType: this.type,
      };
      uni.request({
        url: queryRntPayOrderForInvoice,
        data: JSON.stringify(this.$common.requestSign(jsondata)),
        dataType: "json",
        method: "POST",
        success: (res) => {
          console.log(res)
          if (res.data.code == 0) {
            this.content = res.data.data
            console.log(this.content)
          }
        }
      })
    },
    typeChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
    },
    detailClick() {
      uni.navigateTo({
        url: '../invoiceTitle/invoiceTitle'
      });
    },
    // 全选
    changeAll: function (e) {
      console.log(e.detail.value)
      let me = this
      if (e.detail.value.length == 0) {
        this.content.map(item => this.$set(item, 'checked', false));
        this.$set(this.allCheck, 'checked', false);
        this.payNum = 0
        this.moneyTotal = 0
      } else {
        this.content.forEach(function (item, index) {
          console.log(item);
          me.$set(item, 'checked', true)
          me.payNum++
          me.moneyTotal += item.orderActFee
        });
        this.$set(this.allCheck, 'checked', true);
      }
    },
    // 多选
    changeCheck: function (e) {
      let me = this
      var items = this.content;
      var len = this.content.length;
      var values = e.detail.value;
      console.log(values)
      for (var i = 0; i < len; i++) {
        var item = items[i];
        if (values.includes(item.rltOrderId)) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false);
        }
      }
      console.log(items)
      // 判断选中状态
      var arr = [];
      this.payNum = 0
      this.moneyTotal = 0
      // this.content.forEach(item => item.checked == true ? arr.push(item) : '');
      this.content.forEach(function (item, index) {
        console.log(item);
        if (item.checked == true) {
          me.payNum++
          me.moneyTotal += item.orderActFee
        }
      });
      var isAll = this.content.every(item => item.checked == true);
      isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)
    },
    billingSubmit() {
      let orderList = []
      this.content.forEach(function (item, index) {
        if (item.checked == true) {
          orderList.push(item)
        }
      });
      if(orderList.length==0){
        uni.showToast({
          icon:'none',
          title: `请至少选择一条再提交`
        })
        return
      }
        console.log(this.moneyTotal)
      if(this.moneyTotal>=1000000){
        uni.showToast({
          icon:'none',
          title: `所选总金额不能超过1万`
        })
        return
      }
      var openTicketForCustInvoiceHisInfo = this.$common.openTicketForCustInvoiceHisInfo;
      var jsondata = {
        orderList: JSON.stringify(orderList),
        invoiceTotalFee: this.moneyTotal,
        custName: this.useTitleIfo.name, // 购买方填写名称（开发票个人或公司名称）公司必填
        invoiceType: this.invoiceType, // 发票类型（个人、公司），0 表示个人，1表示公司,2表示非企业性质单位
        custTaxid: this.custTaxid, // 纳税人识别号（税号） 公司必填
        custEmail: this.custEmail, // 客户电子邮箱
        invoiceKind: '0', // 发票种类：0 普通发票，1增值发票
        orgId: this.$common.public_orgId,
        saleTaxid:'91320281MA1X8C486Y',
        address:this.useTitleIfo.address,

        invoiceState:this.useTitleIfo.dataState,
        custBankName:this.useTitleIfo.bankName,
        custCardNo:this.useTitleIfo.cardNo,
        custAddress:this.useTitleIfo.address,
        custPhone:this.useTitleIfo.phone,
        remark:this.useTitleIfo.remark
        // this.useTitleIfo

      };
      uni.request({
        url: openTicketForCustInvoiceHisInfo,
        data: JSON.stringify(this.$common.requestSign(jsondata)),
        dataType: "json",
        method: "POST",
        success: (res) => {
          console.log(res)
          if (res.data.code == 0) {
            this.queryRntPayOrderForInvoice()
            uni.showToast({
              icon:'none',
              title: `提交成功`
            })
          }
        }
      })

    },
    moneyCount() {
    },
  }
}
</script>

<style lang="scss" scoped>
    .icon-arrowright {
        color: #bbb;
        // font-size: 20px;
        right: 2px;
        top: 33px;
    }

    .billing-list {
        width: 100%;
        margin-bottom: 82px;
    }

    .billing-check {
        top: 38px;
        left: 4px;
        height: 34px;
        list-height: 34px;
        // z-index: 1;
    }

    .billing-money {
        top: 38px;
        right: 20px;
        height: 34px;
        list-height: 34px;
        // z-index: 1;
    }

    .billing-total {
        padding-left: 30px;
        position: fixed;
        bottom: 46px;
        left: 0;
        width: 100%;
        height: 34px;
        line-height: 34px;
        // color: #51c24e;
        background-color: #f2fded;
        z-index: 11;
    }

    .billing-all {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 46px;
        line-height: 46px;
        // font-size: 24px;
        background-color: #f6f6f6;
        z-index: 11;
    }

    .billing-submit {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100px;
        height: 46px;
        line-height: 46px;
    }

    .commonText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
    }

</style>
