<template>
  <div class="routerWapper">
		<div v-if="$route.name =='shebei'" class="portalDetailWapper">
		  <div class="portalDetailContentWapper">
        <div class="portalDetailTitle">
          <span class="title">设施设备详情</span>
			    <div class="detailOperations">
				  <a-button @click="handleReturn"> 返回 </a-button>
			  </div>
		   </div>
        <div class="portalDetailContentBody" ref='portalDetailContentBody'>
          <template >
            <div class="layoutMargin detailsPartSection">
              <p id="experience" class="detailsPartTitle">设施设备基础信息</p>
              <div style="margin:0 16px;">
                  <a-row type="flex" justify="start">
                  <a-col span="8">
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区编码"' :text='febInfo.csName'></DetailsItem>
                      </a-col>
                    </a-row>
                      <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"地面机动车库数量"' :text='febInfo.upVehicleGarageNum'></DetailsItem>
                      </a-col>
                    </a-row>
                      <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"地下机动车库数量"' :text='febInfo.downVehicleGarageNum'></DetailsItem>
                      </a-col>
                    </a-row>
                       <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"机械车库数量"' :text='febInfo.mechGarageNum'></DetailsItem>
                      </a-col>
                    </a-row>
                      <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"非机动车库数量"' :text='febInfo.nonVehicleGarageNum'></DetailsItem>
                      </a-col>
                    </a-row>

                </a-col>
                  <a-col span="8">
                  <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"供水消防总泵数量"' :text='febInfo.firePumpNum'></DetailsItem>
                      </a-col>
                    </a-row>
                  <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"供水消防总泵维保单位"' :text='febInfo.firePumpRepairComp'></DetailsItem>
                      </a-col>
                    </a-row>
                  <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"供水生活总泵数量"' :text='febInfo.waterPumpNum'></DetailsItem>
                      </a-col>
                    </a-row>
                        <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"供水生活总泵维保单位"' :text='febInfo.waterPumpRepairComp'></DetailsItem>
                      </a-col>
                    </a-row>
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"监控主控室位置"' :text='febInfo.monitoringRoomPosition'></DetailsItem>
                      </a-col>
                    </a-row>
                  </a-col>

                  <a-col span="8">
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"非机动车库烟感喷淋数量"' :text='febInfo.nonVehicleSmokeSprayNum'></DetailsItem>
                      </a-col>
                    </a-row>
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"生活垃圾库房"' :text='febInfo.domesticGarbageWarehouse'></DetailsItem>
                      </a-col>
                    </a-row>
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"建筑垃圾库房"' :text='febInfo.constructionWasteWarehouse'></DetailsItem>
                      </a-col>
                    </a-row>
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" :label='"非机动车集中充电设施设备改造数量"' :text='febInfo.nonVehicleChargeNum'></DetailsItem>
                      </a-col>
                    </a-row>
                    <a-row type="flex" justify="start" class="detailsPartLine">
                      <a-col span="24">
                        <DetailsItem :labelSpan='12' :textSpan="12" label="" text=""></DetailsItem>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="layoutMargin detailsPartSection">
              <a-tabs class="portalTable" :activeKey="activeKey" @change="changeTabs">
                <a-tab-pane v-for="item in tabList" :tab="item.name" :key="item.key" />
              </a-tabs>
              <a-table
                class="portalTable"
                size="small"
                row-key="id"
                :pagination="pagination"
                :columns="infos"
                :dataSource="tableData"
                />
            </div>
          </template>
        </div>
		  </div>
		</div>
    <RouterWapper v-else />
  </div>
</template>

<script>
export default {
  name:'shebei',
  data() {
    return {
      detail: {},
      febInfo:{},
      tabList:[
        {
          name:'大门信息',
          key:'大门'
        },
        {
          name:'防盗门信息',
          key:'防盗门'
        },
        {
          name:'电梯信息',
          key:'电梯'
        },
        {
          name:'监控设备信息',
          key:'监控设备'
        },
        {
          name:'消防泵、生活泵信息',
          key:'消防泵、生活泵'
        },
      ],
      // 大门
      damen: [
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width:'20%'
        },
        {
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width:'20%'

        },
        {
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width:'10%'

        },
        {
          title: '维保单位',
          dataIndex: 'ieUnit',
          key: 'ieUnit',
          width:'20%'

        },
        {
          title: '是否是主出入口',
          dataIndex: 'isMainGate',
          key: 'isMainGate',
          width:'10%'

        },
        {
          title: '是否有门卫室',
          dataIndex: 'ffCode',
          key: 'ffCode',
          width:'10%'

        },
      ],
      // 防盗门
      fangdao: [
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width:'22%'
        },
        {
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width:'22%'

        },
        {
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width:'10%'

        },
        {
          title: '维保单位',
          dataIndex: 'ieUnit',
          key: 'ieUnit',
          width:'22%'

        },
        {
          title: '启用日期',
          dataIndex: 'ieDate',
          key: 'ieDate',
          width:'10%'

        },
      ],
      // dianti
      dianti: [
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width:'10%'

        },
        {
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width:'10%'


        },
        {
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width:'8%'

        },
        {
          title: '维保单位',
          dataIndex: 'ieUnit',
          key: 'ieUnit',
          width:'10%'

        },
        {
          title: '启用日期',
          dataIndex: 'ieDate',
          key: 'ieDate',
          width:'8%'

        },
        {
          title: '型号',
          dataIndex: 'ieModel',
          key: 'ieModel',
          width:'5%'
        },
        {
          title: '品牌',
          dataIndex: 'ieBrand',
          key: 'ieBrand',
          width:'5%'

        },
        {
          title: '特种设备代码',
          dataIndex: 'specialEquipCode',
          key: 'specialEquipCode',
          width:'10%'

        },
        {
          title: '检验单位',
          dataIndex: 'inspectionUnit',
          key: 'inspectionUnit',
          width:'10%'

        },
        {
          title: '救援电话',
          dataIndex: 'rescuePhone',
          key: 'rescuePhone',
          width:'10%'

        },
      ],
      // 监控
      jiankong: [
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width:'30%'

        },
        {
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width:'30%'

        },
        {
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width:'10%'

        },
        {
          title: '维保单位',
          dataIndex: 'ieUnit',
          key: 'ieUnit',
          width:'30%'

        },
      ],
      // 泵
      shenghuo: [
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width:'18%'
        },
        {
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width:'18%'

        },
        {
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width:'10%'

        },
        {
          title: '维保单位',
          dataIndex: 'ieUnit',
          key: 'ieUnit',
          width:'18%'

        },
        {
          title: '生产厂家',
          dataIndex: 'ieFactory',
          key: 'ieFactory',
          width:'15%'

        },
        {
          title: '供水门牌号',
          dataIndex: 'ieWaterDoorplate',
          key: 'ieWaterDoorplate',
          width:'18%'

        },
      ],
      pagination: {
        pageNo: 1,
        pageSize:10,
        total: 0,
        current: 1,
        defaultCurrent: 10,
        showQuickJumper: true,
        showTotal: total => `总条数: ${total}`,
        onChange: this.pageChange
      },
      tableData :[ ]
    }
  },
  created () {
    // this.getList()
    this.getInformation()
  },
  computed:{
    activeKey() {   // 当前的tabs
      return this.$store.state.tabName
    },
    infos() {   // 根据store里面的tabName   切换表格展示的列
      switch (this.$store.state.tabName) {
      case '大门':
        return this.damen
        break
      case '防盗门':
        return this.fangdao
        break
      case '电梯':
        return this.dianti
        break
      case '监控设备':
        return this.jiankong
        break
      case '消防泵、生活泵':
        return this.shenghuo
        break
      default:
        break
      }
      return this.damen
    }
  },
  mounted() {
    if(this.$route.name == 'shebei'){
      this.$nextTick(function () {
        this.getSearchParams()
      })
    }
  },
  methods: {
    pageChange(page, pageSize){        //分页切换
      this.pagination.pageNo = page
      this.pagination.current = page
      this.getList()
    },
    handleReturn() {
      this.$router.back()
    },
    // 切换tabs 切换数据  并存到store实时监控
    changeTabs(key) {
      this.$store.commit('SET_TABNAME', key)
      this.pagination.pageNo = 1
      this.pagination.current = 1
      this.getList()
    },
    // 获取小区信息
    getInformation(){
      this.$ajax.get({
        url: this.$api.GET_BASIC_ID.replace('{id}',this.$route.params.id),
      }).then(res => {
        let data = this.$com.confirm(res, 'data.content.febInfo', []) 
        for (let i in data) {
          if (data[i] == null) {
            data[i] = ''
          } else if (data[i] === true) {
            data[i] = '是'
          }else if (data[i] === false) {
            data[i] = '否'
          }else if (typeof(data[i]) === 'number') {
            data[i] = data[i].toString()
          }
        }
        this.febInfo = data
      })
    },
    //获取设备详情
    getList(){
      // 获取设施设备
      let searchParams = Object.assign({},{
        'sectId': this.$route.params.id,
        'type': '1',
        'ieClassify': this.activeKey
      })
      // 设备的类型
      this.$ajax.get({
        url: this.$api.GET_FACEQUS_LIST,
        params:Object.assign({},searchParams,{
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo
        })
      }).then(res => { 
        this.pagination.total = this.$com.confirm(res, 'data.totalRows', 0)
        this.tableData = this.$com.confirm(res, 'data.content', [])
        //
        // 存储当前页面列表的分页信息
        //
        this.$com.storeSearchParams(
          this.$route.name,
          this.pagination,
          {}
        )
      })
    },
    // 页面回显
    getSearchParams(){
      let searchParams = !this.$store.state.listSearchParams?null:this.$store.state.listSearchParams[this.$route.name]
      if(!!searchParams && !!searchParams.routeName && (this.$route.name == searchParams.routeName)){
        if(!!searchParams.pagination){
          if(!!searchParams.pagination.pageNo){
            this.pagination.pageNo = searchParams.pagination.pageNo
            this.pagination.current = searchParams.pagination.current
            this.pagination.pageSize = searchParams.pagination.pageSize
          }
        }
      }
      this.getList()
    },
  },
}
</script>

<style scoped>

</style>
