<template>
  <header class="header">
    <h1>永久基本农田公布查询系统</h1>
    <div class="total-data open-position">
      全国<span>15.46</span>亿亩
    </div>
    <div class="personal-div">
      <i class="iconfont icon-widget-user"></i>
      <span>个人中心</span>
    </div>
  </header>
  <main class="main">
    <!-- 地图 -->
    <div class="map-container"></div>

    <!-- 资源目录最小化 -->
    <div class="resource-min" v-show="resourceIsFold" @click="resourceIsFold = false" title="展开资源目录">
      <i class="iconfont icon-widget-layer1"></i>
    </div>
    <!-- 资源目录 -->
    <div class="resource-panel" v-show="!resourceIsFold">
      <div class="panel-title">
        <i class="iconfont icon-widget-layer1"></i>
        <span>资源目录</span>
        <div class="fold-btn" @click="resourceIsFold = true" title="收起">
          <i class="iconfont icon-widget-menufold"></i>
        </div>
      </div>
      <div class="panel-body">
        <lay-input suffix-icon="layui-icon-search" size="sm"> </lay-input>
        <div class="list-box">
          <div class="list-item" v-for="(item) in resourceData" :key="item.id">
            <lay-checkbox :name="item.id" skin="primary" v-model="item.status" value="" :label="item.name"></lay-checkbox>
          </div>
          <!-- <div class="list-item">
            <lay-checkbox name="like2" skin="primary" v-model="checked2" value="" label="属性属性描述描述"></lay-checkbox>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 图例最小化 -->
    <div class="lengend-min" v-show="lengendIsFold" @click="lengendIsFold = false" title="展开图例">
      <i class="iconfont icon-widget-mulu"></i>
    </div>
    <div class="lengend-panel" v-show="!lengendIsFold">
      <div class="panel-title">
        <i class="iconfont icon-widget-mulu"></i>
        <span>图例</span>
        <div class="fold-btn" @click="lengendIsFold = true" title="收起">
          <i class="iconfont icon-widget-menufold"></i>
        </div>
      </div>
      <div class="panel-body">
        <ul class="list-box">
          <li class="list-item">
            <!--  -->
            <div class="lengend-yh"></div>
            <div class="lengend-title">永久基本农田</div>
          </li>
          <li class="list-item">
            <div class="lengend-yhselected"></div>
            <div class="lengend-title">选中永久基本农田图斑</div>
          </li>
          <li class="list-item">
            <div class="lengend-xzqh"></div>
            <div class="lengend-title">行政区划范围</div>
          </li>
          <li class="list-item">
            <div class="lengend-zdy"></div>
            <div class="lengend-title">自定义范围</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 工具栏 -->
    <div class="map-tools">
      <div class="tools-arrow-part" @click="toolIsFold = !toolIsFold" :title="!toolIsFold ? '收起' : '展开'">
        <i class="iconfont" :class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'"></i>
      </div>
      <div class="tool-part-box" v-show="!toolIsFold">
        <div class="tool-part">
          <i class="iconfont icon-widget-info-query"></i>
          <span>查询</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-location1"></i>
          <span>点定位</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-guanxianchaxun-duobianxing"></i>
          <span>面定位</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-huizhi"></i>
          <span>绘制范围</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-hand-point"></i>
          <span>点选</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-map-full"></i>
          <span>全幅</span>
        </div>
        <lay-line direction="vertical" theme="black"></lay-line>
        <div class="tool-part">
          <i class="iconfont icon-widget-celiang"></i>
          <span>测距</span>
        </div>
      </div>
    </div>

    <!-- 行政区村庄等输入框下拉框 -->
    <div class="input-box">
      <lay-cascader :options="cascaderOptions" v-model="regionData" :onlyLastLevel="true" allow-clear placeholder="请选择行政区"
        :replaceFields="replaceFields" contentClass="cascaderClass" size="sm"
        contentStyle="--global-checked-color: #2c5f9e"></lay-cascader>
      <lay-input suffix-icon="layui-icon-search" size="sm" placeholder="请输入村庄名称、图斑编号" :allow-clear="true"
        @input="villageSearch"> </lay-input>
    </div>

    <!-- 地图类型 -->
    <div class="map-type">
      <ul class="list-box">
        <li class="list-item">
          <img src="../../assets/img/dt.png" alt="">
          <div class="top-check">
            <lay-checkbox name="sc" skin="primary" v-model="openCollect" value="" label="显示收藏点"></lay-checkbox>
          </div>
          <p class="detail-info">地图</p>
        </li>
        <li class="list-item">
          <img src="../../assets/img/yx.png" alt="">
          <div class="top-check">
            <lay-checkbox name="lw" skin="primary" v-model="openLw" value="" label="开启路网"></lay-checkbox>
          </div>
          <p class="detail-info">影像</p>
        </li>
      </ul>
    </div>
  </main>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { getList } from "../../api/module/main";
const toolIsFold = ref(false);
const resourceIsFold = ref(false);
const lengendIsFold = ref(false);
const openCollect = ref(false);
const openLw = ref(false);
const regionData = ref();
const replaceFields = {
  label: 'name',
  value: 'code',
  children: 'areaList'
}
interface resourceItemType {
  id: string;
  name: string;
  status: boolean
}
interface cascaders {
  name: string;
  code: string;
}
interface cascadersItemType {
  name: string;
  code: string;
  areaList: cascaders[]
}
const state = reactive({
  resourceData: [] as resourceItemType[],
  cascaderOptions: [] as cascadersItemType[]
})
const {
  resourceData,
  cascaderOptions
} = toRefs(state)
// 获取资源目录列表
getList('resourceData').then((res: any) => {
  console.log(res)
  state.resourceData = res.data
})
// 获取省市区
getList('china').then((res: any) => {
  console.log(res)
  state.cascaderOptions = res.data
})

// 村庄搜索
const villageSearch = function (val: string) {
  console.log("当前值:" + val)
}


</script>
<style scoped lang="scss">
.header {
  height: 64px;
  background: url("@/assets/img/homeTitleExBgImg.png") no-repeat;

  h1 {
    font-size: 28px;
    color: #fff;
    line-height: 40px;
    margin: 12px 0 12px 30px;
    float: left;
  }

  .personal-div {
    float: right;
    margin-right: 30px;
    line-height: 30px;
    margin-top: 17px;
    color: #fff;

    span {
      margin-left: 5px;
      font-size: 16px;
      position: relative;
      top: -1px;
    }

    i {
      font-size: 18px;
    }
  }

}

.main {
  height: calc(100% - 64px);
  background: #fff;
  position: relative;

  .map-container {
    height: 100%;
    background: url("@/assets/img/mapbg.png") no-repeat;
    background-size: 100% 100%;
  }
}

.total-data {
  position: relative;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px #222;
  border-left: 1px solid #dedede;
  display: inline-block;
  margin: 18px 0 10px 20px;
  padding-left: 15px;
  line-height: 25px;

  span {
    // color: rgba(242, 119, 11);
    color: #fff;
    font-size: 20px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: 0 5px;
  }
}

.resource-panel {
  width: 300px;
  height: calc(100% - 203px);
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba($color: #ffffff, $alpha: 0.7);
  box-shadow: -2px 4px 10px #ccc;

  .panel-title {
    height: 30px;
    line-height: 30px;
    background: #2c5f9e;
    padding-left: 10px;
    color: #fff;

    span {
      font-size: 16px;
      margin-left: 5px;
    }

    .fold-btn {
      width: 36px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      float: right;

      &:hover i {
        cursor: pointer;
        font-weight: bold;
      }
    }
  }

  .panel-body {
    height: calc(100% - 30px);
    padding: 8px;
    box-sizing: border-box;

    .list-box {
      margin-top: 8px;
      height: calc(100% - 38px);
      overflow: auto;
    }

    .list-item {
      line-height: 30px;

      ::v-deep .layui-form-checkbox[lay-skin="primary"]:hover i {
        border-color: #2c5f9e;
        color: #fff;
      }

      ::v-deep .layui-form-checked[lay-skin="primary"] {
        & {
          i {
            border-color: #2c5f9e;
            background-color: #2c5f9e;
          }

          span {
            color: #2c5f9e;
          }
        }

      }
    }
  }
}

.resource-min {
  width: 36px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  background: #2c5f9e;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0;
  color: #fff;
  top: 10px;
  left: 10px;
  box-shadow: -2px 4px 10px #ccc;
  cursor: pointer;

  i {
    font-size: 20px;
  }
}

.lengend-panel {
  width: 300px;
  height: 174px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba($color: #ffffff, $alpha: 0.7);
  box-shadow: -2px 4px 10px #ccc;

  .panel-title {
    height: 30px;
    line-height: 30px;
    background: #2c5f9e;
    padding-left: 10px;
    color: #fff;

    span {
      font-size: 16px;
      margin-left: 5px;
    }

    .fold-btn {
      width: 36px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      float: right;

      &:hover i {
        cursor: pointer;
        font-weight: bold;
      }
    }
  }

  .panel-body {
    height: calc(100% - 30px);
    padding: 8px;
    box-sizing: border-box;

    .list-box {
      padding: 5px;
    }

    .list-item {
      line-height: 30px;
      color: #333;

      &>div:first-child {
        width: 34px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 3px;
        float: left;
        margin-top: 5px;
        margin-right: 10px;
      }

      .lengend-yh {
        background: rgba(248, 217, 104, 1);
      }

      .lengend-yhselected {
        background: rgba(248, 217, 104, 1);
        border: 1px solid rgba(228, 68, 58, 1);
      }

      .lengend-xzqh {
        border: 1px dashed rgba(41, 121, 214, 1);
      }

      .lengend-zdy {
        border: 1px dashed rgba(209, 44, 165, 1);
      }

      .lengend-title {
        display: inline-block;
      }
    }
  }
}

.lengend-min {
  width: 36px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  background: #2c5f9e;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0;
  color: #fff;
  bottom: 10px;
  left: 10px;
  box-shadow: -2px 4px 10px #ccc;
  cursor: pointer;

  i {
    font-size: 20px;
  }
}

.map-tools {
  height: 36px;
  line-height: 36px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: #fff;
  box-shadow: -2px 4px 10px #ccc;

  .tools-arrow-part {
    width: 20px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    background: #2c5f9e;
    display: inline-block;

    i {
      font-size: 16px;
    }
  }

  .layui-line-vertical {
    margin: 0 !important;
    position: relative;
    top: -1px;
  }

  .tool-part-box {
    display: inline-block;

    .tool-part {
      display: inline-block;
      // background: #f00;
      height: 100%;
      padding: 0 15px;
      color: #2c5f9e;
      cursor: pointer;

      span {
        margin-left: 5px;
      }

      i {
        position: relative;
        top: 1px;
      }
    }
  }

}

.input-box {
  position: absolute;
  top: 10px;
  left: calc(10% + 300px);
  display: flex;
}

.map-type {
  width: 86px;
  height: 60px;
  position: absolute;
  right: 10px;
  bottom: 10px;

  .list-item {
    width: 86px;
    height: 60px;
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    border: 1px solid #666;

    .detail-info {
      position: absolute;
      right: 0;
      bottom: 0;
      color: #fff;
      font-size: 12px;
      padding: 2px 5px;

    }

    &:hover {
      .detail-info {
        background: #2c5f9e;

      }

      .top-check {
        background: rgba($color: #000000, $alpha: 0.4);
      }
    }

    .top-check {
      line-height: 20px;
      position: absolute;
      left: 0;
      top: 0;
      font-size: 12px;
      width: 100%;
      padding-left: 5px;
      box-sizing: border-box;

      ::v-deep .layui-checkbox .layui-form-checkbox {
        padding-left: 18px;
        height: 16px;
        line-height: 16px;
        width: 16px;

        .layui-checkbox-label {
          font-size: 12px;
          color: #fff;
        }
      }

      ::v-deep .layui-form-checkbox[lay-skin="primary"] {
        i {
          height: 16px;
          line-height: 16px;
          width: 16px;
        }

        i {
          border-color: #2c5f9e;
          color: #fff;
        }

      }

      ::v-deep .layui-form-checked[lay-skin="primary"] {
        & {
          i {
            border-color: #2c5f9e;
            background-color: #2c5f9e;
          }

          span {
            color: #fff;
          }
        }
      }
    }
  }

  .list-box,
  .list-item img {
    width: 100%;
    height: 100%;
  }
}

.cascaderClass {
  color: #fff;

  .layui-cascader-menu {
    layui-cascader-menu-item:hover {
      background: #2c5f9e;
    }
  }

  .layui-cascader-selected {
    background: #2c5f9e;
  }

}
</style>
