<template>
  <div class="icon-button">
    <el-button-group>
      <!--el-tooltip effect="dark" content="直播间内用户" placement="top" :enterable="false">
        <el-button type="success" size="small" disabled>
          <icon-svg name="user" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="管理回放" placement="top" :enterable="false">
        <el-button type="warning" size="small" disabled>
          <icon-svg name="playback" /></el-button>
      </el-tooltip-->
      <el-tooltip effect="dark" content="商品库" placement="top" :enterable="false">
        <el-button type="primary" size="small" @click="navigateTo('liveroomProd')">
          <icon-svg name="product" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="客户咨询" placement="top" :enterable="false">
        <el-button type="warning" size="small" @click='navigateTo("liveroomConsults")'>
          <icon-svg name="question" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="商品跳转记录" placement="top" :enterable="false">
        <el-button type="info" size="small" @click='navigateTo("liveroomProductJumpRecord", { title: data.title })'>
          <icon-svg name="record" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="观看统计" placement="top" :enterable="false">
        <el-button type="info" size="small" @click="navigateTo('liveroomStats')">
          <icon-svg name="chartline" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="邀约码统计" placement="top" :enterable="false">
        <el-button type="info" size="small" disabled>
          <icon-svg name="share" /></el-button>
      </el-tooltip>

      <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
        <el-button type="success" size="small" @click="$emit('display-detail', { id, index })">
          <icon-svg name="eye" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
        <el-button type="primary" size="small" @click="navigateTo('liveroomEdit')">
          <icon-svg name="pen" /></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
        <el-button type="danger" size="small" @click="$emit('delete-room', { id, index })">
          <icon-svg name="trashcan" /></el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: "operations",
  props: {
    id: {
      type: Number,
      required: true,
    },
    data: {
      type: Object,
      default: null,
    },
    index: {
      type: Number,
      default: 0,
    }
  },
  methods: {
    navigateTo(name: string, query?: Record<string, string>, params?: Record<string, string>) {
      this.$router.push({ name, params: { id: this.id.toString(), ...params }, query: query })
    }
  },
})
</script>