<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="order-container flex relative">
      <header class="order-header rowACenter between">
        <div class="order-process">交易流程</div>
        <section
            v-for="(item,index) in transactionData"
            :key="'order-'+index"
            class="rowACenter"
        >
          <svg v-if="index!==0" class="order-describe-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6020" width="200" height="200"><path d="M672 512L352 232v560l320-280z" fill="#ffffff" p-id="6021"></path></svg>
          <aside
              class="order-describe-item center"
          >
            <v-image class="order-describe-icon" mode="center" :src="item.icon" backgroundColor="transparent"></v-image>
            <div class="order-describe-label">{{item.label}}</div>
          </aside>
        </section>
      </header>
      <section class="flex-1 overflow order-content">
        <div class="order-content-title">确认订单信息</div>
        <section class="order-table overflow">
          <div class="order-table-tr order-table-header rowACenter">
            <aside class="center">陪玩大神</aside>
            <aside class="center">服务品类</aside>
            <aside class="center">单价</aside>
            <aside class="center">订单总价</aside>
            <aside class="center">购买数量</aside>
          </div>
          <div class="order-table-tr order-table-content rowACenter">
            <aside class="rowCenter">
              <v-image class="order-user-avatar" :src="option.user.header_pic" radius="50%"></v-image>
              <div class="order-user-name">{{option.user.nick_name}}</div>
            </aside>
            <aside class="center">
              <a-select :value="value" @change="changeGameType" class="order-select">
                <a-select-option
                    v-for="(item) in option.gameList"
                    :key="'options-'+item.pid"
                    :value="item.value"
                >{{item.label}}</a-select-option>
              </a-select>
            </aside>
            <aside class="center order-table-price">¥{{item.price}}/局</aside>
            <aside class="center order-table-all-price">¥{{total}}</aside>
            <aside class="center">
              <stepper v-model:value="item.number" type="order"></stepper>
            </aside>
          </div>
        </section>
        <section class="order-pay-info">
          <aside class="rowACenter order-pay-item">
            <div class="order-pay-label">支付方式:</div>
            <section class="flex-1 overflow rowACenter">
              <aside
                v-for="(item,index) in payOrder"
                :key="'pay-'+index"
                class="center order-pay-info-item"
                :class="{
                  'cursor-pointer': payCheck !== index,
                  'order-pay-info-check': payCheck === index,
                  'order-pay-info-format': payData[item].format && payFormat[payData[item].format]
                }"
                @click="triggerPayType(index)"
              >
                <div class="">{{payData[item].label}}</div>
                <div class="order-pay-format" v-if="payData[item].format && payFormat[payData[item].format]">{{payFormat[payData[item].format]}}</div>
              </aside>
            </section>
          </aside>
          <aside class="rowACenter order-pay-item order-pay-item-margin">
            <div class="order-pay-label">实付款:</div>
            <section class="flex-1 order-pay-price">
              <div class="line-1">¥{{total}}</div>

<!--              <div class="line-1">{{payTotalFormat}}</div>-->
            </section>
          </aside>
        </section>
      </section>
      <!--   底部     -->
      <footer class="order-footer center">
        <div class="order-footer-info">15分钟未接退单 服务保障</div>
        <div class="order-button-group rowACenter">
          <aside class="order-button center cursor-pointer" @click="close">返回大神首页</aside>
          <aside class="order-button order-main-button center cursor-pointer" @click="triggerPayOrder">确认支付</aside>
        </div>
      </footer>
    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon,
  vImage,
  stepper
} from '$components';
import {
  Select
} from 'ant-design-vue';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "popup-order",
  components:{
    Popup,
    icon,
    vImage,
    stepper,
    [Select.name]:Select,
    [Select.Option.displayName]:Select.Option,
  },
  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>

<style lang="scss" src="../global.scss"></style>