<template>
  <div class="map-detail">
    <map-item-container :title="projectName">
      <map-detail-tab :tabs="tabs">
        <template #tab1>
          <div class="tab1">
            <div class="tab1-year">{{ tabs[0].value.year }}年</div>
            <div class="tab1-time">{{ tabs[0].value.date }}</div>
          </div>
        </template>
        <template #tab2>
          <div class="tab2">
            <div class="tab2-item">
              <span>楼宇</span>
              <span>共{{ tabs[1].value.buildingNum }}栋</span>
            </div>
            <div class="tab2-item">
              <span>楼层</span>
              <span>共{{ tabs[1].value.floorNum }}栋</span>
            </div>
          </div>
        </template>
        <template #tab3>
          <div class="tab3">
            <div>
              <span v-for="item in tabs[2].value" :key="item">{{ item }}</span>
            </div>
          </div>
        </template>
        <template #tab4>
          <div class="tab4">
            <div class="tab4-item">
              <span class="title">固有风险</span>
              <span>{{ tabs[3].value.inherentNum }}</span>
            </div>
            <div class="tab4-item">
              <span class="title">现状风险</span>
              <span>{{ tabs[3].value.existingNum }}</span>
            </div>
          </div>
        </template>
        <template #tab5>
          <div class="tab5">
            <div class="tab5-item" v-for="item of tabs[4].value" :key="item">
              <span>{{ item.levelName }}</span>
              <span>{{ item.levelNum }}</span>
            </div>
          </div>
        </template>
        <template #tab6>
          <div class="tab6">
            <div class="tab6-item" v-for="item of tabs[5].value" :key="item">
              <span>{{ item.levelName }}</span>
              <span>{{ item.levelNum }}</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.buildingId" style="width: 100px">
            <el-option v-for="itm in buildingList" :key="itm.id" :label="itm.name" :value="itm.id"></el-option>
          </el-select>
          <el-select v-model="formInline.position" style="width: 100px">
            <el-option label="地上" value="地上"></el-option>
            <el-option label="地下" value="地下"></el-option>
          </el-select>
          <el-select v-model="formInline.floorId" style="width: 100px">
            <el-option v-for="itm in floorList" :key="itm.id" :label="itm.name" :value="itm.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险类型">
          <el-select v-model="formInline.type">
            <el-option label="固有风险" value="0"></el-option>
            <el-option label="现状风险" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select v-model="formInline.level">
            <el-option v-for="item in planLevelList" :key="item.id" :label="item.dictLabel"
              :value="item.dictValue"></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">重置</el-button> -->
        </el-form-item>
      </el-form>
      <div class="map-detail-info">
        <div class="map-detail-info-table">
          <map-table :tableList="tableList" :columns="colums" 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">
          <el-row :gutter="5">
            <el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
            <el-col :span="3"> <span class="riskTab type2"></span>较大风险</el-col>
            <el-col :span="3"> <span class="riskTab type3"></span>一般风险</el-col>
            <el-col :span="3"> <span class="riskTab type4"></span>低风险</el-col>
          </el-row>
          <drawCanvas class="map-detail-draw" :componentBtn="false" :componentBuilding="formInline.buildingId"
            isViews="true" :componentFloorId="formInline.floorId" />

        </div>
      </div>
    </map-item-container>
  </div>
</template>

<script>
import { mapItemContainer, mapDetailTab, mapTable } from "./components";
import { topProjectDetail, detailBuilding, detailFloor, detailProjectRisk, detailDictList } from '@/api/map'
import drawCanvas from '@/views/risk/drawCanvas/index'
export default {
  components: { mapItemContainer, mapDetailTab, mapTable, drawCanvas },
  data() {
    return {

      formInline: {
        position: '地上',
        buildingId: '',
        level: '',
        floorId: '',
        type: "0"
      },
      projectId: '',
      projectName: '',
      buildingList: [],
      floorList: [],
      tableList: [],
      planLevelList: [],
      tabs: [
        {
          title: "评估时间（最新）",
          icon: "el-icon-alarm-clock",
          name: "tab1",
          value: {}
        },
        {
          title: "评估数据",
          icon: "el-icon-office-building",
          name: "tab2",
          value: {}
        },
        {
          title: "风险总数量",
          icon: "el-icon-monitor",
          name: "tab3",
          value: {}
        },
        {
          title: "",
          icon: "el-icon-coin",
          name: "tab4",
          value: {}
        },
        {
          title: "风险等级（固有）",
          icon: "el-icon-pie-chart",
          name: "tab5",
          value: {}
        },
        {
          title: "风险等级（现状）",
          icon: "el-icon-s-data",
          name: "tab6",
          value: {}
        },
      ],
      colums: [
        {
          props: 'index',
          color: "#fff",
        },
        {
          props: 'riskName',
          color: "#fff",
        },
        {
          props: 'typeName',
          color: "rgb(0, 255, 186)",
          width: "30%",
        },
        {
          props: 'levelName',
          color: "rgb(255, 234, 0)",
        },
        {
          props: 'columns',
          render: () => {
            return <div>操作>></div>
          }
        }
      ]
    };
  },
  mounted() {

  },
  watch: {
    'formInline.position'() {
      this.getFloor()
    },
    "formInline.buildingId"(val) {
      this.getFloor()
    },
    "$route": {
      handler(val) {
        if (val.query && val.query.projectId) {
          this.projectId = val.query.projectId;
          this.projectDetail();
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    onSubmit() {
      this.getProjectList()
    },
    async getList() {
      await this.getBuilding();
      await this.getDictList()
      this.getProjectList()
    },
    async getBuilding() {
      const resultBuilding = await detailBuilding(this.projectId);
      this.buildingList = resultBuilding.data;
      this.formInline.buildingId = this.buildingList[0].id;
      await this.getFloor()
    },
    getFloor() {
      return detailFloor(this.formInline.buildingId).then(res => {
        const floorFilter = res.data.find(x => x.name == this.formInline.position);
        this.floorList = floorFilter?.children || []
        this.formInline.floorId = this.floorList[0].id
      })
    },
    getProjectList() {
      detailProjectRisk({
        projectId: this.projectId,
        ...this.formInline
      }).then(res => {
        this.tableList = res.data;
      })
    },
    projectDetail() {
      topProjectDetail({
        projectId: this.projectId
      }).then(({ data }) => {
        this.projectName = data.projectName;
        this.tabs[0].value = {
          year: data.evaluationTime.split(' ')[0].substring(0, 4),
          date: data.evaluationTime.split(' ')[0].substring(5) + ' ' + data.evaluationTime.split(' ')[1].slice(0, 5)
        }
        this.tabs[1].value = data.evaluationData;
        this.tabs[2].value = String(data.riskSumNum).split('')
        this.tabs[3].value = {
          inherentNum: data.inherentNum,
          existingNum: data.existingNum
        }
        this.tabs[4].value = data.existingLevelStatics
        this.tabs[5].value = data.inherentLevelStatics
      })
    },
    getDictList() {
      return detailDictList({
        dictType: "risk_plan_level"
      }).then(res => {
        this.planLevelList = res.data
        this.formInline.level = res.data[0].dictValue
      })
    },
    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%;
      overflow: auto;
      border: 1px solid rgb(15, 134, 235);
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
    }
  }

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

  ::v-deep .map-content-title {
    width: 30%;
  }
}

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: 10px;

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

.map-detail-draw {
  transform: scale(0.55);
  transform-origin: 0 0;
}

::v-deep .vue-grid-layout {
  min-height: auto !important;
  padding: 0 !important;
}

.map-detail-info-img {
  margin-top: 10px;

  .el-row {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    margin-bottom: 20px;
  }

  .riskTab {
    display: inline-block;
    width: 50px;
    height: 20px;
    margin: 0 10px 0px 15px;
    border-radius: 5px;
    vertical-align: middle;
  }

  .type1 {
    background-color: #ff4433;
  }

  .type2 {
    background-color: #ff9800;
  }

  .type3 {
    background-color: #ffff00;
  }

  .type4 {
    background-color: #0091ea;
  }

}
</style>