<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    :visible.sync="visibleProxy"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="600px"
    @closed="onClosed"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="110px">
      <el-form-item :label="$t(`${pre}.category_name`)" prop="name">
        <el-input
          v-model="form.name"
          :placeholder="$t(`${pre}.placeholder_category_name`)"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t(`${pre}.parent_category`)" prop="parent_id">
        <el-cascader
          v-model="form.parent_id"
          :options="cascaderOptions"
          :props="{
            value: 'id',
            label: 'name',
            expandTrigger: 'hover',
            checkStrictly: true
          }"
        />
      </el-form-item>
      <el-form-item :label="$t(`${pre}.view_permission`)" prop="role_ids">
        <el-select v-model="form.role_ids" multiple :placeholder="$t(`${pre}.please_select`)">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="String(item.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t(`${pre}.sort`)" prop="sort">
        <el-input-number v-model="form.sort" :min="0" :max="10" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">{{ $t(`${pre}.cancel`) }}</el-button>
      <el-button type="primary" size="small" :loading="loading" @click="handleSubmit">
        {{ dialogStatus === 'create' ? $t(`${pre}.confirm`) : $t(`${pre}.update`) }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
const TOP_CATEGORY = { id: 0, name: '' }

export default {
  name: 'CategoryDialog',
  props: {
    visible: { type: Boolean, default: false },
    categoryTree: { type: Array, default: () => [] },
    roleList: { type: Array, default: () => [] },
    pre: { type: String, required: true }
  },
  data () {
    return {
      dialogStatus: 'create',
      loading: false,
      editId: null,
      form: this.getDefaultForm(),
      rules: {
        name: [{ required: true, message: this.$t(`${this.pre}.category_name_required`), trigger: 'blur' }]
      }
    }
  },
  computed: {
    visibleProxy: {
      get () { return this.visible },
      set (val) { this.$emit('update:visible', val) }
    },
    textMap () {
      return {
        create: this.$t(`${this.pre}.dialog_create_title`),
        update: this.$t(`${this.pre}.dialog_edit_title`)
      }
    },
    cascaderOptions () {
      const top = { ...TOP_CATEGORY, name: this.$t(`${this.pre}.top_category`) }
      return [top].concat(this.categoryTree)
    }
  },
  methods: {
    getDefaultForm () {
      return { name: undefined, parent_id: undefined, sort: 0, role_ids: [] }
    },
    openCreate () {
      this.dialogStatus = 'create'
      this.form = this.getDefaultForm()
      this.$nextTick(() => {
        if (this.$refs.form) this.$refs.form.clearValidate()
      })
    },
    openEdit (row) {
      this.dialogStatus = 'update'
      this.editId = row.id
      this.form = {
        name: row.name,
        parent_id: row.parent_id != null ? [row.parent_id] : [],
        role_ids: row.role_ids || [],
        sort: row.sort || 0
      }
      this.$nextTick(() => {
        if (this.$refs.form) this.$refs.form.clearValidate()
      })
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.loading = true
        this.$emit('submit', {
          status: this.dialogStatus,
          id: this.editId,
          form: { ...this.form }
        })
        this.loading = false
      })
    },
    onClosed () {
      this.form = this.getDefaultForm()
    },
    close () {
      this.$emit('update:visible', false)
    }
  }
}
</script>
