<template>
  <div class="config-container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基本配置" name="1">
        <configBox @edit="edit" ref='configBox' v-if="activeName==1" :addPerson="addPerson" :group="activeName" :btnRule="btnRule" :isAdmin="isAdmin"></configBox>
      </el-tab-pane>
      <el-tab-pane label="网站配置" name="2">
        <configBox @edit="edit" ref='configBox' v-if="activeName==2" :addPerson="addPerson" :group="activeName" :btnRule="btnRule" :isAdmin="isAdmin"></configBox>
      </el-tab-pane>
      <el-tab-pane label="邮件配置" name="3">
        <configBox @edit="edit" ref='configBox' v-if="activeName==3" :addPerson="addPerson" :group="activeName" :btnRule="btnRule" :isAdmin="isAdmin"></configBox>
      </el-tab-pane>
      <el-tab-pane v-if="isAdmin||btnRule.some(btn=>btn=='add')" label="添加配置" name="4">
        <configForm style="width: 50%" v-if="activeName==4" @submit="submit"></configForm>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" center :visible.sync="addDialogVisible" title="编辑配置" >
      <configForm :ruleForm="ruleForm" style="width: 100%" @submit="submit" @onBack="onBack"></configForm>
    </el-dialog>
  </div>
</template>

<script>
  import adminApi from '@/api/permission/admin'
  import configForm from './configForm'
  import configBox from './configBox'
  export default {
    name: "config",
    data() {
      return {
        activeName:'1',
        addPerson:[],
        btnRule:[],
        isAdmin:false,
        addDialogVisible:false,
        ruleForm:{}
      }
    },
    components: {configBox,configForm},
    created() {
      const {btnRule,isAdmin} = this.$store.state.user
      this.btnRule=btnRule
      this.isAdmin=isAdmin
    },
    mounted() {
      this.getAdminList()
    },
    methods:{
      edit(ruleForm){
        let rule= JSON.parse(JSON.stringify(ruleForm))
        rule.inputType=rule.input_type
        this.ruleForm = Object.assign({},rule)
        this.addDialogVisible=true
      },
      getAdminList() {
        adminApi.getAdminList().then(res => {
          let addPerson = res.data ? res.data : []
          this.addPerson = addPerson.filter(item => item.status == 1)
        }).catch(e => {
          this.addPerson = []
        })
      },
      submit(type,group){
        if(type==1){
          this.activeName=group+''
        }else{
          this.$refs.configBox.tableLoading=true
          this.$refs.configBox.getAllList()
          this.addDialogVisible=false
        }
      },
      onBack(){
        this.addDialogVisible=false
      }
    }
  }
</script>

<style lang="less">
  .config-container{
    width: 100%;
  }
</style>
