<template>
  <div class="contenter">
    <!-- 建筑管理 -->
    <div class="box_title">建筑详情</div>
    <div class="contenterTitle">
      <div class="title">
        <div class="title1">国际花园小于鸟瞰图</div>
        <div class="title2">更换</div>
      </div>
      <div class="titleimg">
        <img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt="">
      </div>
      <div class="buildfilter">
        <div class="buildf1">
          <div class="buildf1t1">建筑名称:</div>
          <el-select class="buildf1t2 select__" placeholder="请选择建筑名称" v-model="build.name" @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="buildf2">
          <div class="buildbutton bucolor1">查询</div>
          <div class="buildbutton bucolor2">新增建筑</div>
        </div>
      </div>
      <div style="margin: 20px 0 10px 0;">详细建筑列表</div>
      <el-table stripe :data="buildData" width="1000" v-loading="loading1" class="table___"
        element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="400" style="overflow: auto">
        <!-- <el-table-column property="aaa0" label="序号" width="60" align="center">
          <template #default="scope">
            <div style="color: #fff">{{ scope.$index + 1 }}</div>
          </template>
</el-table-column> -->
        <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>查看</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="150" align="center">
          <template #default="scope">
            <div style="display: flex; justify-content: space-around">
              <div>查看详情</div>
              <div>修改</div>
              <div>删除</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>

    <el-dialog class="dialogbig" v-model="imgShow" style="background-color: rgba(0, 0, 0, 0)">
      <div style="text-align: center; margin-top: 10px;">
        <img src="../../static/image/loginback.png" alt="" style="width: 100%;height: 100%;"></img>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const imgShow = ref(false)//放大图片
const imgUrl = ref('')//图片地址
const bigImgFn = () => {
  imgUrl.value = '../../static/image/loginback.png'
  imgShow.value = true
}
const pagination = ref({
  PageNum: 1,
  PageSize: 10,
  total: 100
})
//切换分页
const handleCurrentChange = () => {

}
const build = ref({
  name: '',
})
const buildList = ref([
  { name: '建筑1', value: '1' }, { name: '建筑2', 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',

  }
])
//切换选项时更新列表
const 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 国际花园小区鸟瞰图
}

.title2 {
  width: 45px;
  height: 25px;
  background-color: #06B0E1;
  /* background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%); */
  color: #ffffff;
  text-align: center;
  line-height: 25px;
  margin-left: 20px;
  border-radius: 5px;
}

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

.titleimg1 {
  width: 100%;
  height: 100%;
}

.buildfilter {
  display: flex;
  width: 100%;
  /* height: 100%; */
  margin-top: 10px;
}

.buildf1 {
  width: 25vw;
  height: 40px;
  display: flex;
  align-items: center;
}

.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;

}
</style>