<template>
    <view>
        <view class="body">
            <view class="list">
                <view class="list_content">
                    <view class="list_title">描述着装</view>
                    <textarea class="" v-model="saveform.outfit_desc" placeholder="穿白色夏季校服"
                        placeholder-class="list_textarea" />
                </view>
                <view class="list_content fa">
                    <view class="list_title">选择瞳色</view>
                    <view class="list_module f1 fa">
                        <picker class="list_data f1" :value="eyeColorIndex"
                            :range="getLoverAppearanceList.eye_color_options" range-key="name"
                            @change="bindEyeColorChange">
                            <view class="list_picker f1 fa" :style="form.eyeColor ? 'color:#333' : 'color:#D3D3D3'">
                                <view class="f1">
                                    {{ form.eyeColor ? form.eyeColor : '请选择瞳色' }}
                                </view>
                                <image src="/static/images/more.png" mode="widthFix"></image>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">选择发型</view>
                    <view class="list_module f1 fa">
                        <picker class="list_data f1" :value="hairStyleIndex"
                            :range="getLoverAppearanceList.hair_style_options" range-key="name"
                            @change="bindHairStyleChange">
                            <view class="list_picker f1 fa" :style="form.hairStyle ? 'color:#333' : 'color:#D3D3D3'">
                                <view class="f1">
                                    {{ form.hairStyle ? form.hairStyle : '请选择发型' }}
                                </view>
                                <image src="/static/images/more.png" mode="widthFix"></image>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="list_contents">
                    <view class="list_title">外貌特征</view>
                    <textarea class="" v-model="saveform.appearance_prompt" maxlength="100" @input="appearanceNum"
                        placeholder="青年，皮肤白皙，现代长相，气质高冷" placeholder-class="list_textarea" />
                    <view class="list_count">{{ appearanceNumber }}/100</view>
                </view>
            </view>
        </view>
        <view class="opt faj" @click="submit">保存并生成图像</view>
    </view>
</template>

<script>
import {
    GetLoverAppearance,
    LoverAppearance,
    AppearanceGenerate
} from '@/utils/api.js'
import {
    isPhone
} from '@/utils/utils.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
    components: {
        notHave,
        topSafety,
    },
    data() {
        return {
            eyeColorList: [{
                name: '红色',
                id: 0,
            },
            {
                name: '紫色',
                id: 1,
            },
            ],
            eyeColorIndex: 0,
            hairStyleList: [{
                name: '长直发',
                id: 0,
            },
            {
                name: '短卷发',
                id: 1,
            },
            {
                name: '马尾辫',
                id: 2,
            },
            ],
            hairStyleIndex: 0,
            form: {
                eyeColor: '',
                hairStyle: '',
            },
            saveform: {
                appearance_prompt: '',
                outfit_desc: '',
                eye_color_id: '',
                hair_style_id: '',
            },
            appearanceNumber: 0,
            getLoverAppearanceList: '',
            image: '',
        }
    },
    onLoad() {

    },
    onShow() {
        this.getLoverAppearance()
    },
    methods: {
        LoverAppearance(data) {
            LoverAppearance(data).then(res => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '保存成功',
                        icon: 'none',
                        position: 'top'
                    })
                    setTimeout(() => {
                        this.appearanceGenerate()

                    }, 500);
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        position: 'top'
                    })
                }
            })
        },
        getLoverAppearance() {
            GetLoverAppearance({}).then(res => {
                if (res.code == 1) {
                    this.getLoverAppearanceList = res.data
                    console.log(this.getLoverAppearanceList)
                    this.saveform.appearance_prompt = this.getLoverAppearanceList.appearance_prompt ? this.getLoverAppearanceList.appearance_prompt : ''
                    this.saveform.outfit_desc = this.getLoverAppearanceList.outfit_desc ? this.getLoverAppearanceList.outfit_desc : ''
                    for (let i = 0; i < this.getLoverAppearanceList.eye_color_options.length; i++) {
                        if (this.getLoverAppearanceList.eye_color_options[i].id == this.getLoverAppearanceList.eye_color_id) {
                            this.eyeColorIndex = i
                            this.form.eyeColor = this.getLoverAppearanceList.eye_color_options[i].name
                            this.saveform.eye_color_id = this.getLoverAppearanceList.eye_color_options[i].id
                        }
                    }
                    for (let i = 0; i < this.getLoverAppearanceList.hair_style_options.length; i++) {
                        if (this.getLoverAppearanceList.hair_style_options[i].id == this.getLoverAppearanceList.hair_style_id) {
                            this.hairStyleIndex = i
                            this.form.hairStyle = this.getLoverAppearanceList.hair_style_options[i].name
                            this.saveform.hair_style_id = this.getLoverAppearanceList.hair_style_options[i].id
                        }
                    }
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        position: 'top'
                    })
                }
            })
        },
        appearanceGenerate() {
            AppearanceGenerate().then(res => {
                if (res.code == 1) {
                    this.image = res.data.image_url
                    uni.navigateTo({
                        url: '/pages/create/generateImage?image=' + this.image
                    })
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        position: 'top'
                    })
                }
            }).catch(err => {
                uni.showToast({
                    title: '生成失败，请重试',
                    icon: 'none',
                    position: 'top'
                })
            })
        },
        bindEyeColorChange(e) {
            this.eyeColorIndex = e.detail.value;
            this.form.eyeColor = this.getLoverAppearanceList.eye_color_options[this.eyeColorIndex].name;
            this.saveform.eye_color_id = this.getLoverAppearanceList.eye_color_options[this.eyeColorIndex].id;
        },
        bindHairStyleChange(e) {
            this.hairStyleIndex = e.detail.value;
            this.form.hairStyle = this.getLoverAppearanceList.hair_style_options[this.hairStyleIndex].name;
            this.saveform.hair_style_id = this.getLoverAppearanceList.hair_style_options[this.hairStyleIndex].id;
        },
        appearanceNum(e) {
            this.appearanceNumber = e.detail.value.length;
        },
        submit() {
            if (this.saveform.outfit_desc == '') {
                uni.showToast({
                    title: "请输入恋人的着装要求",
                    icon: 'none',
                    position: 'top'
                })
            } else if (this.saveform.outfit_desc.length < 4) {
                uni.showToast({
                    title: "着装描述至少需要4个字",
                    icon: 'none',
                    position: 'top'
                })
            } else if (!this.saveform.eye_color_id) {
                uni.showToast({
                    title: "请选择瞳色",
                    icon: 'none',
                    position: 'top'
                })
            } else if (!this.saveform.hair_style_id) {
                uni.showToast({
                    title: "请选择发型",
                    icon: 'none',
                    position: 'top'
                })
            } else if (this.saveform.appearance_prompt == '') {
                uni.showToast({
                    title: "请输入外貌特征",
                    icon: 'none',
                    position: 'top'
                })
            } else if (this.saveform.appearance_prompt.length < 4) {
                uni.showToast({
                    title: "外貌特征至少需要4个字",
                    icon: 'none',
                    position: 'top'
                })
            } else {
                console.log(this.saveform)
                // 构建符合要求的数据结构
                const submitData = {
                    appearance_prompt: this.saveform.appearance_prompt,
                    appearance_params: {
                        hair_style_id: this.saveform.hair_style_id,
                        eye_color_id: this.saveform.eye_color_id,
                        outfit_desc: this.saveform.outfit_desc
                    }
                };

                console.log(submitData);
                this.LoverAppearance(submitData);
            }
        }
    }
}
</script>
<style>
page {
    background: #F6F8FA;
}
</style>
<style>
.body {
    position: relative;
    padding: 0 50rpx;
}

.list {
    position: relative;
    margin: 72rpx 0 0 0;
}

.list_content {
    position: relative;
    margin: 0 0 30rpx 0;
    padding: 30rpx 40rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    box-sizing: border-box;
}

.list_content textarea {
    margin: 22rpx 0 0 0;
    height: 215rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #333;
    line-height: 50rpx;
}

.list_title {
    margin: 0 44rpx 0 0;
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    line-height: 50rpx;
}

.list_contents {
    position: relative;
    margin: 0 0 30rpx 0;
    padding: 30rpx 60rpx 60rpx 40rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    box-sizing: border-box;
}

.list_contents textarea {
    margin: 22rpx 0 0 0;
    height: 120rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #333;
    line-height: 50rpx;
}

.list_textarea {
    color: #ADADAD;
}

.list_module {
    position: relative;
}

.list_picker image {
    width: 8rpx;
    height: 8rpx;
}

.list_count {
    position: absolute;
    right: 30rpx;
    bottom: 14rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #ADADAD;
    line-height: 50rpx;
}

.opt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60rpx;
    margin: 0 50rpx;
    padding: 20rpx 0;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
    border-radius: 12rpx;
}
</style>