<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card" header="拼桌信息" >
      <template slot="header">
        <div class="card-header">
          <span class="team-name">
            拼桌名称：{{ team.name | defaultValue }}
            <el-tag size="mini" type="success" style="margin-left: 8px">
              <span v-if="team.limitNum !== null && team.limitNum !== undefined">
                {{ team.currentNum || 0 }}/{{ team.limitNum }}
              </span>
              <span v-else>
                无人数限制
              </span>
            </el-tag>
          </span>
        </div>
      </template>

      <el-row type="flex">
      <div style="flex: 1;margin-left: 2em">
          <el-descriptions :column="3">
            <el-descriptions-item label="发起人"><user-link  :id="team.sponsorId" :text="team.sponsorName"/></el-descriptions-item>
            <el-descriptions-item label="卡座位置"><store-link :id="team.storeId" :name="team.storeName"/>/{{team.boothName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{team.createTime | defaultValue}}</el-descriptions-item>
          </el-descriptions>
      </div>
      </el-row>
    </el-card>


    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="成员列表" :lazy="true">
          <team-user v-if="team.id != null" :query="{teamId: team.id ,status: TeamUserStatus.JOINED}"/>
        </el-tab-pane>
        <el-tab-pane label="聊天记录" :lazy="true">
          <chat v-if="team.id != null" :query="{teamId: team.id}"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import PlaceSearchMap from '@/components/Map/PlaceSearch/PlaceSearchMap.vue'
import {TeamUserStatus, views} from '@/utils/constants'
import Device from "@/views/bst/device/index.vue";
import Order from "@/views/bst/order/index.vue";
import ChangeRecord from "@/views/bst/changeRecord/index.vue";

import DeviceSelectDialog from "@/views/bst/device/components/DeviceSelectDialog.vue";
import device from "@/views/bst/device/index.vue";
import StoreLink from "@/views/bst/store/StoreLink.vue";
import UserLink from "@/views/system/user/UserLink.vue";
import {getTeam} from "@/api/bst/team";
import TeamUser from "@/views/bst/teamUser/index.vue";
import Chat from "@/views/bst/chat/index.vue";
import TeamLink from "@/views/bst/team/TeamLink.vue";


export default {
  name: 'TeamView',
  computed: {
    TeamUserStatus() {
      return TeamUserStatus
    },
    device() {
      return device
    },
    views() {
      return views
    }
  },
  components: {
    TeamLink,
    Chat, TeamUser, UserLink, StoreLink, DeviceSelectDialog, ChangeRecord, Order, Device, PlaceSearchMap },
  dicts: [],
  data() {
    return {
      loading: false,
      team: {},
      showMap: false,
      deviceDialogVisible: false,
      deviceList: [],
      selectedDevice: null,
      deviceLoading: false,
      bindLoading: false
    }
  },
  created() {
    this.getDetail();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getDetail() {
      this.loading = true;
      getTeam(this.$route.params.id).then(res => {
        this.team = res.data;
        this.showMap = true;
      }).finally(() => {
        this.loading = false;
      })
    },
  },

}
</script>

<style scoped>
.remark-text {
  color: #ccc;
  margin-left: 1em;
}
.app-container .box-card:nth-child(n + 1) {
  margin-top: 1em;
}
</style>
