<template>
  <div>
    <div class="left-main" :class="[cardShow ? 'leavhide' : 'leavshow']">
      <div class="left-tabs">
        <div
          class="left-item"
          v-for="item in tabList"
          @click="itemSelect(item)"
        >
          <span >
            {{ item.label }}</span
          >
        </div>
        <div class="leftIcon" @click="setCard">
          <img :src="cardShow ? leftIcon : rightIcon" />
        </div>
      </div>
      <div class="loadStyle">
        <el-button
          type="success"
          color="rgb(0,255,0, 0.6)"
          @click="()=>{emit('cadAdd')}"
        >
          <span style="color: #fff">CAD文件上传</span>
        </el-button>


      </div>
         <el-table
        :data="cadList"
        highlight-current-row

        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="55" label="序号" />
         <el-table-column prop="name" show-overflow-tooltip    label="文件" />


         <el-table-column label="操作" align="center" prop="unit" >
          <template #default="scope">
            <div style="display: flex;justify-content: center;">
              <!-- <el-tooltip content="在地图中预览" placement="top">
                <el-icon color="rgb(64,158,255)" size="20"  @click="addMap(scope.row)"><MapLocation /></el-icon>
              </el-tooltip> -->
              <el-tooltip content="预览CAD" placement="left">
                <el-icon   @click.stop="()=>{emit('cadShow',scope.row)}" color="rgb(64,158,255)" size="22" style="margin-left: 10px;"><VideoCamera /></el-icon>
              </el-tooltip>
              <el-tooltip content="删除CAD" placement="right">
                <el-icon    v-hasPermi="['ldmap:role:edit']" color="rgb(252,84,48)" @click.stop="delCadItem(scope.row)" size="20" style="margin-left: 10px;"><DeleteFilled /></el-icon>
              </el-tooltip>
            </div>


          </template>
        </el-table-column>
      </el-table>


    </div>
    <div >


    </div>
  </div>
</template>

<script setup lang="ts">
import leftIcon from "@map/assets/tool/left.png";
import rightIcon from "@map/assets/tool/right.png";
import useCadStore from "@map/store/modules/cad"
const { proxy } = getCurrentInstance();
const emit = defineEmits(['cadAdd','cadShow'])
const $ldBox = inject("$ldBox"); // 调用全局变量
const cardShow = ref(true);
const setCard = function () {
  cardShow.value = !cardShow.value;
};


const cadData = useCadStore()
onMounted(() => {
  cadData.getCadList()
})
const {cadList} = storeToRefs(cadData)

const delCadItem=(row)=>{
  console.log(row.id)
  cadData.delectCard(row.id)
}
const getTableHeight = computed<string>(() => {
  let winheight = window.innerHeight - 60 - 60 - 45;
  return winheight;
});

const tabList = reactive([
  {
    label: "CAD导图",
    id: "1",
  }
]);

const handleCurrentChange = (e)=>{
  console.log(e)
  if(e.point){
    $ldBox.addLayer(e)
  }else{
    proxy.$modal.msgWarning("数据有误，暂未识别到地图信息");
  }
}

</script>

<style scoped lang="scss">
:deep(.ivu-tabs-nav .ivu-tabs-tab) {
  padding: 8px 5px !important;
}
:deep(.el-table tr) {
  background: transparent;
  color: #fff;
}
:deep(.el-table) {
  width: 90%;
  margin: 0 auto;
  background: transparent;
  height: calc(100vh - 170px);
}
:deep(.el-table tr):hover {
  background: transparent;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: rgba(27, 124, 125, 0.5) !important;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell){
    background: rgb(184, 224, 250,.5) !important;
}
:deep(.el-table th.el-table__cell) {
  background: transparent;
}

:deep(.el-table__row) {
  &:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #313463;
  }
}

.loadStyle {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.leftIcon {
  width: 50px;
  height: 48px;
  box-shadow: 0 0 20px 10px rgba(22, 143, 181, 0.5) inset;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  float: left;
  right: -50px;
  cursor: pointer;

  img {
    height: 30px;
  }
}
.selectCss {
  color: rgb(22, 143, 181);
  font-weight: bold;
}
.left-main {
  width: 18%;
  position: fixed;
  z-index: 1;
  top: 80px;

  height: calc(100vh - 60px);
  background: rgb(0, 26, 61, 0.5);
}
:deep(.el-tree-node:focus>.el-tree-node__content){
  background:transparent
}
.left-item {
  cursor: pointer;
}
.left-tabs {
  display: flex;
  color: #fff;
  box-shadow: 0 0 20px 10px rgba(22, 143, 181, 0.5) inset;
  justify-content: space-between;
  padding: 10px;
}
.chooseType {
  color: #fff;
  padding: 10px;
  font-size: 14px;
  .type {
    display: flex;
  }
}
.waterout {
  text-align: center;
  color: red;
  font-weight: bold;
  font-size: 16px;
}
.selectInfo {
  margin-top: 5px;
  display: flex;
  .info {
    width: 55px;
    margin-top: 5px;
    margin-right: 5px;
  }
}
.legend {
  color: #fff;
  text-align: center;
  width: 200px;
  height: 200px;
  right: -200px;
  position: absolute;
  bottom: 20px;
  background: rgb(0, 26, 61, 0.5);
  box-shadow: 3px 0px 2px 3px rgba(22, 143, 181, 0.5);
  .line-legend {
    text-align: left;
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
  }
  .legend-col {
    display: flex;
    font-size: 12px;
    padding-left: 6px;
    margin-top: 4px;
  }
  .legend-point {
    display: flex;
    flex: 1;
    font-size: 12px;
    justify-content: center;
  }
  .item-point {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 3px 5px;
  }
  .item {
    width: 31px;
    height: 13px;
    border-radius: 3px;
    margin-top: 3px;
  }
}
.left-select {
  color: #fff;
  display: flex;
  padding: 10px;
  line-height: 35px;
  .select {
    flex: 1;
  }
  :deep(.el-input--large) {
    height: 35px;
  }
  :deep(.el-select .el-input__wrapper) {
    background: rgb(0, 26, 61, 0.5);
    color: #fff;
  }

  :deep(.el-select .el-input__inner) {
    color: #fff;
  }
}
:deep(.el-tag.el-tag--info) {
  background: rgb(0, 26, 61, 0.5);
  color: #fff;
}
:deep(.el-table tr) {
  cursor: pointer;
}
.leavhide {
  animation: fadeshow 1s ease forwards;
}
.leavshow {
  animation: fadenum 1s ease forwards;
}
@keyframes fadenum {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.el-tree{
  background: transparent ;
  color: #fff;
  text-align: left
}
:deep(.el-tree-node__content:hover){
  background: transparent ;
}
:deep(.el-checkbox){
  width: auto !important
}
@keyframes fadeshow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
</style>
