<template>
  <div class="order-detail">
    <el-form
      class="order-detail-form"
      label-width="150px">
      <div class="page-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>
      <div class="page-title">分销商信息</div>
      <el-form-item label="分销商名称">
        {{ form.otaSourceName }}
      </el-form-item>
      <el-form-item label="分销商订单号">
        {{ form.ota_order_no }}
      </el-form-item>
      <el-form-item label="价格码">
        {{ form.nodata }}
      </el-form-item>
    </el-form>
    <el-form
      class="order-detail-form"
      label-width="150px">
      <div class="page-title">票信息</div>
      <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.count }} 张
      </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="page-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>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      form: {
        tickets: [{}]
      }
    }
  },
  watch: {
    visible (val) {
      // 初始化编辑数据
      if (val) {
        if (this.currentItem) {
          this.form = Object.assign({}, this.currentItem)
        }
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    formatDate (val) {
      return moment(val).format('YYYY-MM-DD')
    },
    diffDays (start, end) {
      return moment(end).diff(moment(start), 'days')
    }
  }
}
</script>

<style scoped lang="scss">
.order-detail {
  display: flex;
  .order-detail-form {
    margin: 0;
    width: 50%;
    .el-form-item {
      margin: 0;
    }
  }
}

</style>
