<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="请输入职务名称">
                <template #append>
                  <el-button icon="el-icon-s-check" size="mini" type="primary" @click="selectJob" />
                </template>
              </el-input>
            </app-filter-item>
            <app-filter-item :span="13" label="岗位名称" prop="jobName">
              <el-input v-model="form.jobName" clearable placeholder="请输入岗位名称" />
            </app-filter-item>
            <app-filter-item :span="13" label="岗位编码" prop="jobCode">
              <el-input v-model="form.jobCode" v-pinyin="form.jobName" clearable placeholder="请输入岗位编码" />
            </app-filter-item>
          </el-row>
        </div>
      </el-form>
    </div>
    <source-selector v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onAddConfirm" />
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import DICT from '@/utils/dict';
import SourceSelector from '@/views/featuresArithmetic/hrDataManager/positionCompany/SourceSelector.vue';

export default {
  name: 'CompanyDialog',
  components: { SourceSelector },
  mixins: [dialogMixin],
  props: {},
  data() {
    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '选择',
    };
    return {
      ...DIALOG_CONFIG,
      DICT,
      form: {
        name: '',
        jobName: '',
        jobCode: '',
      },
      rules: {
        name: [{ required: true, message: '职务名称不能为空' }],
        jobName: [{ required: true, message: '职务别名不能为空' }],
        jobCode: [{ 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();
      });
    },
    // 职务名称选择按钮
    selectJob() {
      this.dialogTitle = '选择职务';
      this.dialogVisible = true;
    },
    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;
}
</style>
