<script setup>
import { ref } from 'vue';

const props = defineProps({
  isShow: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: '',
  },
  title_icon: {
    type: String,
    default: '',
  },
  dialogWidth: {
    type: String,
    default: '550px',
  },
  //显示必填
  isHideRequired: {
    type: Boolean,
    default: false,
  },
  //form 数据
  formData: {
    type: Object,
    default: {},
  },
  //form 规则
  formRules: {
    type: Object,
    default: {},
  },
  //表单key数组 { label：对应的名称,prop：规则的key, type: input支持的类型 默认input,placeholder}
  keysArr: {
    type: Array,
    default: [],
  },
  /* select的数据 {name,value}格式 */
  selectArr: {
    type: Array,
    default: [],
  },
  confimTxt: {
    type: Array,
    default: ['保存', '取消'],
  },
});

const emits = defineEmits(['cancel','ensureCallBack'])

const diaFormRef=ref(null)

const cancelHandle=()=>{
  diaFormRef.value.resetFields();
  emits('cancel');
}
const saveHandle=()=>{
  diaFormRef.value.validate((valid) => {
    if (valid) {
      emits('ensureCallBack', props.formData, props.title);
    }
  });
}

</script>

<template>
  <!-- 公用弹窗组件 根据实际自行追加具体type 通用input -->
  <el-dialog
    :model-value="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    class="public-dialog"
    center
    :width="dialogWidth"
    v-dialogDrag
  >
    <template #header>
      <div style="display: flex; align-items: center">
        <img
          :src="$icons.title_icon"
          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
          v-if="title_icon"
        />
        <span style="font-size: 16px">{{ title }}</span>
      </div>
    </template>

    <el-form
      ref="diaFormRef"
      class="form-cont"
      label-position="left"
      :hide-required-asterisk="isHideRequired"
      label-width="82px"
      :model="formData"
      :rules="formRules"
    >
      <el-form-item
        v-for="(item, index) in keysArr"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        width="100%"
      >
        <el-input
          v-if="item.type === 'input'"
          :maxlength="item.maxlen"
          v-model.trim="formData[item.prop]"
          :placeholder="item.placeholder"
        />
        <el-select
          v-model="formData[item.prop]"
          :placeholder="item.placeholder"
          style="width: 80%;"
          v-else-if="item.type === 'select'"
          :multiple="item.multiple"
          clearable>
          <el-option v-for="Type in selectArr" :key="Type.value" :label="Type.name" :value="Type.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dia-bot">
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="saveHandle"
        >{{ confimTxt[0] }}</el-button
      >
      <el-button type="primary" plain @click="cancelHandle">{{
        confimTxt[1]
      }}</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.public-dialog {
  .el-form-item__content {
    margin-left: 0;
  }
  .form-cont {
    padding-left: 50px;
  }
  .el-input {
    width: 80%;
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
