<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
		<template #top>
			<tui-tabs :tabs="tabsList" :currentTab="currentTab" :height="90" :padding="10" bold :scale="1.1" @change="change"></tui-tabs>
		</template>
		<view class="ul fs-p20">
			<view class="li fs-bg__white fs-p30 fs-size__h4 fs-radius__sm fs-mt20" v-for="(item, index) in dataList">
				<view @click="toDetails(item.id, item.problemNo, item.taskStatus)">
					<view>问题单号：{{item.problemNo}}</view>
					<view class="fs-mt16 fs-flex__between">
						<view>
							领导确认：
<!--							<tui-text v-if="item.leaderConfrimStatus == 2" text="已确认" type="success"></tui-text>-->
<!--							<tui-text v-else text="待确认" type="danger"></tui-text>-->
              <tui-text v-if="item.taskStatus == 1" text="处理中" type="danger"></tui-text>
              <tui-text v-else-if="item.taskStatus == 2" text="已处理" type="primary"></tui-text>
              <tui-text v-else-if="item.taskStatus == 3" text="已确认" type="success"></tui-text>
              <tui-text v-else-if="item.taskStatus == 4" text="已驳回" type="danger"></tui-text>
              <tui-text v-else-if="item.taskStatus == 5" text="已拒绝" type="danger"></tui-text>

						</view>


						<view>紧急程度：
							<tui-text v-if="item.pressingType == 1" type="primary" text="特急"></tui-text>
							<tui-text v-else-if="item.pressingType == 2" type="primary" text="紧急"></tui-text>
							<tui-text v-else-if="item.pressingType == 3" type="primary" text="一般"></tui-text>
						</view>
					</view>
					<view class="fs-mt16 fs-flex__between">
						<view class="fs-ellipsis fs-mr20">养护类型：{{item.maintainTypeName}}</view>
						<view class="fs-ellipsis fs-flex__1">植物类型：{{item.plantTypeName}}</view>
					</view>
					<view class="fs-mt16">道路名称：{{item.roadName}}</view>
					<view class="fs-mt16 fs-ellipsis__2">任务描述：{{item.taskRemark}}</view>
					<view class="fs-mt16">提交日期：{{item.createTime}}</view>
				</view>
				<view class="fs-mt16 fs-align__right">
					<tui-tag type="primary" padding="12rpx 30rpx" shape="circle" plain @click="toCase(item.problemNo)">问题详情</tui-tag>
					<tui-tag type="primary" padding="12rpx 30rpx" shape="circle" plain margin="0 0 0 20rpx" @click="toStep(item.problemNo)">处理进度</tui-tag>
					<block v-if="item.taskStatus == 1">
						<tui-tag type="danger" padding="12rpx 30rpx" shape="circle" plain margin="0 0 0 20rpx" @click="modalShow(item.problemNo)">驳回</tui-tag>
						<tui-tag type="green" padding="12rpx 30rpx" shape="circle" plain margin="0 0 0 20rpx" @click="toAllocation(item.id,item.problemNo,item.maintainTypeId,0)">处理</tui-tag>
					</block>
					<tui-tag v-if="item.taskStatus == 4" type="green" padding="12rpx 30rpx" shape="circle" plain margin="0 0 0 20rpx" @click="toAllocation(item.id,item.problemNo,item.maintainTypeId,1)">重新处理</tui-tag>
				</view>
			</view>
		</view>
		</z-paging>
		<tui-modal :show="modal" custom padding="30rpx 30rpx">
			<view class="fs-size__28 fs-mb20">问题单号：{{problemNo}}</view>
			<tui-textarea placeholder="请输入驳回原因" isCounter v-model="content" :maxlength="60" textareaBorder borderColor="#577ee3" :size="28" :radius="20" height="130rpx" min-height="130rpx"></tui-textarea>
			<tui-white-space size="large"></tui-white-space>
			<view class="fs-flex__center">
				<tui-button plain width="200rpx" height="60rpx" :size="28" shape="circle" margin="0 50rpx 0 0" @click="modalClose">取消</tui-button>
				<tui-button width="200rpx" height="60rpx" :size="28" shape="circle" @click="confrim">确定</tui-button>
		    </view>
		</tui-modal>
	</view>
</template>

<script>
import { apiTaskStaffList, apiMissionReject } from '@/api/work'
export default {
	data() {
		return {
			tabsList: [
				{name: "全部", sign: ""},
				{name: "处理中", sign: 1},
				{name: "已处理", sign: 2},
				{name: "已确认", sign: 3},
				{name: "已驳回", sign: 4},
				{name: "已拒绝", sign: 5}
			],
			currentTab: 0,
			dataList: [],
			problemNo: '',
			content: '',
			modal: false
		}
	},
	onLoad() {

	},
  onShow(){
    if (this.$refs.paging) {
      this.$refs.paging.refresh() // 重置到第一页并触发query事件
    }
  },
	methods: {
		// 获取记录列表
		queryList(pageNo, pageSize) {
			const params = {
				pageReq: {isAsc: 'desc', orderByColumn: 'id', pageNum: pageNo, pageSize: pageSize},
				taskStatus: this.tabsList[this.currentTab].sign
			}
			apiTaskStaffList({data:params}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 刷新列表
		refreshList() {
			this.$refs.paging.refresh()
		},
		// 切换菜单
		change(e) {
			this.currentTab = e.index
			this.$refs.paging.reload()
		},
		// 处理详情
		toDetails(id, problemNo, status) {
			const path = (status == 1 || status == 5) ? `/pages/work/case/task?id=${id}` : `/pages/work/case/result?problem_no=${problemNo}`
			uni.$tui.href(path)
		},
		// 问题详情
		toCase(problemNo) {
			uni.$tui.href(`/pages/work/daily/details?problem_no=${problemNo}`)
		},
		// 跳转处理
		toAllocation(id, problemNo, type, again) {
			let path = 'water'
			// switch (type) {
			// 	case 2:
			// 		path = 'water'
			// 		break
			// 	case 3:
			// 		path = 'trim'
			// 		break
			// 	case 4:
			// 		path = 'prevention'
			// 		break
			// 	case 5:
			// 		path = 'weed'
			// 		break
			// 	case 6:
			// 		path = 'replant'
			// 		break
			// 	case 8:
			// 		path = 'clean'
			// 		break
			// 	case 10:
			// 		path = 'manure'
			// 		break
			// }
			uni.$tui.href(`/pages/work/case/${path}?id=${id}&problem_no=${problemNo}&again=${again}`)
		},
		// 进度详情
		toStep(problemNo) {
			uni.$tui.href(`/pages/work/daily/step?problem_no=${problemNo}`)
		},
		// 员工驳回
		modalShow(problemNo) {
			this.problemNo = problemNo
			this.content = ''
			this.modal = true
		},
		// 关闭驳回弹窗
		modalClose() {
			this.modal = false
		},
		// 提交驳回
		confrim() {
			if (!this.content) {
				uni.$tui.toast('请输入驳回原因')
				return
			}
			this.modalClose()
			apiMissionReject({data:{problemNo:this.problemNo,remark:this.content}}).then(res => {
				uni.$tui.toast('提交成功')
				setTimeout(() => { this.$refs.paging.refresh() }, 1500)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.ul .li:first-child {
	margin-top: 0;
}
</style>
