<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">
              <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: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width: '20%',
          align: 'center',

        },
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          align: 'center',
          key: 'ieAddr',
          width: '20%'
        },
        {
          title: '设备类型',
          align: 'center',
          dataIndex: 'ieType',
          key: 'ieType',
          width: '10%'

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

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

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

        },
      ],
      // 防盗门
      fangdao: [
        {
          title: '设备名称',
          // width: 240,
          align: 'center',
          dataIndex: 'ieName',
          key: 'ieName',
          width: '22%'

        },
        {
          title: '安装位置',
          align: 'center',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width: '22%'
        },
        {
          title: '设备类型',
          align: 'center',
          dataIndex: 'ieType',
          key: 'ieType',
          width: '10%'

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

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

        },
      ],
      // dianti
      dianti: [
        {
          title: '设备名称',
          // width: 240,
          align: 'center',
          dataIndex: 'ieName',
          key: 'ieName',
          width: '10%'

        },
        {
          align: 'center',
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width: '10%'

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

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

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

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

        },
        {
          title: '特种设备代码',
          dataIndex: 'specialEquipCode',        
          align: 'center',

          width: '10%'

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

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

        },
      ],
      // 监控
      jiankong: [
        {
          align: 'center',
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width: '30%'

        },
        {
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          align: 'center',
          width: '30%'

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

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

        },
      ],
      // 泵
      shenghuo: [
        {
          align: 'center',
          title: '设备名称',
          // width: 240,
          dataIndex: 'ieName',
          key: 'ieName',
          width: '18%'

        },
        {
          align: 'center',
          title: '安装位置',
          dataIndex: 'ieAddr',
          key: 'ieAddr',
          width: '18%'
        },
        {
          align: 'center',
          title: '设备类型',
          dataIndex: 'ieType',
          key: 'ieType',
          width: '10%'

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

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

        },
        {
          title: '供水门牌号',
          align: 'center',
          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){ //分页切换
      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(){
      // 获取设施设备
      const 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(){
      const 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>
