<template>
  <el-dialog
    :title="$t('form.new_menu')"
    :visible.sync="menuVisible"
    width="40%"
    :before-close="handleCloseMenu"
    :append-to-body="true"
  >
    <span>
      <el-form
        label-width="120px"
        :model="menuParams"
        ref="menuParams"
        :rules="menuRules"
      >
        <el-form-item :label="$t('form.menu_name')" prop="name">
          <el-input
            v-model="menuParams.name"
            size="small"
            :placeholder="$t('placeholder.name')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('form.superior_menu')">
          <el-select
            v-model="menuParams.superior"
            size="small"
            :placeholder="$t('placeholder.select')"
          >
            <el-option
              v-for="item in menuOption"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseMenu" size="small">{{
        $t('btns.cancel')
      }}</el-button>
      <el-button type="primary" size="small" @click="saveMenu('menuParams')">{{
        $t('btns.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { nameCheck } from '@/utils/utils.js'
import { getAllMenu } from '@/service/CommontoolsAPI.js'
import { createMenu } from '@/service/FormApi.js'
import { createViewMenu } from '@/service/ViewApi.js'
export default {
  name: 'CreateMenu',
  data() {
    return {
      menuRules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: 'blur' },
        ],
      },
      menuVisible: false,
      menuParams: {
        id: '',
        name: '',
        superior: '',
      },
      menuOption: [], // 上级菜单数组
    }
  },
  props: {
    formId: String,
    viewId: String,
    type: String, // 属于表单还是视图
  },
  methods: {
    /**
     * 显示菜单对话框
     */
    showCreateDialog() {
      this.menuVisible = true
      this.getAllMenu()
    },

    /**
     * 关闭创建菜单对话框
     */
    handleCloseMenu() {
      let menuParams = {
        id: '',
        name: '',
        superior: '',
      }
      this.menuParams = menuParams
      this.menuVisible = false
      this.$refs['menuParams'].resetFields()
    },

    /**
     * 创建菜单
     */
    saveMenu(menuParams) {
      this.$refs[menuParams].validate((valid) => {
        if (valid) {
          if (this.type == 'form') {
            let params = {
              appId: sessionStorage.getItem('appId'),
              id: this.formId,
            }
            createMenu(this.menuParams, params, {
              onSucess: (response) => {
                if (response.data.errcode == 0) {
                  this.handleCloseMenu()
                  this.$message({
                    message: this.$t('msg.created_ss'),
                    type: 'success',
                  })
                }
              },
            })
          } else if(this.type == 'view') {
            let viewParams = {
              appId: sessionStorage.getItem('appId'),
              id: this.viewId,
            }
            createViewMenu(viewParams, this.menuParams, {
              onSucess: (response) => {
                if (response.data.errcode == 0) {
                  this.$message({
                    message: this.$t('msg.created_ss'),
                    type: 'success',
                  })
                  this.handleCloseMenu()
                }
              },
            })
          }
        } else {
          return false
        }
      })
    },

    /**
     * 获取上级菜单
     */
    getAllMenu() {
      getAllMenu(
        {
          applicationId: sessionStorage.getItem('appId'),
          currentMenuId: '',
          type: '',
          showType: 'old',
        },
        {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              this.menuOption = response.data.data
            }
          },
        }
      )
    },
  },
}
</script>
<style lang='less' scoped>
</style>