<script lang="ts" setup>
import { ref, watch } from 'vue';

interface Props {
  modelValue: boolean;
  formRef: any;
  formData: AutoCampaignRule;
}

const props = defineProps<Props>();
const emits = defineEmits(['update:modelValue', 'submit']);

const selectedOption = ref(1);
const form = ref({
  templateName: ''
});
const rules = {
  templateName: [
    { required: true, message: '请输入不大于150个字符的模板名称', trigger: 'blur' },
  ]
};

const dialogVisible = ref(props.modelValue);

watch(() => props.modelValue, (newValue) => {
  dialogVisible.value = newValue;
  //console.log(dialogVisible.value, newValue);
});

function handleSave() {
  props.formData.templateName=form.value.templateName;
  props.formRef.validate((valid: boolean) => {
    if (valid) {
      emits('submit');
      dialogVisible.value = false;
    } else {
      console.log('验证失败');
    }
  });
}

function handleCancel() {
  dialogVisible.value = false;
}

watch(dialogVisible, (newValue) => {
  emits('update:modelValue', newValue);
});
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      align-center
      title="保存"
      width="30%"
  >
    <div>
      <el-radio-group v-model="selectedOption">
        <div style="display: block;">
          <el-radio :label="1">仅应用于当前广告活动</el-radio>
        </div>
        <div style="display: block;">
          <el-radio :label="2">应用于当前活动且保存为模板</el-radio>
        </div>
      </el-radio-group>
    </div>
    <div v-if="selectedOption === 2">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item class="custom-form-item" label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" maxlength="150" placeholder="请输入不大于150个字符的字符" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-radio-group {
  display: inline-flex;
  font-size: 0;
  flex-direction: column;
  align-items: flex-start;
}

.custom-form-item {
  flex-direction: column;
}
</style>