<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="50%"
    @close="close"
    @open="open">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单" prop="parentId">
            <treeselect
              v-model="form.parentId"
              :normalizer="normalizer"
              :options="menuOptions"
              placeholder="选择上级菜单"
              :show-count="true" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="form.menuType">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'F'" :span="24">
          <el-form-item label="菜单图标" prop="icon">
            <el-popover
              popper-class="icon-selector-popper"
              trigger="hover"
              width="292">
              <template #reference>
                <el-input v-model="form.icon" />
              </template>
              <vab-icon-selector @handle-icon="handleIcon" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="0" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'F'" :span="12">
          <el-form-item prop="isFrame">
            <span slot="label">
              <el-tooltip
                content="选择是外链则路由地址需要以`http(s)://`开头"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              是否外链
            </span>
            <el-radio-group v-model="form.isFrame">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'F'" :span="12">
          <el-form-item prop="path">
            <span slot="label">
              <el-tooltip
                content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              路由地址
            </span>
            <el-input v-model="form.path" placeholder="请输入路由地址" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType == 'C'" :span="12">
          <el-form-item prop="component">
            <span slot="label">
              <el-tooltip
                content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              组件路径
            </span>
            <el-input v-model="form.component" placeholder="请输入组件路径" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'M'" :span="12">
          <el-form-item prop="perms">
            <el-input
              v-model="form.perms"
              maxlength="100"
              placeholder="请输入权限标识" />
            <span slot="label">
              <el-tooltip
                content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              权限字符
            </span>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType == 'C'" :span="12">
          <el-form-item prop="query">
            <el-input
              v-model="form.query"
              maxlength="255"
              placeholder="请输入路由参数" />
            <span slot="label">
              <el-tooltip
                content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              路由参数
            </span>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType == 'C'" :span="12">
          <el-form-item prop="query">
            <el-input
              v-model="form.activeMenu"
              maxlength="255"
              placeholder="请输入高亮路由" />
            <span slot="label">
              <el-tooltip content="访问路由的高亮路由显示" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              高亮路由
            </span>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType == 'C'" :span="12">
          <el-form-item prop="isCache">
            <span slot="label">
              <el-tooltip
                content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              是否缓存
            </span>
            <el-radio-group v-model="form.isCache">
              <el-radio :label="1">缓存</el-radio>
              <el-radio :label="0">不缓存</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'F'" :span="12">
          <el-form-item prop="visible">
            <span slot="label">
              <el-tooltip
                content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              显示状态
            </span>
            <el-radio-group v-model="form.visible">
              <el-radio label="10">显示</el-radio>
              <el-radio label="20">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.menuType != 'F'" :span="12">
          <el-form-item prop="status">
            <span slot="label">
              <el-tooltip
                content="选择停用则路由将不会出现在侧边栏，也不能被访问"
                placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              菜单状态
            </span>
            <el-radio-group v-model="form.status">
              <el-radio label="10">正常</el-radio>
              <el-radio label="20">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
  <!--  <el-dialog-->
  <!--    :title="title"-->
  <!--    :visible.sync="dialogFormVisible"-->
  <!--    width="60%"-->
  <!--    @close="close">-->
  <!--    <el-form-->
  <!--      ref="form"-->
  <!--      :inline="true"-->
  <!--      label-width="140px"-->
  <!--      :model="form"-->
  <!--      :rules="rules">-->
  <!--      <el-form-item label="父级Id" prop="parentId">-->
  <!--        <el-input v-model="form.parentId" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="name" prop="name">-->
  <!--        <el-input v-model="form.name" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="路径" prop="path">-->
  <!--        <el-input v-model="form.path" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="vue文件路径" prop="component">-->
  <!--        <el-input v-model="form.component" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="重定向">-->
  <!--        <el-input v-model="form.redirect" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="标题" prop="meta.title">-->
  <!--        <el-input v-model="form.meta.title" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="图标">-->
  <!--        <el-popover-->
  <!--          popper-class="icon-selector-popper"-->
  <!--          trigger="hover"-->
  <!--          width="292">-->
  <!--          <template #reference>-->
  <!--            <el-input v-model="form.meta.icon" />-->
  <!--          </template>-->
  <!--          <vab-icon-selector @handle-icon="handleIcon" />-->
  <!--        </el-popover>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="badge">-->
  <!--        <el-input v-model="form.meta.badge" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="dot">-->
  <!--        <el-switch v-model="form.meta.dot" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="隐藏">-->
  <!--        <el-switch v-model="form.meta.hidden" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="始终显示当前节点">-->
  <!--        <el-switch v-model="form.meta.levelHidden" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="自定义svg图标">-->
  <!--        <el-switch v-model="form.meta.isCustomSvg" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="固定">-->
  <!--        <el-switch v-model="form.meta.noClosable" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="无缓存">-->
  <!--        <el-switch v-model="form.meta.noKeepAlive" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="不显示当前标签页">-->
  <!--        <el-switch v-model="form.meta.tabHidden" />-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--    <template #footer>-->
  <!--      <el-button @click="close">取 消</el-button>-->
  <!--      <el-button type="primary" @click="save">确 定</el-button>-->
  <!--    </template>-->
  <!--  </el-dialog>-->
</template>

<script>
  import menuApi from '@/api/menu'
  import VabIconSelector from '@/extra/VabIconSelector'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'MenuEdit',
    components: { Treeselect, VabIconSelector },
    data() {
      return {
        form: {
          id: undefined,
          parentId: 0,
          menuName: undefined,
          icon: undefined,
          menuType: 'M',
          sort: undefined,
          isFrame: 0,
          path: '',
          component: '',
          perms: '',
          isCache: 0,
          visible: '10',
          status: '10',
          meta: {
            title: '',
            icon: '',
            badge: '',
            dot: '',
            hidden: '',
            levelHidden: '',
            isCustomSvg: '',
            noClosable: '',
            noKeepAlive: '',
            tabHidden: '',
          },
        },
        rules: {
          parentId: [
            { required: true, trigger: 'blur', message: '请输入父级id' },
          ],
          menuName: [
            { required: true, trigger: 'blur', message: '请输入菜单名称' },
          ],
          path: [
            { required: true, trigger: 'blur', message: '请输入路由地址' },
          ],
          component: [
            { required: true, trigger: 'blur', message: '请输入组件路径' },
          ],
          // 'meta.title': [
          //   { required: true, trigger: 'blur', message: '请输入标题' },
          // ],
        },
        title: '',
        dialogFormVisible: false,
        // 菜单树选项
        menuOptions: [],
      }
    },
    methods: {
      handleIcon(item) {
        this.form.icon = item
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = JSON.parse(JSON.stringify(Object.assign({}, row)))
        }
        this.dialogFormVisible = true
      },
      open() {
        this.getTreeselect()
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let res
            if (this.form.id) {
              res = await menuApi.doEdit(this.form)
            } else {
              res = await menuApi.doAdd(this.form)
            }
            this.$baseMessage(res.msg, 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.menuName,
          children: node.children,
        }
      },
      /** 查询菜单下拉树结构 */
      async getTreeselect() {
        const { data: data } = await menuApi.getList()
        this.menuOptions = []
        const menu = { id: 0, menuName: '主类目', children: [] }
        menu.children = this.translateDataToTree(data)
        this.menuOptions.push(menu)
      },
    },
  }
</script>
