<template>
	<view class="box">

		<view class="tabList">
			<view :class="['tabItem', status == 0 ? 'active' : '']" @click="changeTab" data-index="0">全部</view>
			<view :class="['tabItem', status == 1 ? 'active' : '']" @click="changeTab" data-index="1">待处理</view>
			<view :class="['tabItem', status == 2 ? 'active' : '']" @click="changeTab" data-index="2">处理中</view>
			<view :class="['tabItem', status == 3 ? 'active' : '']" @click="changeTab" data-index="3">已完成</view>
		</view>


		<view class="recordList" v-if="list.length != 0">
			<view class="recordItem" v-for="(item, index) in list" @click="headerRepairDetailClick" :data-id="item.feed_id">
				<view class="recordItem_Msg">
					<view class="recordItem_Msg_left">
						<view class="recordItem_Msg_left_tit">{{item.details}}</view>

						<view class="recordItem_Msg_left_msg">
							联系人：{{item.user_name}}
						</view>
						<view class="recordItem_Msg_left_msg">
							联系人电话：{{item.mobile}}
						</view>
						<view class="recordItem_Msg_left_msg">
							期望上门：{{item.hope_order_time}}
						</view>
						<view class="recordItem_Msg_left_msg">
							提交时间：{{item.create_time}}
						</view>
					</view>
					<!-- <view class="recordItem_Msg_right_state1" wx:if="{{item.status == 0}}">待处理</view>
	      <view class="recordItem_Msg_right_state2" wx:if="{{item.status == 1}}">已完成</view>
	      <view class="recordItem_Msg_right_state3" wx:if="{{item.status == 2}}">处理中</view> -->
				</view>
			</view>
		</view>

		<view v-if="list.length == 0" class="emplty">
			<u-empty iconSize="180" textSize='28' text="暂无内容" />
		</view>

		<view class="btn" @click="headerRepairClick">我要报修</view>

	</view>
</template>

<script>
	import { request, picUrl, NavgateTo } from '../../utils';
	import { apiArr } from '../../api/community';
	export default {
		data() {
			return {
				page_num: 1,
				page_size: 10,
				flag: false,
				list: [],
				id: "",
				title: '',
				status: 0
			}
		},
		methods: {
			async init() {
				const res = await request(apiArr.getListByRepair, 'POST', {
					community_id: this.id,
					page_num: this.page_num,
					page_size: this.page_size,
					status: this.status
				})
				if (res.rows) {
					let flag = false
					if (res.rows.length == this.page_size) {
						flag = true
					} else {
						flag = false
					}
					
					this.flag = flag;
					this.page_num = this.page_num + 1;
					this.list = this.list.concat(res.rows || []);
				}
			},
			
			headerRepairClick(e){
				NavgateTo(`/community/oneRepair/index`, { isLogin: false })
			},
			headerRepairDetailClick(e){
				const { id } = e.currentTarget.dataset
				NavgateTo(`/community/repairDetail/index?id=${id}&title=${this.title}`, { isLogin: false })
			},
			
			changeTab(e){
				this.status = Number(e.currentTarget.dataset.index);
				this.flag = false;
				this.page_num = 1;
				this.list = [];
		
				this.init()
			},
			
		},

		onLoad(options) {
			this.id = Number(options.id);
			this.title = options.title;
			uni.setNavigationBarTitle({
				title: options.title,
			});
			this.init()
		},
	}
</script>

<style>
	@import url("./index.css");
</style>