<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="父级菜单" prop="parentMenuId">
            <el-select
              v-model="form.parentMenuId"
              placeholder="请选择菜单类型"
              clearable
              size="small"
              :disabled="isView"
            >
              <el-option
                v-for="item in listData"
                :key="item.id"
                :label="item.menuName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input
              v-model="form.menuName"
              placeholder="请输入菜单名称"
              clearable
              size="small"
              :disabled="isView"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单编码" prop="menuCode">
            <el-input
              v-model="form.menuCode"
              placeholder="请输入菜单编码"
              clearable
              size="small"
              :disabled="isView"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单地址" prop="url">
            <el-input
              v-model="form.url"
              placeholder="请输入菜单地址"
              clearable
              size="small"
              :disabled="isView"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="type">
            <el-select
              v-model="form.type"
              placeholder="请选择菜单类型"
              clearable
              size="small"
              :disabled="isView"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单icon" prop="icon">
            <el-select
              v-model="form.icon"
              size="medium"
              filterable
              placeholder="请选择图标"
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="icon in iconList"
                :key="icon"
                :label="icon"
                :value="icon"
              >
                <div class="flex align-items-c">
                  <i
                    :class="[icon, { iconfont: !icon.includes('el-icon') }]"
                    class="mr10"
                  ></i>
                  <span>{{ icon }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!isView">
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="submitForm"
        >确 定</el-button
      >
      <el-button size="small" @click="handleClose">取 消</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
      <el-button size="small" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMenu, getMenuList, updateMenu } from '@/api/system/menu'

export default {
  name: 'MenuDialog',
  props: {
    title: {
      type: String,
      default: '添加菜单'
    },
    visible: {
      type: Boolean,
      default: false
    },
    menuData: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isView: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      form: {
        menuName: '',
        menuCode: '',
        url: '',
        parentMenuId: '',
        type: ''
      },
      rules: {
        menuCode: [
          { required: true, message: '请输入菜单编码', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        url: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
      },
      typeOptions: [{ value: 0, label: '菜单' }, { value: 1, label: '接口' }],
      loading: false,
      iconList: [
        'el-icon-user-solid',
        'el-icon-bangzhu',
        'el-icon-orange',
        'el-icon-lock',
        'el-icon-setting',
        'el-icon-camera-solid',
        'el-icon-video-camera-solid',
        'el-icon-bell',
        'el-icon-map-location',
        'el-icon-picture-outline',
        'el-icon-picture',
        'el-icon-document',
        'el-icon-document-add',
        'el-icon-printer',
        'el-icon-share',
        'el-icon-delete-solid',
        'el-icon-delete',
        'el-icon-search',
        'el-icon-edit',
        'el-icon-edit-outline',
        'el-icon-refresh',
        'el-icon-refresh-left',
        'el-icon-refresh-right',
        'el-icon-circle-plus',
        'el-icon-circle-plus-outline',
        'el-icon-remove',
        'el-icon-remove-outline',
        'el-icon-circle-check',
        'el-icon-circle-check-solid',
        'el-icon-circle-close',
        'el-icon-circle-close-solid',
        'el-icon-top',
        'el-icon-bottom',
        'el-icon-right',
        'el-icon-back',
        'el-icon-d-arrow-left',
        'el-icon-d-arrow-right',
        'el-icon-sort',
        'el-icon-sort-up',
        'el-icon-sort-down',
        'icon-zhuye',
        'icon-dingwei',
        'icon-notebook',
        'el-icon-s-custom',
        'icon-dengpao1',
        'icon-guizeshezhi'
      ]
    }
  },
  watch: {
    menuData: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.form = { ...val }
        }
      },
      immediate: true
    }
  },
  created() {
    this.getMenuListData()
  },
  methods: {
    // 获取菜单列表
    getMenuListData() {
      this.loading = true
      const params = { ...this.queryParams }

      getMenuList(params)
        .then(response => {
          this.listData = response.content.content || []
          this.clearForm()
        })
        .catch(error => {
          this.$message.error('获取菜单列表出错', error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.$emit('update:visible', false)
      this.clearForm()
    },
    submitForm() {
      // 查看模式下不允许提交
      if (this.isView) {
        return
      }

      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const submitData = { ...this.form }

          // 根据是否是编辑模式调用不同的API
          const apiRequest = this.isEdit
            ? updateMenu(submitData)
            : addMenu(submitData)

          apiRequest
            .then(() => {
              this.$message.success(this.isEdit ? '修改成功' : '添加成功')
              this.$emit('submit', submitData)
              this.handleClose()
              this.form = {}
            })
            .catch(() => {
              this.$message.error(this.isEdit ? '修改菜单出错' : '添加菜单出错')
            })
            .finally(() => {
              this.loading = false
              this.clearForm()
            })
        }
      })
    },
    clearForm() {
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
</style>
