<template>
  <syCommonDialog
    :visible="visible"
    type="element"
    :elementDialogProps="{
      title: '重命名',
    }"
    :btnConfig="{
        type: 'noBorder',
        btns: [{
            name: '取消',
            disabled: false,
            loading: false,
            type: 'default' as const,
          },
          {
              name: '确定',
              disabled: false,
              loading: false,
              type: 'primary' as const,
          }
        ],
        btnFunctions: [{
            name: '取消',
            async click(){
                return true;
            },
        }, {
            name: '确定',
            click:async () => {
                if(model.name === '') {
                    return false;
                }
                return confirmRename(model.name);
            },
        }]
      }"
    showMask
    @closePopup="$emit('update:visible', false)"
  >
    <ElForm :rules="rules" :model="model">
      <CustomizeFormItem prop="name">
        <syDialogInput
          style="width: 100%"
          v-model:value="model.name"
          :placeholder="placeholder"
          maxLength="30"
        ></syDialogInput>
      </CustomizeFormItem>
    </ElForm>
  </syCommonDialog>
</template>

<script setup lang="ts">
import { syCommonDialog, syDialogInput } from "cqk-sy-ui";
import { reactive, watch } from "vue";
import { ElForm } from "element-plus";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";

const props = defineProps<{
  oldName: string;
  visible: boolean;
  placeholder?: string;
  confirmRename: (name: string) => Promise<boolean>;
}>();
defineEmits<{ (e: "update:visible", visible: boolean): void }>();

const rules = {
  name: [
    {
      required: true,
      message: "请输入专辑名",
    },
  ],
};
const model = reactive({
  name: "",
});

watch(
  () => props.visible,
  (newV) => {
    if (newV) {
      model.name = props.oldName;
    }
  }
);
</script>

<style></style>
