<template>
  <div class="drawer_info">
    <div class="drawer_title">{{ dataForm.id ? "修改" : "新增" }}</div>
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      @keyup.enter.native="validateForm('dataForm')"
      class="drawer_list"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item prop="type" label="类型">
            <el-radio-group v-model="dataForm.type">
              <el-radio :label="0">菜单</el-radio>
              <el-radio :label="1">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="name" label="名称">
            <el-input
              v-model="dataForm.name"
              maxlength="100"
              placeholder="请输入名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <!--<el-col :span="24">-->
          <!--<el-form-item prop="menuClassify" label="模块">-->
            <!--<el-select v-model="dataForm.menuClassify" placeholder="请选择对应模块">-->
              <!--<el-option-->
                      <!--v-for="item in options"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
        <!--</el-col>-->

        <el-col :span="24">
          <el-form-item prop="parentName" label="上级菜单" class="menu-list">
            <el-popover
              v-model="menuListVisible"
              ref="menuListPopover"
              placement="bottom-start"
              trigger="click"
            >
              <el-tree
                :data="menuList"
                :props="{ label: 'name', children: 'children' }"
                node-key="id"
                ref="menuListTree"
                :highlight-current="true"
                :expand-on-click-node="false"
                accordion
                @current-change="menuListTreeCurrentChangeHandle"
              >
              </el-tree>
            </el-popover>
            <el-input
              v-model="dataForm.parentName"
              v-popover:menuListPopover
              :readonly="true"
            >
              <i
                v-if="dataForm.pid !== '0'"
                slot="suffix"
                @click.stop="deptListTreeSetDefaultHandle()"
                class="el-icon-circle-close el-input__icon"
              ></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="dataForm.type === 0" prop="url" label="路由">
            <el-input
              v-model="dataForm.url"
              maxlength="100"
              placeholder="请输入路由"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="sort" label="排序">
            <el-input-number
              v-model="dataForm.sort"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="permissions" label="授权标识">
            <el-input
              v-model="dataForm.permissions"
              maxlength="100"
              placeholder="请输入授权标识"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="dataForm.type === 0"
            prop="icon"
            label="图标"
            class="icon-list"
          >
            <el-popover
              v-model="iconListVisible"
              ref="iconListPopover"
              placement="bottom-start"
              trigger="click"
              popper-class="mod-sys__menu-icon-popover"
            >
              <div class="mod-sys__menu-icon-inner">
                <div class="mod-sys__menu-icon-list">
                  <el-button
                    v-for="(item, index) in iconList"
                    :key="index"
                    @click="iconListCurrentChangeHandle(item)"
                    :class="{ 'is-active': dataForm.icon === item }"
                  >
                    <svg class="icon-svg" aria-hidden="true">
                      <use :xlink:href="`#${item}`"></use>
                    </svg>
                  </el-button>
                </div>
              </div>
            </el-popover>
            <el-input
              v-model="dataForm.icon"
              v-popover:iconListPopover
              :readonly="true"
              placeholder="请选择图标"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save_btn">
      <el-button type="primary" @click="validateForm('dataForm')"
        >提交</el-button
      >
      <el-button plain @click="resetForm('dataForm')">重置</el-button>
    </div>
  </div>
</template>

<script>
import { getIconList } from "@/utils";
export default {
  data() {
    return {
      options: [{
        value: 1,
        label: 'PC模块'
      }, {
        value: 2,
        label: 'APP模块'
      },],
      value: '',

      id: "",
      menuList: [],
      iconList: [],
      menuListVisible: false,
      iconListVisible: false,
      dataForm: {
        id: "",
        type: 0,
        name: "",
        pid: "0",
        parentName: "一级菜单",
        url: "",
        permissions: "",
        sort: 0,
        icon: "",
        menuClassify:1,
      },
    };
  },
  computed: {
    dataRule() {
      return {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        menuClassify:[
          {
            required: true,
            message: "请选择模块",
            trigger: "change",
          },
        ],
        parentName: [
          {
            required: true,
            message: "请选择一级菜单",
            trigger: "change",
          },
        ],
      };
    },
  },
  created() {
    this.iconList = getIconList();
    this.getMenuList();
  },
  methods: {
    init() {
      this.resetForm("dataForm");
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/sys/menu/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data,
        };
        if (this.dataForm.pid === "0") {
          return this.deptListTreeSetDefaultHandle();
        }
        this.$refs.menuListTree.setCurrentKey(this.dataForm.pid);
      });
    },
    getMenuList() {
      return this.$http.get("/sys/menu/list?type=0").then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.menuList = res.data;
      });
    },
    // 上级菜单树, 设置默认值
    deptListTreeSetDefaultHandle() {
      this.dataForm.pid = "0";
      this.dataForm.parentName = this.$t("menu.parentNameDefault");
    },
    // 上级菜单树, 选中
    menuListTreeCurrentChangeHandle(data) {
      this.dataForm.pid = data.id;
      this.dataForm.parentName = data.name;
      this.menuListVisible = false;
    },
    // 图标, 选中
    iconListCurrentChangeHandle(icon) {
      this.dataForm.icon = icon;
      this.iconListVisible = false;
    },
    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataForm.id = this.id;
    },
    //表单验证
    validateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitForm();
        } else {
          return false;
        }
      });
    },
    // 表单提交
    submitForm() {
   //   console.log('111111111111111111', this.dataForm)
      this.$http[!this.dataForm.id ? "post" : "put"](
        "/sys/menu",
        this.dataForm
      ).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.$emit("refreshDataList");
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });

    },
  },
};
</script>

<style lang="scss">
.customWidth.alert {
  width: 50%;
  .el-dialog__title {
    border-left: 4px solid #ddd;
    padding-left: 8px;
    border-color: #5776e6;
  }
}
.mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}
</style>
