<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
  >
    <div style="padding:10px;">
      <table
        class="table"
        v-if="info.length">
        <tr>
          <th>关联大类</th>
          <th>关联子类</th>
        </tr>
        <tr
          v-for="(val,key) in info"
          :key="key">
          <td>
            {{ val.name }}
          </td>
          <td>
            <el-tag
              v-for="(i,j) in val.value"
              :key="j"
            >
              {{ i.name }}
            </el-tag>
          </td>
        </tr>
      </table>
      <div
        v-if="!info.length"
        style="color: #ccc;text-align: center;padding:80px">
        暂无相关
      </div>
    </div>
  </el-dialog>
</template>

<script>
const nameMap = {
  'managerList': '用户',
  'scenicList': '景点',
  'ticketTypeList': '票种',
  'ticketSpotList': '售票点',
  'batchConfigList': '场次',
  'scheduleConfigList': '班次',
  'travelAgencyList': '旅行社',
  'memberTypeList': '会员',
  'performList': '节目',
  'guideList': '导游'
}

export default {
  data () {
    return {
      title: '',
      visible: false,
      info: []
    }
  },
  methods: {
    show (data) {
      this.title = '子项目详情-' + data.name
      this.visible = true
      this.info = []
      Object.keys(data).forEach((v) => {
        if (v.endsWith('List') && data[v] && data[v].length) {
          this.info.push({
            name: nameMap[v],
            value: data[v]
          })
        }
      })
    },
    handleClose () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.table{
    width: 100%;
    border-spacing: 0;
}
.table th,.table td {
    padding: 10px 20px; border: 1px solid #ddd;
}
.table th {
    background: #eee;
}
</style>
