<template>
  <el-dialog
    title="预订单详情"
    :visible.sync="visible"
    width="800px"
    @close="handleClose">
    <el-form
      class="dialog-info"
      inline
      label-width="120px">
      <el-form-item label="预订单号">
        {{ orderInfo.travel_agency_orderNo }}
      </el-form-item>
      <el-form-item :label="`${agencyName()}名称`">
        {{ orderInfo.travelAgencyName }}
      </el-form-item>
      <el-form-item label="导游名称">
        {{ orderInfo.guide_name }}
      </el-form-item>
      <el-form-item label="支付方式">
        <el-tag :type="getPayType(orderInfo.pay_type).color">
          {{ getPayType(orderInfo.pay_type).label }}
        </el-tag>
      </el-form-item>
      <el-form-item label="人数">
        {{ orderInfo.number }}
      </el-form-item>
      <el-form-item label="游玩时间">
        {{ orderInfo.play_date }}
      </el-form-item>
      <el-form-item label="客源地">
        {{ orderInfo.customer_source_area }}
      </el-form-item>
      <el-form-item label="销售专员">
        {{ orderInfo.salesperson }}
      </el-form-item>
      <el-form-item
        label="备注"
        style="width:100%">
        {{ orderInfo.remark }}
      </el-form-item>
      <el-form-item
        label="其他需求"
        style="width:100%">
        {{ orderInfo.remark_request }}
      </el-form-item>
    </el-form>

    <div
      v-if="projectName==='jiulonghu'"
      style="padding:10px;display: flex;"
    >
      <span style="flex:1"> 0 到 18: {{ age1 }} 人</span>
      <span style="flex:1"> 19 到 59: {{ age2 }} 人</span>
      <span style="flex:1"> 60 到 69: {{ age3 }} 人</span>
      <span style="flex:1"> 70 以上: {{ age4 }} 人</span>
    </div>
    <div
      v-if="projectName==='jiulonghu'"
      style="padding:10px;display: flex;">
      <span style="flex:1"> 全价: {{ orderInfo.ticket_order[0].travellers.length-age1-age3-age4 }} 人</span>
      <span style="flex:1"> 半价: {{ age1+age3 }} 人</span>
      <span style="flex:1"> 免票: {{ age4 }} 人</span>
      <span style="flex:1"> </span>
    </div>

    <span
      slot="footer"
      v-if="!hideButton">
      <el-button
        type="danger"
        @click="confirmAudit('REFUSE')">拒 绝</el-button>
      <el-button
        type="success"
        @click="confirmAudit('APPROVE')">批 准</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { preOrderAudit } from '@/api/travelAgency'
import { getAgeByCardId } from '@/utils/index.js'

const payTypeOptions = [
  {
    label: '到付',
    value: 1,
    color: 'success'
  },
  {
    label: '预付',
    value: 2,
    color: 'danger'
  }
]

export default {
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      age1: 0, // 0-18
      age2: 0, // 19-59
      age3: 0, // 60-69
      age4: 0, // 70-
      hideButton: false,
      visible: false,
      orderInfo: {}
    }
  },
  methods: {
    getPayType (value) {
      return payTypeOptions.find(i => i.value === value) || { label: '无', color: 'info' }
    },
    show (data, hideButton) {
      this.visible = true
      this.orderInfo = data
      this.hideButton = hideButton
      this.getAge()
    },
    handleClose () {
      this.visible = false
    },
    confirmAudit (status) {
      this.$confirm(`确定${status === 'REFUSE' ? '拒绝' : '批准'}吗？`, '确认提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        preOrderAudit({ id: this.orderInfo.id, status }).then(res => {
          this.$message.success('操作成功。')
          this.$emit('update')
          this.handleClose()
        })
      }).catch(() => {

      })
    },
    getAge () {
      if (this.projectName !== 'jiulonghu') return
      this.age1 = 0
      this.age2 = 0
      this.age3 = 0
      this.age4 = 0
      this.orderInfo.ticket_order[0].travellers.forEach(v => {
        let age
        if (v.idType === 'ID_CARD' && v.idNum.length === 18) {
          age = getAgeByCardId(v.idNum)
          if (age < 18) { // 半价
            this.age1++
          } else if (age > 59 && age < 70) { // 半价
            this.age3++
          } else if (age > 70) { // 免费
            this.age4++
          } else {
            this.age2++
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
