<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" @cancel="onCancel" @confirm="onConfirm" width="600px">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row type="flex" justify="center">
        <app-filter-item :span="24" label="字典项名称" prop="name">
          <el-input v-model="form.name" clearable placeholder="请输入" />
        </app-filter-item>
      </el-row>
      <el-row type="flex" justify="center">
        <app-filter-item :span="24" label="字典项编码" prop="key">
          <el-input v-model="form.key" v-pinyin="form.name" clearable placeholder="请输入" :disabled="form.id ? true : false" />
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/dict.js';
export default {
  name: 'SubDimensionDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
    parent: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        name: '',
        key: '',
        typeId: '',
        parentId: '',
        type: 'dic',
      },
      rules: {
        name: [{ required: true, message: '字典项名称不能为空' }],
        key: [{ required: true, message: '字典项编码不能为空' }],
      },
      loading: false,
    };
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            await API.saveMultiDictItem(this.form);
            this.$message.success('操作成功');
            this.onCancel();
            this.$emit('confirm');
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .app-dialog-content {
  height: 28vh !important;
}
</style>
