<template>
  <div>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body
               @opened="handleDialogOpened" @close="handleDialogClose">
      <div v-loading="loading" element-loading-text="拼命加载中......请稍等"
           style="display: flex; flex-direction: column; justify-content: center">
        <div
            style="display: flex; flex-direction: row; justify-content: center; align-items: center; height: 50px; background-color: #FFFFFF">
          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer"
               v-on:click="selectClick(1)">
            <p v-if="selectType === 1"
               style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #393939; opacity: 1">
              支付</p>
            <p v-if="selectType === 2"
               style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #909090; opacity: 1">
              支付</p>
            <div v-if="selectType === 1"
                 style="border-width: 2px; border-style: solid; border-color: #42B983; width: 48px"/>
          </div>
          <div style="margin-left: 193px; display: flex; flex-direction: column; cursor: pointer; align-items: center"
               v-on:click="selectClick(2)">
            <p v-if="selectType === 2"
               style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #393939; opacity: 1">
              对公转账</p>
            <p v-if="selectType === 1"
               style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #909090; opacity: 1">
              对公转账</p>
            <div v-if="selectType === 2"
                 style="border-width: 2px; border-style: solid; border-color: #42B983; width: 48px"/>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
         <span
             style="font-size: 16px; font-family: Source Han Sans CN; font-weight: 500; line-height: 27px; color: #393939; opacity: 1;">{{
             entName
           }}</span>
          <span
              style="font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">企业税号：{{
              entTaxId
            }}</span>
          <span
              style="font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">开票设备：{{
              taxDiscId
            }}</span>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <div
              style="height: 100px; width: 480px; background: #FFFFFF; border: 1px solid #3DD08D; box-shadow: 1px 3px 6px rgba(0, 103, 63, 0.1); opacity: 1; border-radius: 5px 5px 5px 5px">
            <div
                style="display: flex; height: 90px; justify-content: space-between; align-items: center; flex-direction: row">
              <div style="display: flex; justify-content: center; align-items: center; flex-direction: row">
                <el-image style="width: 48px; height: 48px;margin: 10px"
                          :src="product.imgUrl"></el-image>
                <div>
                  <span>{{ product.productName }}</span>
                  <span></span>
                </div>
              </div>
              <span
                  style="font-size: 26px; font-family: PingFang SC; font-weight: 500; line-height: 21px; color: #2A2C44; opacity: 1; margin-right: 10px">¥{{
                  product.favouredPrice
                }}
          <span
              style="font-size: 10px; font-family: Source Han Sans CN; font-weight: 400; line-height: 17px; color: #D8D8D8; opacity: 1; text-decoration: line-through;">¥{{
              product.oriPrice
            }}</span>
          </span>
            </div>
            <div style="height: 10px; display: flex; justify-content: flex-end ">
              <div
                  style="background-color: #42B983; width: 20px; display: flex; justify-content: center; align-items: center; border-radius: 0px 0px 5px 0px;">
                <el-image style="width: 9px; height: 7px"
                          :src="require('../../../utils/img/select.png')"></el-image>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <el-image style="width: 128px; height: 58px; cursor: pointer" v-on:click="couponShow"
                    :src="require('../../../utils/img/coupon.png')"></el-image>
          <div id="coupon_list" v-if="isShow === true">
            <div>
              <span>可用优惠券</span>
              <span>({{ this.couponList.length }})</span>
            </div>
            <div style="display: flex; position: relative; margin-top: 10px" v-for="item in couponList"
                 v-bind:key="item.couponId">
              <div>
                <el-image style="width: 80px; height: 80px"
                          :src="require('../../../utils/img/couponhead.png')"></el-image>
              </div>
              <div style="top: 13px; left: 10px; position: absolute">
              <span
                  style="width: 9px; height: 16px; font-size: 16px; font-weight: 400;line-height: 27px;color: #FFFFFF">¥</span>
                <span
                    style="font-weight: 400; line-height: 54px; color: #FFFFFF; font-size: 34px; width: 36px; height: 32px">{{
                    item.amount
                  }}</span>
              </div>
              <div
                  style="display: flex; flex: 1; height: 80px; border: 0px solid rgba(112, 112, 112, 0.10196078431372549);box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);">
                <div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 10px">
                  <span style="width: 128px; font-size: 16px;font-weight: 500;color: #393939">{{ item.title }}</span>
                  <span style="color: #939393; font-size: 10px; margin-top: 10px">使用期限:<span>
                  {{ item.beginDate }}—{{ item.endDate }}
                </span></span>
                  <span style="color: #939393; margin-top: 10px">{{ item.remark }}</span>
                </div>
                <div style="display: flex; justify-content: center; align-items: center; width: 30px">
                  <el-image style="width: 16px; height: 16px; cursor: pointer" v-on:click="couponSelect(item)"
                            v-if="item.isSelect === true"
                            :src="require('../../../utils/img/couponselect.png')"></el-image>
                  <el-image style="width: 16px; height: 16px; cursor: pointer" v-on:click="couponSelect(item)"
                            v-if="item.isSelect === false"
                            :src="require('../../../utils/img/couponnoselect.png')"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="isShow === false"
             style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px">
          <el-form label-width="100px" style="height: 40px">
            <el-form-item label="应付金额：">
              <span class="favoured-price">{{ product.favouredPrice }}</span> 元
            </el-form-item>
          </el-form>
          <el-form label-width="100px" style="height: 40px">
            <el-form-item label="优惠券：">
              <span class="coupon-price">-{{ couponAmount }}</span> 元
            </el-form-item>
          </el-form>
          <span
              style="font-size: 10px; font-family: PingFang SC; font-weight: 400; line-height: 22px; color: #ADADAD; opacity: 1">支付即同意《云票在线服务协议》</span>
          <div v-if="selectType === 1"
               style="display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 10px; margin-bottom: 10px">
            <div v-if="paySelect === 2"
                 style="width: 120px; height: 44px; background: #FFFFFF; border: 1px solid #C7C7C7; opacity: 1; border-radius: 6px; margin-right: 20px; display: flex; justify-content: flex-start; flex-direction: column; cursor: pointer"
                 v-on:click="handlePayTypeChange('A01')">
              <div style="display: flex; flex: 1; justify-content: center; align-items: center">
                <el-image style="width: 18px; height: 18px; margin-right: 10px"
                          :src="require('../../../utils/img/alipay.png')"></el-image>
                <span>支付宝支付</span>
              </div>
            </div>
            <div v-if="paySelect === 1"
                 style="width: 120px; height: 44px; background: #FFFFFF; border: 1px solid #42B983; opacity: 1; border-radius: 6px; margin-right: 20px; display: flex; justify-content: flex-start; flex-direction: column; cursor: pointer"
                 v-on:click="handlePayTypeChange('A01')">
              <div style="display: flex; flex: 1; justify-content: center; align-items: center">
                <el-image style="width: 18px; height: 18px; margin-right: 10px"
                          :src="require('../../../utils/img/alipay.png')"></el-image>
                <span>支付宝支付</span>
                <div
                    style="width: 20px; position: absolute; background-color: #42B983; margin-top: 35px; margin-left: 100px; display: flex; justify-content: center; align-items: center; border-bottom-right-radius: 5px">
                  <el-image style="width: 9px; height: 7px"
                            :src="require('../../../utils/img/select.png')"></el-image>
                </div>
              </div>
            </div>
            <div v-if="paySelect === 1"
                 style="width: 120px; height: 44px; background: #FFFFFF; border: 1px solid #C7C7C7; opacity: 1; border-radius: 6px; margin-right: 20px; display: flex; justify-content: flex-start; flex-direction: column; cursor: pointer"
                 v-on:click="handlePayTypeChange('W01')">
              <div style="display: flex; flex: 1; justify-content: center; align-items: center">
                <el-image style="width: 18px; height: 18px; margin-right: 10px"
                          :src="require('../../../utils/img/wechat.png')"></el-image>
                <span>微信支付</span>
              </div>
            </div>
            <div v-if="paySelect === 2"
                 style="width: 120px; height: 44px; background: #FFFFFF; border: 1px solid #42B983; opacity: 1; border-radius: 6px; margin-right: 20px; display: flex; justify-content: flex-start; flex-direction: column; cursor: pointer"
                 v-on:click="handlePayTypeChange('W01')">
              <div style="display: flex; flex: 1; justify-content: center; align-items: center">
                <el-image style="width: 18px; height: 18px; margin-right: 10px"
                          :src="require('../../../utils/img/wechat.png')"></el-image>
                <span>微信支付</span>
                <div
                    style="width: 20px; position: absolute; background-color: #42B983; margin-top: 35px; margin-left: 100px; display: flex; justify-content: center; align-items: center; border-bottom-right-radius: 5px">
                  <el-image style="width: 9px; height: 7px"
                            :src="require('../../../utils/img/select.png')"></el-image>
                </div>
              </div>
            </div>
          </div>
          <div v-if="selectType === 2"
               style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 30px">
            <span
                style="font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">企业名称：{{
                companyName
              }}</span>
          <span
              style="font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">对公账户开户行名称：{{
              bankName
            }}</span>
            <span
                style="font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">对公账户账号：{{
                bankAccount
              }}</span>
          </div>
          <el-button v-if="selectType === 1" type="primary" v-on:click="payConfirm">确认并支付</el-button>
        </div>
        <!--      <br>-->
        <!--      <el-row :gutter="20">-->
        <!--        <el-col :span="14">-->
        <!--          <el-card>-->
        <!--            <div slot="header">-->
        <!--              <span>购买企业</span>-->
        <!--            </div>-->
        <!--            <p>企业名称：{{ entTaxId }}</p>-->
        <!--            <p>企业税号：{{ entName }}</p>-->
        <!--            <p>开票设备：{{ taxDiscId }}</p>-->
        <!--          </el-card>-->
        <!--          <br>-->
        <!--          <br>-->
        <!--          <br>-->
        <!--          <el-form label-width="100px">-->
        <!--            <el-form-item label="实付金额：">-->
        <!--              <span class="favoured-price">{{ product.favouredPrice }}</span> 元-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="支付方式：">-->
        <!--              <el-radio-group v-model="payType" @change="handlePayTypeChange">-->
        <!--                <el-radio v-for="item in payTypeOptions" :key="item.value" :label="item.value">-->
        <!--                  {{ item.label }}-->
        <!--                </el-radio>-->
        <!--              </el-radio-group>-->
        <!--            </el-form-item>-->
        <!--            <br>-->
        <!--            <el-form-item>-->
        <!--              <div style="float: left;">-->
        <!--                <ali-pay v-show="payType==='A01'" ref="aliPayCodeRef"></ali-pay>-->
        <!--                <we-chat v-show="payType==='W01'" ref="weChatCodeRef"></we-chat>-->
        <!--                <div v-show="payType!=='A01' && payType!=='W01'" class="paycode">未生成</div>-->
        <!--              </div>-->
        <!--              <div style="float: left;margin-left:20px">-->
        <!--                <p>请使用微信或支付宝扫码支付</p>-->
        <!--                <p>支付即同意《云票在线服务协议》</p>-->
        <!--                <el-button type="text" icon="el-icon-refresh" @click="handleRefreshPayCode">刷新支付二维码</el-button>-->
        <!--              </div>-->
        <!--            </el-form-item>-->
        <!--          </el-form>-->
        <!--        </el-col>-->
        <!--        <el-col :span="10">-->
        <!--          <el-card shadow="never">-->
        <!--            <h2>{{ product.productName }}</h2>-->
        <!--            <p>{{ product.productDesc }}</p>-->
        <!--            <div v-if="product.featureItemList">-->
        <!--              <el-divider></el-divider>-->
        <!--              <div v-for="(item,index) in product.featureItemList" :key="index">-->
        <!--                <p>-->
        <!--                  <span>{{ item.featureName }} </span>-->
        <!--                  <span>{{ item.addValue }} </span>-->
        <!--                  <span>{{ item.unit === 'N' ? '条' : item.unit === 'M' ? '月' : item.unit }}</span>-->
        <!--                </p>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </el-card>-->
        <!--        </el-col>-->
        <!--      </el-row>-->
      </div>
    </el-dialog>
    <el-dialog
        title=""
        :visible.sync="payIsShow"
        width="30%"
        @opened="payPageOpen">
      <div>
        <div v-if="isShow === false"
             style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px">
          <el-form label-width="100px" style="height: 40px">
            <el-form-item label="应付金额：">
              <span class="favoured-price">{{ product.favouredPrice }}</span> 元
            </el-form-item>
          </el-form>
          <el-form label-width="100px" style="height: 40px">
            <el-form-item label="优惠券：">
              <span class="coupon-price">-{{ couponAmount }}</span> 元
            </el-form-item>
          </el-form>
          <span
              style="font-size: 10px; font-family: PingFang SC; font-weight: 400; line-height: 22px; color: #ADADAD; opacity: 1">支付即同意《云票在线服务协议》</span>
          <div v-if="selectType === 1" style="float: left">
            <ali-pay v-show="payType==='A01'" ref="aliPayCodeRef"></ali-pay>
            <we-chat v-show="payType==='W01'" ref="weChatCodeRef"></we-chat>
            <div v-show="payType!=='A01' && payType!=='W01'" class="paycode">未生成</div>
          </div>
          <div v-if="payType === 'A01' && selectType === 1"
               style="display: flex; justify-content: flex-start; align-items: center; margin-top: 10px">
            <el-image style="width: 18px; height: 18px; margin-left: 10px; margin-right: 10px"
                      :src="require('../../../utils/img/alipay.png')"></el-image>
            <span>支付宝扫码支付</span>
          </div>
          <div v-if="payType === 'W01' && selectType === 1"
               style="display: flex; justify-content: flex-start; align-items: center; margin-top: 10px">
            <el-image style="width: 18px; height: 18px; margin-left: 10px; margin-right: 10px"
                      :src="require('../../../utils/img/wechat.png')"></el-image>
            <span>微信扫码支付</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cache from '@/utils/cache'
import AliPay from '@/components/payCode/aliPay.vue'
import WeChat from '@/components/payCode/weChat'

import MarketingService from '@/api/marketing'
import { AxiosRequestData } from '@/data/axios_request'

// 支付方式选项列表
const payTypeOptions = [
  {
    value: 'W01',
    label: '微信',
  },
  {
    value: 'A01',
    label: '支付宝',
  },
]

export default {
  name: 'PayDialog',
  components: {
    AliPay,
    WeChat,
  },
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      payTypeOptions: payTypeOptions,
      entTaxId: '-',
      entName: '-',
      device: '-',
      taxDiscId: '-',
      deviceType: '-',
      payType: 'A01',
      weChat: {
        transId: '',
        payInfo: ''
      },
      aliPay: {
        transId: '',
        payInfo: ''
      },
      timeoutTaskId: '', // 支付结果查询任务Id
      paySelect: 1,
      selectType: 1,
      companyName: '',
      bankName: '',
      bankAccount: '',
      couponList: [],
      isShow: false,
      couponAmount: 0,
      payIsShow: false,
      couponIdList: [],
      couponId: '',
      serviceAmount: ''
    }
  },
  methods: {
    /**
     * 支付方式改变
     */
    handlePayTypeChange(type) {
      this.payType = type
      if (this.payType === 'W01' && this.weChat.payInfo) {
        this.paySelect = 2
        this.cancelTimeoutTask()
        this.createTimeoutTask()
      } else if (this.payType === 'A01' && this.aliPay.payInfo) {
        this.paySelect = 1
        this.cancelTimeoutTask()
        this.createTimeoutTask()
      } else {
        this.callTransPay()
      }
    },
    /**
     * 刷新支付二维码
     */
    handleRefreshPayCode() {
      if (this.payType) {
        this.callTransPay()
      }
    },
    /**
     * 生成支付二维码
     */
    callTransPay() {
      this.loading = true
      let _this = this
      MarketingService.transPay({
        productId: this.product.productId,
        entTaxId: this.entTaxId,
        taxDiscId: this.taxDiscId,
        deviceType: this.deviceType,
        payType: this.payType,
        trxAmt: this.product.favouredPrice,
        entCouponRelId: this.couponId
      })
          .then((val) => {
            console.log('测试数据信息')
            console.log(val)
            const transId = val.data.transId
            const payUrl = val.data.payInfo

            if (_this.payType === 'W01') {
              _this.paySelect = 2
              _this.weChat.transId = transId
              _this.weChat.payInfo = payUrl

              _this.$refs.weChatCodeRef.getUrl(payUrl)
            }
            if (_this.payType === 'A01') {
              _this.paySelect = 1
              _this.aliPay.transId = transId
              _this.aliPay.payInfo = payUrl

              _this.$refs.aliPayCodeRef.getUrl(payUrl)
            }

            _this.cancelTimeoutTask()
            _this.createTimeoutTask()
          })
          .catch((err) => {
            // _this.$message.error(
            //     err +
            //     ',获取交易支付链接失败，请点击“刷新支付二维码”重试。'
            // )
          })
          .finally(() => {
            _this.loading = false
          })
    },
    /**
     * 查询交易信息
     */
    callTransInfo() {
      let transId = ''
      if (this.payType === 'W01') {
        transId = this.weChat.transId
      } else if (this.payType === 'A01') {
        transId = this.aliPay.transId
      }

      if (transId) {
        let _this = this
        MarketingService.transInfo(transId)
            .then((val) => {
              // 已支付 提示支付结果
              // 未支付 继续查询
              if (val.data && val.data.transStatus === '2') {
                // 产品名称
                let productName = val.data.productName

                // 关闭支付弹窗
                _this.visible = false
                _this.$notify({
                  title: '支付完成',
                  message: `“${productName}”服务办理成功，如需开具发票请到服务模块下的交易记录中选择交易记录，点击开具发票！`,
                  type: 'success'
                })
              } else {
                _this.createTimeoutTask()
              }
            })
            .catch((err) => {
              // 报错时不在进行结果查询
            })
            .finally(() => {
            })
      } else {
      }
    },
    /**
     * 创建支付结果查询任务
     */
    createTimeoutTask() {
      // 支付结果查询
      let _this = this
      _this.timeoutTaskId = setTimeout(function () {
        _this.callTransInfo()
      }, 5000)
    },
    /**
     * 取消支付结果查询任务
     */
    cancelTimeoutTask() {
      if (this.timeoutTaskId) {
        clearTimeout(this.timeoutTaskId)
      }
    },
    handleDialogOpened() {
      // this.entTaxId = "-";
      // this.entName = "-";
      // this.device = "-";
      // this.taxDiscId = "-";
      // this.deviceType = "-";
      this.payType = 'A01'
      this.paySelect = 1

      this.aliPay.transId = ''
      this.aliPay.payInfo = ''

      this.aliPay.transId = ''
      this.aliPay.payInfo = ''
      this.serviceAmount = this.product.favouredPrice
      this.getCouponList()
      // this.callTransPay()
    },
    handleDialogClose() {
      this.cancelTimeoutTask()
      this.$emit('close')
    },
    selectClick(type) {
      this.selectType = type
    },
    // 获取对公账户信息
    async getAccountInfo() {
      let company = JSON.parse(cache.getSession('company'))
      let token = cache.getToken()
      if (token && company) {
        const url = '/marketing/isp/signPay/info/findById'
        let response = await AxiosRequestData(
            url,
            token,
            {
              infoId: company.signInfoId
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.companyName = response.data.entName
            this.bankName = response.data.bankName
            this.bankAccount = response.data.bankAccount
          }
        }
      }
    },
    // 获取可用优惠券列表
    async getCouponList() {
      let company = JSON.parse(cache.getSession('company'))
      let token = cache.getToken()
      if (token && company) {
        const url = '/marketing/ent/coupon/findAvailableList'
        let response = await AxiosRequestData(
            url,
            token,
            {
              entTaxId: this.entTaxId,
              featureProductId: this.product.productId,
              transAmount: this.product.favouredPrice,
              reqChannel: 4
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            response.data.forEach((item) => {
              item.isSelect = false
            })
            this.couponList = response.data
          }
        }
      }
    },
    // 显示优惠券选择界面
    couponShow() {
      if (this.isShow) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    // 选择优惠券
    couponSelect(data) {
      this.couponList.forEach((item, index) => {
        if (item.couponId !== data.couponId) {
          item.isSelect = false
        }
      })
      data.isSelect = !data.isSelect
      if (data.isSelect) {
        // this.couponAmount = parseFloat(this.couponAmount) + data.amount
        this.couponAmount = data.amount
        let amount = parseFloat(this.serviceAmount) - parseFloat(data.amount)
        if (amount >= 0) {
          this.product.favouredPrice = amount
        } else {
          this.product.favouredPrice = 0
        }
        // this.product.favouredPrice = parseFloat(this.product.favouredPrice) - parseFloat(data.amount)
        // this.couponIdList = this.couponIdList.concat(data.couponId)
        this.couponId = data.relId
      } else {
        // this.couponAmount = parseFloat(this.couponAmount) - data.amount
        this.couponAmount = data.amount
        this.product.favouredPrice = this.serviceAmount
        // this.product.favouredPrice = parseFloat(this.product.favouredPrice) + parseFloat(data.amount)
        // this.couponIdList = this.couponIdList.filter((value, index) => value !== data.couponId)
        this.couponId = ''
      }
    },
    // 支付确认
    payConfirm() {
      this.visible = false
      this.payIsShow = true
    },
    // 支付扫码页面打开
    payPageOpen() {
      this.callTransPay()
    }
  },
  created() {
    const company = JSON.parse(cache.getSession('company'))
    this.entTaxId = company.entTaxId
    this.entName = company.entName
    this.device = company.defaultDeviceInfo.deviceLabel
    this.taxDiscId = company.defaultDeviceInfo.taxDiscId
    this.deviceType = company.defaultDeviceInfo.deviceType
    this.getAccountInfo()
  }
}
</script>

<style lang="stylus" scoped>
.favoured-price {
  color: #E85033;
  font-size: xx-large;
  font-weight: 600;
}

.coupon-price {
  color: #6C6C6C;
  font-size: 14px;
  font-weight: 400;
}

#coupon_list {
  position: relative;
  top: 10px;
  right: 0px;
  width: 400px;
  height: 300px;
  padding: 8px;
  background-color: #FFFFFF;
  border: #3DD08D solid 1px;
  border-radius: 3px;
  overflow: auto;
}

#coupon_list:before {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  top: -16px;
  right: 191px;
  padding: 0;
  border-bottom: 8px solid #FFFFFF;
  border-top: 8px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  display: block;
  content: '';
  z-index: 12;
}

#coupon_list:after {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  top: -18px;
  right: 190px;
  padding: 0;
  border-bottom: 9px solid #3DD08D;
  border-top: 9px solid transparent;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  display: block;
  content: '';
  z-index: 10
}

.paycode {
  width: 136px;
  height: 136px;
  background-color: #EBEEF5;
  text-align: center;
  padding-top: 52px;
}
</style>
