<template>
  <div class="content-main common-scroll">
    <div class="content-body">
      <Row :gutter="8" style="width:100%;height:100%">
        <i-col span="24" 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-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
                  </Tooltip>
                  <Tooltip content="编辑" placement="top">
                      <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
                  </Tooltip>
                  <Tooltip content="删除" placement="top">
                      <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(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" @on-page-size-change="sizeChange" show-elevator />
            </div>
          </div>
        </i-col>
      </Row>
    </div>
     <Modal
      v-model="showModal"
      :title="title"
      width="36"
      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="name">
          <Input v-model.trim="formOption.name" maxlength="20" show-word-limit />  
				</FormItem>
				<FormItem label="说明：" prop="remark">
           <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit /> 
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk('formOption')">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      :title="commonTitle"
      width="30"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
      <span class="modal-text">{{modalTitle}}</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="detailStatus"
      title="设备类型信息"
      width="45"
      ref="modalGrag"
      draggable
      reset-drag-position
      footer-hide
      :mask-closable="false"
      @on-visible-change="modalDetailChange"
      class-name="common-modal common-modal-detail">
       <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
        <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
      </Tabs>
       <div v-for="(item,index) in detailLabel" :key="index" v-show="currentModalTabs =='设备类型信息'">
          <div class="common-modal-top" :class="{'common-modal-top-especial': index==1}">
          <span class="common-modal-top-text">{{item.name}}</span>
          </div>
          <div class="common-modal-content" v-if="index==0">
            <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明' }">
                <div class="modal-content-item-name">{{val.name}}</div>
                <div class="modal-content-item-value">
                  <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || (typeof(val.value)=='number' && val.value==0)">
                  <span>{{val.value}}</span>
                  <div slot="content">
                    <span>{{val.value}}</span>
                  </div>
                </Tooltip>
                </div>
            </div>
          </div>
      </div>
      <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
    </Modal>
</div>
</template>
<script>
const defaultFrom = {name: '',remark: ''}
import _ from 'lodash'
export default {
  name: "DeviceTypeManage",
  components:{
  },
  data() {
    return {
      tableTotal: 0,
      tablePage: 0,
      tableParams: {
        equipmentTypeId: '',
        applicationId: '',
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      loading: true,
      tableData: [],
      columns: [
          {
            title: '设备类型名称',
            key: 'name',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '关联应用数量',
            key: 'appCount',
            align: 'center'
          },
          {
            title: '接入设备数量',
            key: 'equipmentCount',
            align: 'center'
          },
          {
            title: '监测指标',
            key: 'targetCount',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action',
            width: 120
          }
      ],
      rowObj: {},
      formOption: {name: '',remark:''},
      ruleValidate: {
        name: [{
          required: true,
          message: '请输入应用名称',
          trigger: 'change'
        }],
      }, 
    equipTypeData: [],
    showModal: false,
    detailStatus: false, 
    modalStatus: false,
    title: '新增设备',
    commonTitle: "确认删除",
    activeColor: '#E92E2E',
    activeClass: '',
    modalTitle: '',
    currentModalTabs:'设备类型信息',
    tabsModalData: [{label:'设备类型信息'},{label:'关联设备'}],
    detailLabel: [],
    columnsModal: [],
    columnsEquipType: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '应用名称',
          key: 'appName',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '设备数量',
          key: 'equipmentNum',
          align: 'center'
        }
      ],
      columnsRelatedEquip: [
          {
            title: '序号',
            type: 'index',
            align: 'center'
          },
          {
            title: '设备ID',
            key: 'equipmentId',
            align: 'center'
         },
         {
            title: '设备名称',
            key: 'equipmentName',
            align: 'center',
            ellipsis: true,
            tooltip: true
         },
         {
            title: '归属线路',
            key: 'lineName',
            align: 'center',
            ellipsis: true,
            tooltip: true
            // render:(h,params)=>{
            //   return h('div', [ h('span',!params.row.lineName ? '/' : params.row.lineName) ])
            // }
         },
         {
            title: '归属站点',
            key: 'stationName',
            align: 'center',
            ellipsis: true,
            tooltip: true
         },
         {
            title: '状态',
            key: 'equipmentStatusValue',
            align: 'center'
         },
      ],
      // equipTypeModal: [],
      // equipTypeCount: 0,
      detailParams: {
					equipmentTypeId: null,
					pageNum: 1,
					pageSize: 10
			},
      apiUrl: '',
      appNameObj: {
        level: '',
        lineId: '',
        stationId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        pageNum: 1,
        pageSize: 9999
      },
      appNameList: []
    };
  },
  mounted() {
  },
  methods: {
    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()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    getTableData () {
      this.loading = true
      this.$get('metroapi/equipment/queryEquipmentTypePage', 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.title = '新增设备类型'
      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
      this.showModal = true
    },
    detailClick (row) {
      this.detailParams.equipmentTypeId = Number(row.id)
      this.rowObj = row
      this.detailStatus = true
      this.currentModalTabs = '设备类型信息'
      this.$nextTick(() => {
        this.apiUrl = 'metroapi/equipment/equipmentTypeDetail'
        this.columnsModal = this.columnsEquipType
        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0) 
        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
      });
      this.$get('metroapi/equipment/equipmentTypeDetail', this.detailParams).then(res=>{
        if ( res.httpCode == 1 ){
            this.detailLabel = res.data
          } else {
            this.$Message.info(res.msg)
          }
        })
        // document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
    },
    editClick (row) {
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row))
      this.title = '编辑设备类型'
      this.showModal = true
    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认删除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
      this.modalStatus = true
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    modalDetailChange (val) {
     	if (!val) {
        this.detailParams.pageNum = 1
        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
      }
    },
    modalOk (formName) {
       if (this.title == '新增设备类型') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/equipment/addEquipmentType', this.formOption).then(res=>{
              if ( res.httpCode == 1 ){
                this.showModal = false
                this.$emit('changeTree')
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/equipment/editEquipmentType', this.formOption).then(res=>{
              if (res.httpCode == 1 ){
                this.showModal = false
                this.$emit('changeTree')
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      }
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      let params = {
        id: this.rowObj.id
      }
      this.delData(params)
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 删除接口
    delData (params) {
      this.$get('metroapi/equipment/delEquipmentType',params).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.$Message.info(res.msg)
          this.getTableData()
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    tabsClick (name) {
      this.currentModalTabs = name
      if (this.currentModalTabs == '设备类型信息') {
        this.detailParams.pageNum = 1
        this.apiUrl = 'metroapi/equipment/equipmentTypeDetail'
        this.columnsModal = this.columnsEquipType
      } else if (this.currentModalTabs == '关联设备') {
        this.detailParams.pageNum = 1
        this.apiUrl = 'metroapi/equipment/queryEquipmentByTypePage'
        this.columnsModal = this.columnsRelatedEquip
      }
      this.$nextTick(() => {    
        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0) 
        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
      });
    }
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.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;
  }
}
>>> .common-modal-top-text {
  font-size: 14px;
  font-weight: bold;
  color: #29A0FF;
  line-height: 42px;
  border-left: 3px solid #1590F1;
  padding-left: 12px;
}
>>> .common-modal-top-especial {
  margin-bottom: -10px;
}
>>> .common-modal-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-right: 1px solid #21437B;
}
>>> .modal-content-item {
  width: 100%;
  display: flex;
}
>>> .item-especial {
  width: 100%;
}
>>> .modal-content-item-name {
  width: 25%;
  height: 45px;
  line-height: 45px;
  background: #13305F;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .modal-content-item-value {
  width: 75%;
  height: 45px;
  line-height: 45px;
  background: #06214D;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
// >>> .item-especial .modal-content-item-name{
//   width: 25%;
//   height: auto;
//   min-height: 45px;
//   border-bottom: 1px solid #21437B;
//   display: flex;
//   align-items: center;
// }
// >>> .item-especial .modal-content-item-value{
//   width: 75%;
//   height: auto;
//   min-height: 45px;
//   border-bottom: 1px solid #21437B;
//   display: flex;
//   align-items: center;
//   line-height: 22px;
// }
>>> .item-especial .modal-content-item-name {
  border-bottom: 1px solid #21437B;
}
>>> .item-especial .modal-content-item-value {
  border-bottom: 1px solid #21437B;
}
>>> .modal-content-item-value .ivu-tooltip {
  width: 100%;
}
>>> .modal-content-item-value .ivu-tooltip-rel {
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
</style>