<template>
    <Dialog v-model="visible" bg-color="#fff" width="670">
        <div class="publish-dialog round-10 hidden">
            <div class="h-58 px-24 flex-items-center publish-dialog__header">
                <span class="w-4 h-16 round-10 bg-main mr-10"></span>
                <span class="fs-16 font-bold color-000">{{ title }}</span>
            </div>
            <div class="px-24 pt-24 pb-16">
                <el-form :model="form" label-width="92px" label-position="left">
                    <el-form-item label="指派给" required>
                        <el-select v-model="form.assignee" class="w-full" placeholder="请选择指派对象" clearable>
                            <el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="下单数量" required>
                        <el-input v-model="form.orderCount" placeholder="请输入下单数量" />
                    </el-form-item>
                    <el-form-item label="出片日期" required>
                        <el-date-picker
                            v-model="form.deliveryDate"
                            class="w-full"
                            type="date"
                            placeholder="请选择出片日期"
                            format="YYYY/MM/DD"
                            value-format="YYYY/MM/DD"
                        />
                    </el-form-item>
                    <el-form-item label="出片可见性">
                        <el-radio-group v-model="form.visibility" fill="#5a34bd">
                            <el-radio-button label="不设置" :value="0" />
                            <el-radio-button label="指定可见性" :value="1" />
                        </el-radio-group>
                        <el-button class="ml-20" link type="primary">指定我的小组</el-button>
                    </el-form-item>
                    <el-form-item v-if="form.visibility === 1">
                        <el-radio-group v-model="form.visibility2">
                            <el-radio label="公开" :value="0" />
                            <el-radio :value="1">公用资源①</el-radio>
                            <el-radio label="指定范围" :value="2" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item v-if="form.visibility2 === 2">
                        <div class="round-6 w-full p-10 bg-f5">
                            <el-form-item label="指定部门" required>
                                <el-select v-model="form.department" class="w-full" placeholder="请选择指定部门" clearable>
                                    <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="指定小组" required>
                                <el-select v-model="form.group" class="w-full" placeholder="请选择指定小组" clearable>
                                    <el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="指定人员" required>
                                <el-select v-model="form.member" class="w-full" placeholder="请选择指定人员" clearable>
                                    <el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>

                    <el-form-item label="公开日期">
                        <el-date-picker
                            v-model="form.publicDate"
                            class="w-full"
                            type="date"
                            placeholder="请选择公开日期"
                            format="YYYY/MM/DD"
                            value-format="YYYY/MM/DD"
                        />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="备注需求说明" />
                    </el-form-item>
                    <el-form-item label="产品" required>
                        <el-select v-model="form.product" class="w-full" placeholder="请选择产品">
                            <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="脚本类型">
                        <el-select v-model="form.scriptType" class="w-full" placeholder="请选择脚本类型">
                            <el-option v-for="item in scriptTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联脚本">
                        <div class="h-34 px-12 round-6 flex-between w-full related-script">
                            <span class="font-bold color-main ellipsis">{{ form.relatedScript }}</span>
                            <el-tag type="primary" effect="dark" class="ml-12 border-none round-4 bg-main related-script__tag">
                                {{ autoRelated ? '已自动关联' : '待选择' }}
                            </el-tag>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="px-24 pt-16 pb-20 flex justify-end gap-12 publish-dialog__footer">
                <el-button class="minw-64" @click="visible = false">取消</el-button>
                <el-button class="minw-64" type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </Dialog>
</template>

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

type TaskPublishForm = {
    assignee: string;
    orderCount: string;
    deliveryDate: string;
    visibility: number;
    visibility2: number;
    department: string;
    group: string;
    member: string;
    publicDate: string;
    remark: string;
    product: string;
    scriptType: string;
    relatedScript: string;
};

const props = withDefaults(
    defineProps<{
        title?: string;
        relatedScript?: string;
        autoRelated?: boolean;
    }>(),
    {
        title: '新增任务',
        relatedScript: '请选择关联脚本',
        autoRelated: false,
    }
);

const visible = defineModel<boolean>('visible', { required: true });
const emit = defineEmits<{
    (event: 'confirm', form: TaskPublishForm): void;
}>();

const form = reactive<TaskPublishForm>({
    assignee: 'team1',
    orderCount: '1',
    deliveryDate: '2026/08/15',
    visibility: 0,
    visibility2: 0,
    department: '',
    group: '',
    member: '',
    publicDate: '2026/08/07',
    remark: '',
    product: 'product1',
    scriptType: 'script1',
    relatedScript: props.relatedScript,
});

watch(
    () => props.relatedScript,
    (val) => {
        form.relatedScript = val || '请选择关联脚本';
    },
    { immediate: true }
);

const assigneeOptions = [
    { label: '剪辑一组 / 视频后发 / 张三', value: 'team1' },
    { label: '剪辑二组 / 视频后发 / 李四', value: 'team2' },
];
const departmentOptions = [
    { label: '信息流投放部', value: 'department1' },
    { label: '内容制作部', value: 'department2' },
];
const groupOptions = [
    { label: '视频号投流组', value: 'group1' },
    { label: '剪辑一组', value: 'group2' },
];
const memberOptions = [
    { label: '张三', value: 'member1' },
    { label: '李四', value: 'member2' },
];
const productOptions = [
    { label: '得力双头马克笔', value: 'product1' },
    { label: '电商产品图模板', value: 'product2' },
];
const scriptTypeOptions = [
    { label: '爆款拆解', value: 'script1' },
    { label: 'AI分镜拆解', value: 'script2' },
];

const handleConfirm = () => {
    emit('confirm', { ...form });
    visible.value = false;
};
</script>

<style scoped lang="scss">
.publish-dialog__header {
    border-bottom: 1px solid #edf0f5;
}

.publish-dialog__footer {
    border-top: 1px solid #edf0f5;
}

.publish-dialog {
    :deep(.el-form-item) {
        margin-bottom: 16px;
        align-items: center;
    }

    :deep(.el-form-item__label) {
        justify-content: flex-end;
    }

    :deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::before) {
        color: #f56c6c;
    }

    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper) {
        min-height: 34px;
        border-radius: 6px;
        box-shadow: 0 0 0 1px #dce4f0 inset;
    }

    :deep(.el-input__wrapper.is-focus),
    :deep(.el-select__wrapper.is-focused) {
        box-shadow: 0 0 0 1px rgba(var(--main-color), 0.45) inset;
    }

    :deep(.el-date-editor.el-input) {
        width: 100%;
    }
}

.related-script {
    border: 1px solid rgba(var(--main-color), 0.35);
    background-color: rgba(var(--main-color), 0.06);
}

.related-script__tag {
    flex-shrink: 0;
}
</style>
