<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 wanda-louceng1"></i> {{floor.FloorId}}</span>
        <p class="floor-item-goMap" @click='goToMapView'>
          <span>查看平面图 </span>
          <van-icon class='floor-item-arrow' name='arrow' />
        </p>
      </div>
      <div 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.OrderId}`" 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">
                    {{floor.Note}}
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <h2 class="floor-additional-data" v-if="$route.query.categoryId == 'XFXT' || $route.query.categoryId == 'RDXT'">
          <i class="iconfont wanda-otherData"></i> 
          查看附加数据
        </h2>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FloorFunc',
  props: {},
  data() {
    return {
      floorData: [
        {
          "FloorId": "f1",
          "Note": "1111111111",
          "Statistics": [
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100138",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "机动车位",
              "Num": null,
              "OrderId": 1,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "个",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100139",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "建筑面积",
              "Num": null,
              "OrderId": 2,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "m²",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100142",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "主出入口",
              "Num": null,
              "OrderId": 3,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "个",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100140",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "租赁面积",
              "Num": null,
              "OrderId": 4,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "m²",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100115",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "主要设备房",
              "Num": 1,
              "OrderId": 5,
              "ProjectId": "1000423",
              "RealNum": 1,
              "Type": "Zone",
              "Unit": "处",
              "Url": "dda0d8aa015e4225918de2a139963c08"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100131",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "防火分区",
              "Num": 3,
              "OrderId": 6,
              "ProjectId": "1000423",
              "RealNum": 3,
              "Type": "Zone",
              "Unit": "个",
              "Url": "02f0190e10504c3888b6a554c21690e8"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100112",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "商管办公室",
              "Num": 0,
              "OrderId": 7,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Zone",
              "Unit": "处",
              "Url": "c34abd809bb24329b19505094c366623"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100067",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "观光电梯",
              "Num": null,
              "OrderId": 8,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "部",
              "Url": "b85f9646e4f543fb9f70bc02296d661d"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100064",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "货梯",
              "Num": null,
              "OrderId": 9,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "部",
              "Url": "7d1893ec48744d42887d10469f1461ff"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100063",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "客梯",
              "Num": 11,
              "OrderId": 10,
              "ProjectId": "1000423",
              "RealNum": 11,
              "Type": "Image",
              "Unit": "部",
              "Url": "d59bbe68cf1e4c07bf06e40686ef13be"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100066",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "人行步道",
              "Num": null,
              "OrderId": 11,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "15a35100d7f548f083d82343db6c5f83"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100065",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "自动扶梯",
              "Num": 23,
              "OrderId": 12,
              "ProjectId": "1000423",
              "RealNum": 23,
              "Type": "Image",
              "Unit": "部",
              "Url": "82ac7def995543ff9f129581585630a2"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100039",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "卫生间",
              "Num": 4,
              "OrderId": 13,
              "ProjectId": "1000423",
              "RealNum": 4,
              "Type": "Image",
              "Unit": "处",
              "Url": "00fcc43e72024baa93398efd112ec254"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100076",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "冷却塔",
              "Num": null,
              "OrderId": 14,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "间",
              "Url": "d104a4dc6b0243209c5a6b7d5a7f6030"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100059",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "安全出口",
              "Num": null,
              "OrderId": 15,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "个",
              "Url": "d711aeceeda848b0b9eda45a2009310b"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100062",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "连通口",
              "Num": null,
              "OrderId": 16,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "02b7816d35f846798e08beb7bff33a82"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100135",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "母婴室",
              "Num": null,
              "OrderId": 17,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "60448b41ed5342909b8d4e287b278372"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100060",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "疏散通道",
              "Num": null,
              "OrderId": 18,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "25f85951dabb455da4d39426d8b4744f"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100041",
              "GraphId": "94a1ec0e51ed41308e5798df693626ac",
              "IsModify": true,
              "Name": "吸烟室",
              "Num": null,
              "OrderId": 19,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "f5696ac97a174323a03ade2d24f998c2"
            }
          ]
        },
        {
          "FloorId": "f2",
          "Note": "",
          "Statistics": [
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100138",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "机动车位",
              "Num": null,
              "OrderId": 1,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "个",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100139",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "建筑面积",
              "Num": null,
              "OrderId": 2,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "m²",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100142",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "主出入口",
              "Num": null,
              "OrderId": 3,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "个",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100140",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "租赁面积",
              "Num": null,
              "OrderId": 4,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "None",
              "Unit": "m²",
              "Url": ""
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100115",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "主要设备房",
              "Num": null,
              "OrderId": 5,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Zone",
              "Unit": "处",
              "Url": "dda0d8aa015e4225918de2a139963c08"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100131",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "防火分区",
              "Num": null,
              "OrderId": 6,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Zone",
              "Unit": "个",
              "Url": "02f0190e10504c3888b6a554c21690e8"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100112",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "商管办公室",
              "Num": 1,
              "OrderId": 7,
              "ProjectId": "1000423",
              "RealNum": 1,
              "Type": "Zone",
              "Unit": "处",
              "Url": "c34abd809bb24329b19505094c366623"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100067",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "观光电梯",
              "Num": 2,
              "OrderId": 8,
              "ProjectId": "1000423",
              "RealNum": 2,
              "Type": "Image",
              "Unit": "部",
              "Url": "b85f9646e4f543fb9f70bc02296d661d"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100064",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "货梯",
              "Num": null,
              "OrderId": 9,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "部",
              "Url": "7d1893ec48744d42887d10469f1461ff"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100063",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "客梯",
              "Num": null,
              "OrderId": 10,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "部",
              "Url": "d59bbe68cf1e4c07bf06e40686ef13be"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100066",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "人行步道",
              "Num": null,
              "OrderId": 11,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "15a35100d7f548f083d82343db6c5f83"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100065",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "自动扶梯",
              "Num": null,
              "OrderId": 12,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "部",
              "Url": "82ac7def995543ff9f129581585630a2"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100039",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "卫生间",
              "Num": null,
              "OrderId": 13,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "00fcc43e72024baa93398efd112ec254"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100076",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "冷却塔",
              "Num": null,
              "OrderId": 14,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "间",
              "Url": "d104a4dc6b0243209c5a6b7d5a7f6030"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100059",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "安全出口",
              "Num": null,
              "OrderId": 15,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "个",
              "Url": "d711aeceeda848b0b9eda45a2009310b"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100062",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "连通口",
              "Num": null,
              "OrderId": 16,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "02b7816d35f846798e08beb7bff33a82"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100135",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "母婴室",
              "Num": null,
              "OrderId": 17,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "60448b41ed5342909b8d4e287b278372"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100060",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "疏散通道",
              "Num": null,
              "OrderId": 18,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "25f85951dabb455da4d39426d8b4744f"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100041",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": true,
              "Name": "吸烟室",
              "Num": null,
              "OrderId": 19,
              "ProjectId": "1000423",
              "RealNum": null,
              "Type": "Image",
              "Unit": "处",
              "Url": "f5696ac97a174323a03ade2d24f998c2"
            },
            {
              "GraphCategoryId": "LCGN",
              "GraphElementId": "100055",
              "GraphId": "09e8d9ca964242ddb1fc936510ae9ed1",
              "IsModify": null,
              "Name": "强电井",
              "Num": 1,
              "OrderId": null,
              "ProjectId": "1000423",
              "RealNum": 1,
              "Type": "Image",
              "Unit": "处",
              "Url": "6497312ffbbe496ab0cfacc8d66624f2"
            }
          ]
        }
      ]
    }
  },
  components: {},
  beforeMount() { },
  mounted() { },
  methods: {
    goToMapView() {
      this.$router.push({ name: 'MapView', params: {categoryId: this.$route.query.categoryId} })
    },
  },
}
</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;
      }
      .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>