// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref, inject } = Vue;

// 定义组件（直接使用模板）
export const report = defineComponent({
    name: "report",
    props: {
        itemdata: {
            type: Object,
            default: () => {},
        },
    },

    setup(props) {
        let item = ref({ ...props.itemdata });

        const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"];
        let reportAlertShow = inject("reportState");

        let checkList = ref([]);
        let alertShow = ref(false);
        let alertText = ref("");

        const selectRadio = (value) => {
            const index = checkList.value.indexOf(value);
            if (index === -1) checkList.value.push(value);
            else checkList.value.splice(index, 1);
        };

        // 举报提交
        const alertSubmit = () => {
            if (checkList.value.length == 0) {
                creationAlertBox("error", "请选择举报类型");
                return;
            }
            checkList.value.push(alertText.value);
            reportAlertShow.value = false;
            ajax(`/v2/api/forum/postTopicReport`, {
                message: checkList.value,
                token: item.value.token,
            }).then((res) => {
                checkList.value = [];
                reportAlertShow.value = false;
                creationAlertBox("success", res.message || "举报成功");
            });
        };

        // 取消
        const cancel = () => (reportAlertShow.value = false);
        return { alertText, checkList, reasonList, selectRadio, cancel, alertSubmit, alertShow };
    },

    template: `<div class="alert-form">
        <div class="comments reports">
            <div class="head">
                <span style="display: flex; align-items: center;"> <img style="width: 25px; margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png" />举报投诉 </span>
                <div class="close icon-close iconfont" @click="alertShow = false"></div>
            </div>
            <div class="form">
                <div class="radio-area flexacenter">
                    <div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
                        <div class="radio-area-frame"></div>
                        {{ s }}
                    </div>
                </div>
                <div class="text-box">
                    <textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
                    <div class="text-num">{{ 200 - alertText.length }}</div>
                </div>
                <div class="footer">
                    <button type="button" @click="cancel()">取消</button>
                    <button type="submit" @click="alertSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>`,
});