<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)}"></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="`/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>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import { appGraphElementQuery, queryPic } from '@/api/public'
import { mapGetters } from 'vuex'
export default {
  name: 'LegendList',
  props: {
    floorsArr: {
      type: Array,
      default: () => {
        return []
      },
    }
  },
  data() {
    return {
      floorData: [],
    }
  },
  computed: {
    ...mapGetters(['plazaId', 'categoryId', 'smsxt']),
  },
  components: {},
  beforeMount() { },
  created() {
    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
          }
        })
      }
      appGraphElementQuery(params).then(res => {
        this.floorData = res.Data.map(floor => {
          floor.Open = false;
          return floor;
        });
      })
    },
    // 展开楼层数据
    handleClickOpenFloor(floor) {
      if (floor.Statistics && floor.Statistics.length) {
        floor.Open = !floor.Open;
      }
    },
    goToMapView(floor) {
      if (floor.FloorId && floor.FloorName) {
        let floorObj = {
          FloorId: floor.FloorId,
          FloorName: floor.FloorName
        }
        this.$router.push({ name: 'MapOther', params: { floor: floorObj, floorsArr: this.floorsArr } })
      } else {
        Toast.fail('缺少楼层信息！');
      }
    },
  },
  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: 12px;
    .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 0;
      .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 {
          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>