<script setup lang="ts">
import { getVoteprogress, voteMember, getMember_mobile, getIs_sign } from '../../api/votingElection'
import useUserStore from '@/store/user'
import { isEmptyObject } from '@/utils/common'
	import { getSign, getmemberMobileGet   } from '@/api/login'

const userStore = useUserStore()

const showDialogRef = ref()

const reListRef = ref()

const xjList = ref<any>({})



onLoad(() => {
	// if(options.meetId){
	// 	getmemberMobileGet({ openid: userStore.openId, mobile: userStore.mobile, meetId: userStore.meetId}).then((res: any)=> {
	// 		console.log(res.data.length,666666666666);
	// 		if(res.data.length === 0) {
	// 			uni.reLaunch({ url: '/pages/mine/index?meetId='+ userStore.meetId })
	// 		} else {
	// 			userStore.userInfo = res.data
	// 			getSign({ openid: userStore.openId, meetId: userStore.meetId })
	// 		}
	// 	})
	// }
	if(userStore.userInfo.length !== 0) {
		getSign({ openid: userStore.openId, meetId: userStore.meetId })
	}
	
})

const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => {
	setTimeout(()=> {
			getVoteprogress(userStore.meetId).then((res) => {
				const { data } = res as { data: { candidate: any[] } }
				xjList.value = data || {}
				onSuccess({
					data: {
						data: data.candidate || [],
						total: (data.candidate || []).length
					}
				})
			})
	},1000)
}

const buttlist = ref([
    {
        type: '1',
        butname: '同意'
    },
    {
        type: '2',
        butname: '反对'
    },
    {
        type: '3',
        butname: '弃权'
    }
])

const params = ref([])
const selectBut = (data: any, cardid: any, type: string, butname: string) => {
    if (cardid) {
        const target = data.find((card: { id: any }) => card.id === cardid)
        uni.showModal({
            title: '您本轮选举投' + butname + '票',
            content: '确定吗？',
            success: function (res) {
                if (res.confirm) {
                    if (target) {
                        target.vote_result = type
                    }
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })
        params.value.push(target)
    } else {
        data.forEach((ele: { vote_result: number; id: any }) => {
            ele.vote_result = 1
        })
    }
}
const allChange = () => {
    uni.showModal({
        title: '您本轮选举全投同意票',
        content: '确定吗？',
        success: function (res) {
            if (res.confirm) {
                xjList.value.candidate?.forEach((ele: { vote_result: number }) => {
                    ele.vote_result = 1
                })
                params.value = xjList.value.candidate
                submit()
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        }
    })
}

function extractTwoProps(arr: any, key1: string, key2: string) {
    return arr.map(({ [key1]: prop1, [key2]: prop2 }) => ({
        [key1]: prop1,
        [key2]: prop2
    }))
}
const submit = () => {
    let param = {
        openid: userStore.openId,
        id: xjList.value.id,
        candidate: JSON.stringify(extractTwoProps(params.value, 'id', 'vote_result'))
    }
    if (param.candidate === '[]') {
        uni.showToast({
            title: '未选举',
            icon: 'none', // 可选，图标类型，'success', 'loading', 'none'
            duration: 1500 // 持续时长，单位ms
        })
    } else {
        voteMember(param).then((res) => {
            uni.showToast({ title: res.msg, icon: 'success', duration: 1000 })
        })
    }
}

const onConfirm = () => uni.reLaunch({ url: '/pages/mine/index?meetId='+ userStore.meetId })

onShow(() => {
    nextTick(() => {
        if (userStore.mobile === '') {
            uni.navigateTo({
                url: '/pages/login/login'
            })
        } else if (isEmptyObject(userStore.userInfo)) {
            showDialogRef.value.show = true
        } else if (!userStore.showtoast) {
            userStore.showtoast = true
            uni.showToast({ title: '登录成功！', icon: 'success', duration: 1000 })
            setTimeout(() => reListRef.value.refreshFn(), 1100)
        } else {
            reListRef.value.refreshFn()
        }
    })
})
</script>

<template>
    <!-- 你的页面内容 -->
    <view class="box" v-if="xjList.length != 0">
        <view class="headpart">
            <view class="title">{{ xjList.title }}</view>
            <view class="time">投票开始时间：{{ xjList.start_time }}</view>
            <view class="time">投票截止时间：{{ xjList.end_time }}</view>
        </view>
        <ex-list ref="reListRef" custom-list-type="custom" :on-form-search="doSearch" :is-perform-search="false">
            <template v-slot="{ data }">
                <view class="tppart">
                    <view class="tpone" v-for="(row, index) of data" :key="'tpone' + index">
                        <view class="topp">
                            <img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.photo" alt="" />
                            <view class="rightpart">
                                <view class="name">
                                    {{ row.name }}
                                </view>
                                <view class="class">
                                    {{ row.position }}
                                </view>
                            </view>
                        </view>
                        <view class="bottomp">
                            <view
                                class="minbut"
                                v-for="(item, ele) in buttlist"
                                :key="ele"
                                @click="selectBut(data, row.id, item.type, item.butname)"
                                :class="{ active: row.vote_result === item.type }"
                            >
                                {{ item.butname }}
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </ex-list>
        <view class="bottbutton">
            <view class="qbty" @click="allChange">全部同意</view>
            <view class="tjtp" @click="submit">提交投票</view>
        </view>
    </view>

    <ex-empty v-else tips=" " :height="80">
        <image style="width: 376rpx" mode="widthFix" src="@/static/img/Group.png" />
        <view class="nodata">暂时没有选举 请刷新重试</view>
    </ex-empty>

    <ex-dialog ref="showDialogRef" title="提示" :on-confirm="onConfirm">请您签到之后再进行投票！</ex-dialog>
</template>

<style scoped lang="scss">
.box {
    width: 100%;
    background-color: #f9fafb;

    .headpart {
        width: 92%;
        height: 194rpx;
        border-radius: 24rpx;
        background-color: #eff6ff;
        margin: 32rpx auto;
        padding: 20rpx 3%;

        .title {
            color: #2563eb;
            font-size: 28rpx;
            margin-top: 16rpx;
        }

        .time {
            margin-top: 16rpx;
            color: #4b5563;
            font-size: 28rpx;
        }
    }

    .tppart {
        width: 100%;
        max-height: 69vh;
        overflow-y: auto;
        display: grid;
        justify-items: center;

        .tpone {
            width: 91%;
            height: 264rpx;
            padding: 20rpx 4%;
            box-sizing: border-box;
            border-radius: 24rpx;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff;
            box-sizing: border-box;
            border: 2rpx solid #f3f4f6;
            box-shadow:
                0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1),
                0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
            margin-top: 32rpx;
            display: grid;

            .topp {
                display: flex;

                .rightpart {
                    margin-left: 32rpx;
                    display: grid;
                    justify-items: left;
                    align-content: baseline;

                    .name {
                        font-family: Roboto;
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 42rpx;
                        letter-spacing: normal;
                        color: #000000;
                        margin-top: 7rpx;
                    }

                    .class {
                        font-family: Roboto;
                        font-size: 28rpx;
                        font-weight: normal;
                        line-height: 40rpx;
                        letter-spacing: normal;
                        color: #6b7280;
                        margin-top: 7rpx;
                    }
                }
            }

            .bottomp {
                display: flex;
                justify-content: space-between;
                gap: 0rpx 20rpx;

                .minbut {
                    flex: 1;
                    width: 190rpx;
                    height: 76rpx;
                    /* 自动布局 */
                    display: flex;
                    justify-content: center;
                    padding: 16rpx 32rpx;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    border-radius: 8rpx;
                    background: #ffffff;
                    box-sizing: border-box;
                    border: 2rpx solid #d1d5db;
                    font-family: Roboto;
                    font-size: 28rpx;
                    font-weight: normal;
                    line-height: 40rpx;
                    text-align: center;
                    letter-spacing: normal;
                    color: #4b5563;
                }

                .minbut.active {
                    border: 2rpx solid #2563eb;
                    color: #2563eb;
                }
            }
        }

        .tpone:first-child {
            margin-top: 0;
        }
    }

    .bottbutton {
        width: 100%;
        height: 10vh;
        display: flex;
        padding: 24rpx 32rpx;
        gap: 0rpx 24rpx;
        flex-wrap: wrap;
        align-content: flex-start;
        background: #ffffff;
        box-sizing: border-box;
        border-width: 2rpx 0rpx 0rpx 0rpx;
        border-style: solid;
        border-color: #f3f4f6;
        position: fixed;
        bottom: 0;

        .qbty {
            width: 331rpx;
            height: 90rpx;
            /* 自动布局 */
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            padding: 24rpx 0rpx;
            gap: 0rpx 20rpx;
            flex-wrap: wrap;
            border-radius: 8rpx;
            background: #eff6ff;
            font-family: Roboto;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 42rpx;
            text-align: center;
            letter-spacing: normal;
            color: #2563eb;
        }

        .tjtp {
            width: 331rpx;
            height: 90rpx;
            /* 自动布局 */
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            padding: 24rpx 0rpx;
            gap: 0rpx 20rpx;
            flex-wrap: wrap;
            border-radius: 8rpx;
            background: #2563eb;
            font-family: Roboto;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 42rpx;
            text-align: center;
            letter-spacing: normal;
            color: #ffffff;
        }
    }

    .address-items {
        padding: 20rpx 15rpx 32rpx 28rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #f5f5f5;

        .left {
            flex: 1;
            overflow: hidden;

            .name {
                font-size: 28rpx;
                font-weight: 700;
                color: #101010;
                line-height: 40rpx;
                margin-right: 16rpx;
            }

            .isdefault {
                font-size: 20rpx;
                font-weight: 400;
                color: #fff;
                padding: 4rpx 12rpx;
                border-radius: 8rpx;
                background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%);
            }

            .info {
                width: 100%;
                color: #666;
                font-size: 24rpx;
                font-weight: 400;
                margin-top: 12rpx;
            }
        }

        .right {
            width: 140rpx;
            padding-left: 32rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #4979ff;
            text-align: right;
        }
    }

    .buts {
        width: 100%;
        height: 10vh;
        background-color: F3F4F6;
        position: fixed;
        bottom: 0;
        border-top: 2rpx solid #ebebec;
    }
}
.nodata {
    margin-top: 43px;
    font-family: Source Han Sans;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: normal;
    color: #34343f;
}
</style>
