<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card" header="基础信息">
      <el-row type="flex">
      <image-preview :src="booth.picture" :width="80" :height="80"/>
      <div style="flex: 1;margin-left: 2em">
          <el-descriptions :column="3">
            <el-descriptions-item label="卡座名称">{{booth.boothName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="卡座位置"><store-link :id="booth.storeId" :name="booth.storeName"/>/{{booth.partName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="所属商户"><user-link  :id="booth.mchId" :text="booth.mchName"/></el-descriptions-item>
            <el-descriptions-item label="创建时间">{{booth.createTime | defaultValue}}</el-descriptions-item>
          </el-descriptions>
        <div style="text-align: right; margin-top: 10px;">
          <el-button
            icon="el-icon-link"
            type="success"
            @click="handleBindDevice"
            :loading="bindLoading">
            增加设备
          </el-button>
        </div>
      </div>
      </el-row>
    </el-card>

   <device-select-dialog
     :visible.sync="deviceDialogVisible"
     :loading="deviceLoading"
     :device-list="deviceList"
     @confirm="handleDeviceConfirm"
   />

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="设备列表" :lazy="true">
          <device v-if="booth.boothId != null" :query="{boothId: booth.boothId}"/>
        </el-tab-pane>
        <el-tab-pane label="爆灯次数变化记录" :lazy="true">
          <change-record v-if="booth.boothId != null" :query="{boothId: booth.boothId}"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import PlaceSearchMap from '@/components/Map/PlaceSearch/PlaceSearchMap.vue'
import { views } from '@/utils/constants'
import Device from "@/views/bst/device/index.vue";
import Order from "@/views/bst/order/index.vue";
import {bindBooth, getBooth} from "@/api/bst/booth";
import ChangeRecord from "@/views/bst/changeRecord/index.vue";
import {listDevice} from "@/api/bst/device";
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";


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


    async handleBindDevice() {
      try {
        this.deviceLoading = true
        // 调用获取设备列表接口
        const res = await listDevice({userId:this.booth.mchId,isUnbound:true})
        this.deviceList = res.rows
        this.deviceDialogVisible = true
      } finally {
        this.deviceLoading = false
      }
    },

    handleDeviceConfirm(device) {
      this.selectedDevice = device
      this.confirmBind()
    },


    async confirmBind() {
      try {
        this.bindLoading = true
        // 调用绑定接口
        await bindBooth(this.selectedDevice,this.booth.boothId)
        this.$message.success('绑定成功')
        this.deviceDialogVisible = false
        // 可选：刷新卡座信息
      } catch (e) {
        this.$message.error('绑定失败')
      } finally {
        this.bindLoading = false
      }
    }
  },

}
</script>

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