<template>
  <view class="container">
    <view class="item-pay">
      <view class="item-pay-con">
        <view class="item-pay-con-ti">选择支付方式</view>
        <button class="item-pay-con-bu" :class="{'item-pay-con-bu-show': payType === items.value}" v-for="items in payTypeArr" @click="changePayType(items.value)">{{items.title}}</button>
      </view>

      <view class="item-pay-con">
        <view class="item-pay-con-ti">
          认证缴费订单
        </view>
        <view class="item-pay-con-tab">
          <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
            <uni-tr>
              <uni-th width="140" align="center">订单号</uni-th>
              <uni-th width="120" align="center">姓名</uni-th>
              <uni-th align="center">订单金额</uni-th>
            </uni-tr>
            <uni-tr v-for="(item, index) in tableList" :key="index">
              <uni-td>{{ item.pay_no }}</uni-td>
              <uni-td>
                <view class="name">认证缴费订单</view>
              </uni-td>
              <uni-td align="center">{{ item.address }}</uni-td>
            </uni-tr>
          </uni-table>
          <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
        </view>
      </view>
    </view>
    <view class="item-pay">
      <image class="item-pay-img" v-if="is_show_img" :src="pay_image"></image>
      <text class="item-pay-prompt" v-if="is_show_img">请扫码支付！</text>
      <button class="item-pay-sub" :disabled="isDisabled" @click="handlerPay">确认支付</button>
    </view>
  </view>
</template>

<script>

  import * as GoodsApi from '@/api/goods'
  import uniTable from "@/uni_modules/uni-table/components/uni-table/uni-table"
  import uniTr from "@/uni_modules/uni-table/components/uni-tr/uni-tr"
  import uniTh from "@/uni_modules/uni-table/components/uni-th/uni-th"
  import uniTd from "@/uni_modules/uni-table/components/uni-td/uni-td"
  import uniPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination"
  import { checkLogin } from '@/core/app'

  export default {
    name: "payment",
    components: {
      'uni-table': uniTable,
      'uni-tr': uniTr,
      'uni-th': uniTh,
      'uni-td': uniTd,
      'uni-pagination': uniPagination,
    },
    data () {
      return {
        tableList: [],
        payTypeArr: [
          {
            title: '网银支付',
            value: 15
          },{
            title: '支付宝',
            value: 12
          },
        ],
        payType: 15,
        loading: false,
        selectedIndexs: [],
        pageSize: 10, // 每页数据量
        pageCurrent: 1, // 当前页
        total: 0, // 数据总量
        good_money: 0, // 交易金额
        isDisabled: false, // 按钮禁用
        is_show_img: false, // 显示图片
        pay_image: '', // 显示图片
      }
    },
    onShow() {
      // 判断是否已登录
      if(!checkLogin()){
        this.$toast('登录失效了，请重新登录系统')
        setTimeout(this.jumpLogin,2000)
      }
    },
    onLoad() {
      this.selectedIndexs = []
      this.getTableList()
    },
    methods: {
      jumpLogin() {
        this.$navTo('pages/login/index')
      },
      // 切换支付类型
      changePayType(val) {
        this.payType = val
      },
      // 分页触发
      change(e) {
        this.$refs.table.clearSelection()
        this.selectedIndexs.length = 0
        this.getData(e.current)
      },
      // 获取订单列表
      getTableList(pageNo = 1) {
        const app = this
        let param = {
          userid : uni.getStorageSync("accountId"),
          isok : 2,
        }
        return new Promise((resolve, reject) => {
          GoodsApi.paymentList(param).then(res => {
            if (res.resultCode === "00000000") {
              app.tableList = res.data
              //app.good_money = res.data[0].paysum
            } else {
              app.$error(res.errMsg);
            }
            resolve()
          }).catch(reject)
        })
      },
      // 确认支付
      handlerPay () {
        const app = this
        if (app.tableList.length <= 0) {
          app.$error('订单数据为空')
          return false
        }
        let shopnameArr = []
        let shop_price_arr = []
        app.tableList.forEach((item) => {
          shopnameArr.push = item.pay_no
          shop_price_arr.push = item.paysum
        })
        let shopname = shopnameArr.join(',')
        let shop_price = shop_price_arr.join(',')
        let new_shop_Name = ''
        let Merchant_id = uni.getStorageSync("Merchant_id") // 商户id
        let accountId = uni.getStorageSync("accountId") // 用户isli

        //计算交易金额
        let manyMony = 0;
        manyMony = (Number(app.good_money * 100)).toFixed(0);

        let payment = {
          amount: manyMony, //交易金额
          app_id: Merchant_id, //发送请求的公司id
          body: "认证缴费订单", //订单描述
          businesstype: 1001, //交易类型1001-销售收款，2001-消费付款
          ordernumber: shopname, //订单号
          paymenttypeid: app.payType, //12支付宝，13微信 15 网银支付
          subpaymenttypeid: app.payType, //12支付宝，13微信 15 网银支付
          businesstime: app.getDayTimer(new Date()),
          buyer: accountId, //客户(买方)  用户isli
          chargeuptype: 2, //收支类型1-收入2-支出,
          goodsname: "认证缴费订单", //商品名称
          orderamount: manyMony, //订单金额(单位分)
          payorderid: shopname, //交易流水号
          price: shop_price, //商品单价(单位分)
          seller: accountId, //商户(卖方)
          settlementamount: manyMony, //结算金额(分)
          settlementtype: 2, //结算方式:1-转账充值;2-内部转账
          totalqty: 1 //商品数量
        }

        if (new_shop_Name == "") {
          app.isDisabled = true
          payment.body = encodeURIComponent(payment.body, "ut-8")
          payment.goodsname = encodeURIComponent(payment.goodsname, "ut-8")
          //确认支付接口
          let paramArr = '';
          for (let key in payment) {
            paramArr.push(key + '=' + payment[key])
          }
          let paramStr = '?' + paramArr.join('&')
          GoodsApi.certificationPay(paramStr).then(res => {
            if (res.resultCode == '00000000') {
              if (app.payType != 15) {
                app.is_show_img = true
                app.pay_image = res.data.qrcodeurl
              } else {
                app.$success('支付成功')
                this.getTableList()
              }
            }
          })

        } else {
          app.$error(new_shop_Name + "无法购买")
        }
      },
      //转换时间
      getDayTimer (data) {
        let date = new Date(data)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let currentdate = y + '-' + m + '-' + d;
        let hh = date.getHours()
        hh = hh < 10 ? ('0' + hh) : hh
        let mm = date.getMinutes()
        mm = mm < 10 ? ('0' + mm) : mm
        let ss = date.getSeconds()
        ss = ss < 10 ? ('0' + ss) : ss
        let time = hh + ':' + mm + ':' + ss;
        return currentdate + " " + time
      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;

    .item-pay {


      .item-pay-con {
        margin-top: 30rpx;
        padding-top: 30rpx;

        .item-pay-con-ti {
          height: 50rpx;
          margin-left: 20rpx;
          padding-left: 10px;
          border-left: #407ac4 10rpx solid;
          display: flex;
          align-items: center;
          text-align: center;
        }

        .item-pay-con-bu {
          width: 220rpx;
          margin-top: 30rpx;
          margin-left: 50rpx;
          border-radius: 15rpx;
          display: inline-block;
          border: #e5e5e5 1rpx solid;
          background-color: #e5e5e5;
        }
        .item-pay-con-bu-show {
          background-color: #defedc;
        }

      }

      .item-pay-sub {
        color: #ffffff;
        margin-top: 200rpx;
        background-color: #407ac4;
      }

      .item-pay-img {
        width: 200px;
        height: 200px;
        margin-top: 15%;
        margin-left: 25%;
        background-color: #eeeeee;
      }

      .item-pay-prompt {
        display: block;
        text-align: center;
        color: red;
      }
    }

  }
</style>