<template>
  <div class="map-detail">
    <map-item-container title="香格里拉国际大厦">
      <map-detail-tab :tabs="tabs">
        <template #tab1>
          <div class="tab1">
            <div class="tab1-year">2023年</div>
            <div class="tab1-time">05-26 16:25</div>
          </div>
        </template>
        <template #tab2>
          <div class="tab2">
            <div class="tab2-item">
              <span>楼宇</span>
              <span>共25栋</span>
            </div>
            <div class="tab2-item">
              <span>楼层</span>
              <span>共25栋</span>
            </div>
          </div>
        </template>
        <template #tab3>
          <div class="tab3">
            <div>
              <span>1</span>
              <span>2</span>
              <span>3</span>
              <span>4</span>
            </div>
          </div>
        </template>
        <template #tab4>
          <div class="tab4">
            <div class="tab4-item">
              <span class="title">固有风险</span>
              <span>256</span>
            </div>
            <div class="tab4-item">
              <span class="title">现状风险</span>
              <span>960</span>
            </div>
          </div>
        </template>
        <template #tab5>
          <div class="tab5">
            <div class="tab5-item">
              <span>重大</span>
              <span>36</span>
            </div>
            <div class="tab5-item">
              <span>较大</span>
              <span>36</span>
            </div>
            <div class="tab5-item">
              <span>一般</span>
              <span>36</span>
            </div>
            <div class="tab5-item">
              <span>低</span>
              <span>36</span>
            </div>
          </div>
        </template>
        <template #tab6>
          <div class="tab6">
            <div class="tab6-item">
              <span>较大</span>
              <span>36</span>
            </div>
            <div class="tab6-item">
              <span>重大</span>
              <span>30</span>
            </div>
            <div class="tab6-item">
              <span>一般</span>
              <span>15</span>
            </div>
            <div class="tab6-item">
              <span>低</span>
              <span>36</span>
            </div>
          </div>
        </template>
      </map-detail-tab>
    </map-item-container>
    <map-item-container title="项目风险信息" class="map-detail-info-container">
      <el-form :inline="true" :model="formInline" class="map-detail-filter">
        <el-form-item label="选择位置">
          <el-select
            v-model="formInline.position"
            placeholder="地上"
            style="width: 100px"
          >
            <el-option label="地上" value="shanghai"></el-option>
            <el-option label="底下" value="beijing"></el-option>
          </el-select>
          <el-select
            v-model="formInline.position1"
            placeholder="1层"
            style="width: 100px"
          >
            <el-option label="1层" value="shanghai"></el-option>
            <el-option label="2层" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险类型">
          <el-select v-model="formInline.present" placeholder="固有风险">
            <el-option label="固有风险" value="固有风险"></el-option>
            <el-option label="现状风险" value="现状风险"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select v-model="formInline.level" placeholder="重大风险">
            <el-option label="重大风险" value="重大风险"></el-option>
            <el-option label="较大风险" value="较大风险"></el-option>
            <el-option label="一般风险" value="一般风险"></el-option>
            <el-option label="低风险" value="低风险"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-btn" @click="onSubmit"
            >查询</el-button
          >
          <el-button plain class="cancel-btn" @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="map-detail-info">
        <div class="map-detail-info-table">
          <map-table :tableList="tableList" class="info-map-table">
            <template #header>
              <ul class="info-table-header">
                <li style="text-align: center; width: 15%">序号</li>
                <li>风险名称</li>
                <li style="width: 30%">风险类型</li>
                <li>风险等级</li>
                <li style="text-align: center">操作</li>
              </ul>
            </template>
          </map-table>
        </div>
        <div class="map-detail-info-img"></div>
      </div>
    </map-item-container>
  </div>
</template>

<script>
import { mapItemContainer, mapDetailTab, mapTable } from "./components";
export default {
  components: { mapItemContainer, mapDetailTab, mapTable },
  data() {
    return {
      formInline: {},
      tableList: [],
      tabs: [
        {
          title: "评估时间（最新）",
          icon: "el-icon-basketball",
          name: "tab1",
        },
        {
          title: "评估数据",
          icon: "el-icon-basketball",
          name: "tab2",
        },
        {
          title: "风险总数量",
          icon: "el-icon-basketball",
          name: "tab3",
        },
        {
          title: "",
          icon: "el-icon-basketball",
          name: "tab4",
        },
        {
          title: "风险等级（固有）",
          icon: "el-icon-basketball",
          name: "tab5",
        },
        {
          title: "风险等级（现状）",
          icon: "el-icon-basketball",
          name: "tab6",
        },
      ],
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    getTableList() {
      for (let i = 0; i < 30; i++) {
        this.tableList.push({
          colunm1: {
            name: i % 2 == 0 ? "火灾" : i % 3 === 0 ? "触电" : "其他",
            color: "#fff",
          },
          colunm2: {
            name: "固有",
            color: "rgb(0, 255, 186)",
            width: "30%",
          },
          colunm3: {
            name: "一般风险",
            color: "rgb(255, 234, 0)",
          },
          colunm4: {
            name: "详情",
            color: "rgb(2, 167, 240)",
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.map-detail {
  width: calc(100% - 100px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  .map-detail-info-container {
    flex: 1;
  }
  .map-detail-filter {
    text-align: left;
    ::v-deep .el-input__inner {
      background: transparent;
      color: #fff;
      border-color: rgb(15, 134, 235);
    }
    ::v-deep .el-form-item__label {
      font-size: 16px;
      color: #fff;
    }
    .search-btn {
      background: linear-gradient(
        -90deg,
        rgb(35, 255, 226) 0%,
        rgb(15, 134, 235) 100%
      );
    }
    .cancel-btn {
      background: transparent;
      border-image: linear-gradient(
          -90deg,
          rgb(35, 255, 226) 0%,
          rgb(15, 134, 235) 100%
        )
        5 5;
      color: #fff;
      padding-top: 9px;
      padding-bottom: 9px;
      clip-path: inset(0 round 3px);
    }
  }
  .map-detail-info {
    height: calc(100% - 100px);
    display: grid;
    grid-template-columns: 23% 73%;
    gap: 20px;
    box-sizing: border-box;
    &-table {
      height: 100%;
      overflow: auto;
    }
    &-img {
      height: 100%;
      border: 1px solid rgb(15, 134, 235);
      border-radius: 10px;
      box-sizing: border-box;
    }
  }
  .info-table-header {
    display: flex;
    background: rgba(0, 150, 255, 0.298);
    padding-left: 0;
    margin-bottom: 5px;
    margin-top: 0;
    li {
      width: 20%;
      color: rgb(201, 229, 255);
      font-weight: 400;
      text-align: center;
      font-size: 14px;
      padding: 5px 0;
    }
  }
}
ul,
li {
  list-style: none;
}
::-webkit-scrollbar {
  display: none;
}
.tab1 {
  &-year {
    opacity: 0.8;
    font-size: 14px;
    margin: 5px 0;
  }
  &-time {
    font-size: 27px;
    font-weight: bold;
  }
}
.tab2 {
  .tab2-item {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(
      90deg,
      rgba(0, 125, 183, 0.4) 30%,
      rgba(0, 0, 0, 0) 70%
    );
    padding: 3px 10px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
  }
}
.tab3 {
  margin-top: 10px;
  span {
    display: inline-block;
    background-color: rgba(35, 145, 255, 0.098);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(35, 145, 255);
    border-radius: 10px;
    box-shadow: none;
    font-family: "DIN ", DIN, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: rgb(255, 255, 255);
    width: 32px;
    height: 43px;
    line-height: 43px;
    text-align: center;
    margin-right: 10px;
  }
}
.tab4 {
  .tab4-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(
      90deg,
      rgba(0, 125, 183, 0.4) 30%,
      rgba(0, 0, 0, 0) 70%
    );
    padding: 0 10px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 40px;
    height: 30px;
    line-height: 30px;

    .title {
      &:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgb(0, 125, 183);
        margin-right: 10px;
      }
    }
  }
  .tab4-item:first-child {
    background: linear-gradient(
      90deg,
      rgba(243, 90, 76, 0.6) 30%,
      rgba(0, 0, 0, 0) 70%
    );
    .title:before {
      background-color: rgb(243, 90, 76);
    }
  }
  .tab4-item:last-child {
    background: linear-gradient(
      90deg,
      rgba(234, 156, 71, 0.6) 30%,
      rgba(0, 0, 0, 0) 70%
    );
    .title:before {
      background-color: rgb(234, 156, 71);
    }
  }
}
.tab5,
.tab6 {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  .tab5-item,
  .tab6-item {
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba($color: #fff, $alpha: 0.3);
    padding: 3px 10px;
    margin-right: 10px;
    margin-top: 8px;
    position: relative;
    &::before {
      content: "";
      display: block;
      width: 5px;
      height: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .tab5-item:nth-of-type(1),
  .tab6-item:nth-of-type(1) {
    &::before {
      background-color: red;
    }
  }
  .tab5-item:nth-of-type(2),
  .tab6-item:nth-of-type(2) {
    &::before {
      background-color: rgb(245, 154, 35);
    }
  }
  .tab5-item:nth-of-type(3),
  .tab6-item:nth-of-type(3) {
    &::before {
      background-color: rgb(255, 255, 0);
    }
  }
  .tab5-item:nth-of-type(4),
  .tab6-item:nth-of-type(4) {
    &::before {
      background-color: rgb(2, 167, 240);
    }
  }
}
</style>