<template>
  <div class="order-detail">
    <el-form
      inline
      label-width="150px">
      <div class="dialog-info">

        <div class="block-title">订单信息</div>
        <el-form-item label="线下订单号">
          {{ form.order_no }}
        </el-form-item>
        <el-form-item label="成交时间">
          {{ form.createTime | formatTime }}
        </el-form-item>
        <el-form-item label="预订人">
          {{ form.buyer_name }}
        </el-form-item>
        <el-form-item label="手机号">
          {{ form.buyer_phone }}
        </el-form-item>
        <el-form-item label="证件类型">
          {{ form.buyer_papers_type | idTypeName }}
        </el-form-item>
        <el-form-item label="证件号码">
          {{ form.buyer_identify }}
        </el-form-item>
        <el-form-item label="预订游玩日期">
          {{ form.tickets[0].play_date_begin }}
        </el-form-item>
        <el-form-item label="取票码">
          {{ form.nodata }}
        </el-form-item>

        <el-form-item
          label="状态"
          v-if="orderStatus[form.status]">
          <el-tag :type="orderStatus[form.status].color">
            {{ orderStatus[form.status].label }}
          </el-tag>
        </el-form-item>

        <el-form-item
          label="取消时间"
          v-if="form.status==='CANCELED'">
          {{ form.cancel_time | formatTime }}
        </el-form-item>

        <el-form-item
          label="检票时间"
          v-if="form.status==='COMPLETE'">
          {{ form.check_time | formatTime }}
        </el-form-item>

        <div class="block-title">分销商信息</div>
        <el-form-item label="分销商名称">
          {{ form.otaSourceCode }}
        </el-form-item>
        <el-form-item label="分销平台订单号">
          {{ form.ota_order_no }}
        </el-form-item>
        <el-form-item label="第三方分销商订单号">
          {{ form.ota_3rd_order_no }}
        </el-form-item>
        <el-form-item label="产品">
          {{ form.price_code }}
        </el-form-item>

        <div class="block-title">
          票信息

          <el-button
            v-if="canCancel&&type==='cancel'"
            @click="batchCancelTicket">批量退票</el-button>
        </div>

        <el-table
          @selection-change="handleSelectionChange"
          :data="form.tickets"
          border
          stripe>
          <el-table-column
            v-if="canCancel&&type==='cancel'"
            type="selection"
            :selectable="selectable"
            width="55">
          </el-table-column>
          <el-table-column
            prop="ticketTypeName"
            label="票种名称"
          >
          </el-table-column>

          <el-table-column
            prop="ticket_no"
            label="票号"
          >
          </el-table-column>

          <el-table-column
            prop="price"
            label="价格"
          >
          </el-table-column>

          <el-table-column
            prop="play_date_begin"
            label="游玩开始时间"
          >
          </el-table-column>

          <el-table-column
            prop="refund_time"
            label="退款时间"
          >
            <template slot-scope="scope">
              {{ formatTime(scope.row.refund_time) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="status"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag :type="ticketStatus[scope.row.status]&&ticketStatus[scope.row.status].color">
                {{ ticketStatus[scope.row.status]&&ticketStatus[scope.row.status].label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="60"
            fixed="right"
            v-if="canCancel&&type==='cancel'"
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                :disabled="scope.row.status === 'USED' && !cancelUsed"
                @click="cancelTicket(scope.row)">退票</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-form-item label="商品名称">
          {{ form.tickets[0].ticketTypeName }}
        </el-form-item>
        <el-form-item label="是否到付">
          {{ 0 | idTypeName }}
        </el-form-item>
        <el-form-item label="商品合作价">
          {{ form.tickets[0].price }}
        </el-form-item>
        <el-form-item label="数量">
          {{ form.tickets.length }} 张
        </el-form-item>
        <el-form-item label="总价">
          {{ form.price }} 元
        </el-form-item>
        <el-form-item label="辅助票号">
          {{ form.tickets.map(t => t.ota_ticket_no).join('、') }}
        </el-form-item>
        <el-form-item label="游玩天数">
          {{ diffDays(form.tickets[0].play_date_begin, form.tickets[0].play_date_end) }} 天
        </el-form-item>
        <el-form-item label="有效期至">
          {{ form.nodata }}
        </el-form-item> -->

        <div class="block-title">检票信息</div>
        <el-form-item label="总数">
          {{ form.count }} 张
        </el-form-item>
        <el-form-item label="待检票">
          {{ form.tickets.filter(t => t.status === 'WAIT_USE').length }} 张
        </el-form-item>
        <el-form-item label="已检票">
          {{ form.tickets.filter(t => t.status === 'USED').length }} 张
        </el-form-item>
        <el-form-item label="已退票">
          {{ form.tickets.filter(t => t.status === 'CANCELED').length }} 张
        </el-form-item>
        <el-form-item label="是否过期">
          {{ form.tickets.some(t => t.status === 'OUTOFDATE') | yesOrNo }}
        </el-form-item>
      </div>
      <div
        class="dialog-btn-wrap"
        v-if="canCancel&&type==='cancel'">
        <el-button
          :disabled="form.status === 'COMPLETE' && !cancelUsed"
          @click="cancelOrder"
          type="primary">取消订单</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { orderStatus, ticketStatus } from '@/const'
import { cancelOrder } from '@/api/order'

import moment from 'moment'
export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: ''
    },
    canCancel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      orderStatus,
      ticketStatus,
      multipleSelection: [],
      visible: false,
      form: {
        tickets: [{}]
      }
    }
  },
  computed: {
    cancelUsed () {
      return this.$store.state.user.permissionList.includes('stats:cancel_used')
    }
  },
  watch: {
    visible (val) {
      // 初始化编辑数据
      console.log('val', val)
      if (val) {
        if (this.currentItem) {
          this.form = Object.assign({}, this.currentItem)
        }
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    cancelOrder () {
      this.$confirm('确定取消此订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let ticketList = this.currentItem.tickets.map(i => { return i.ticket_no })
        cancelOrder({ticketList}).then(res => {
          this.loading = false
          this.$message.success('退单成功')
          this.handleClose()
          this.$emit('updateList')
        }).catch(e => {
        })
      })
    },
    cancelTicket (item) {
      this.$confirm('确定退票?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let ticketList = [ item.ticket_no ]

        cancelOrder({ticketList}).then(res => {
          this.loading = false
          this.$message.success('退票成功')
          this.$emit('updateList')
        })
      })
    },
    batchCancelTicket () {
      if (!this.multipleSelection.length) return this.$message.error('请选择门票')
      this.$confirm('确定退票?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let ticketList = this.multipleSelection.map(v => v.ticket_no)
        cancelOrder({ticketList}).then(res => {
          this.loading = false
          this.$message.success('退票成功')
          this.$emit('updateList')
          this.multipleSelection = []
        })
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    selectable (row, index) {
      return row.status !== 'CANCELED'
    },
    formatDate (val) {
      return moment(val).format('YYYY-MM-DD')
    },
    formatTime (val) {
      return val && moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    diffDays (start, end) {
      return moment(end).diff(moment(start), 'days')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
