<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    title="订单信息"
    width="80%">
    <el-form
      :inline="true"
      label-width="120px"
      class="dialog-info"
      v-if="orderData">
      <div class="block-title">
        基本信息

        <el-tag
          effect="dark"
          :type="channelList[orderData.sale_channel_id].type">
          {{ channelList[orderData.sale_channel_id].label }}
        </el-tag>
      </div>
      <el-form-item label="创建时间">
        {{ orderData.create_time | formatTime }}
      </el-form-item>

      <el-form-item
        label="分销商"
        v-if="orderData.ota_name">
        {{ orderData.ota_name }}
      </el-form-item>

      <el-form-item
        label="分销商代号"
        v-if="orderData.ota_code">
        {{ orderData.ota_code }}
      </el-form-item>

      <el-form-item
        label="分销商订单号"
        v-if="orderData.ota_order_no">
        {{ orderData.ota_order_no }}
      </el-form-item>

      <el-form-item
        label="售票员"
        v-if="orderData.manager">
        {{ orderData.manager }}
      </el-form-item>

      <el-form-item label="线下订单号">
        {{ orderData.order_no }}
      </el-form-item>

      <el-form-item
        label="旅行社"
        v-if="orderData.travel_agency_name"
      >
        <span>{{ orderData.travel_agency_name }}</span>
      </el-form-item>

      <el-form-item label="总价">
        {{ orderData.price }}
      </el-form-item>

      <el-form-item label="场次内序号">
        {{ orderData.serial_number }}
      </el-form-item>

      <el-form-item
        label="车牌号"
        v-if="orderData.car_number">
        {{ orderData.car_number }}
      </el-form-item>

      <div class="block-title">
        支付信息
      </div>
      <el-form-item label="支付方式">
        {{ orderData.payChannel }}
      </el-form-item>
      <el-form-item
        label="卡号"
        v-if="orderData.payChannel==='储值卡支付'">
        {{ orderData.member_system_pay_info.card_no }}
      </el-form-item>
      <el-form-item
        label="姓名"
        v-if="orderData.payChannel==='储值卡支付'">
        {{ orderData.member_system_pay_info.name }}
      </el-form-item>
      <el-form-item
        label="身份证号"
        v-if="orderData.payChannel==='储值卡支付'">
        {{ orderData.member_system_pay_info.idcard_no }}
      </el-form-item>
      <el-form-item
        label="手机号"
        v-if="orderData.payChannel==='储值卡支付'">
        {{ orderData.member_system_pay_info.phone }}
      </el-form-item>

      <template v-if="orderData.boc_trade_no">
        <div class="block-title">
          银行交易信息
        </div>

        <el-table
          border
          :data="[getPayResponse(orderData.boc_trade_no)]">
          <el-table-column
            :prop="key"
            :key="key"
            :label="key"
            v-for="(val,key) in getPayResponse(orderData.boc_trade_no)"
          >
          </el-table-column>
        </el-table>
      </template>

      <el-form-item
        label="备注"
        v-if="orderData.remark">
        {{ orderData.remark }}
      </el-form-item>

      <div class="block-title">
        购票人信息
      </div>
      <el-form-item :label="orderData.group_individual === 1 ? '预订人' : '导游'">
        {{ orderData.buyer_name || '暂无' }}
      </el-form-item>

      <el-form-item label="手机号">
        {{ orderData.buyer_phone || '暂无' }}
      </el-form-item>

      <el-form-item label="证件类型">
        {{ orderData.buyer_papers_type | paperType }}
      </el-form-item>

      <!--
      <el-form-item label="购买人证件号">
        {{ orderData.buyer_identify || '暂无' }}
      </el-form-item>
       -->
      <el-form-item label="购买人证件号">
        {{ isPapersIdDesensitize ? $options.filters.formatIDCard(orderData.buyer_identify,'暂无') : (orderData.buyer_identify || '暂无') }}
      </el-form-item>

      <el-form-item
        label="游客类型"
        v-if="orderData.customer_type">
        {{ orderData.customer_type }}
      </el-form-item>

      <el-form-item
        label="销售专员"
        v-if="orderData.customer_type">
        {{ orderData.salesperson }}
      </el-form-item>
    </el-form>

    <div
      class="tableBox"
      v-if="orderData && orderData.pictureRemarks && orderData.pictureRemarks.length">
      <div class="block-title">
        图片备注
      </div>
      <ul class="pic-remark">
        <li
          v-for="(item,index) in orderData.pictureRemarks"
          :alt="item.remark"
          :key="index">
          <el-image
            style="width: 200px; height: 200px"
            :alt="item.remark"
            :key="index"
            :src="item.url"
            fit="contain"
            :preview-src-list="previewList">
          </el-image>

          {{ item.remark }}
        </li>
      </ul>
    </div>

    <div
      class="tableBox"
      v-if="orderData">
      <el-table
        border
        :data="orderData.tickets">
        <el-table-column type="expand">
          <template
            slot-scope="scope"
          >
            <el-table :data="scope.row.ticketOrderTravellers">
              <el-table-column
                prop="name"
                label="姓名"
              ></el-table-column>
              <el-table-column label="证件类型">
                <template slot-scope="id_type">
                  {{ papersType[id_type.row.id_type] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="id_num"
                label="证件号"
              ></el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号"
              ></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="序号"
          prop="id"
        >
          <template slot-scope="scope">
            {{ scope.row.id.toString().padStart(8,'0') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ticket_no"
          label="票号"
        >
        </el-table-column>

        <el-table-column
          prop="tname"
          label="票种"
        >
        </el-table-column>

        <template v-if="orderData.tickets[0]">
          <el-table-column
            v-if="orderData.tickets[0].perform_name"
            label="节目"
          >
            <template slot-scope="scope">
              {{ scope.row.perform_name }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="orderData.tickets[0].batch_config_name"
            label="场次"
          >
            <template slot-scope="scope">
              {{ scope.row.batch_config_name }}
            </template>
          </el-table-column>

          <el-table-column
            prop="serial_number"
            label="场次内序号">
          </el-table-column>
          <el-table-column
            v-if="orderData.tickets[0].schedule_config_name"
            prop="schedule_config_name"
            label="班次">
          </el-table-column>
          <el-table-column
            v-if="orderData.tickets[0].schedule_config_name"
            label="班次内序号">
            <template
              slot-scope="scope"
              v-if="scope.row.schedule_config_name">
              {{ scope.row.schedule_serial_number }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="orderData.tickets[0].seat_area_name"
            label="区域"
          >
            <template slot-scope="scope">
              {{ scope.row.seat_area_name }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="orderData.tickets[0].seat_name"
            label="座位号"
          >
            <template slot-scope="scope">
              {{ `${scope.row.seat_name_new }${scope.row.seat_row_tag }排${scope.row.seat_name}座` }}
            </template>
          </el-table-column>
        </template>

        <el-table-column
          width="80"
          label="原价(￥)"
          v-if="orderData.customer_type"
        >
          <template slot-scope="scope">
            {{ scope.row.original_price/scope.row.check_num }}
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          label="票价(￥)"
        >
          <template slot-scope="scope">
            {{ scope.row.price/scope.row.check_num }}
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          label="折扣"
          v-if="orderData.customer_type"
        >
          <template slot-scope="scope">
            {{ scope.row.discount===100?'无': scope.row.discount/10+'折' }}
          </template>
        </el-table-column>

        <el-table-column
          prop="guestName"
          label="游客姓名"
        >
        </el-table-column>
        <el-table-column
          prop="guest_papers_type"
          label="证件类型"
        >
          <template slot-scope="scope">
            {{ papersType[scope.row.guest_papers_type] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="guestIdentify"
          label="证件号码"
        >
          <template slot-scope="scope">
            {{ isPapersIdDesensitize ? $options.filters.formatIDCard(scope.row.guestIdentify) : scope.row.guestIdentify }}
          </template>
        </el-table-column>

        <el-table-column
          width="100"
          prop="check_num"
          label="检票人数"
        >
        </el-table-column>

        <el-table-column
          width="100"
          prop="payDateBegin"
          label="游玩时间"
        >
          <template slot-scope="scope">
            {{ scope.row.is_need_playtime?scope.row.payDateBegin:'无限制' }}
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="取票状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_print?'success':'info'">
              {{ scope.row.is_print?'已取票':'未取票' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="状态"
        >
          <template slot-scope="scope">
            <OrderStatusTag :value="scope.row.status"></OrderStatusTag>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="price"
          label="小计"
        >
        </el-table-column>
        <el-table-column
          width="80"
          label="检票景点"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.ticket_scenic.length"
              @click="showDetail(scope.row)">
              明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="检票景点明细"
      :visible.sync="detailVisible"
      append-to-body
    >
      <div style="padding:20px">
        <el-table :data="record.ticket_scenic">
          <el-table-column
            property="scenic_name"
            label="景点"></el-table-column>
          <el-table-column
            property="check_limit_times"
            label="可检票次数"></el-table-column>
          <el-table-column
            property="checked_times"
            label="已检票次数"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { channelList, papersType } from '@/assets/staticData'
import { getPayResponse } from '@/utils/posUtils'

export default {
  created () {
    this.posType = this.$localStore.get('posType')
  },
  computed: {
    isPapersIdDesensitize () {
      const value = this.$store.state.app.systemConfig.find(i => i.config_key === 'papers_id_desensitize')?.config_value
      return value === '1'
    },
    previewList () {
      return this.orderData.pictureRemarks.map(i => i.url)
    },
    trade_no () {
      if (!this.orderData.boc_trade_no) return ''

      let scenicName = this.$localStore.get('scenicName') || this.$store.state.user.scenicName
      if (scenicName === '西宁景区') {
        return getPayResponse(this.orderData.boc_trade_no)
      }
      if (scenicName === '狼山景区' || scenicName === '军山景区') {
        return getPayResponse(this.orderData.boc_trade_no, 'ordernum')
      }
      return ''
    }
  },
  data () {
    return {
      channelList,
      papersType,
      posType: '',
      orderData: null,
      visible: false,
      detailVisible: false,
      record: {}
    }
  },
  methods: {
    getPayResponse,
    show (data) {
      this.visible = true
      if (data.pictureRemarks) {
        data.pictureRemarks = data.pictureRemarks.filter(i => i.url)
      }
      this.orderData = data
    },
    handleClose () {
      this.visible = false
    },
    copySuccess () {
      this.$message.success('复制成功')
    },
    copyError () {
      this.$message.error('复制失败')
    },
    showDetail (record) {
      this.record = record
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-document{
  cursor: pointer;
}

.pic-remark{
  li{
    display: flex; align-items: center;
    ::v-deep .el-image{
      margin-right:10px
    }
  }
}
</style>
