<template>
  <el-dialog title="提示" :visible.sync="detailVisible" width="30%">
    <el-descriptions class="margin-top" title="排队免单信息" :column="2" :size="size" border>
      <el-descriptions-item>
        <template slot="label">活动名称</template>
        {{ detailInfo.activitiesName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">发起方</template>
        <el-tag size="mini" v-if="detailInfo.isPlatformInit === 1">平台</el-tag>
        <el-tag size="mini" type="success" v-else-if="detailInfo.isPlatformInit === 0">商家</el-tag>
        <el-tag size="mini" v-else type="info"></el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <h3>参与商家</h3>

    <el-table border :data="detailInfo.shops || []">
      <el-table-column align="center" type="index" label="#" width="55"></el-table-column>
      <el-table-column prop="shopName" label="店铺名称" align="center" />
      <el-table-column prop="shopPhone" label="店铺手机号" align="center" />
    </el-table>

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

<script>
import { getFreeQueuingDeatilApi } 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 getFreeQueuingDeatilApi({ 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>
