<template>
  <el-dialog title="系统设置" :visible.sync="dialogFormVisible" append-to-body width="1000px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane  v-for="value in data" :name="value.name" :label="value.name">
         <span slot="label">
           <span class="span-box">
              <svg-icon :icon-class="value.icon" style="margin-right: 5px"/>
             <span>{{ value.name }}</span>
           </span>
         </span>
      </el-tab-pane>
    </el-tabs>
    <div class="setting-content">
      <socket ref="socket" v-show="activeName==='通信设置'"/>
      <log ref="log" v-show="activeName==='系统日志'"/>
      <alarm ref="alarm" v-show="activeName==='报警设置'"/>
      <list-user ref="user" v-show="activeName==='用户设置'"/>
    </div>
  </el-dialog>
</template>

<script>

import Socket from "./socket";
import Log from "./log";
import Alarm from "./alarm";
import ListUser from "../system/user/listUser";
export default {
  name: 'Setting',
  components: {ListUser, Alarm, Socket,Log },
  data() {
    return {
      list:['socket','log','alarm','user'],
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      btnLoading: false, // 保存按钮的加载中状态
      activeName: '通信设置',
      data:[
        {name:'通信设置' ,icon:'sh-socket'},
        {name:'系统日志',icon:'sh-log'},
        {name:'报警设置',icon:'sh-alarm'},
        {name:'用户设置',icon:'sh-user'}
        ]
    }
  },
  computed: {

  },
  mounted: function() {
  },
  methods: {
    handleClick(val) {
      let ref = this.list[val.index]
      console.log(ref)
      this.$refs[`${ref}`].init()
    },
    // 初始化对话框
    initDialog: function() {
      this.dialogFormVisible = true
      this.btnLoading = false
    },

    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-tabs__item:hover {
    color: #303133 !important;
    cursor: pointer;
  }
  .el-tabs__item.is-active {
    color: #303133 !important;
  }
  .el-tabs__item {
    font-size: 16px !important;
  }
    .el-dialog__body{
    padding-top: 10px !important;
  }
  .el-dialog{
    width:700px;
  }
  .setting-content{
    height: 450px;
  }
</style>