<template>
    <div class="list-item" ref="list" @click="goDetail(data.status)">
        <div class="authentication-box dis-f al-item" v-if="data.verified == 1">
            <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
            <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
            <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
        </div>
        <div class="top-box">
            <div class="title-text">
                <div class="title-hint" v-if="data.verifiedstatus == 1 && !stateData.text">认证审核中</div>
                <div class="title-hint" v-if="stateData.text">{{ stateData.text }}</div>
                {{ data.subject || '暂无标题' }}
            </div>
            <div class=" dis-f al-item-start jus-bet s-w-100" style="margin-top: 20px;">
                <div>
                    <div class="dis-f al-item">
                        <div class="tab-item first-tab flexacenter">{{ data.gptype }}</div>
                        <div class="tab-item mg-l-8 flexacenter" v-if="data.type">{{ listData.type[data.type] }}
                        </div>
                        <div class="tab-item mg-l-8 flexacenter" v-if="data.elevator && data.elevator !== -1">{{
                            listData.elevator[data.elevator] }}</div>
                        <div class="tab-item mg-l-8 flexacenter" v-if="data.sunshinearea && data.sunshinearea !== -1">{{
                            listData.sunshinearea[data.sunshinearea] }}</div>
                        <div class="tab-item mg-l-8 flexacenter" v-if="data.gender">
                            {{ listData.gender[data.gender] }}
                        </div>
                    </div>
                    <div class="address-text dis-f al-item" v-if="item['location']">
                        <template v-if="Array.isArray(item['location'])">
                            <template v-for="it in item['location']">
                                <div class="address-item flexacenter" v-if="it">
                                    <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                                    {{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }}
                                </div>
                            </template>
                        </template>
                        <div class="address-item flexacenter" v-else>
                            <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                            {{ location[item['location'] >>> 0] + ' > ' + location[item['location']] }}
                        </div>
                    </div>
                    <div class="price-text dis-f" style="" v-if="data.rent">
                        <span class="unit">HK$</span>
                        <span class="price" v-if="Array.isArray(data.rent)">{{ data.rent.join(' ~ ') }}</span>
                        <span class="price" v-else>{{ data.rent }}</span>
                        <span>/月</span>
                        <span class="time" v-show="data.rentalduration">[ 租期{{ data.rentalduration == 0 ? '不限' :
                            listData['rentalduration'][data.rentalduration] }} ]</span>
                    </div>
                    <div class="data-info flexacenter" v-if="ispublish">
                        <div class="info-item" v-if="data['id']">
                            房源ID：{{ data['id'] }}
                        </div>
                        <template v-if="data['timestamp']">
                            <div class="longstring" v-if="data['id']" style="margin: 0 8px;"></div>
                            <div class="info-item">
                                {{ formatDate(data['timestamp']) }}发布
                            </div>
                        </template>
                        <template v-if="data['status'] != 0">
                            <div class="longstring"></div>
                            <div class="info-item flexacenter">
                                <div class="itemm flexacenter">
                                    <img class="item-icon" src="@/assets/img/publicImage/eye-icon.svg" alt="">
                                    {{ data['count_view'] }}
                                </div>
                                <div class="itemm flexacenter" style="margin-left: 10px;">
                                    <img class="item-icon" src="@/assets/img/publicImage/collect-icon.png" alt="">
                                    {{ data['count_fav'] }}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="img">
                    <div>
                        <img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
                            @load="loadFinish" class="img " alt="">
                        <div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
                            <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt=""> -->
            <img src="../../assets/homeImage/corner.svg" v-if="data['intermediary'] == 1" class="tab-img" alt="">
            <img src="../../assets/homeImage/intermediaryCorner.svg" v-else class="tab-img" alt="">
        </div>
        <div class="publish-footer flexacenter" v-if="ispublish">
            <div class="publish-item flexcenter" v-if="stateData.btn >= 0 || stateData.btn == -2"
                @click.stop="handleDelete">删除
            </div>
            <div class="publish-item flexcenter" v-if="stateData.btn >= 0" @click.stop="goEdit">{{ stateData.btn
                == 1 ? "编辑上架" : "编辑" }}</div>
            <div class="publish-item flexcenter" v-if="stateData.btn == 2" @click.stop="undercarriage">下架</div>
            <div class="publish-item flexcenter go-up"
                :class="{ 'go-up': data.isding == 0, 'already-go-up': data.isding == 1 }" v-if="stateData.btn == 2"
                @click.stop="goUp">{{
                    data.isding == 0 ? '顶上去' : '今天已顶' }}
            </div>
            <!-- <div class="publish-item flexcenter already-go-up" v-if="stateData.btn == 2 && item.isding == 1"></div> -->
        </div>
        <div class="btm-box dis-f al-item" v-else>
            <div class="flex1 flexacenter">
                <img :src="data.avatar" class="user-img" alt="">
                <span class="user-name">{{ data.author }}</span>
                <div class="btn flexcenter" v-if="data.isintermediary !== 1">{{ data.intermediary_text ||
                    listData.intermediary[data.intermediary] }}</div>
                <img src="../../assets/homeImage/intermediaryTabImg.png" v-else class="intermediary-tab-img" alt="">
            </div>
            <div class="cancel-collection flexcenter" @click.stop="cancelCollection(data.token)">
                <img class="icon" src="@/assets/img/publicImage/black-circle-cross.svg">
                取消收藏
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, watch, defineProps, reactive, defineEmits, onMounted, getCurrentInstance } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { redirectToExternalWebsite } from '@/utils/util.js'
import store from '../../store/index';

const { proxy } = getCurrentInstance()

const router = useRouter()

let props = defineProps({
    item: Object,
    index: Number,
    ispublish: Boolean,
})

let data = {}
data = props.item

const emit = defineEmits(['cancelCollection', 'goUp', 'undercarriage'])

//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
//地区数据
let location = reactive({})
location = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location

//数据包
let listData = reactive({})
listData = store.state.indexData && store.state.indexData.config

// rentalduration
const stateObj = { // btn: 0  删除 编辑 1 删除 编辑 上架  2 删除 编辑 下架 顶上去
    "1": {
        btn: 2,
    },
    "-7": {
        text: "身份变化，已下架",
        btn: -2,
    },
    "-5": {
        text: "超出发布期限，已自动下架",
        btn: 0,
    },
    "-3": {
        text: "多人投诉，已下架",
        btn: -1,
    },
    "-4": {
        text: "该信息正在审核中",
        btn: -1,
    },
    "2": {
        text: "已下架",
        btn: 1,
    },
    "0": {
        text: "草稿",
        btn: 0,
    }
}

let stateData = ref(stateObj[data.status])
// 监听修改的值
watch(() => props.item.status, (newValue, oldValue) => {
    stateData.value = stateObj[data.status]
})

const cancelCollection = token => emit('cancelCollection', { token, index: props['index'] })

// 点击跳转详情页
const goDetail = status => {
    if (status == 1) redirectToExternalWebsite(`/detail?id=${data.uniqid}`)
    else ElMessage("该房源信息已出租或已失效")
}

// 跳转编辑页面
const goEdit = () => router.push(`/edit?token=${data.token}`)

// 点击删除房源
const handleDelete = () => {
    ElMessageBox.confirm(
        '确定删除吗？',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            center: true,
            autofocus: false,
            customClass: "ElMessageBox",
            width: 260,
            customStyle: 'width: 260px'
        },
    ).then(() => {
        proxy.$post('/tenement/pc/api/user/delete', {
            token: data['token']
        }).then(res => {
            if (res.code != 200) return
            ElMessage.success(res.message)
            emit('handleDelete', props['index'], data['status'])
        })
    }).catch(() => { })
}

// 点击下架
const undercarriage = () => {
    proxy.$post('/tenement/pc/api/user/status', {
        status: 2,
        token: data['token'],
        uniqid: data['uniqid'],
    }).then(res => {
        let data = res.data
        emit('undercarriage', props['index'], data['status'])
    })
}

// 点击顶上去
const goUp = () => {
    if (data.isding == 1) ElMessage('今天已顶过啦，明天再来吧！')
    if (data.isding != 0) return
    proxy.$post("/tenement/pc/api/user/ding", { token: data['token'] }).then(res => {
        ElMessage.success(res.message)
        emit('goUp', props['index'])
    })
}


// 输出 时间格式 2023年07月04日
const formatDate = timestamp => {
    // 创建一个新的Date对象，将时间戳作为参数传入
    var date = new Date(timestamp * 1000);
    // 使用Date对象的get方法获取年、月、日
    var year = date.getFullYear();

    var month = date.getMonth() + 1;
    var day = date.getDate();

    // 将月份和日期转为两位数的格式，如果不足两位，前面补0
    if (month < 10) month = '0' + month;
    if (day < 10) day = '0' + day;

    // 返回格式化后的日期字符串
    return year + '年' + month + '月' + day + '日';

}

</script>
<style scoped lang="less">
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.jus-bet {
    justify-content: space-between;
}

.al-item-start {
    align-items: flex-start;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100%;
}

.authentication-box {
    width: 100%;
    height: 30px;

    .bg {
        height: 100%;
        height: 100%;
    }

    .logo {
        width: 18px;
        height: 18px;
        position: absolute;
        left: 15px;
    }

    .text-img {
        width: 81px;
        height: 81px;
        position: absolute;
        left: 35px;
    }
}

.list-item {
    width: 590px;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    position: relative;
    margin-bottom: 20px;

    .mg-t-10 {
        margin-top: 10px;
    }

    .img {
        display: block;
        width: 100px;
        object-fit: cover;
        border-radius: 10px;
        position: relative;
    }

    .s-img {
        width: 100px;
        height: 100%;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(51, 51, 51, 0.733333333333333);

        .img {
            width: 30px;
            height: 30px;
        }
    }

    .top-box {
        padding: 22px 20px 20px;

        .tab-img {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 0;
            right: 0;
            // z-index: 66;
        }

        .title-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: #000000;
            text-align: left;
            word-wrap: break-word;
            line-height: 28px;

            .title-hint {
                border: 1px solid rgba(249, 93, 93, 1);
                display: inline;
                height: 24px;
                font-size: 14px;
                color: #F95D5D;
                border-radius: 5px;
                padding: 0 8px;

            }
        }

        .mg-l-8 {
            margin-left: 8px;
        }

        .tab-item {
            padding: 0 6px;
            height: 24px;
            background-color: rgba(242, 242, 242, 1);
            border-radius: 6px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #7F7F7F;
        }

        .address-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 15px;
            color: #555555;
            margin-top: 8px;
            flex-wrap: wrap;

            .img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }

            .address-item {
                margin-right: 20px;
                margin-top: 12px;
            }
        }

        .price-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            margin-top: 15px;
            align-items: end;
            // line-height: 28px;

            .time {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #7F7F7F;
                margin-left: 15px;
            }

            .price {
                font-family: 'Arial-Black', 'Arial Black', sans-serif;
                font-weight: 900;
                font-size: 20px;
                color: #F95D5D;
                line-height: 20px;
                margin: 0 8px;
            }

            .unit {
                font-family: 'Arial-Black', 'Arial Black', sans-serif;
                font-weight: 900;
                color: #000000;
                font-size: 14px;
                line-height: 14px;
            }
        }

        .first-tab {
            background: rgba(51, 51, 51, 1);
            color: #fff;
        }
    }

    .btm-box {
        padding: 0 20px;
        height: 58px;
        border-top: 1px dashed #d7d7d7;

        .intermediary-tab-img {
            width: 85px;
            height: 20px;
            margin-left: 15px;
        }

        .user-img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .user-name {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #555555;
            font-size: 14px;
            margin-left: 10px;
        }

        .btn {
            margin-left: 10px;
            padding: 0px 7.5px;
            height: 24px;
            background-color: rgba(242, 242, 242, 0);
            border: 1px solid rgba(215, 215, 215, 1);
            border-radius: 42px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            text-align: center;
        }

        .cancel-collection {
            font-size: 14px;
            color: #333333;
            // padding: 0 23px;
            height: 100%;
            cursor: pointer;

            .icon {
                width: 16px;
                height: 16px;
                margin-right: 3px;
            }
        }
    }

    .data-info {
        color: #555555;
        font-size: 14px;
        margin-top: 24px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;

        .longstring {
            width: 2px;
            height: 13px;
            background-color: #d7d7d7;
            margin: 0 16px;
        }

        .info-item {
            .itemm {
                .item-icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                }
            }
        }
    }

    .publish-footer {
        height: 85px;
        border-top: 1px dotted #d7d7d7;
        justify-content: flex-end;
        padding: 0 20px;
        user-select: none;

        .publish-item {
            width: 100px;
            height: 40px;
            border: 1px solid rgba(170, 170, 170, 1);
            font-size: 15px;
            color: #555555;
            border-radius: 45px;
            cursor: pointer;
            margin-left: 10px;

            &.go-up {
                border: none;
                color: #fff;
                background-color: rgba(98, 177, 255, 1);
            }

            &.already-go-up {
                border: none;
                color: #AAAAAA;
                background-color: rgba(242, 242, 242, 1);
            }
        }
    }
}
</style>