<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.saleChannelId].type">
          {{ channelList[orderData.saleChannelId].label }}
        </el-tag>
      </div>
      <el-form-item label="创建时间">
        {{ orderData.createTime | formatTime }}
      </el-form-item>

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

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

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

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

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

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

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

      <div class="block-title">
        支付信息
      </div>
      <el-form-item label="支付方式">
        {{ orderData.payChannel }}
      </el-form-item>
      <el-form-item
        label="银行交易流水号"
        v-if="orderData.bocTradeNo">
        {{ orderData.bocTradeNo }}
      </el-form-item>
      <el-form-item
        label="原交易要素"
        v-if="orderData.bocTradeNo">
        {{ trade_no }}
        <el-tooltip
          content="复制"
          placement="top"
          effect="dark">
          <i
            class="el-icon-document"
            v-clipboard="()=>getPayResponse(orderData.bocTradeNo)"
            v-clipboard:success="copySuccess"
            v-clipboard:error="copyError"></i>
        </el-tooltip>
      </el-form-item>

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

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

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

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

      <el-form-item label="购买人证件号">
        {{ orderData.buyerIdentify || '暂无' }}
      </el-form-item>

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

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

    <div
      class="table-box"
      v-if="orderData">
      <el-table
        border
        :data="orderData.tickets">
        <el-table-column
          prop="ticketNo"
          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].performName"
            label="节目"
          >
            <template slot-scope="scope">
              {{ scope.row.performName }}
            </template>
          </el-table-column>

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

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

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

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

        <el-table-column
          width="80"
          label="折扣"
          v-if="orderData.customerType"
        >
          <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="guestIdentify"
          label="身份证"
        >
        </el-table-column>

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

        <el-table-column
          width="100"
          prop="payDateBegin"
          label="游玩时间"
        >
          <template slot-scope="scope">
            {{ scope.row.isNeedPlaytime?scope.row.payDateBegin:'无限制' }}
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.status | ticketStatus }}
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          prop="price"
          label="小计"
        >
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

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

export default {
  created () {
    this.posType = this.$localStore.get('posType')
  },
  computed: {
    trade_no () {
      if (!this.orderData.bocTradeNo) return ''

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

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