<!-- 初始：拷贝自src\pages\sellManage\group\Confirm.vue -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible="visible"
    :before-close="handleClose"
    title="出票确认"
    width="80%">
    <el-form
      v-loading="submitDisable"
      element-loading-text="正在处理付款请求，请稍候"
      class="info-wrap"
      label-width="100px"
      :inline="true">
      <div style="margin-bottom: 20px;">
        付款方式：
        <el-radio-group
          :disabled="createOrderStatus===1"
          size="medium"
          fill="#ff6934"
          v-model="currentPayChannel">
          <el-radio-button
            v-for="val in payChannelOptions"
            :key="val"
            :label="val"></el-radio-button>
        </el-radio-group>
      </div>
      <el-table
        border
        :data="orderInfo"
        style="margin-bottom:30px">
        <el-table-column
          prop="ticketName"
          label="票种名称">
        </el-table-column>

        <el-table-column
          label="游玩日期">
          <template slot-scope="scope">
            {{ scope.row.payDateBegin | formatDate }}
          </template>
        </el-table-column>

        <el-table-column
          prop="count"
          label="数量">
        </el-table-column>

        <el-table-column
          prop="total"
          label="小计">
        </el-table-column>
      </el-table>

      <el-form-item
        label="总数"
        class="warning">
        <span class="strong">
          {{ totalCount }}
        </span> 张
      </el-form-item>

      <el-form-item
        label="总金额"
        class="warning">
        <span class="strong">
          {{ orderPrice }}
        </span> 元
      </el-form-item>

      <!-- 每类票种都会有自己折扣，且和满减手动优惠等叠加在一起，非真实的折扣了，故不再显示 -->
      <!-- <el-form-item
        label="折扣"
        class="warning">
        <span class="strong">
          {{ discount }}
        </span> 折
      </el-form-item> -->

      <el-form-item
        label="折后总额"
        class="warning">
        <span class="strong">
          {{ finalPrice }}
        </span> 元
      </el-form-item>

      <el-form-item
        label="检票方式"
        class="warning">
        <span class="strong">
          {{ getCheckWayName(formData?formData.checkWay:'') }}
        </span>
      </el-form-item>

      <el-form-item
        label="付款方式"
        class="warning">
        <span class="strong">
          {{ currentPayChannel }}
        </span>
      </el-form-item>

      <el-form-item
        v-if="currentPayChannel==='旅行社余额' && currentAgency"
        label="预付余额"
        class="warning">
        <span class="strong">
          {{ currentAgency.prepayment_amount }}
        </span>
      </el-form-item>

      <el-form-item
        v-if="currentPayChannel==='旅行社余额' && currentAgency"
        label="信用限额"
        class="warning">
        <span class="strong">
          {{ currentAgency.prepayment_type?currentAgency.prepayment_limit:'无限制' }}
        </span>
      </el-form-item>

      <br>
      <el-form-item
        label="备注">
        {{ formData.remark }}
      </el-form-item>
    </el-form>
    <div
      class="table-box"
      style="padding-top:0">
      <Collapse title="游客详情信息">
        <el-table
          stripe
          :data="tickets">
          <el-table-column
            type="index"
            width="50"
          >
          </el-table-column>

          <el-table-column
            prop="guestName"
            label="游客姓名"
          >
          </el-table-column>

          <el-table-column
            prop="guestPhone"
            label="游客电话"
          >
          </el-table-column>

          <el-table-column
            prop="guestIdentify"
            label="身份证"
            min-width="130"
          >
          </el-table-column>

          <el-table-column
            v-if="formData.checkWay===5"
            prop="ticketNo"
            label="票号"
            min-width="130"
          >
          </el-table-column>
        </el-table>
      </Collapse>
    </div>

    <div class="dialog-btn-wrap">
      打印小票
      <el-switch
        style="margin:0 50px 0 10px"
        v-model="isPrintSmallTicket">
      </el-switch>

      自动打印
      <el-switch
        style="margin:0 50px 0 10px"
        v-model="isPrint">
      </el-switch>

      <el-button @click="handleClose">
        取消
      </el-button>

      <el-button
        type="warning"
        v-if="showRefresh"
        :disabled="isRefresh"
        @click="payRefresh">
        刷新支付状态<span v-if="isRefresh">({{ countNum }})</span>
      </el-button>

      <el-button
        type="danger"
        v-if="scenicName==='狼山景区'||scenicName==='军山景区'"
        @click="$refs.queryPos.show()">
        查询POS机交易
      </el-button>
      <el-button
        type="primary"
        :disabled="submitDisable"
        @click="submit()"
      >
        {{ submitDisable?'正在处理':'确认出票' }}
      </el-button>
    </div>

    <ReadValueCard
      ref="readValueCard"
      @getInfo="handleValueCardPay"
      @close="submitDisable=false"></ReadValueCard>

    <QueryPos
      ref="queryPos"
      @confirm="handleQueryPos"></QueryPos>

    <!-- GlobalComponents 全局组件 -->
    <PosQrCodeReader
      ref="posQrCodeReader"
      @getQrcode="submit"></PosQrCodeReader>
    <XSCQrCodeReader
      ref="XSCQrCodeReader"
      @getQrcode="submit"></XSCQrCodeReader>
    <ValueCardInput
      ref="ValueCardInput"
      @getMemberSystemId="submit"></ValueCardInput>
  </el-dialog>
</template>

<script>
/*
import mixin from './mixin'
*/
import posMixin from '@/pages/common/posMixin'
import confirmMixin from '../common/confirmMixin'

export default {
  props: {
    currentTicket: {
      type: Object,
      default: () => null
    },
    discount: {
      type: Number,
      default: 0
    },
    finalPrice: {
      type: Number,
      default: 0
    }
  },
  /*
  mixins: [mixin, posMixin, confirmMixin],
  */
  mixins: [posMixin, confirmMixin],
  computed: {
    payChannelOptions () {
      const rawPayChannelOptions = this.$store.state.app.payChannelOptions.filter(i => i.indexOf('旅行社') < 0)
      // 若不开启昭苏天马的景点筛选支付方式，直接返回全部支付方式
      if (!this.enablePayChannelFilterInTianMa || !this.currentTicket?.ticketTypeScenic) {
        return rawPayChannelOptions
      }

      // 景点是严格匹配，支付关键词是只需要包含即可
      const scenicPaymentOptions = [
        { scenic: '天马文化园', paymentMustContain: '新疆农信B扫CII' },
        { scenic: '测试', paymentMustContain: '新疆农信B扫CII' }
        // { scenic: '天马', paymentMustContain: '支付' },
        // { scenic: '测试景区', paymentMustContain: '现金' },
        // { scenic: '上海景区', paymentMustContain: '支付' }
        // 添加其他景点和对应的支付方式
      ]

      // 通过当前票的景点进行筛选支付方式
      const scenicArr = this.currentTicket?.ticketTypeScenic.map(item => item.scenic.name)
      // 静态对象数组包含景点名称和对应的支付方式

      // 函数式实现根据景点名称返回对应的支付方式筛选关键字
      const getPaymentByScenic = (scenicName) => {
        const matchedOption = scenicPaymentOptions.find(option => option.scenic === scenicName)
        return matchedOption ? matchedOption.paymentMustContain : null
      }

      const keyArr = scenicArr.map(s => getPaymentByScenic(s)).filter(Boolean) // 去除为null的元素
      // 通过当前票的景点进行筛选支付方式
      const filterPayChannels = (rawPayChannelOptions, keyArr) => {
        return keyArr && keyArr.length
          ? rawPayChannelOptions.filter(option => keyArr.some(key => option.includes(key)))
          : rawPayChannelOptions
      }
      return filterPayChannels(rawPayChannelOptions, keyArr)
    },
    agencyList () {
      return this.$store.state.app.agencyList
    },
    currentAgency () {
      return this.agencyList.find(i => i.id === this.formData.travelAgencyId)
    }
  },
  data () {
    return {
      enablePayChannelFilterInTianMa: true,
      pageName: '团体售票',
      printPlayDateBegin: ''
    }
  },
  methods: {
    setParams () {
      let tickets = JSON.parse(JSON.stringify(this.tickets))
      let params = Object.assign({}, this.formData)

      // 一码多人
      if (params.checkWay - 0 === 2) {
        let allTickets = []

        this.orderInfo.forEach((item, index) => {
          let count = item.count
          let ticketOrderTravellers = item.tickets.map(i => {
            return {
              name: i.guestName,
              idType: i.guestIdentifyType,
              idNum: i.guestIdentify,
              mobile: i.guestPhone
            }
          })
          /* let obj = JSON.parse(JSON.stringify(item.tickets[0])) */
          const findNonZeroPriceItem = (tickets) => tickets.find(ticket => ticket.price !== 0)
          const nonZeroPriceItem = findNonZeroPriceItem(item.tickets)
          console.log('item.tickets:', item.tickets)
          let outerItem = item
          /**
           * 注意：下面的几处if代码段里重新定义了item，重新定义后的item是和tickets数组元素同类型的，其本身没有tickets属性。
           * 所以这里为了之后能访问到最初的item，需要用outerItem保存下。
           */
          let obj = JSON.parse(JSON.stringify(nonZeroPriceItem)) // 保证了tickets里的基准元素的price不为0
          /**
           *   let obj = JSON.parse(JSON.stringify(item.tickets[0]))
           * 之前此处的 let obj = JSON.parse(JSON.stringify(item.tickets[0]))，
           * 它以tickets第一个元素为基准；然而满x减y的功能就是从ticktets数组第一个元素开始设价格为0
           * 这样会导致基准元素的票价为0，并不会影响总价而把钱收错，但是会使售票统计出票价格显示不正常。
           * 满x减y的功能也不能用this.$NP.times这样的乘法，因为有票价为0的，要改用加法。
           * 同时，每张一码多人票还有人数的限制this.maxNum，这个是读出来的配置项。
           * 比如this.maxNum为50时，买个201人的（满十减一的）一码多人票，，将会拆成5张：50+50+50+50+1
           * 需要处理满x减y的优惠和拆分逻辑的兼容。
           */
          obj.ticketOrderTravellers = ticketOrderTravellers
          let originItem = JSON.stringify(obj)

          if (!this.maxNum) {
            let item = JSON.parse(originItem)
            item.checkNum = count
            /* item.price = this.$NP.times(item.checkNum, item.price) */
            // 加入满减后，存在price为0的元素，老实用加法
            // 另外注意，此时的item已经被重新定义成tickets数组内元素的类型，它此时没有tickets属性
            // 需要访问被重新定义之前的item的话，需要通过outerItem来访问，也只有outerItem有tickets属性。
            // 下面的语句里，如果用item.tickets就是错误的。
            // item.price = this.$NP.times(item.checkNum, item.discountPrice)
            item.price = outerItem.tickets.reduce((accumulator, ticket) => this.$NP.plus(accumulator, ticket.price), 0)
            allTickets.push(item)
            return
          }

          // 比如有201人（一码多人的）票，this.maxNum是单张一码多人的限制，假设是50
          // 那么将会被拆分成5张票：50+50+50+50+1 = 201，也就是拆成了5张票，下面的if代码段就是处理此拆分逻辑。
          if (count > this.maxNum) {
            let num = Math.ceil(count / this.maxNum)
            // 比如201人，单票最多50人，则这里num是向上取整算得需要五张票
            // 使用一个循环，创建num-1张新的票，也就是下面的循环算了四张整的票、
            // 循环里故意留了最后一张票没有处理，哪怕是250人的票，下面也只处理四张
            for (let i = 0; i < num - 1; i++) {
              let newItem = JSON.parse(originItem)
              newItem.checkNum = this.maxNum
              /* newItem.price = this.$NP.times(this.maxNum, newItem.discountPrice) */
              // 加入满减后，存在价格为0的元素，不能用乘法；老实用加法。
              // outerItem.tickets是个含有(e.g. 201)个元素的数组，每个元素有price属性。
              // 现在要做的就是依次从outerItem.tickets里取this.maxNum个元素的price，加起来把它赋给newItem.price
              const subtotal = outerItem.tickets
                .slice(i * this.maxNum, (i + 1) * this.maxNum)
                .reduce((sum, ticket) => sum + ticket.price, 0)
              // 这一步就是把outerItem.tickets里相应元素的price加起来，for循环太多了，所以此处避免使用。
              newItem.price = subtotal
              allTickets.push(newItem)
            }
            let lastItem = JSON.parse(originItem)
            // 处理最后一张票，这张最后的票没达到单票容纳人的上限
            if (count % this.maxNum === 0) {
              lastItem.checkNum = this.maxNum
            } else {
              lastItem.checkNum = count % this.maxNum
            }
            /* lastItem.price = this.$NP.times(lastItem.checkNum, lastItem.discountPrice) */
            // 由于满减优惠，含票价为0的元素，不再能用乘法。
            // outerItem.tickets里面除了之前的元素，要把剩下的元素的price加起来赋给lastItem.price。
            // lastItem算价格时从之前的位置，一直切片到最后
            lastItem.price = outerItem.tickets
              .slice((num - 1) * this.maxNum, outerItem.tickets.length)
              .reduce((sum, ticket) => sum + ticket.price, 0)
            allTickets.push(lastItem)
            console.log('一码多人时的allTickets: ', allTickets)
          } else {
            /**
             * 注意，之前的item和下面重新定义的item并不相同。
             * 之前的item是有tickets属性的，而下面重新定义并覆盖了之前的item。
             * 要访问之前有tickets属性的item，需要通过outerItem来访问。
             */
            let item = JSON.parse(originItem)
            item.checkNum = count
            /* item.price = this.$NP.times(item.checkNum, item.discountPrice) */
            // 加入满减后，存在price为0的元素，老实用加法
            // 并且注意，item被重新定义，只能通过outerItem.tickets来访问之前的数组(若用item.tickets则是错误的)。
            item.price = outerItem.tickets.reduce((accumulator, ticket) => this.$NP.plus(accumulator, ticket.price), 0)
            allTickets.push(item)
          }
        })
        console.log('allTickets', allTickets)

        params.tickets = allTickets
      } else {
        params.tickets = tickets.map(item => {
          /* item.price = item.discountPrice */
          item.price = item.price + 0 // 目前discountPrice是没有使用的
          return item
        })
      }
      params.payChannel = this.currentPayChannel
      params.price = this.finalPrice
      params.sellDevice = this.sellerDevice && this.sellerDevice.ip4

      this.params = params
    },
    createSuccessCallback () {
      // 更新旅行社余额
      this.currentPayChannel === '旅行社余额' && (this.$store.dispatch('getAgencyList'))
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  padding-top: 20px; text-align: center;
}
.info-wrap {
  padding: 20px 20px;
  ::v-deep .el-form-item__label{
    font-size: 16px;
  }
  ::v-deep .el-form-item{
    display: inline-block;
  }
  .strong {
    font-size: 1.8em; font-weight: bold;
  }
}

</style>

<style lang="scss">

</style>
