<template>
    <el-dialog v-model="showDialog" title="圈子审核" :close-on-click-modal="false" @close="closeDialog">
        <div style="width: 100%;display: flex;align-items: center">
            <el-image alt="#" style="height: 60px;width: 60px;border-radius: 30px" v-if="data.headPortrait==='/'"
                      :src="defaultAvatar"></el-image>
            <el-image alt="#" style="height: 60px;width: 60px;border-radius: 30px" v-else
                      :src="data.headPortrait"></el-image>
            <div>
                <h3 style="margin-left: 30px;color: #409eff">{{ data.nickName }}</h3>
                <h4 style="margin-left: 30px">会员编号：{{ data.memberId }}</h4>
            </div>

        </div>
        <h4 style="margin-top: 30px">发布内容</h4>
        <div style="margin-top: 10px">
            <h5>{{ data.momentsContent }}</h5>
        </div>
        <div style="margin-top: 10px;display: flex;flex-wrap: wrap">
            <div style="height: 150px;margin: 0 10px 10px 0" v-for="(item,index) in urlList" :key="index">
                <el-image style="height: 150px" :src="item" :preview-teleported="true" :preview-src-list="urlList"
                          :initial-index="index"/>
            </div>
        </div>

        <el-tabs v-model="activeTab" style="margin-top: 20px">
            <el-tab-pane name="first" label="发布审核">
                <el-form :model="formData" ref="formRef" label-width="110px" :rules="rules"
                         v-if="data.releaseStatus==0">
                    <el-form-item prop="releaseStatus" label="审核状态">
                        <el-select style="width: 200px" v-model="formData.releaseStatus">
                            <el-option label="审核通过" :value="1"></el-option>
                            <el-option label="审核驳回" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="releaseReason" label="审核驳回原因">
                        <el-input type="textarea" v-model="formData.releaseReason"></el-input>
                    </el-form-item>
                </el-form>

                <el-descriptions
                    v-else
                    class="margin-top"
                    direction="vertical"
                    :column="4"
                    border
                    style="margin-top: 10px"
                >
                    <el-descriptions-item width="25%">
                        <template #label>
                            <div class="cell-item">发布状态</div>
                        </template>
                        <el-tag>{{ data.releaseStatusName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item width="25%">
                        <template #label>
                            <div class="cell-item">发布时间</div>
                        </template>
                        {{ data.releaseTime }}
                    </el-descriptions-item>
                    <el-descriptions-item width="25%">
                        <template #label>
                            <div class="cell-item">发布城市</div>
                        </template>
                        {{ data.locationCity }}
                    </el-descriptions-item>
                    <el-descriptions-item width="25%">
                        <template #label>
                            <div class="cell-item">点赞数量</div>
                        </template>
                        <el-tag>{{ data.favorCount }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" v-if="data.releaseStatus==2">
                        <template #label>
                            <div class="cell-item">审核失败原因
                            </div>
                        </template>
                        {{ data.releaseReason }}
                    </el-descriptions-item>
                </el-descriptions>

            </el-tab-pane>

            <el-tab-pane name="second" label="举报审核">
                <el-card style="margin: 10px 5px" :key="index" v-for="(item,index) in reportList">
                    <div style="display: flex;align-items: center">
                        <img style="height: 60px;width: 60px;border-radius: 30px"
                             :src="item.headPortrait" :srcset="defaultAvatar"/>
                        <span style="color: #409eff;margin-left: 20px">{{ item.nickName }}</span>
                    </div>
                    <div style="margin-top: 10px">
                        <h5>{{ item.reportContent }}</h5>
                    </div>
                    <div style="margin-top: 10px;display: flex;flex-wrap: wrap">
                        <div style="height: 150px;margin: 0 10px 10px 0" v-for="(item2,index2) in item.reportPictureUrl"
                             :key="index2">
                            <el-image style="height: 150px" :src="item2" :preview-teleported="true"
                                      :preview-src-list="item.reportPictureUrl"
                                      :initial-index="index2"/>
                        </div>
                    </div>
                </el-card>
                <div style="display: flex;align-items: center" v-if="data.momentsStatus==1&&reportList.length>0">
                    <span style="margin: 0 10px">处理结果</span>
                    <el-select style="width: 200px" v-model="operateType">
                        <el-option label="下架" :value="1"></el-option>
                        <el-option label="举报驳回" :value="2"></el-option>
                    </el-select>
                    <el-button style="margin-left: 20px" type="primary" @click="subReport">提交</el-button>
                </div>
                <div v-if="reportList.length==0" style="color: #92969a">
                    <span>暂无待处理举报</span>
                </div>
            </el-tab-pane>
        </el-tabs>


        <template #footer>
            <el-button @click="closeDialog()">{{ data.auditStatus == 0 ? '取消' : '关闭' }}</el-button>
            <el-button v-if="data.releaseStatus==0&&activeTab=='first'" type="danger" @click="subForm">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {nextTick, ref} from "vue";
import request from "/@/api/request";
import {moments, order, orderRefund} from '/@/api/controllerUrls'
import defaultAvatar from '/@/assets/defaultAvatar.svg'


let data = ref<any>({})
let urlList = ref<Array<string>>([])
let activeTab = ref('first')

//控制对话框
let showDialog = ref(false)
//向父容器暴露方法
defineExpose({
    open,
})

//打开对话框并初始化数据
function open(row: any) {
    showDialog.value = true
    data.value = row
    urlList.value = JSON.parse(row.attachmentUrl)
    getInitData()
}

let emit = defineEmits(['close'])

function closeDialog() {
    showDialog.value = false
    emit('close')
}

//订单详情
let orderData = ref<any>({})

let formData = ref<any>({
    releaseStatus: '',
    releaseReason: '',
})

function validators(rule: any, val: any, callback: Function) {
    if (formData.value.releaseStatus == 2 && formData.value.releaseReason == '') {
        return callback(new Error('审核驳回，请输入驳回原因'))
    }
    return callback()
}

let rules = ref({
    releaseStatus: [{required: true, message: '请选择审核状态', trigger: 'blur',},],
    releaseReason: [{validator: validators, trigger: 'blur',},],
})


let formRef = ref()

function subForm() {
    formRef.value.validate((valid: any) => {
        if (valid) {
            request.edit(moments, {id: data.value.id, entity: formData.value}, 'release').then((res: any) => {
                if (res.code == 1) {
                    closeDialog()
                }
            })
        }
    })
}


//举报信息
let reportList = ref([])
//处理结果
let operateType = ref('')

function getInitData() {
    request.index(moments, {id: data.value.id}, 'report/detail').then((res: any) => {
        if (res.code == 1) {
            reportList.value = res.data.reportList
            for (let i in reportList.value) {
                reportList.value[i].reportPictureUrl = JSON.parse(reportList.value[i].reportPictureUrl)
            }
        }
    })
}

//提交举报处理结果
function subReport() {
    if (operateType.value == '') {
        return
    }
    request.edit(moments, {id: data.value.id, operateType: operateType.value}, 'report/audit').then((res: any) => {
        if (res.code == 1) {
            closeDialog()
        }
    })
}


</script>

<style scoped>

</style>
