<!-- 项目配置对话框，负责新建和编辑创作项目的基础信息。 -->
<script setup lang="ts">
import { computed, reactive, watch } from "vue";
import type { CreativeOptions, ProjectDetail, ProjectPayload } from "@/api/creative";
import CreativeSelect, { type CreativeSelectOption } from "@/components/creative/CreativeSelect.vue";

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    options: CreativeOptions;
    project?: ProjectDetail | null;
    saving?: boolean;
    projectType?: "video_redraw" | "premium_drama";
  }>(),
  { projectType: "video_redraw" },
);
const emit = defineEmits<{ "update:modelValue": [value: boolean]; save: [payload: ProjectPayload] }>();
const form = reactive<ProjectPayload>({
  project_type: props.projectType,
  name: "",
  style_id: "",
  era_type: "",
  custom_era: null,
  aspect_ratio: "9:16",
  localization: "",
});
const errors = reactive({ name: false, style: false, era: false, localization: false });
const title = computed(() =>
  props.project
    ? `编辑${props.projectType === "premium_drama" ? "短剧创作" : "转绘"}项目`
    : `创建${props.projectType === "premium_drama" ? "短剧创作" : "转绘"}项目`,
);
const eras = [
  { value: "modern_city", label: "现代都市" },
  { value: "ancient_history", label: "古代历史" },
  { value: "ancient_fantasy", label: "古代玄幻" },
  { value: "ancient_xianxia", label: "古代仙侠" },
  { value: "future_scifi", label: "未来科幻" },
  { value: "other", label: "其他" },
];
const regions = [
  { value: "china", label: "中国" },
  { value: "uk_us", label: "英美" },
  { value: "korea", label: "韩国" },
  { value: "japan", label: "日本" },
  { value: "france", label: "法国" },
  { value: "russia", label: "俄罗斯" },
  { value: "vietnam", label: "越南" },
  { value: "thailand", label: "泰国" },
  { value: "india", label: "印度" },
];
const styleOptions = computed<CreativeSelectOption[]>(() =>
  props.options.styles.map((item) => ({ label: item.name, value: item.id })),
);
watch(
  () => [props.modelValue, props.project] as const,
  () => {
    if (!props.modelValue) return;
    Object.assign(
      form,
      props.project
        ? {
            project_type: props.project.project_type,
            name: props.project.name,
            style_id: props.project.style_id,
            era_type: props.project.era_type,
            custom_era: props.project.custom_era || null,
            aspect_ratio: props.project.aspect_ratio,
            localization: props.project.localization || "",
          }
        : {
            project_type: props.projectType,
            name: "",
            style_id: "",
            era_type: "",
            custom_era: null,
            aspect_ratio: "9:16",
            localization: "",
          },
    );
    Object.assign(errors, { name: false, style: false, era: false, localization: false });
  },
  { immediate: true },
);
watch(
  () => form.name,
  (value) => {
    if (value.trim()) errors.name = false;
  },
);
watch(
  () => form.style_id,
  (value) => {
    if (value) errors.style = false;
  },
);
watch(
  () => form.era_type,
  (value) => {
    if (value) errors.era = false;
  },
);
watch(
  () => form.localization,
  (value) => {
    if (value) errors.localization = false;
  },
);
/** 校验项目必填项并按现有载荷结构提交保存事件。 */
function submit() {
  errors.name = !form.name.trim();
  errors.style = !form.style_id;
  errors.era = !form.era_type;
  errors.localization = props.projectType === "video_redraw" && !form.localization;
  if (errors.name || errors.style || errors.era || errors.localization) return;
  emit("save", {
    ...form,
    project_type: props.projectType,
    localization: props.projectType === "premium_drama" ? null : form.localization,
    custom_era: form.era_type === "other" ? form.custom_era : null,
  });
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    width="min(660px, calc(100vw - 28px))"
    class="web-dialog creative-dialog"
    @close="emit('update:modelValue', false)"
  >
    <el-form
      class="project-dialog-form"
      label-position="top"
      @submit.prevent="submit"
    >
      <el-form-item
        label="项目名称"
        :class="{ 'field-invalid': errors.name }"
        ><el-input
          v-model.trim="form.name"
          maxlength="100"
          show-word-limit
          placeholder="例如：都市悬疑短剧本土化"
        />
        <div
          v-if="errors.name"
          class="field-error"
        >
          请输入项目名称
        </div></el-form-item
      >
      <div class="form-grid">
        <el-form-item
          label="视觉风格"
          :class="{ 'field-invalid': errors.style }"
          ><CreativeSelect
            v-model="form.style_id"
            :options="styleOptions"
            placeholder="选择视觉风格"
          />
          <div
            v-if="errors.style"
            class="field-error"
          >
            请选择视觉风格
          </div></el-form-item
        >
        <el-form-item label="画面比例"
          ><div class="ratio-switch">
            <button
              v-for="ratio in ['9:16', '16:9']"
              :key="ratio"
              type="button"
              :class="{ active: form.aspect_ratio === ratio }"
              @click="form.aspect_ratio = ratio"
            >
              <span class="ratio-icon"><i :class="ratio === '9:16' ? 'portrait' : 'landscape'"></i></span
              ><span class="ratio-label">{{ ratio }}</span>
            </button>
          </div></el-form-item
        >
        <el-form-item
          :label="props.projectType === 'premium_drama' ? '故事时代' : '原片时代'"
          :class="{ 'field-invalid': errors.era }"
          ><CreativeSelect
            v-model="form.era_type"
            :options="eras"
            :placeholder="props.projectType === 'premium_drama' ? '选择故事时代' : '选择原片时代'"
          />
          <div
            v-if="errors.era"
            class="field-error"
          >
            请选择故事时代
          </div></el-form-item
        >
        <el-form-item
          v-if="props.projectType === 'video_redraw'"
          label="本土化"
          :class="{ 'field-invalid': errors.localization }"
          ><CreativeSelect
            v-model="form.localization"
            :options="regions"
            placeholder="选择本土化地区"
          />
          <div
            v-if="errors.localization"
            class="field-error"
          >
            请选择本土化地区
          </div></el-form-item
        >
      </div>
      <el-form-item
        v-if="form.era_type === 'other'"
        label="自定义时代"
        ><el-input
          v-model.trim="form.custom_era"
          maxlength="100"
      /></el-form-item>
    </el-form>
    <template #footer
      ><el-button @click="emit('update:modelValue', false)">取消</el-button
      ><el-button
        type="primary"
        :loading="saving"
        @click="submit"
        >{{ props.project ? "保存项目" : "创建项目" }}</el-button
      ></template
    >
  </el-dialog>
</template>

<style scoped lang="scss">
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-lg);
}

.project-dialog-form:deep(.el-form-item) {
  margin-bottom: var(--space-lg);
}
.project-dialog-form:deep(.el-form-item__label) {
  padding-bottom: var(--space-sm);
  color: var(--web-text-secondary);
  font-size: 12px;
}
.project-dialog-form:deep(.el-input__wrapper) {
  min-height: var(--control-height-lg);
  background: var(--web-surface-soft);
  border: 1px solid var(--web-line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.project-dialog-form:deep(.el-input__wrapper:hover) {
  border-color: var(--web-line-emphasis);
}
.project-dialog-form:deep(.el-input__wrapper.is-focus) {
  border-color: var(--web-timeline-focus-line);
  box-shadow: 0 0 0 2px var(--web-dialog-focus-ring);
}
.project-dialog-form:deep(.el-input__inner) {
  color: var(--web-text);
}
.project-dialog-form:deep(.el-input__count) {
  color: var(--web-dialog-description);
  background: transparent;
}
.ratio-switch {
  width: 100%;
  height: var(--control-height-lg);
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--web-surface-soft);
  border: 1px solid var(--web-line-strong);
  border-radius: var(--radius-sm);
}
.ratio-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--web-dialog-option-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.16s,
    background-color 0.16s,
    border-color 0.16s;
}
.ratio-switch button:hover:not(.active) {
  color: var(--web-text);
  background: var(--web-surface);
}
.ratio-switch button.active {
  color: var(--web-accent-dark);
  background: var(--web-hover);
  border-color: var(--web-line-emphasis);
}
.ratio-icon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 14px;
}
.ratio-label {
  width: 28px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.ratio-switch i {
  display: block;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.85;
}
.ratio-switch i.portrait {
  width: 7px;
  height: 12px;
}
.ratio-switch i.landscape {
  width: 13px;
  height: 8px;
}

.field-error {
  margin-top: 5px;
  color: var(--web-accent-dark);
  font-size: 12px;
  line-height: 1.2;
}
.field-invalid:deep(.el-input__wrapper),
.field-invalid:deep(.creative-select .el-select__wrapper) {
  border-color: var(--web-invalid-line) !important;
  box-shadow: 0 0 0 1px var(--web-invalid-outline) !important;
}
.field-invalid:deep(.el-input__wrapper:hover),
.field-invalid:deep(.creative-select .el-select__wrapper:hover) {
  border-color: var(--web-invalid-line-hover) !important;
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>
