<template>
    <!-- 首页 -->
    <view class="index-container">
        <view class="index-header">
            <view class="user-name"> 您好！{{ userCompanyName }} </view>
            <view class="notice-box">
                <van-image height="0.8rem" width="4rem" :src="noticeImg" />
                <view>
                    <van-notice-bar
                        background="transparent"
                        color="#00a288"
                        left-icon="volume-o"
                        :scrollable="false"
                    >
                        <van-swipe
                            vertical
                            :autoplay="3000"
                            :touchable="false"
                            :show-indicators="false"
                            class="notice-swipe"
                        >
                            <van-swipe-item :key="item.noticeId" v-for="item in noticeListMessage">
                                <van-text-ellipsis
                                    :content="item.noticeTitle"
                                    @click="handleMsg(item)"
                                />
                            </van-swipe-item>
                        </van-swipe>
                    </van-notice-bar>
                </view>
            </view>

            <view class="search-ipt">
                <SearchIpt
                    @onSearchByType="onSearchByType"
                    v-model:activeTypeName="activeTypeName"
                    v-model:searchModelValue="searchModelValue"
                />
            </view>
        </view>

        <view class="order-data class-filter">
            <TitleTip :title="`分类筛选`" />
            <van-grid :column-num="2" :border="false">
                <van-grid-item @click="onJumpClassFilter(0)">
                    <view class="class-box">
                        <view class="left-img"> </view>
                        装备分类
                    </view>
                </van-grid-item>
                <van-grid-item @click="onJumpClassFilter(1)">
                    <view class="class-box">
                        <view class="right-img"> </view>
                        公司分类
                    </view>
                </van-grid-item>
            </van-grid>
        </view>
        <view class="order-data">
            <TitleTip />
            <van-cell-group inset>
                <van-grid :column-num="3">
                    <van-grid-item v-for="(o, i) in orderData" :key="i" @click="onViewMyOrder(o)">
                        <van-icon :name="o.order_icon" size="30" />
                        <text class="order-title">{{ o.order_title }}</text>
                        <text class="order-count">{{ o.order_count }}</text>
                    </van-grid-item>
                </van-grid>
            </van-cell-group>
        </view>

        <view class="to-do-list">
            <TitleTip :title="`待办事项`" />
            <van-list>
                <van-cell-group inset>
                    <van-cell v-for="item in toDoListMessage" :key="item.taskId">
                        <view class="items-info">
                            您有一条{{ orderText(item.taskStatus) }}订单
                            <text @click="onViewMore(item)">点击查看</text>
                        </view>
                    </van-cell>
                </van-cell-group>
            </van-list>
        </view>
    </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import orderIcon_1 from '@/static/index/order_icon1.png'
import orderIcon_2 from '@/static/index/order_icon2.png'
import orderIcon_3 from '@/static/index/order_icon3.png'
import orderIcon_4 from '@/static/index/order_icon4.png'
import orderIcon_5 from '@/static/index/order_icon5.png'
import orderIcon_6 from '@/static/index/order_icon6.png'
import noticeImg from '@/static/index/notice.png'
import SearchIpt from '@/components/SearchIpt/index'
import TitleTip from '@/components/TitleTip/index'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores/index.js'
import {
    getToDoListAPI,
    getNoticeLListAPI,
    getOrderStatusCountAPI,
} from '@/services/index/index.js'

const activeTypeName = ref('机具')
const searchModelValue = ref('')
const memberStore = useMemberStore()
const userCompanyName = ref()
const showPopover = ref(false)
const activeUser = ref(1)
const finished = ref(false)
const toDoListMessage = ref([])
const noticeListMessage = ref([])

const orderData = ref([
    { order_title: '我的订单', order_count: 0, order_status: 0, order_icon: orderIcon_1 },
    { order_title: '租赁中', order_status: 4, order_count: 0, order_icon: orderIcon_4 },
    { order_title: '已完成', order_status: 20, order_count: 0, order_icon: orderIcon_6 },
])
const userActions = ref([
    { text: '出租方', userType: 1 },
    { text: '承租方', userType: 2 },
])
const statusList = [
    { id: '1', name: '待接单' },
    { id: '2', name: '待出库' },
    { id: '3', name: '待收货' },
    { id: '4', name: '租赁中' },
    { id: '5', name: '已退租' },
    { id: '10', name: '已检修待结算' },
    { id: '15', name: '结算待确认' },
    { id: '20', name: '已完成' },
    { id: '99', name: '已取消' },
]

const orderText = (status) => {
    return statusList.filter((e) => e.id == status)[0].name
}
const onUserSelect = (e) => {
    activeUser.value = e.userType
    memberStore.editUserType(e.userType)
    uni.setTabBarItem({
        index: 2,
        visible: e.userType === 1 ? false : true,
    })
    getOrderStatusCountData()
}

const onSearchByType = (value, type) => {
    /**
     *  @type 1 查询机具 2 查询需求
     *  @value 搜索框值
     */
    if (type === 2) {
        uni.setStorageSync('myParam', { value: searchModelValue.value, type: 2 })
        uni.switchTab({
            url: `/pages/lease-demand/index`,
        })
    } else {
        uni.navigateTo({
            url: `/pages/goods-list/index?value=${value}&type=1`,
        })
    }
}

const getOrderStatusCountData = async () => {
    const { data: res } = await getOrderStatusCountAPI({
        flag: activeUser.value === false,
    })
    orderData.value[0].order_count = res.length
    orderData.value[1].order_count = res.filter((e) => e.orderStatus == 2).length
    orderData.value[2].order_count = res.filter((e) => e.orderStatus == 3).length
    orderData.value[3].order_count = res.filter((e) => e.orderStatus == 4).length
    orderData.value[4].order_count = res.filter((e) => e.orderStatus == 5).length
    orderData.value[5].order_count = res.filter((e) => e.orderStatus == 20).length
}

const onViewMyOrder = (order) => {
    uni.navigateTo({
        url: `/pages/order-list/index?type=2&status=${order.order_status}`,
    })
}

const onViewMore = (item) => {
    let rolesType = ''

    if (['3', '15'].includes(item.taskStatus)) {
        rolesType = 2
    }
    if (['1', '2', '4', '5', '10'].includes(item.taskStatus)) {
        rolesType = 1
    }
    uni.navigateTo({
        url: `/pages/order-list/index?code=${item.taskCode}&type=${rolesType}`,
    })
}

const onJumpClassFilter = (type) => {
    uni.navigateTo({
        url: `/pages/class-page/index?type=${type}`,
    })
}

// 点击消息
const handleMsg = (item) => {
    console.log('🚀 ~ handleMsg ~ item:', item)
    const params = item
    uni.navigateTo({
        url: `/pages/index/msgDetails?params=${JSON.stringify(params)}`,
    })
}

onLoad(() => {
    finished.value = true
    userCompanyName.value = memberStore?.userCompanyName
})

onShow(async () => {
    activeUser.value = memberStore.userType
    getOrderStatusCountData()
    const res = await getToDoListAPI()
    const { data: result } = await getNoticeLListAPI()
    toDoListMessage.value = res.rows
    noticeListMessage.value = result.rows
})
</script>

<style lang="scss" scoped>
.index-container {
    .index-header {
        padding: 5px 20px 30px;
        box-sizing: border-box;
        background: linear-gradient(to bottom, #99dbc4, #aeded9, #daf4f3);
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;

        .user-name {
            margin-bottom: 10px;
            text-align: center;
            padding: 10px 0;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .notice-box {
            display: flex;
            align-items: center;
            padding: 0 4px;
            background-color: #daf2f1;
            border-radius: 6px;

            view {
                flex: 1;
            }

            .notice-swipe {
                height: 40px;
            }
        }

        .search-ipt {
            margin-top: 20px;
            .van-field {
                width: 100%;
                padding: 0;
                height: 30px;
                line-height: 30px;
                border: 1px solid #22ab9b;
                background-color: #fff;
                border-radius: 18px;
                padding-left: 18px;
            }
        }
    }

    .order-data {
        padding: 0 10px;
        box-sizing: border-box;

        .order-title,
        .order-count {
            font-size: 13px;
        }
        .order-title {
            color: #7b7a7a;
            padding: 8px 0;
        }
    }

    .to-do-list {
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;

        .items-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #333;
            & text:first-child {
                color: #22ab9b;
            }
        }
    }
}

:deep(.van-notice-bar__left-icon),
:deep(.van-notice-bar__right-icon) {
    color: #df3939;
}
:deep(.van-text-ellipsis) {
    height: 40px;
    line-height: 40px;
}
:deep(.van-cell-group--inset) {
    padding: 0;
    margin: 0;
}
:deep(.van-tabs__content--animated) {
    padding: 0 10px;
}
:deep(.van-tab__panel) {
    max-height: 40vh;
    display: flex;
    overflow-y: auto;
}

.companyClass {
    display: flex;
    flex-wrap: wrap;
    view {
        width: calc((100% - 20px) / 3);
        margin-right: 10px;
        margin-top: 10px;
        padding: 0 6px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 16px;
        box-sizing: border-box;
        color: #999999;
        background-color: #e9e9e9;
        font-size: 14px;
    }

    & view:nth-child(3n) {
        margin-right: 0;
    }
    & view:hover {
        background-color: #22ab9b !important;
        color: #fff !important;
    }
}

.deviceClass {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    view {
        width: 100%;
        margin-top: 10px;
        padding: 0 6px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 16px;
        box-sizing: border-box;
        color: #999999;
        background-color: #e9e9e9;
        font-size: 14px;
    }

    & view:nth-child(2n) {
        margin-right: 0;
    }
    & view:hover {
        background-color: #22ab9b !important;
        color: #fff !important;
    }
}
:deep(.van-sidebar-item--select:before) {
    display: none;
}

:deep(.van-sidebar-item__text) {
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 100%; /* 最大宽度，根据需要设置 */
    display: block; /* 确保是块级元素 */
}

.class-box {
    width: 95%;
    min-height: 100px;
    background-color: #e8f3f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777777;
    font-size: 15px;

    .left-img {
        background: url('@/static/index/class-left.png') no-repeat;
        background-size: 100% 100%;
        width: 60px;
        height: 70%;
    }
    .right-img {
        background: url('@/static/index/class-right.png') no-repeat;
        background-size: 100% 100%;
        width: 60px;
        height: 70%;
    }
}
.class-filter :deep(.van-grid-item__content) {
    padding: 0;
    background-color: #f8f8f8;
}
</style>
