<template>
	<view class="workorderlist">
		<!-- 输入框示例 -->
					<uni-popup ref="titleInputDialog" type="dialog" >
						<uni-section title="" subTitle="请简短描述您遇到的问题" type="line" padding>
									<uni-easyinput maxlength="100" type="textarea" style="width: 600rpx;" v-model="title" placeholder="请简单描述您遇到的问题(100字以内)"></uni-easyinput>
						<button  class="nextButton"  @click="creatNew()">下一步</button>
						</uni-section>

					</uni-popup>
		<view class="top">
			<button   size="mini" plain="true" class="addbutton"   @click="creatClick()">创建工单</button>
		</view>
		<uni-list v-if="orderList.length>0" id="container">
			<uni-list-item v-for="(item,index) in orderList" :key="index" link
				:to="`/pages/chat/chat?workorder=${item.id}`" :title="item.title"
				:note="item.content!=null?item.content:'未留言'">
				<template v-slot:footer>
					<view class="right">
						<view style="text-align: center;">
							<uni-tag v-if="item.status==1" text="未处理" type="primary" inverted></uni-tag>
							<uni-tag v-if="item.status==2" text="处理中" type="warning" inverted></uni-tag>
							<uni-tag v-if="item.status==3" text="完结" type="default" inverted></uni-tag>
						</view>
						<view class="time">{{item.created_at}}</view>
					</view>
				</template>
			</uni-list-item>

		</uni-list>
		<view v-else class="tishi" style="padding-top: 40rpx;">
			欢迎使用工单
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,watch,nextTick
	} from "vue"
	import {
		ChatcreatNewAction, //新建对话
		ChatGetWorkOrderListAction, //获取工单列表
		$response
	} from '@/api'
	import{onBackPress} from '@dcloudio/uni-app'
	import { useRouter } from 'vue-router';
	const router = useRouter();
watch(
      () => router.currentRoute.value,
      (to, from) => {
        // 在每次路由变化时执行的逻辑
        // 执行你的方法
       getlist()
      }
    );
	let titleInputDialog=ref(null)
	let title=ref('')
	//点击右上角新建按钮
	const creatClick=()=>{
    if(IncompleteCount.value==0){
      title.value=''
      titleInputDialog.value.open()
    }else{
      uni.showToast({
        title: "存在未关闭工单，请先关闭，再创建新工单",
        duration: 2000,
        icon:'none'
      });
      return false
    }
  }

	const creatNew = async () => {
		if(title.value==''){
			uni.showToast({
				title: "请简短描述需求",
				duration: 2000,
				icon:'none'
			});
			return false
		}
		uni.showLoading({
			title: '加载中'
		});
		const response = await ChatcreatNewAction({title:title.value})
		uni.hideLoading();
		titleInputDialog.value.close()
		$response(response, () => {
			console.log(response)
			if (response.data.status == true) {

				uni.navigateTo({
					url: `/pages/chat/chat?workorder=` + response.data.id
				})
			}
		})
	}
  let IncompleteCount=ref(0)
  let orderList = ref([])
	const getlist = async () => {
		uni.showLoading({
			title: '加载中'
		});
		const response = await ChatGetWorkOrderListAction()
		uni.hideLoading();
		$response(response, () => {
			console.log('---------------------')
			if (response.data.status) {
				orderList.value = response.data.list
        IncompleteCount.value=response.data.incompleteCount
      }
		})

	}


	onMounted(() => {
		uni.setNavigationBarTitle({
			title: "健康管理平台"
		})
		 getlist()

	})
 console.log(55555555)


</script>

<style scoped>
	.time {
		font-size: 20rpx;
		color: #CCC;
		margin-top: 20rpx;
	}

	.workorderlist {
		background-color: #fcfcfc;
		height: 100vh;
	}
	.top{
		width: 100%;
		text-align: right;
		padding-top: 20rpx;
	}
	.addbutton{
		margin-right: 20rpx;
		background-color: #35c6c6;
		color: #fff;
		border: 1px solid #fff;
		margin-bottom: 10rpx;
	}
	.tishi {
		text-align: center;
		font-size: 20rpx;
		color: #ccc;
	}
	.nextButton{
		background-color: #35c6c6;
		height:60rpx;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
</style>
