<template>
  <div class='floor-function'>
    <div class="floor-item" v-for="floor in floorData" :key="floor.FloorId">
      <div class="floor-item-title">
        <span class="floor-item-text">
          <i class="iconfont" @click="handleClickOpenFloor(floor)"
            :class="{'wanda-right-mini': !floor.Open, 'wanda-bottom-mini': floor.Open, 'icon-disable': !((floor.Statistics && floor.Statistics.length) || (floor.Properties && floor.Properties.length))}"></i>
          {{floor.FloorName}}
        </span>
        <p class="floor-item-goMap" @click='goToMapView(floor)'>
          <span>查看平面图 </span>
          <van-icon class='floor-item-arrow' name='arrow' />
        </p>
      </div>
      <div v-if="floor.Statistics && floor.Statistics.length && floor.Open" class="floor-item-table">
        <table class="table-box">
          <tr>
            <th>
              <div class="cell">项目</div>
            </th>
            <th>
              <div class="cell">数量</div>
            </th>
            <th>
              <div class="cell">单位</div>
            </th>
            <th>
              <div class="cell">图例</div>
            </th>
          </tr>
          <tr v-for="tr in floor.Statistics" :key="`${floor.FloorId}-${tr.GraphElementId}`" v-show="tr.Num">
            <td>
              <div class="cell">{{tr.Name||'--'}}</div>
            </td>
            <td>
              <div class="cell">{{tr.Num}}</div>
            </td>
            <td>
              <div class="cell">{{tr.Unit||'--'}}</div>
            </td>
            <td>
              <div class="cell">
                <div v-if='tr.Url' class="Url-img">
                  <img :src="`${VUE_APP_BaseURL}/serve/topology-wanda/Picture/query/${tr.Url}`" alt>
                </div>
                <div v-else>{{'--'}}</div>
              </div>
            </td>
          </tr>
          <tr v-if="floor.Note">
            <td colspan="4">
              <div class="cell">
                <div class="table-note">
                  <span>注：</span>
                  <div class="table-note-content" v-html="floor.Note"></div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <h2 class="floor-additional-data" v-if="smsxt == '1003' || smsxt == '1004'" @click="queryTable(floor.FloorId)">
          <i class="iconfont wanda-otherData"></i>
          查看附加数据
        </h2>
      </div>
      <div v-else-if="floor.Properties && floor.Properties.length && floor.Open" class="floor-item-table">
        <table class="table-box">
          <tr>
            <th colspan="3">
              <div class="cell">说明</div>
            </th>
            <th>
              <div class="cell">图例</div>
            </th>
          </tr>
          <tr v-for="(tr, index) in floor.Properties" :key="`${floor.FloorId}-${index}`">
            <td colspan="3">
              <div class="cell">{{tr.ItemExplain||'--'}}</div>
            </td>
            <td>
              <div class="cell">
                <div v-if='tr.FillColor && tr.StrokeColor' class="Url-img"
                :style="`backgroundColor:${formatColor(tr.FillColor)};border:1px solid ${formatColor(tr.StrokeColor)};`"></div>
                <div v-else>{{'--'}}</div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <ImagePreview :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import ImagePreview from '@/components/ImagePreview'
import { appGraphElementQuery, appNodeQuery, queryPic } from '@/api/public'
import { mapGetters } from 'vuex'
export default {
  name: 'FloorFunc',
  props: {},
  data() {
    return {
      floorData: [],
      showImgPreview: false,
      imgList: [], //图片列表
      imgKey: `img${new Date().getTime()}`,
      VUE_APP_BaseURL: '', // 基础路径, 生产环境与其他环境不同,需要进行的配置
    }
  },
  computed: {
    ...mapGetters(['plazaId', 'floorsArr', 'categoryId', 'smsxt']),
  },
  components: { ImagePreview },
  beforeMount() { },
  created() {
    this.VUE_APP_BaseURL = process.env.VUE_APP_BaseURL
    this.getGraphElement();
  },
  methods: {
    // 请求图例信息
    getGraphElement() {
      let params = {
        BuildingID: '1',
        CategoryID: this.categoryId,
        ProjectID: this.plazaId,
        Floors: this.floorsArr.map(item => {
          return {
            FloorId: item.gname,
            FloorName: item.code
          }
        })
      }
      if (this.categoryId === "SCPZ") {
        appNodeQuery(params).then(res => {
          this.floorData = res.Data.map(floor => {
            let arr = []
            if (floor.Properties && floor.Properties.length) {
              arr = floor.Properties.filter(item => {
                return item.ItemExplain && item.ItemExplain !== "";
              })
              floor.Properties = arr;
              floor.Open = false;
            }
            return floor;
          });
        })
      } else {
        appGraphElementQuery(params).then(res => {
          this.floorData = res.Data.map(floor => {
            floor.Open = false;
            return floor;
          });
        })
      }
    },
    // 查询附加数据图片
    queryTable(floorId) {
      this.imgKey = `img${new Date().getTime()}`;
      let getParams = {
        module: '1003',
        floor: floorId,
        system: this.smsxt,
        plazaId: this.plazaId,
      }
      queryPic({ getParams }).then((res) => {
        if (res.data && res.data.length) {
          this.imgList = res.data.map(item => {
            return item.url
          })
          this.showImgPreview = true;
        } else {
          Toast.fail('暂无附加数据！');
        }
      })
    },
    // 展开楼层数据
    handleClickOpenFloor(floor) {
      if ((floor.Statistics && floor.Statistics.length) || (floor.Properties && floor.Properties.length)) {
        floor.Open = !floor.Open;
      }
    },
    goToMapView(floor) {
      if (floor.FloorId && floor.FloorName) {
        let floorObj = {
          FloorId: floor.FloorId,
          FloorName: floor.FloorName
        }
        this.$router.push({ name: 'MapView', params: { floor: floorObj } })
      } else {
        Toast.fail('缺少楼层信息！');
      }
    },
    // 十六进制颜色转rgba
    formatColor(sHex) {
      // 十六进制颜色值的正则表达式
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/
      /* 16进制颜色转为RGB格式 */
      var sColor = sHex.toLowerCase()
      var alpha = 1
      if (sColor && reg.test(sColor)) {
          if (sColor.length === 4 || sColor.length === 5) {
              var sColorNew = '#'
              for (var i = 1; i < sColor.length; i += 1) {
                  sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
              }
              sColor = sColorNew
          }
          // 如果有透明度再执行
          if (sColor.length === 9) {
              alpha = (parseInt('0x' + sColor.slice(7, 9)) / 255).toFixed(2)
          }
          //  处理六位的颜色值
          var sColorChange = []
          for (var i = 1; i < 7; i += 2) {
              sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
          }
          return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
      } else {
          return sColor
      }
    },
  },
  watch: {
    categoryId: {
      handler() {
        this.getGraphElement();
      }
    }
  }
}
</script>
<style lang='less' scoped>
.floor-function {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #ffffff;
  box-sizing: border-box;
  overflow-y: auto;
  .floor-item {
    margin-bottom: 4px;
    .floor-item-title {
      padding: 0 10px;
      height: 44px;
      line-height: 44px;
      background: rgba(2, 91, 170, 0.1);
      color: #025baa;
      .floor-item-text {
        font-size: 16px;
        font-weight: 600;
        display: inline-block;
        .icon-disable {
          color: rgba(2, 91, 170, 0.3);
        }
      }
      .floor-item-goMap {
        font-size: 14px;
        float: right;
        .floor-item-arrow {
          position: relative;
          top: 2px;
        }
      }
    }
    .floor-item-table {
      padding: 12px 16px 16px;
      .table-box {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        td,
        th {
          font-size: 12px;
          font-weight: 500;
          color: #333333;
          padding: 8px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          min-width: 0;
          border: 1px solid #e4e6e7;
          box-sizing: border-box;
          vertical-align: middle;
          position: relative;
          text-align: center;
          .cell {
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
            padding: 0 10px;
          }
        }
        th {
          padding: 3px 0;
          font-weight: normal;
          color: #666666;
          background: #eff0f1;
        }
        .Url-img {
          width: 20px;
          height: 22px;
          line-height: 20px;
          margin: 0 auto;
          img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
          }
        }
        .table-note {
          font-size: 12px;
          font-family: MicrosoftYaHeiSemibold;
          color: #666666;
          line-height: 16px;
          display: flex;
          .table-note-content {
            text-align: left;
            ol {
              list-style: decimal;
            }
          }
        }
      }
    }
    .floor-additional-data {
      font-size: 14px;
      color: #025baa;
      margin-top: 10px;
      i {
        vertical-align: bottom;
      }
    }
  }
}
</style>