<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="app-dialog-content" width="50%"
              @cancel="onCancel" @confirm="onConfirm"
  >
    <div ref="scroll-box" class="h-100 overflow-y pr-10 demo" style="scroll-behavior: smooth">
      <el-form ref="form" :inline="false" :model="form" :rules="rules" class="demo-form ml-50 mr-50"
               label-width="100px"
      >
        <el-divider content-position="left"><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span class="divider-top">职务信息</span>
        </el-divider>
        <div class="form-content ml-120">
          <el-row :gutter="15">
            <app-filter-item :span="13" label="职务名称" prop="name">
              <el-input v-model="form.name" clearable placeholder="请输入名称" />
            </app-filter-item>
            <app-filter-item :span="13" label="职务别名" prop="alias">
              <el-input v-model="form.alias" v-pinyin="form.name" clearable placeholder="请输入职务别名" />
            </app-filter-item>
            <app-filter-item :span="13" label="职务等级" prop="grade">
              <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
            </app-filter-item>
            <app-filter-item :span="24" label="描述" prop="description">
              <el-input v-model="form.description" placeholder="请输入描述" type="textarea" />
            </app-filter-item>
          </el-row>
        </div>
      </el-form>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import DICT from '@/utils/dict';

export default {
  name: 'CompanyDialog',
  mixins: [dialogMixin],
  props: {},
  data() {
    return {
      DICT,
      form: {
        name: '',
        alias: '',
        grade: '',
        description: '',
      },
      rules: {
        name: [{ required: true, message: '职务名称不能为空' }],
        alias: [{ required: true, message: '职务别名不能为空' }],
        grade: [{ required: true, message: '职务等级不能为空' }],
      },
      loading: false,
    };
  },
  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) {
          // const params = this.handleParams()
          // try {
          //   this.loading = true
          //   if (this.data?.id) {
          //     await updateData(params)
          //   } else {
          //     await dataAdd(params)
          //   }
          //   this.$message.success('操作成功')
          //   this.onCancel()
          this.loading = true;
          this.$emit('confirm', { ...this.form });
          // } finally {

          // }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 18px !important;
  }

  .el-input__suffix {
    right: 0;
  }
}

.demo-form {
  border: solid 1px #eff0f5;
}

.demo {
  //border: solid 0.5px #eff0f5;
  //width: 100%;
  //margin: 0 auto;
}

//.app-dialog-content {
//  border: solid 1px gold;
//}
</style>
