<template>
  <el-dialog title="详情" :visible.sync="detailVisible" width="60%">
    <el-descriptions class="margin-top" :column="2" :size="size" border>
      <el-descriptions-item>
        <template slot="label">免单池金额</template>
        <span style="color: #f40">￥ {{ detailInfo.amount || '--' }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">对应活动名称</template>
        <span>{{ detailInfo.platformParticipationFreeActivities.activitiesName || '--' }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <h3>免单记录</h3>

    <el-table border :data="detailInfo.records || []">
      <el-table-column align="center" type="index" label="#" width="55"></el-table-column>
      <el-table-column prop="orderNo" width="160" label="关联订单号" align="center" />
      <el-table-column prop="orderAmount" label="订单支付金额" align="center">
        <template slot-scope="scope">
          <span style="font-size: 14px; color: #f40">￥{{ scope.row.orderAmount || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="操作金额" align="center">
        <template slot-scope="scope">
          <span style="font-size: 14px; color: #f40">￥{{ scope.row.amount || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.type === 1">入账</el-tag>
          <el-tag type="danger" size="mini" v-else>出账(免单)</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="160" prop="freeRecordId" label="是否参与过免单结算" align="center">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.freeRecordId !== 0">是</el-tag>
          <el-tag type="danger" size="mini" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="160" prop="createTime" label="订单创建时间" align="center" />
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="detailVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getFreeQueuingPoolDeatilApi } from '@/api/freeQueuing'

export default {
  data() {
    return {
      detailVisible: false,
      detailInfo: {}
    }
  },

  methods: {
    show(id) {
      if (!id) {
        return this.$message.error('id 不能为空')
      }
      this.getDetail(id)
      this.detailVisible = true
    },

    async getDetail(id) {
      const res = await getFreeQueuingPoolDeatilApi({ id })
      this.detailInfo = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-weight: bold;
  color: #303133;
  font-size: 16px;
  margin: 20px 0 10px 0;
}
</style>
