<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>

      <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"
        >
          <template slot-scope="scope">
            <span v-if="col.key==='is_active'">{{ scope.row.is_active?'已激活':'未激活' }}</span>
            <span v-else-if="col.key==='activation_time'">{{ scope.row.activation_time | formatTime }}</span>
            <span v-else-if="col.key==='status'">
              <OrderStatusTag
                :value="scope.row.status"
                v-if="scope.row.status"></OrderStatusTag>
            </span>
            <span v-else>{{ scope.row[col.key] }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-size="10"
        layout="total, prev, pager, next"
        @current-change="getData"
        :total="total">
      </el-pagination>
    </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 { getMissionDetail } 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': '失败'
}
export default {
  data () {
    return {
      typeDic,
      statusDic,
      statusMap,
      moment,
      columns,
      infoColumn,
      visible: false,
      total: 0,
      detail: {},
      tableData: [],
      detailColumns: [],
      loading: false,
      type: '',
      form: {
        keyWords1: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    show (data, type) {
      this.visible = true
      if (data) {
        this.detailColumns = type === 'mission' ? missionColumns : infoColumn
        this.form.keyWords1 = type === 'mission' ? data.id : data.mission_id
        this.form.pageNum = 1
        this.tableData = []
        this.detail = data
        this.getData()
      }
    },
    getData () {
      this.loading = true

      return getMissionDetail(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">

</style>
