<template>
    <TContainer>
        <view class="contract">
            <view class="search">
                <TSearch
                    v-model="searchValue"
                    placeholder="请输入合同名称/签署方"
                    backgroundColor="#F4F4F4"
                />
                <u-dropdown ref="uDropdownRef">
                    <u-dropdown-item
                        v-model="contractStatus"
                        title="合同状态"
                        :options="contractStatusOptions"
                    ></u-dropdown-item>
                    <u-dropdown-item title="截至日期">
                        <view class="end-date">
                            <TDateTimePicker
                                v-model="endTime"
                                :show="true"
                                @confirm="confirm"
                                @cancel="cancel"
                            ></TDateTimePicker>
                        </view>
                    </u-dropdown-item>
                </u-dropdown>
            </view>
            <view class="list">
                <block v-for="item in contractList" :key="item.id">
                    <ContractCard :item="item" />
                </block>
            </view>
            <view class="float-btn" @click="handleAddContract">
                <view>
                    <TIcon name="icon-add" :size="24" color="#fff" />
                </view>
            </view>
        </view>
    </TContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ContractCard from './components/contract-card.vue'

const uDropdownRef = ref()
const endTime = ref(Date.now())

const contractStatus = ref(2)
const contractStatusOptions = [
    {
        label: '全部状态',
        value: 0
    },
    {
        label: '待签署',
        value: 1
    },
    {
        label: '已完成',
        value: 2
    },
    {
        label: '已撤销',
        value: 3
    }
]

const searchValue = ref('')
const contractList = ref([
    {
        id: 1,
        contractName: '合同名称',
        signatory: '广东星星新能源有限公司',
        status: 1,
        createTime: '2024-07-27 11:15:00',
        endTime: '2024-08-08 11:51:00'
    },
    {
        id: 2,
        contractName: '合同名称',
        signatory: '广东星星新能源有限公司',
        status: 2,
        createTime: '2024-07-27 11:15:00',
        endTime: '2024-08-08 11:51:00'
    }
])
// 创建合同
const handleAddContract = () => {
    uni.navigateTo({
        url: '/bundle/pages/contract/contract-info/index'
    })
}
const confirm = val => {
    console.log(val)
}
const cancel = () => {
    endTime.value = Date.now()
    // uDropdownRef.value.close()
}
</script>

<style lang="scss" scoped>
.search {
    padding: 14rpx 0 0 0 !important;
}
.end-date {
    background-color: $white-1;
}
</style>
