<template lang="">
  <el-dialog
    title="门票详情"
    :visible.sync="visible"
    width="80%"
    @close="visible = false">
    <div style="padding:20px">
      <el-descriptions :column="2">
        <el-descriptions-item
          :label="item.title"
          v-for="(item,index) in detailColumns"
          :key="index">
          <span v-if="item.key.indexOf('time')>-1">
            {{ detail[item.key] | formatTime }}
          </span>

          <span v-else-if="item.key==='type' && typeDic.find(v=>v.value===detail.type)">
            {{ typeDic.find(v=>v.value===detail.type).label }}
          </span>

          <span v-else-if="item.key==='status'">
            {{ statusMap[detail.status] }}
          </span>

          <span v-else-if="item.key==='number'">
            {{ total }}
          </span>

          <span v-else>
            {{ detail[item.key] }}
          </span>
        </el-descriptions-item>

        <el-descriptions-item
          :span="2"
          label="失败原因"
          v-if="detail.fail_reason">
          <span class="red">{{ detail.fail_reason }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <div class="table-box">
        <el-table
          stripe
          border
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            v-for="(col,idx) in columns"
            :key="idx"
            :prop="col.key"
            :label="col.title"
            :width="col.width"
          >
            <template slot-scope="scope">
              <span v-if="col.key==='activeType'">{{ scope.row.isActive === '1' ? '管理后台免费门票激活' : '票务窗口付费门票激活' }}</span>
              <span v-else-if="col.key==='status'">
                {{ ticketStatusMap[scope.row.status] || '' }}
              </span>
              <span v-else>{{ scope.row[col.key] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :current-page.sync="form.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getData()"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div
      class="dialog-btn-wrap">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="visible = false">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import moment from 'moment'
import columns from './columns'
import infoColumn from './infoColumns'
import missionColumns from './missionColumns'
import { getTicketInStockDetail } from '@/api/ticketType'
const typeDic = [
  { value: '', label: '全部' },
  { value: 'ADD', label: '入库' },
  { value: 'EXPORT', label: '导出' },
  { value: 'ACTIVATE', label: '激活' },
  { value: 'RETURN', label: '退库' }
]

const statusDic = [
  { value: '', label: '全部' },
  { value: 'WAITING', label: '未开始' },
  { value: 'PROCESSING', label: '处理中' },
  { value: 'FINISH', label: '成功' },
  { value: 'FAIL', label: '失败' }
]

const statusMap = {
  'WAITING': '未开始',
  'PROCESSING': '处理中',
  'FINISH': '成功',
  'FAIL': '失败'
}
const ticketStatusMap = {
  'WAIT_ACTIVE': '待激活',
  'WAIT_USE': '待使用',
  'USED': '已检票',
  'CANCELED': '已取消'
}
export default {
  data () {
    return {
      typeDic,
      statusDic,
      statusMap,
      ticketStatusMap,
      moment,
      columns,
      infoColumn,
      visible: false,
      total: 0,
      detail: {},
      tableData: [],
      detailColumns: [],
      loading: false,
      type: '',
      form: {
        pageNum: 1,
        pageSize: 10,
        ticketTypeId: '',
        prepareBatchId: '',
        status
      }
    }
  },
  methods: {
    show (data, type) {
      this.visible = true
      if (data) {
        this.detailColumns = type === 'mission' ? missionColumns : infoColumn
        this.form.ticketTypeId = data.ticketTypeId
        this.form.prepareBatchId = data.id
        this.form.pageNum = 1
        this.tableData = []
        this.detail = data
        this.getData()
      }
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getData()
    },
    getData () {
      this.loading = true

      return getTicketInStockDetail(this.form).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total || 0
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">

</style>
