<template>
  <div class="container">
    <!-- 顶部操作栏 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>项目图例</span>
      </div>
      <div class="topright">
        <el-button type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
          <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          编辑
        </el-button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="main-content">
      <!-- 左侧两个轮播图 -->
      <div class="carousel-container">
        <!-- 上侧轮播图 -->
        <div class="carousel">
          <div class="carousel-control left" @click="prevImage(1)">
            <img src="../../../assets/images/icon-left@2x.png" alt="">
          </div>
          <div v-for="(item, index) in carousel1Items" :key="index" class="carousel-item"
            :class="{ active: index === currentIndex1 }">
            <img :src="item" :alt="'Image ' + (index + 1)" />
          </div>
          <div class="carousel-control right" @click="nextImage(1)">
            <img src="../../../assets/images/icon-right@2x.png" alt="">
          </div>
          <div class="classify">
            外部
          </div>
        </div>

        <!-- 下侧轮播图 -->
        <div class="carousel">
          <div class="carousel-control left" @click="prevImage(2)">
            <img src="../../../assets/images/icon-left@2x.png" alt="">
          </div>
          <div v-for="(item, index) in carousel2Items" :key="index" class="carousel-item"
            :class="{ active: index === currentIndex2 }">
            <img :src="item" :alt="'Image ' + (index + 1)" />
          </div>
          <div class="carousel-control right" @click="nextImage(2)">
            <img src="../../../assets/images/icon-right@2x.png" alt="">
          </div>
          <div class="classify">
            内部
          </div>
        </div>
      </div>

      <!-- 右侧地图缩略图 -->
      <!-- <div class="map-thumbnail" >
        <div>
          <div class="mapbox">
            <MapComponent></MapComponent>
          </div>
          <div class="classify">
            内部
          </div>
        </div>
      </div> -->
    </div>

    <!-- 编辑/新增对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="项目地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-input v-model="form.latitude" placeholder="纬度"></el-input>
          <el-input v-model="form.longitude" placeholder="经度"></el-input>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
            :on-remove="handleUploadRemove" :file-list="fileList">
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MapComponent from '../../map/index.vue';

export default {
  components: {
    MapComponent,
  },
  data() {
    return {
      // 轮播图假数据（使用网络图片）
      carousel1Items: [
        'https://picsum.photos/300/200?random=1',
        'https://picsum.photos/300/200?random=2',
        'https://picsum.photos/300/200?random=3',
      ],
      carousel2Items: [
        'https://picsum.photos/300/200?random=4',
        'https://picsum.photos/300/200?random=5',
        'https://picsum.photos/300/200?random=6',
      ],
      currentIndex1: 0, // 上侧轮播图当前索引
      currentIndex2: 0, // 下侧轮播图当前索引
      // 对话框相关
      dialogVisible: false,
      dialogTitle: '编辑项目',
      form: {
        name: '默认项目名称',
        address: '默认项目地址',
        latitude: '39.90469',
        longitude: '116.40717',
      },
      fileList: [], // 上传的文件列表
    };
  },
  methods: {
    // 切换到上一张图片
    prevImage(carouselIndex) {
      if (carouselIndex === 1) {
        this.currentIndex1 =
          (this.currentIndex1 - 1 + this.carousel1Items.length) % this.carousel1Items.length;
      } else if (carouselIndex === 2) {
        this.currentIndex2 =
          (this.currentIndex2 - 1 + this.carousel2Items.length) % this.carousel2Items.length;
      }
    },
    // 切换到下一张图片
    nextImage(carouselIndex) {
      if (carouselIndex === 1) {
        this.currentIndex1 = (this.currentIndex1 + 1) % this.carousel1Items.length;
      } else if (carouselIndex === 2) {
        this.currentIndex2 = (this.currentIndex2 + 1) % this.carousel2Items.length;
      }
    },
    // 编辑操作
    handleEdit() {
      this.dialogTitle = '编辑项目';
      this.dialogVisible = true;
      // 填充表单数据
      this.form = {
        name: '默认项目名称',
        address: '默认项目地址',
        latitude: '39.90469',
        longitude: '116.40717',
      };
    },
    // 新增操作
    handleAdd() {
      this.dialogTitle = '新增项目';
      this.dialogVisible = true;
      // 清空表单
      this.form = {
        name: '',
        address: '',
        latitude: '',
        longitude: '',
      };
    },
    // 提交表单
    handleSubmit() {
      console.log('提交表单:', this.form);
      this.dialogVisible = false;
      // 调用 API 提交数据
    },
    // 上传成功
    handleUploadSuccess(response, file) {
      this.fileList.push(file);
    },
    // 移除文件
    handleUploadRemove(file) {
      const index = this.fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
      }
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  gap: 1rem;
  overflow: auto;
}

.containertop {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.action-bar {
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.carousel {
  width: 21rem;
  height: 12rem;
  position: relative;
  overflow: hidden;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
  padding: 0.5rem;
  z-index: 10;
}

.carousel-control.left {
  left: 0;
}

.carousel-control.right {
  right: 0;
}

.map-thumbnail {
  width: 80rem;
  height: 25rem;
  cursor: pointer;
  position: relative;
}

#map-container {
  width: 100%;
  height: 100%;
}

.topleft {
  width: 8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.topleft img {
  width: 0.81rem;
  height: 0.81rem;
}

.topleft span {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.classify {
  width: 2.81rem;
  height: 1.38rem;
  background-color: rgba(43, 98, 241, 0.8);
  border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
  color: white;
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
}

.mapbox {
  width: 60rem;
  height: 25rem;
}

.map-thumbnail {
  width: 80rem;
  height: 25rem;
  cursor: pointer;
  position: relative;
}
</style>