<template>
  <!-- 弹出框表单 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24" v-if="form.parentId !== 0">
          <el-form-item label="上级节点" prop="parentId">
            <treeselect
                v-model="form.parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                placeholder="选择上级菜单信息"
            />
          </el-form-item>
        </el-col>
        <!--<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="url" v-model="form.url" />
        <Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' />
        <Field class="radio-group-container" label="图标" prop="imgPath" :span='24'>
          <el-radio-group v-model="form.imgPath" class='form-el-radio-group'>
            <el-radio-button style="width: 180px" label="">不需要图标</el-radio-button>
            <el-radio-button style="width: 180px" v-for='(icon, index) in icons' :key='index' :label="icon">
              <i :class="'el-icon-'+icon" style="font-size: 20px"></i>
              {{icon}}
            </el-radio-button>
          </el-radio-group>
        </Field>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios'
export default {
  mixins: [form],
  components: {
    Treeselect,
  },
  data() {
    return {
      fileContent:"",
      id:null,
      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',
      ],
      menuOptions: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "菜单信息",
      // 是否显示弹出层
      open: false,
      toString:[
        "status",
        "linkType",
        "commMenu",
        "menuType",
        "authType",
      ],
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    axios.get('/icon.txt')
        .then(response => {
          this.fileContent = response.data
          this.icons = this.fileContent.split('\n')
        })
  },
  methods: {
    /** 编辑 */
    edit(row, menuOptions) {
      this.reset()
      this.query = { id: row.id };
      this.urls.currUrl =this.pageInfo.editUrl;;
      this.getData();
      this.menuOptions = menuOptions;
      this.title = "修改菜单信息";
    },
    /** 新增 */
    add(row, menuOptions) {
      this.reset()
      this.query = { id: row.id };
      this.urls.currUrl = this.pageInfo.addUrl;
      this.getData();
      if(row.id){
        this.id=row.id
        this.form.parentId=row.id
      }
      this.menuOptions = menuOptions;
      this.title = "新增菜单信息";
    },
    /** 查看*/
    view(row, menuOptions) {
      this.query = { id: row.id };
      this.urls.currUrl =this.pageInfo.viewUrl;;
      this.getData();
      this.menuOptions = menuOptions;
      this.title = "菜单信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      if(this.id){
        this.form.parentId=this.id
      }
      this.open = true;
    },
    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    /** 转换菜单信息数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form = {
        name : "",
        url : null,
        ancestors : null,
        parentId : null,
        orderId : null,
        status : 1,
        linkType : 0,
        groupId : 1,
        groupName : null,
        imgPath : null,
        buttonImgPath : null,
        imgCommPath : null,
        commMenu : 0,
        menuType : 0,
        authType : 3,
        createUserName : null,
      };

    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        console.log("重置表单")
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>

<style lang="scss">
.ml-row {
  margin-bottom: 5px;
}

.el-radio-button__inner {
  // width: 82px;
  height: 36px;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid rgba(0, 0, 0, 0) !important;
  border-radius: 2px !important;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  font-weight: 400;
  color: #606677;
  line-height: 14px;
  outline: none;
  box-shadow: none;
}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #3E7BFA !important;
  color: #3E7BFA;
  line-height: 14px;
  outline: none;
  box-shadow: none;
}

.ml-top-button {
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0);
  font-size: 16px;
  margin: 0 10px 0 10px;
}
</style>
