<template>
  <layout-form>
    <el-form
      :model="form" 
      :loading="loading" 
      :rules="rules" 
      size='small'
      label-width='100px'
      ref="form" 
    >
      <el-row>
        <Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />
        <Field label="名称" prop="name" v-model="form.name"/>
        <Field label="权限类型" prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' />
        <Field label="父级菜单" prop="parentId" v-model="form.parentId" :enumData='menu' type='select' />
        <Field label="访问地址" prop="url" v-model="form.url" />
        <Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' />
        <Field label="图标" prop="imgPath" :span='24'>
          <el-radio-group v-model="form.imgPath" class='form-el-radio-group'>
            <el-radio-button label="">不需要图标</el-radio-button>
            <el-radio-button v-for='(icon, index) in icons' :key='index' :label="icon">
              <i :class="'el-icon-'+icon"></i>
              {{icon}}
            </el-radio-button>
          </el-radio-group>
        </Field>
      </el-row>
      <form-buttons @submit='submitForm'/>
    </el-form>
  </layout-form>
</template>

<script>
import form from '@/assets/mixins/form';

export default {
  mixins: [form],
  methods: {
    afterSubmit() {
      this.$store.dispatch('login');
      this.$router.go(-1);
    },
    // 合并父子数组
    combineArr(Array,menu){
      Array.forEach(item => {
        if(item.childList.length>0){
          menu[item.id+''] = item.name
          this.combineArr(item.childList,menu)
        }else{
          menu[item.id+''] = item.name
        }
      })
    }
  },
  computed: {
    menu() {
      let menu = {'0': '无'};
      this.combineArr(this.$store.state.userData.barList,menu)
      console.log(menu)
      return menu;
    }
  },
  data() {
    return {
      toString: ['parentId', 'authType', 'status'],
      icons: [
        'info', 'error', 'success', 'warning', 'question',
        'tickets', 'document', 'goods', 'sold-out', 'news',
        'message', 'date', 'printer', 'time', 'bell',
        'mobile-phone', 'service', 'view', 'menu', 'star-on',
        'location', 'phone', 'picture', 'delete', 'search',
        'edit', 'rank', 'refresh', 'share', 'setting',
        'upload', 'upload2', 'download', 'loading',
      ],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
      },
    }
  }
}
</script>

