<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form ref="menuForm" :model="form" label-width="110px" size="small" :rules="rules">
        <el-form-item label="MenuName" prop="MenuName">
          <el-input v-model="form.MenuName" />
        </el-form-item>
        <el-form-item label="Route Name">
          <el-input v-model="form.RouteName" />
        </el-form-item>
        <el-form-item label="Component">
          <el-input v-model="form.Component" />
        </el-form-item>
        <el-form-item label="Redirect">
          <el-input v-model="form.Redirect" />
        </el-form-item>
        <el-form-item label="Path">
          <el-input v-model="form.Path" />
        </el-form-item>
        <el-form-item label="Title">
          <el-input v-model="form.MetaTitle" />
        </el-form-item>
        <el-form-item label="Breadcrumb">
          <el-switch
            v-model="form.MetaBreadcrumb"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="Icon">
          <el-select v-model="form.MetaIcon">
            <el-option
              v-for="(value,index) in iconOptions"
              :key="index"
              :label="value"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Active Menu">
          <el-input v-model="form.MetaActiveMenu" />
        </el-form-item>
        <el-form-item label="Function Name">
          <el-input v-model="form.FunctionName" />
        </el-form-item>
        <el-form-item label="Description">
          <el-input v-model="form.Note" />
        </el-form-item>
        <el-form-item label="Hidden">
          <el-switch
            v-model="form.Hidden"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="Show Order">
          <el-input v-model="form.ShowOrder" type="number" />
        </el-form-item>
        <el-form-item label="Status">
          <el-switch
            v-model="form.Status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="loading" size="small" type="primary" @click="model_cfg.visible = false">Cancel</el-button>
      <el-button size="small" type="primary" :loading="loading" @click="handleSave()">Save</el-button>
    </template>
  </base-model>

</template>
<script>
import { addOrUpdateMenu } from '@/api/admin'
import { model_cfg } from '../menu'
import BaseModel from '@/components/BaseModel'
export default {
  components: { BaseModel },
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      model_cfg,
      iconOptions: ['dashboard', 'user', 'trial', 'statistics', 'financials', 'dictionary', 'admin'],
      rules: { MenuName: [{ required: true, message: 'Please specify', trigger: 'blur' }] },
      loading: false
    }
  },
  methods: {
    handleSave() {
      this.$refs.menuForm.validate(valid => {
        if (!valid) return
        this.model_cfg.showClose = false
        const param = JSON.parse(JSON.stringify(this.form))
        param.MetaBreadcrumb = !!param.MetaBreadcrumb
        param.Hidden = !!param.Hidden
        this.loading = true
        addOrUpdateMenu(param).then(res => {
          const message = param.Id ? 'Updated successfully' : 'Appended successfully'
          param.Id = res.Result
          this.$message.success(message)
          this.$emit('close', param)
          this.loading = false
          this.model_cfg.showClose = true
        }).catch(() => {
          this.loading = false
          this.model_cfg.showClose = true
        })
      })
    }
  }
}
</script>
