<template>
  <div class="app-container">
    <el-card class="box-card" shadow="hover">
      <!-- 操作按钮 -->
      <div class="operation-buttons">
        <el-button type="primary" icon="el-icon-edit" size="small" @click="handleUpdate"
          v-hasPermi="['system:room:edit']">修改设施</el-button>
      </div>

      <!-- 设施基本信息 -->
      <div class="room-header">
        <el-row :gutter="40">
          <el-col :span="8">
            <div class="image-wrapper">
              <el-image :src="room.picture" fit="cover" class="room-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="room-title">
              <h2>{{ room.roomName }}</h2>
              <el-tag :type="room.status === '1' ? 'success' : 'info'" class="status-tag" effect="dark">
                {{ room.status === '1' ? '正常' : '停用' }}
              </el-tag>
            </div>
            <div class="room-info">
              <el-descriptions :column="2" border size="medium">
                <el-descriptions-item label="所属门店">
                  <span class="info-text">{{ room.storeName }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="商户ID">
                  <span class="info-text">{{ room.merchantId }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="设施ID">
                  <span class="info-text">{{ room.roomId }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="设施类型">
                  <span class="info-text">{{ getRoomType(room.type) }} / {{ getRoomType2(room.type2) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="基础价格">
                  <span class="price">￥{{ room.hour }}</span>
                  <span class="unit">/小时</span>
                </el-descriptions-item>
                <el-descriptions-item label="销售数量">
                  <span class="info-text">{{ room.soldNum || '暂无数据' }}</span>
                </el-descriptions-item>
              </el-descriptions>

              <div class="tags-section">
                <span class="label">设施标签：</span>
                <div class="tags-wrapper">
                  <dict-tag v-for="tag in room.tags" :key="tag" :options="dict.type.ss_room_tags" :value="tag"
                    class="tag-item" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>



      <!-- WiFi信息 -->
      <div v-if="room.wifi" class="section-block">
        <h3>
          <i class="el-icon-connection"></i>
          WiFi信息
        </h3>
        <el-descriptions :column="2" border size="medium">
          <el-descriptions-item label="WiFi名称">
            <span class="info-text">{{ room.wifi }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="WiFi密码">
            <span class="info-text">{{ room.wifiPassword }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 系统信息 -->
      <div class="section-block">
        <h3>
          <i class="el-icon-info"></i>
          系统信息
        </h3>
        <el-descriptions :column="3" border size="medium">
          <el-descriptions-item label="创建人">
            <span class="info-text">{{ room.createBy || '暂无' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            <span class="info-text">{{ room.createTime || '暂无' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="更新人">
            <span class="info-text">{{ room.updateBy || '暂无' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            <span class="info-text">{{ room.updateTime || '暂无' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            <span class="info-text">{{ room.remark || '暂无' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 修改设施弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设施名" prop="roomName">
          <el-input v-model="form.roomName" placeholder="请输入设施名" />
        </el-form-item>
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="form.storeId" clearable filterable placeholder="请选择">
            <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="picture">
          <image-upload v-model="form.picture" />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
            <el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-tabs v-model="activeTab" class="detail-tabs">

      <el-tab-pane label="订单列表" name="orders">
        <order :roomId="room.roomId"></order>
      </el-tab-pane>
    
      <el-tab-pane label="设备列表" name="devices">
        <device :roomId="room.roomId"></device>
      </el-tab-pane>
      <el-tab-pane label="套餐列表" name="rules">
        <rule :roomId="room.roomId"></rule>
      </el-tab-pane>
      <el-tab-pane label="设施列表" name="equipments">
        <equipment :roomId="room.roomId"></equipment>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getRoom, updateRoom } from '@/api/system/room'
import { getDicts } from '@/api/system/dict/data'
import { listStore } from "@/api/system/store"
import order from '@/views/system/order/index.vue'
import device from '@/views/system/device/index.vue'
import rule from '@/views/system/rule/index.vue'
import equipment from '@/views/system/equipment/index.vue'
export default {
  name: 'RoomDetail',
  dicts: ['ss_room_type', 'ss_room_tags', 'ss_room_status'],
  components: { order, device, rule, equipment },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      room: {},
      // 设施类型字典
      roomTypeOptions: [],
      // 设施类型2字典
      roomType2Options: [],
      // 设施标签字典
      roomTagOptions: [],
      // 店铺选项
      storeOptions: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        roomName: [
          { required: true, message: "设施名不能为空", trigger: "blur" }
        ],
        storeId: [
          { required: true, message: "店铺不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "类型不能为空", trigger: "blur" }
        ],
        tags: [
          { required: true, message: "标签不能为空", trigger: "change" }
        ],
      },
      activeTab: 'orders',
    }
  },

  created() {
    this.getDetail()
    this.getDictData()
    this.getStoreOptions()
  },

  methods: {
    /** 获取设施详情 */
    async getDetail() {
      try {
        const roomId = this.$route.params.roomId
        const response = await getRoom(roomId)
        this.room = response.data
      } catch (error) {
        console.error('获取设施详情失败:', error)
        this.$message.error('获取设施详情失败')
      }
    },

    /** 获取字典数据 */
    async getDictData() {
      try {
        const [typeRes, type2Res, tagRes] = await Promise.all([
          getDicts('room_type'),
          getDicts('room_type2'),
          getDicts('room_tag')
        ])
        this.roomTypeOptions = typeRes.data
        this.roomType2Options = type2Res.data
        this.roomTagOptions = tagRes.data
      } catch (error) {
        console.error('获取字典数据失败:', error)
        this.$message.error('获取字典数据失败')
      }
    },

    /** 获取店铺选项 */
    getStoreOptions() {
      listStore({ pageNum: 1, pageSize: 999 }).then(response => {
        this.storeOptions = response.rows;
      });
    },

    /** 获取设施类型名称 */
    getRoomType(type) {
      const found = this.roomTypeOptions.find(item => item.dictValue === type)
      return found ? found.dictLabel : type
    },

    /** 获取设施类型2名称 */
    getRoomType2(type) {
      const found = this.roomType2Options.find(item => item.dictValue === type)
      return found ? found.dictLabel : type
    },

    /** 获取标签名称 */
    getTagName(tag) {
      const found = this.roomTagOptions.find(item => item.dictValue === tag)
      return found ? found.dictLabel : tag
    },

    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      this.form = { ...this.room };
      this.open = true;
      this.title = "修改设施";
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        roomId: undefined,
        roomName: undefined,
        storeId: undefined,
        type: undefined,
        picture: undefined,
        tags: []
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateRoom(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getDetail();
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail-tabs {
    margin-top: 20px;

    .search-form {
      margin-bottom: 20px;

      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }
.app-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.operation-buttons {
  // margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  margin-bottom: 20px;
  text-align: right;
  .el-button {
    margin: 0;
    padding: 10px 10px;
  }
}

.box-card {
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.box-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.room-header {
  margin-bottom: 48px;
}

.image-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.image-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.room-image {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
}

.room-title {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EBEEF5;
}

.room-title h2 {
  margin: 0;
  margin-right: 15px;
  font-size: 28px;
  color: #303133;
  font-weight: 600;
}

.status-tag {
  margin-left: auto;
  padding: 0 16px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}

.room-info {
  margin-top: 28px;
}

.info-text {
  color: #606266;
  font-size: 14px;
}

.tags-section {
  margin-top: 28px;
  padding: 16px;
  background: #f9fafc;
  border-radius: 8px;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.label {
  color: #606266;
  margin-right: 16px;
  font-weight: 500;
  font-size: 14px;
}

.tag-item {
  margin-right: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
}

.section-block {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #EBEEF5;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

h3 i {
  margin-right: 12px;
  font-size: 24px;
  color: #409EFF;
}

.total-rules {
  margin-top: 3px;
}

.price {
  color: #F56C6C;
  font-weight: 600;
  font-size: 16px;
}

.unit {
  color: #909399;
  margin-left: 4px;
  font-size: 14px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
}

.image-slot i {
  font-size: 48px;
  color: #909399;
}

.custom-table {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-descriptions) {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-descriptions__content) {
  padding: 12px 16px;
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  font-weight: 500;
}

:deep(.el-table--border) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions-item__label) {
  background-color: #f5f7fa;
  font-weight: 500;
}

// 标签选择器样式
.el-select {
  :deep(.el-select__tags) {
    flex-wrap: wrap;

    .el-tag {
      margin: 2px;
      max-width: none;
    }
  }

  :deep(.el-input__inner) {
    height: auto;
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.el-select-dropdown__item {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-form-item {
  margin-bottom: 18px;

  .el-select {
    width: auto;
    min-width: 240px;
    max-width: 100%;
  }
}
</style>