<template>
	<!-- 收藏列表 -->
	<view class="page">
		<navbar
		title="收藏列表"
		leftClick 
		@leftClick="$utils.navigateBack"/>
		
		<view class="search">
			<uv-search
			placeholder="请输入搜索任务号" 
			bgColor="#fff"
			@search="getData"
			@custom="getData"
			@clear="getData"
			v-model="queryParams.taskNo"></uv-search>
		</view>
		
		<!-- 标签选项 -->
		<view class="Tabs">
			<uv-tabs :list="statusList" @click="click" ></uv-tabs>
		</view>
		
		<view class="Urgent-Work-Order">
			<uv-swipe-action>
				<view
				v-for="(item, index) in list"
				:key="item.id"
				style="margin-top: 30rpx;">
					<uv-swipe-action-item
					@click="e => clickAction(e, item)"
					:options="options">
						<WorkOrderitem
						margin="0"
						@click="$utils.navigateTo('/pages_order/order/WorkOrders?id=' + item.workorderTemplate.id)"
						:obj="item.workorderTemplate"
						/>
					</uv-swipe-action-item>
				</view>
			</uv-swipe-action>
		</view>

		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import WorkOrderitem from '@/components/work/WorkOrderitem.vue'
	import mixinsList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			WorkOrderitem,
		},
		data() {
			return {
				mixinsListApi : 'queryCollectionList',
				tagIndex : 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		computed: {
			...mapState(['statusList']),
		},
		methods: {
			valChange(){
				
			},
			click(item) {
				if(item.id){
					this.queryParams.statusId = item.id
				}else{
					delete this.queryParams.statusId
				}
				this.getData()
			},
			clickAction(e, item){
				this.deleteCollection(item.id)
			},
			//收藏信息-取消收藏
			deleteCollection(id){
				this.$api('deleteCollection', {
					collectionId : id
				}, res => {
					this.getData()
					if(res.code == 200){
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.search{
			margin: 20rpx;
		}
		.Tabs {
		}
		.Urgent-Work-Order{
			padding: 20rpx;
		}
	}
</style>