<template>
  <div class="store-detail">
    <!-- 上半部分 -->
    <el-row :gutter="20" class="top-section">
      <!-- 左侧信息 -->
      <el-col :span="24" class="left-section">
        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="2">
              <div class="store-image">
                <image-preview
                  :src="storeData.picture"
                  :width="80"
                  :height="80"
                />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">店铺名称:</span>
                <span class="value">{{ storeData.name || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">联系人:</span>
                <span class="value">{{ storeData.contactName || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">联系电话:</span>
                <span class="value">{{ storeData.contactMobile || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">营业时间:</span>
                <span class="value">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">店长:</span>
                <span class="value">{{ storeData.managerName || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">客服电话:</span>
                <span class="value">{{ storeData.serverPhone || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">身份证号:</span>
                <span class="value">{{ storeData.idcard || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">状态:</span>
                <dict-tag :options="dict.type.ss_store_status" :value="storeData.status"/>
              </div>
              <div class="info-item">
                <span class="label">标签:</span>
                <dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags"/>
              </div>
              <div class="info-item">
                <span class="label">类型:</span>
                <dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags"/>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>位置信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="info-item">
                <span class="label">门店地址:</span>
                <el-link
                  type="primary"
                  @click="openMap(storeData.lng, storeData.lat)"
                  v-if="storeData.lng && storeData.lat"
                >
                  {{ storeData.address || '--' }}
                </el-link>
                <span v-else>{{ storeData.address || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">经度:</span>
                <span class="value">{{ storeData.lng || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">纬度:</span>
                <span class="value">{{ storeData.lat || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div slot="header" class="card-header">
                <span>店铺位置</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下半部分 - 选项卡 -->
    <el-card class="tab-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="房间列表" name="rooms">
          <!-- 房间列表内容 -->
        </el-tab-pane>
        <el-tab-pane label="设施列表" name="equipments">
          <!-- 设施列表内容 -->
        </el-tab-pane>
        <el-tab-pane label="设备列表" name="equipments">
          <!-- 设备列表内容 -->
        </el-tab-pane>
        <el-tab-pane label="员工列表" name="equipments">
          <!-- 员工列表内容 -->
        </el-tab-pane>
        <el-tab-pane label="订单列表" name="orders">
          <!-- 订单列表内容 -->
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getStore, delStore } from "@/api/system/store";

export default {
  name: 'StoreDetail',
  dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
  directives: {
    hasPermi: ['system:store:query']
  },
  data() {
    return {
      storeData: {},
      activeTab: 'rooms',
      map: null,
      marker: null
    }
  },
  created() {
    const storeId = this.$route.params.storeId;
    this.getStoreData(storeId);
  },
  mounted() {
    // 在组件挂载后初始化地图
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods: {
    getStoreData(storeId) {
      getStore(storeId).then(response => {
        this.storeData = response.data;
        // 数据加载完成后更新地图标记
        this.$nextTick(() => {
          this.updateMapMarker();
        });
      });
    },
    formatBusinessTime(start, end) {
      if (!start && !end) return '--';
      return `${start || '--'} - ${end || '--'}`;
    },
    openMap(lng, lat) {
      if (!lng || !lat) return;
      window.open(`https://uri.amap.com/marker?position=${lng},${lat}&callnative=1`);
    },
    handleEdit() {
      this.$router.push(`/system/store/index?storeId=${this.storeData.storeId}`);
    },
    handleDelete() {
      this.$modal.confirm('是否确认删除该店铺？').then(() => {
        return delStore(this.storeData.storeId);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.$router.push('/system/store/index');
      }).catch(() => {});
    },
    // 初始化地图
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map('mapContainer', {
        zoom: 15,
        viewMode: '3D'
      });

      // 添加地图控件
      this.map.addControl(new AMap.ToolBar());
      this.map.addControl(new AMap.Scale());
    },
    // 更新地图标记
    updateMapMarker() {
      const { lng, lat } = this.storeData;
      if (!lng || !lat) return;

      // 设置地图中心点
      this.map.setCenter([lng, lat]);

      // 清除旧的标记
      if (this.marker) {
        this.map.remove(this.marker);
      }

      // 创建新的标记
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        title: this.storeData.name,
        animation: 'AMAP_ANIMATION_DROP'
      });

      // 添加标记到地图
      this.map.add(this.marker);

      // 创建信息窗体
      const infoWindow = new AMap.InfoWindow({
        content: `
          <div class="info-window">
            <h4>${this.storeData.name || '未命名店铺'}</h4>
            <p>${this.storeData.address || '暂无地址'}</p>
          </div>
        `,
        offset: new AMap.Pixel(0, -30)
      });

      // 绑定点击事件
      this.marker.on('click', () => {
        infoWindow.open(this.map, this.marker.getPosition());
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.store-detail {
  padding: 20px;

  .top-section {
    margin-bottom: 20px;
  }

  .info-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      .action-buttons {
        .el-button {
          margin-left: 10px;
        }
      }
    }

    .info-item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .label {
        color: #606266;
        margin-right: 10px;
        min-width: 100px;
        font-size: 14px;
      }

      .value {
        color: #333;
        font-size: 14px;
      }
    }

    .map-container {
      width: 100%;
      height: 300px;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 0;
    }

    .store-image {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;

      :deep(.el-image) {
        border-radius: 4px;
        overflow: hidden;
        display: block;
      }
    }
  }

  .tab-card {
    margin-top: 20px;
  }

  .map-card {
    .map-container {
      width: 100%;
      height: 300px;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}

// 信息窗体样式
:deep(.info-window) {
  padding: 8px;

  h4 {
    margin: 0 0 5px;
    color: #333;
  }

  p {
    margin: 0;
    color: #666;
  }
}

:deep(.el-tag) {
  font-size: 14px;
}
</style>
