<script setup>
import FormTitle from "../../../../../components/FormTitle/index.vue";
import XAutoComplete from "../../../../../components/XAutoComplete/index.vue";
import {onMounted, reactive, useTemplateRef} from "vue";
import {v4} from "uuid";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";
import router from "../../../../../router/index.js";

const settltment_after_list = reactive([]);
const emits = defineEmits(['success', 'prev']);
const form = defineModel('form');
const formRef = useTemplateRef('formRef');
const rules = {
    settltment_before: [{
        validator: (value, callback) => {
            console.log(value)
            for (const v of value) {
                if (!v.intro || !v.ratio) {
                    callback('信息不完整');
                }
            }
        }
    }],
}

const addHT = () => {
    form.value.settltment_before.push({
        id: v4(),
        intro: null,
        ratio: null,
    });
}

const success = async () => {
    formRef.value.validate().then((res) => {
        if (res) {
            const firstKey = Object.keys(res)[0];
            Message.warning(res[firstKey].message);
        } else {
            emits('success', form.value);
        }
    });
}

const openPage = () => {
    window.open('https://www.baidu.com');
}

onMounted(() => {
    Api.merchant.getSettlementAfter().then(({data}) => {
        settltment_after_list.length = 0;
        settltment_after_list.push(...data);
    });
})
</script>

<template>
    <FormTitle>
        <template #title>效果管理</template>

        <a-form
            class="mt-[30px]"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-align="right"
            :label-col-props="{span: 3}"
            :wrapper-col-props="{span: 12, offset: 1}">

            <a-form-item label="结算前" field="settltment_before">
                <div class="w-full flex justify-between">
                    <div class="max-w-[500px] info" v-if="!form.settltment_before.length>0">
                        *哪种情况少结算，及对应的扣除比例（当天发其他广告、未按照要求评论、未按照要求回填）建议最少设置一个未按要求发布作品，扣款100%的要求
                    </div>

                    <template v-if="form.settltment_before.length>0">
                        <div class="flex flex-col gap-[20px] w-full">
                            <div v-for="(item, index) in form.settltment_before" :key="item.id"
                                 class="flex items-center whitespace-nowrap gap-[5px] w-full justify-between">
                                当
                                <x-auto-complete
                                    v-model:model-value="item.intro"
                                    :init="true"
                                    :api="Api.merchant.getSettlementBefore"
                                    :apiPo="{platform_id: form.platform_id}">
                                </x-auto-complete>
                                时，扣除
                                <a-input-number
                                    class="w-[150px]"
                                    :precision="0"
                                    v-model:model-value="item.ratio"
                                    :max="100">
                                </a-input-number>
                                %金额

                                <div class="ml-auto flex gap-[8px]">
                                    <a-button @click="form.settltment_before.splice(index, 1)" type="outline"
                                              status="danger">
                                        <template #icon>
                                            <icon-minus/>
                                        </template>
                                        删除
                                    </a-button>
                                    <a-button
                                        :style="{visibility: form.settltment_before.length === index+1 && form.settltment_before.length < 4 ? 'visible' : 'hidden'}"
                                        @click="addHT"
                                        type="outline">
                                        <template #icon>
                                            <icon-plus/>
                                        </template>
                                        添加
                                    </a-button>
                                </div>
                            </div>
                        </div>
                    </template>


                    <a-button v-if="!form.settltment_before.length>0" @click="addHT" type="outline">添加</a-button>
                </div>
            </a-form-item>

            <a-form-item label="结算后" extra="*如有其他要求，可联系管理员添加">
                <div class="max-w-[618px]">
                    <a-checkbox-group v-model:model-value="form.settlement_after">
                        <a-checkbox v-for="v in settltment_after_list" :value="v.id">
                            {{ v.name }}
                            <a-popover position="rt">
                                <icon-question-circle/>
                                <template v-slot:content>
                                    <div class="text-[14px] text-[#1D2129]">什么是达人信用分？</div>
                                    <div class="w-[312px] text-[#86909C] text-[12px]">
                                        信用分是规范达人行为，确保其维护商家利益的强制手段。
                                        信用分过低，将影响达人参加任务、提现、邀请好友等多项核心功能的使用
                                    </div>
                                    <div class="text-[#165DFF] text-[12px] cursor-pointer"
                                         @click="openPage">
                                        查看达人信用分管理详情
                                        <icon-double-right/>
                                    </div>
                                </template>
                            </a-popover>
                        </a-checkbox>
                    </a-checkbox-group>
                </div>
            </a-form-item>

            <a-form-item class="mt-[30px]">
                <a-button class="mr-[24px]" @click="emits('prev')">上一步</a-button>
                <a-button v-if="form.status===0 || form.status===-1" type="primary"
                          @click="success">下一步
                </a-button>
                <a-button v-else type="primary" @click="router.back()">返回</a-button>
            </a-form-item>
        </a-form>
    </FormTitle>
</template>

<style lang="scss" scoped>
.info {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}
</style>
