<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-table
        v-if="orderInfo.type==='TICKET'&&orderInfo.ticket_order&&orderInfo.ticket_order.length"
        :data="orderInfo.ticket_order"
        border
        stripe>
        <el-table-column type="expand">
          <template
            slot-scope="scope"
            v-if="scope.row.travellers">
            <el-table :data="scope.row.travellers">
              <el-table-column
                prop="name"
                label="姓名"
              ></el-table-column>
              <el-table-column label="证件类型">
                <template slot-scope="idType">
                  {{ papersType[idType.row.idType] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="idNum"
                label="证件号"
              ></el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号"
              ></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="票名"
          prop="ticketTypeName">
        </el-table-column>
        <el-table-column
          label="单价"
          prop="unit_price">
        </el-table-column>
        <el-table-column
          label="数量"
          prop="number">
        </el-table-column>
        <el-table-column
          label="总价"
          prop="price">
        </el-table-column>
      </el-table>
    </el-form>

    <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 { papersType } from '@/assets/staticData'

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

export default {
  data () {
    return {
      hideButton: false,
      visible: false,
      papersType,
      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
      // info身份证字段parse
      if (this.orderInfo.type === 'TICKET') {
        this.orderInfo.ticket_order.forEach(v => {
          if (typeof v.info === 'string') { // 防止重复parse
            v.info = JSON.parse(v.info) || []
          }
        })
      }
    },
    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(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
