<template>
  <div class="content-main common-scroll">
    <div class="content-body">
      <Row :gutter="8" style="width:100%;height:100%">
        <i-col span="5" style="height:100%">
          <div class="station-tree">
            <div class="station-tree-body">
              <tree-filter :defaultData="stationData" secondCalssName="icon-shebei1" thirdCalssName="icon-shebei" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-filter>
            </div>
          </div>
        </i-col>
        <i-col span="19" style="height:100%">
          <div class="right-main">
            <div class="manage-main-top">
              <Button icon="ios-add" class="common-add-btn" @click="addClick">新增关联</Button>
            </div>
            <div class="manage-main-center">
              <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
                <template slot="loading">
                    <Loading-animation></Loading-animation>
                </template>
                <template slot-scope="{ row }" slot="action">
                  <Tooltip content="解绑" placement="top">
                      <i class="iconfont icon-guanlian" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="boundClick(row)"></i>
                  </Tooltip>
                </template>
              </Table>
            </div>
            <div class="common-page">
              <div class="common-page-total">
                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
              </div>
              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" show-elevator />
            </div>
          </div>
        </i-col>
      </Row>
    </div>
     <Modal
      v-model="showModal"
      :title="title"
      width="25"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      @on-visible-change="modalChange"
      class-name="common-modal">
      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
				<FormItem label="应用名称：" prop="applicationId">
           <Select v-model="formOption.applicationId" placeholder="应用名称">
              <Option v-for="item in appNameList" :value="(item.id)" :key="item.value">{{ item.appName }}</Option>
          </Select>
				</FormItem>
				<FormItem label="设备类型：" prop="equipmentTypeId">
           <Select v-model="formOption.equipmentTypeId" placeholder="设备类型">
              <Option v-for="item in equipTypeData" :value="(item.id)" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk('formOption')">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      title="确认解绑"
      width="25"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" class="modal-icon"  style="color:#E92E2E"></Icon>
      <span class="modal-text">删除的同时将解绑所有运营数据，且数据不可恢复。请慎重操作。</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import _ from 'lodash'
export default {
  name: "ApplicationEquip",
  data() {
    return {
      currentStation: '',
      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
      showTree: true,// 是否显示树形组件
		  stationData: [],
      tableTotal: 0,
      tablePage: 0,
      tableParams: {
        applicationId:'',
        equipmentTypeId: '',
        keywords: '',
        pageNum: 1,
        pageSize: 10
      },
      loading: true,
      tableData: [],
      columns: [
          {
            title: '应用名称',
            key: 'appName',
            align: 'center'
          },
          {
            title: '设备类型',
            key: 'equipmentName',
            align: 'center'
          },
          {
            title: '接入设备数量',
            key: 'equipmentNum',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action',
          }
      ],
      rowObj: {},
      formOption: {applicationId: '',equipmentTypeId:''},
      ruleValidate: {
        applicationId: [{
          required: true,
          type: 'number',
          message: '请选择应用名称',
          trigger: 'change'
        }],
        equipmentTypeId: [{
          required: true,
          type: 'number',
          message: '请选择设备类型',
          trigger: 'change'
        }],
      }, 
    equipTypeData: [],
    showModal: false,
    title: '新增关联',
    modalStatus: false,
    appNameObj: {
        level: '',
        lineId: '',
        stationId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        pageNum: 1,
        pageSize: 9999
      },
      appNameList: [],
      saveId: null
    };
  },
  mounted() {
    document.querySelector(".common-scroll").scrollTo(0, 0)
    this.getMetroLevel()
  },
  methods: {
    // 获取树形数据
    getMetroLevel () {
     this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
      if (res.httpCode == 1) {
        this.stationData = res.data
        if (this.saveId) {
          this.stationData = this.getParentIdList(this.stationData,this.saveId)
        }
			}
		 })
    },
    getParentIdList(list, id) {
        if (!list || !id) {
            return ''
        }
        let findParent = (data, currentdId, nodeId) => {
            for (var i = 0, length = data.length; i < length; i++) {
                let node = data[i];
                node.expand = false
                node.selected = false
                node.disabled = false
                if (node.nodeId === currentdId) {
                    node.expand = true
                    if (node.nodeId == id) {     
                      node.expand = true
                      this.currentOrgId = node.nodeId
                      node.selected = true
                      node.disabled = true
                      // this.$refs.treeManage.getOrgData(node.nodeId)
                      if(node.children) {
                        findParent(node.children, currentdId, node.nodeId);
                      }       
                    }
                    if (!node.nodeId) {
                      break
                    }
                    findParent(list, nodeId);
                    // break
                } else {
                    if (node.children) {
                      findParent(node.children, currentdId, node.nodeId);
                    }
                    continue
                }
            }
            return list;
        }
        return findParent(list, id);
    },
    treeChange(arr,level,currentNodeId) {
      this.saveId = currentNodeId
      this.$nextTick(()=> {
        if (level == 2) {
          this.tableParams.applicationId = arr[arr.length-1]
          this.tableParams.equipmentTypeId = ''
        } else if (level == 3) {
          this.tableParams.applicationId = arr[arr.length-2]
          this.tableParams.equipmentTypeId = arr[arr.length-1]
        } else {
          this.tableParams.applicationId = ''
          this.tableParams.applicationId = ''
        }
        this.tableParams.pageNum = 1
        this.getTableData()
      })
		},
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    getTableData () {
      this.loading = true
      this.$get('metroapi/application/equipmentTypeInfo', this.tableParams).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    getType  () {
      // 获取设备类型
      this.$get('metroapi/equipment/queryEquipmentType', {name:''}).then(res=>{
        if (res.httpCode == 1 ){
          this.equipTypeData = res.data
        } else {
          this.equipTypeData = []
        }
      })
      // 获取应用名称
      this.$get('metroapi/application/info/list', this.appNameObj).then(res=>{
          if (res.httpCode == 1 ){
            this.appNameList = res.data.data
          } else {
            this.appNameList = []
          }
        })
    },
    addClick () {
      this.showModal = true
    },
    boundClick (row) {
      this.rowObj = row
      this.modalStatus = true
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    modalOk (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$post('metroapi/application/addEquipmentType', this.formOption).then(res=>{
            if (res.httpCode == 1 ){
              this.showModal = false
              this.$Message.info(res.msg)
              this.getTableData()
              this.getMetroLevel()
            } else {
              this.$Message.info(res.msg)
            }
          })
        } else {
          this.showModal = true
        }
      })
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      this.$post('metroapi/application/deleteEquipmentType',{appEquipmentTypeId:this.rowObj.appEquipmentTypeId}).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.tableParams.applicationId = ''
          this.tableParams.equipmentTypeId = ''
          this.saveId = null
          this.getTableData()
          this.getMetroLevel()
          this.$Message.info(res.msg)
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    commonCancel () {
      this.modalStatus = false
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: auto;
}
.common-search {
  width: 100%;
}
>>> .common-search .ivu-input {
  background-color: #06214D;
  border: 1px solid #2355A6;
  border-radius: 15px;
  color: #fff;
  height: 32px;
}
>>> .common-search .ivu-input:focus {
    border-color: #0185ea;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.station-tree {
  height: 100%;
  padding: 10px;
}
.station-tree-body {
  border: 1px solid #204384;
  height: 100%;
  padding: 10px;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
  // display: flex;
}
.station-tree-left {
  height: 100%;
  overflow: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
  position: relative;
  // padding: 16px;
}
.manage-main-top {
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 100px);
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 54px;
 }
 >>> .common-table .ivu-table td {
  height: 54px;
 }
>>>  .common-table .ivu-spin-fix {
  top: 54px;
  height: calc(100vh - 350px);
}
>>>  .common-table .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
  height: calc(100vh - 350px);
}
>>> .common-table .ivu-table-tip table {
 display: none;
}
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
</style>