<template>
  <el-dialog :visible.sync="visible" :before-close="cancelDialog" width="700px">
    <el-divider />
    <label slot="title" style="float: left;">{{ dialogTitle }}</label>

    <el-row>
      <el-form ref="form" :inline="true" :model="form" :rules="formRules" label-suffix="：" label-width="100px">
        <el-form-item label="菜单类型" prop="resourceType">
          <el-radio-group v-model="form.resourceType" size="mini" style="width: 178px">
            <el-radio-button label="1">目录</el-radio-button>
            <el-radio-button label="2">菜单</el-radio-button>
            <el-radio-button label="3">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.resourceType !== '3'" label="菜单图标" prop="icon">
          <el-input v-model="form.icon" style="width: 250px;" placeholder="输入图标代码,左侧图标预览">
            <template slot="prepend"><i :class="form.icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item v-show="form.resourceType !== '3'" label="外链菜单" prop="link">
          <el-radio-group v-model="form.link" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.resourceType === '2'" label="菜单缓存" prop="cache">
          <el-radio-group v-model="form.cache" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.resourceType !== '3'" label="是否显示" prop="hidden">
          <el-radio-group v-model="form.hidden" size="mini">
            <el-radio-button label="false">是</el-radio-button>
            <el-radio-button label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.resourceType!== '3'" label="菜单标题" prop="name">
          <el-input v-model="form.name" :style=" form.resourceType === '1' ? 'width: 500px' : 'width: 178px'" placeholder="菜单标题" />
        </el-form-item>
        <el-form-item v-if="form.resourceType === '3'" label="按钮名称" prop="name">
          <el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-show="form.resourceType !== '1'" label="权限标识" prop="permission">
          <el-input v-model="form.permission" :disabled="form.link" placeholder="权限标识" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-if="form.resourceType !== '3'" label="路由地址" prop="path">
          <el-input v-model="form.path" placeholder="路由地址" style="width: 500px;" />
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-show="!form.link && form.resourceType === '2'" label="组件名称" prop="componentName">
          <el-input v-model="form.componentName" style="width: 178px;" placeholder="组件名称" />
        </el-form-item>
        <el-form-item v-show="!form.link && form.resourceType === '2'" label="组件路径" prop="componentPath">
          <el-input v-model="form.componentPath" style="width: 500px;" placeholder="组件路径" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" style="width: 500px;" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="上级类目" prop="parentId">
          <el-cascader
            v-model="form.parentId"
            style="width: 500px;"
            :options="options"
            :props="{ checkStrictly: true,expandTrigger: 'hover' }"
            :show-all-levels="false"
            clearable
          />
        </el-form-item>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-divider />
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import resourceApi from '@/api/platform/resourceApi'

export default {
  name: 'EditJobDialog',
  props: {
    dialogTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {
        return {
          id: '',
          name: '',
          parentId: '',
          componentName: '',
          sort: 0,
          componentPath: '',
          path: '',
          resourceType: '',
          permission: '',
          icon: '',
          cache: false,
          hidden: false,
          link: false,
          remarks: ''
        }
      }
    }
  },
  data() {
    return {
      options: [],
      formRules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }]
      }
    }
  },
  watch: {
    'form.parentId': {
      handler(val) {
        if (val !== null) {
          if (val.length !== 0) {
            if (val[val.length - 1] === this.form.id) {
              if (this.form.id === '') { // 防止关闭弹框时弹出提示
                return
              }
              this.$message('上级不能选为自己')
              this.form.parentId = ''
            }
          }
        }
      },
      immediate: true
    },
    visible(val) {
      if (val === true) {
        this.form.parentId = this.getNodePathArray(this.options, this.form.parentId, [])
      }
    }
  },
  mounted() {
    resourceApi.nodes().then(data => {
      this.options = data
    })
  },
  methods: {
    // 根据节点树（data）,父节点id，查找父节点节点路径，以数组返回。如节点路径为1-2，则返回['1','2']
    // indexArray在使用时传入空数组即可
    getNodePathArray(data, id, indexArray) {
      const arr = Array.from(indexArray)
      for (let i = 0, len = data.length; i < len; i++) {
        arr.push(data[i].value)
        if (data[i].value === id) {
          return arr
        }
        const children = data[i].children
        if (children && children.length) {
          const result = this.getNodePathArray(children, id, arr)
          if (result) {
            return result
          }
        }
        arr.pop()
      }
      return false
    },
    cancelDialog() {
      this.form = {
        id: '',
        name: '',
        parentId: '',
        componentName: '',
        sort: 0,
        componentPath: '',
        path: '',
        resourceType: '',
        permission: '',
        icon: '',
        cache: false,
        hidden: false,
        link: false,
        remarks: ''
      }
      this.$refs['form'].resetFields()
      this.$emit('cancelDialog', false)
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        // 将数组parentId转为字符串
        if (this.form.parentId !== null) {
          if (this.form.parentId.length !== 0) {
            this.form.parentId = this.form.parentId[this.form.parentId.length - 1]
          }
        }
        if (Array.isArray(this.form.parentId)) { // 防止向后台传递数组类型的数据导致报错
          this.form.parentId = ''
        }
        resourceApi.saveOrUpdate(this.form).then(data => {
          this.$refs['form'].resetFields()
          this.$emit('cancelDialog', false)
          this.$emit('refresh')
        })
      })
    }
  }
}

</script>
<style>
</style>
