<template>
  <div class="contenter">
    <!-- 建筑管理 -->
    <div class="box_title">建筑详情</div>
    <div class="contenterTitle" style="height: 95%;">
      <div class="title">
        <div class="title1">国际花园小区鸟瞰图</div>
        <el-button type="primary" size="large" style="width: 15px;height: 15px; margin-left: 4%; color: #fff;"
          color="#06B0E1" @click="buildAerialView">更换</el-button>

      </div>
      <div class="container">

        <div class="titleimg">
          <img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt="">
        </div>
        <div style="width: 100%;height: 100%;">
          <!-- <div style="background-color: aquamarine; display: flex; flex-direction: column; justify-content: center; align-items: center;width: 100%;height: 100%;overflow: hidden;">
             -->
          <SearchInfo style="width: 95%;height: 100%;" :build="build"></SearchInfo>

          <!-- <div style="margin-bottom: 10px; display: flex; align-items: center;margin-left: -19.5%;margin-bottom: 5%;">
              <span style="margin-right: 10px; min-width: 80px; text-align: right; margin-right: 10px;">建筑名称:</span>
              <el-select 
                class="buildf1t2 select__" 
                placeholder="请选择建筑名称" 
                v-model="build.unitName" 
                @change="buildchangeFn"
                style="width: 500px"
              >
                <el-option v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </div> -->

          <!-- 第二个选择框组 -->
          <!-- <div style="display: flex; align-items: center;">
              <span style="margin-right: 10px; min-width: 80px; text-align: right;margin-left: -16%;margin-right: 10px;">建筑楼层:</span>
              <el-select 
                class="buildf1t2 select__" 
                placeholder="请选择建筑楼层" 
                v-model="build.floorName" 
                @change="floorChangeFn"
                 style="width: 500px"
              >
                <el-option v-for="item in floorList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </div>
          </div> -->


          <!-- </div>    -->
        </div>
        <div style="width: 20%;height: 100%; display: flex; flex-direction: column; justify-content: center;">
          <el-button type="primary" class="query-btn" size="large"
            style="width: 100%;height: 15%;  color: #fff;margin-top: 65%;" color="#06B0E1"
            @click="detailBuildListShow">查询</el-button>
          <el-button type="primary" class="add-btn" size="large"
            style="width: 100%;height: 15%;  color: #fff;margin-top: 40%;" color="#06B0E1"
            @click="updateBuildInfoFn()">新增建筑</el-button>
        </div>
        <!-- <div class="buildfilter"  >
          <div class="buildf1"  >
            <div class="form_row" >
               <div class="buildf1t1" >单元名称:</div>
                  
                <el-select  class="buildf1t2 select__"   placeholder="请选择建筑名称" v-model="build.unitName"  @change="buildchangeFn">
                  <el-option  v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
            </div>
           <div class="form_row" >
                <div class="buildf1t1">建筑楼层:</div>
                <el-select class="buildf1t2 select__" placeholder="请选择建筑名称" v-model="build.unitFloor"  @change="buildchangeFn">
                  <el-option v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
            </div>
           

          </div>
          <div class="buildButton" >
            <el-button  type="primary" class="query-btn" size="large" style="width: 100%;height: 20%;  color: #fff;" color="#06B0E1" @click="detailBuildListShow" >查询</el-button>
            <el-button  type="primary" class="add-btn" size="large" style="width: 100%;height: 20%;  color: #fff;" color="#06B0E1" @click="updateBuildInfoFn()">新增建筑</el-button>
          </div>
          <div class="button2_container" style="height: 500px;" >
           
          </div>
        </div> -->


      </div>

      <div style="margin: 20px 0 10px 0;">详细建筑列表</div>
      <el-table stripe :data="buildData" width="1000" class="table___" element-loading-background="rgba(0, 0, 0, 0.3)"
        :max-height="360" :row-style="{ height: '5px' }" style="overflow: auto">

        <el-table-column label="建筑名称" align="center">
          <template #default="scope">
            <div style="color: #fff;">{{ scope.row.aaa0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="建筑层数" align="center">
          <template #default="scope">
            {{ scope.row.aaa1 }}
          </template>
        </el-table-column>

        <el-table-column label="内部结构" align="center">
          <template #default="scope">
            <div @click="showBuildInfoFn(scope)" class="build_view">查看</div>
          </template>

        </el-table-column>

        <el-table-column label="建筑描述" align="center">
          <template #default="scope">
            {{ scope.row.aaa3 }}
          </template>
        </el-table-column>


        <el-table-column property="btn" label="操作" width="200" align="center">
          <template #default="scope">
            <div>
              <div style="display: flex; align-items: center; ;">
                <el-button type="primary" size="large" style="width: 40%;  color: #fff;"
                  color="#06B0E1">查看详情</el-button>
                <el-button type="primary" size="large" style="width: 10%  ;color: #fff;" color="#06B0E1"
                  @click="updateBuildInfoFn(scope)">修改</el-button>
                <!-- <el-button  type="danger" size="large" style="width: 10%;height: 1px; color: #fff;" color="#06B0E1">删除</el-button> -->
                <el-popconfirm :icon="InfoFilled" icon-color="red" title="确定要删除这条记录吗？" @cancel="onCancel">
                  <template #reference>
                    <el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button>
                  </template>
                  <template #actions="{ confirm, cancel }">
                    <el-button size="small" @click="deleteCancel(cancel)">取消</el-button>
                    <el-button type="danger" size="small" @click="deleteConfirm(confirm)">
                      确认
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>

            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination class="page__" v-model:current-page="pagination.PageNum" v-model:page-size="pagination.PageSize"
          layout="prev, pager, next " :total="pagination.total" @current-change="handleCurrentChange" />
      </div>

    </div>

    <fireShow v-if="imgShow" @click="imgShow = !imgShow" :images="images" :videos="videos" />



    <!-- 更换鸟瞰图 -->
    <el-dialog v-model="isChangeBuildAerialView" title="更换鸟瞰图" width="500px" :before-close="handleClose">
      <updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1"></updataImgInfo>
    </el-dialog>
    <!-- 展示鸟瞰图 -->
    <el-dialog v-model="isShowAerialView" width="900px" custom-class="left-slide-dialog"
      style="background-color: rgba(0, 0, 0, 0)">
      <div>
        <img style="width: 100%;height: auto;" :src="aerialViewUrl" alt="加载失败">
      </div>
    </el-dialog>
    <!-- 展示修改信息 -->
    <el-dialog v-model="isShowChangeInfo" width="900px" custom-class="left-slide-dialog" style="background-color: rgba(0, 0, 0, 0);
        margin-top: 5%;" @close="showChangeInfohandleClose">
      <el-form :model="updataFormData" :rules="updataFormRules" ref="updataFormRef">
        <div class="building-form-container">
          <el-collapse v-model="activeNames" class="transparent-collapse">
            <!-- 移除 accordion 属性，并设置 activeNames 包含所有项 -->
            <!-- 建筑名称 -->
            <el-collapse-item title="建筑名称" name="1">
              <div class="form-item">
                <el-form-item prop="name">
                  <el-input v-model="updataFormData.name" placeholder="请输入建筑名称" clearable />
                </el-form-item>
              </div>
            </el-collapse-item>

            <!-- 建筑层数 -->
            <el-collapse-item title="建筑层数" name="2">
              <div class="form-item">
                <el-form-item prop="floors">
                  <el-input-number v-model="updataFormData.floors" :min="1" :max="100" controls-position="right" />
                </el-form-item>
                <span class="unit">层</span>
              </div>
            </el-collapse-item>

            <!-- 内部结构 -->
            <el-collapse-item title="内部结构" name="3">
              <div class="image-uploader">
                <div class="image-preview-container">
                  <div v-for="(img, index) in updataFormData.images" :key="index" class="image-preview">
                    <el-image :src="img.url" fit="cover" class="preview-image" />
                    <div class="image-actions">
                      <el-button type="danger" size="small" circle @click="removeImage(index)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </div>

                <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleImageChange"
                  :show-file-list="false">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-upload>
              </div>
            </el-collapse-item>

            <!-- 建筑描述 -->
            <el-collapse-item title="建筑描述" name="4">
              <div class="form-item">
                <el-form-item prop="description" style="background-color: blue;">
                  <el-input v-model="updataFormData.description" type="textarea" :rows="4" placeholder="请输入建筑描述(5-500字)"
                    :minlength="10" :maxlength="500" show-word-limit />
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>

          <div class="form-actions">
            <el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')">
              <el-icon>
                <Edit />
              </el-icon>确认修改
            </el-button>
            <el-button v-else type="success" @click="handleSubmit('create')">
              <el-icon>
                <Plus />
              </el-icon>确认新增
            </el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>
<script setup>
import fireShow from '../dialog_infoShow_img_vid/fireShow_img_vid.vue'
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import imgupload from '../../components/ImageUpload/index.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import updataImgInfo from './updataImgInfo.vue';
import { Delete, Plus, Edit } from '@element-plus/icons-vue'
// import { staffAerialViewApi } from '../../api/build'
import SearchInfo from './searchInfo.vue';

onMounted(() => {
  // 获取建筑鸟瞰图地址
  // staffAerialViewApi().then(res => {
  //       console.log(res, '测试');
  //       // if (res.code == 200) {
  //       //   setToken(res.data.token)//储存token
  //       //   localStorage.setItem('menu', 1)//默认选中工作台
  //       //   router.replace({ path: '/home' })
  //       // }
  //     })

})

const changeAerialView = (url) => {
  //通过子组件调用了父组件的funcToSon()方法，获取服务器的返回地址，更新到aerialViewUrl中
  console.log("子组件调用了父组件的funcToSon()方法", url)
  aerialViewUrl.value = url
  isChangeBuildAerialView.value = false

}
const isAddBuild = ref(false) // 是否是新增建筑按钮
const activeNames = ref(['1', '2', '3', '4']) // 默认展开第一项

const updataFormData = reactive({
  name: '',
  floors: 0,
  description: '',
  images: []
})

// 处理图片上传
const handleImageChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    updataFormData.images.push({
      name: file.name,
      url: e.target.result
    })
  }
  reader.readAsDataURL(file.raw)
}

// 删除图片
const removeImage = (index) => {
  formData.images.splice(index, 1)
}


const updataFormRules = ref({
  name: [
    { required: true, message: '请输入建筑名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  floors: [
    { required: true, message: '请输入建筑层数', trigger: 'blur' },
    { type: 'number', min: 1, max: 100, message: '层数范围 1-100', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入建筑描述', trigger: 'blur' },
    { min: 5, max: 500, message: '描述长度在 5 到 500 个字符', trigger: 'blur' }
  ]
});
// 提交表单
const handleSubmit = (action) => {
  console.log(`${action}提交:`, formData)
  updataFormRef.value.validate((valid) => {
    if (valid) {
      // 验证通过，执行提交逻辑
      console.log('表单验证通过', updataFormData);
    } else {
      // 验证失败
      console.log('表单验证失败');
      return false;
    }
  });
  ElMessage.success(action === 'update' ? '修改成功' : '新增成功')
}

const deleteClicked = ref(false)
function onCancel() {
  deleteClicked.value = true
}

const imgShow = ref(false)//放大图片
const isChangeBuildAerialView = ref(false)//建筑鸟瞰图
const isShowAerialView = ref(false)//展示鸟瞰图
const isShowChangeInfo = ref(false)//展示修改信息
const updataFormRef = ref(null)
// 关闭修改信息弹窗前的回调
const showChangeInfohandleClose = (done) => {
  console.log("关闭修改信息弹窗前的回调")
  updataFormRef.value.resetFields()
}
// 通过新增或者修改的方式更新建筑列表信息
const updateBuildInfoFn = (info) => {
  isShowChangeInfo.value = true
  console.log("------------可获取到当前的需要修改的建筑信息", info);
  if (info === '' || info === undefined) {
    isAddBuild.value = true
    console.log("------------我是新增",);
  } else {
    // 修改这里的info和formData的字段不一致的问题
    updataFormData.value = info,
      isAddBuild.value = false
    console.log("------------我是修改",);

  }
  // 获取到当前建筑信息的数据，需要更新到中fromData中
}


const buildAerialView = () => {
  isChangeBuildAerialView.value = true
}
const imgUrl = ref('')//图片地址
const images = ref([])
const bigImgFn = () => {
  isShowAerialView.value = true
  aerialViewUrl.value = '../../static/image/loginback.png'
  console.log(aerialViewUrl.value)
}
const aerialViewUrl = ref('')//展示的鸟瞰图url
onMounted(() => {
  // 后端获取鸟瞰图url，更新到aerialViewUrl中


})
const showBuildInfoFn = () => {
  // imgUrl.value = '../../static/image/loginback.png'
  imgShow.value = true
}
const deleteCancel = (cancel) => {
  cancel()
  ElMessage({
    message: '取消删除',
    type: 'info',
  })
  deleteClicked.value = false
}
const deleteConfirm = (confirm) => {
  confirm()
  ElMessage({
    message: '执行删除操作',
    type: 'success',
  })
  deleteClicked.value = false
}

const personList = ref([
  { name: '张三', value: '1' }, { name: '李四', value: '2' }, { name: '王五', value: '2' }
])
const pagination = ref({
  PageNum: 1,
  PageSize: 10,
  total: 100
})
//切换分页
const handleCurrentChange = () => {

}
const detailBuildListShow = () => {
  if (build.value.unitName == '' && build.value.unitFloor == '') {
    ElMessage({
      message: '请选择单元名称或建筑楼层',
      type: 'warning',
    })
  } else {
    console.log('detailBuildListShow', build)
  }

}
const build = ref({
  unitName: '',
  unitFloor: '',
})
// 用于展示查询建筑列表的条件信息
const buildList = ref([{ name: '建筑1', value: '1' }, { name: '建筑2', value: '2' }])
const floorList = ref([{ name: '一层', value: '1' }, { name: '二层', value: '2' }])
const buildData = ref([
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',

  }
])
//切换选项时更新列表
const buildchangeFn = () => {
  console.log('buildchangeFn-----------------------')
}


</script>
<style scoped>
.title {
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
}

.container {
  /* background-color: #06a0cf; */
  height: 36%;
  display: flex;
  /* 可选的对齐方式 */
  align-items: center;
  /* 垂直居中对齐 */
  gap: 10px;
  /* 两个div之间的间距 */
}

.titleimg {
  width: 30vw;
  height: 30vh;
  margin-top: 10px;
}

.titleimg1 {
  padding-top: 3%;
  width: 100%;
  height: 100%;
}

.buildfilter {
  display: flex;
  width: 60%;
  /* height: 100%; */
  flex-direction: row;
  /* 垂直排列 */
}

.buildButton {

  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  gap: 75%;
  width: 200px;
  /* 给容器一个宽度 */
}

.query-btn {
  width: 100%;
  margin-top: 30%;
  margin-left: -15%;
  color: #fff;
}

.add-btn {
  width: 100%;
  margin-left: -16%;
  color: #fff;
}

.button2_container {
  width: 40%;

  position: absolute;
  /* 如果是相对于整个页面的右下角 */
  /* bottom: 20px;
  right: 20px; */
}

.buildf1 {
  width: 100%;
  height: 100%;
  display: flex;
  margin-left: 10%;
  /* align-items: center; */
  flex-direction: column;
  /* 垂直排列 */
}

.form_row {
  margin-bottom: 5%;
  width: 70%;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: left;
  /* 水平居中 */
  /* gap: 12px; 元素间距 */
}

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 90px;
  text-align: center;
}

.buildf2 {}

/* 

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 90px;
  text-align: center;
} */

.buildf2 {
  width: 250px;
  height: 40px;
  margin-left: 50px;
  align-items: center;
  display: flex;
  justify-content: space-between;

}

.buildbutton {
  width: 112px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}

.bucolor1 {
  background-color: #072547;
  color: #06a8d9;
  border: 1px solid #0194f4;
}

.bucolor2 {
  background-color: #06b0e1;
  color: #ffffff;
}

:deep().el-select .el-select__wrapper {
  background-color: #06325c !important;
  border: 1px solid #064d77 !important;
  box-shadow: none;
}

/* :deep() .el-table--border .el-table__cell {
  background-color: #062e51;
} */

/* 斑马行的背景色 */
:deep() .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #062e51 !important;
}

:deep() .el-table--striped .el-table__body tr.el-table__row td {
  background-color: #072547;
  border: none !important;
}

/* 表头背景色 */
:deep() .el-table th {
  background: linear-gradient(to bottom, #063563, #063563);
  border: none !important;
}

/* 表头字体色 */
:deep() .el-table thead {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: right;
}

/* 鼠标经过时 行的背景色 */
:deep() .el-table__body tr:hover>td {
  background-color: #072547 !important;
}

.table___ {
  --el-table-border: 0.5px solid #69878f;
  --el-table-border-color: #69878f;
  border-radius: 5px;
  color: #ffffff;
  max-height: calc(100% - 195px - 30vh);
  overflow: auto;
}

:deep() .el-table__inner-wrapper::before {
  border: none;
  height: 0 !important;
}

/* //分页 */
.page {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
}

.page__ {
  /* width: 100%; */
  height: 40px;
}

:deep().el-pagination {
  background-color: rgba(0, 0, 0, 0) !important;
}

:deep().el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
}

:deep() .el-pagination .btn-next {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .number {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .more {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

.left-slide-dialog {
  background-color: #072547;
}

/* 建筑信息修改 */
.building-form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(30, 30, 40, 0.85);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

.transparent-collapse {
  --el-collapse-border-color: rgba(255, 255, 255, 0.1);
  --el-collapse-header-height: 56px;
  --el-collapse-header-bg-color: rgba(45, 45, 65, 0.6);
  --el-collapse-content-bg-color: rgba(35, 35, 55, 0.5);
  margin-bottom: 20px;
}

.transparent-collapse :deep(.el-collapse-item__header) {
  color: #e0f2fe;
  font-size: 16px;
  font-weight: 500;
  padding-left: 20px;
}

.transparent-collapse :deep(.el-collapse-item__content) {
  color: rgba(255, 255, 255, 0.9);
  padding: 15px 20px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item .unit {
  margin-left: 10px;
  color: #a1a1aa;
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.image-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.image-preview {
  position: relative;
  width: 100px;
  height: 100px;
  /* border-radius: 8px; */
  overflow: hidden;
  transition: all 0.3s;
}

.image-preview:hover {
  transform: translateY(-3px);
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
}

.preview-image {
  width: 100%;
  height: 100%;
}

.image-actions {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

:deep(.el-upload) {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  /* border-radius: 8px; */
  cursor: pointer;
  transition: all 0.3s;
}

:deep(.el-upload:hover) {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

:deep(.el-upload .el-icon) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
}

.form-actions .el-button {
  padding: 12px 25px;
  font-size: 15px;
}

.form-actions .el-button .el-icon {
  margin-right: 8px;
}


.build_view {
  color: var(--el-color-primary);
  cursor: pointer;
  transition: color 0.2s;
  font-family: inherit;
}

.build_view:hover {
  color: var(--el-color-primary-light-6);
  text-decoration: underline;
}

.build_view:active {
  color: var(--el-color-primary-dark-2);
}
</style>