<template>
	<view class="app-container">
		<u-navbar :title="title" safeAreaInsetTop placeholder>
			<view slot="left" class="text-red"></view>
		</u-navbar>
		<view class="">
			<uv-drop-down ref="dropDown" sign="dropDown_1" :customStyle="{'justifyContent':'space-around'}"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
				:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}">
				<uv-drop-down-item name="type" type="2" label="项目公司" value="0">
				</uv-drop-down-item>
				<uv-drop-down-item name="type" type="2" label="是否竣工" value="0">
				</uv-drop-down-item>
				<uv-drop-down-item name="type" type="2" label="是否立管" value="0">
				</uv-drop-down-item>
			</uv-drop-down>
		</view>

		<view class="usuallyCard margin padding" v-if="list.length" v-for="(item,index) in list" :key="index">
			<view class="flex flex-direction">
				<view class="flex justify-between">
					<view class="">
						<text class="text-grey margin-right-xs">项目公司:</text>{{item.companyName || '--'}}
					</view>
					<view class="flex">
						<u-tag bgColor="#EFF1FD" borderColor="#fff" color="#5875EE" size="mini" text="待审批"></u-tag>
					</view>
				</view>
        <view class="margin-top-sm">
        	<text class="text-grey margin-right-xs">村(小区):</text>{{item.vlgOrCmty || '--'}}
        </view>
				<view class="margin-top-sm">
					<text class="text-grey margin-right-xs">项目类型:</text>{{item.projectTypeName || '--'}}
				</view>
			</view>
			<view class="flex justify-end margin-top">
				<view class="margin-right" @click="handleDetail(item)">
					<u-button shape="circle">查看详情</u-button>
				</view>
				<view class="" @click="handleOpen(item)">
					<u-button shape="circle" color="#CF000D">工程维护</u-button>
				</view>
			</view>
			<!-- <view class="nodeCss">
				当前审批节点：项目公司_市场负责人
			</view> -->
		</view>
    <u-loadmore :status="status" v-if="list.length > 0" />
    <u-empty text="暂无资讯" icon="/static/images/icon/nodata.png" v-else></u-empty>
    <popUpFillIn :type="btnType" title="工程维护" ref="popUpFillInRef"></popUpFillIn>
		<TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar>
	</view>
</template>

<script>
  import {
    getMcConstructionList
  } from '@/api/charge.js'
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				title: "施工维护",
				keyword: "",
				actionStyle: {
					'color': '#fff',
					'background': '#EC1E19',
					'borderRadius': "15px",
					'width': '60px',
					'height': '25px',
					'line-height': '25px',
				},
        btnType:"gcwh",
				params: {
				  pageNum: 1,
				  pageSize: 10,
				  companyCode: "",
				  isCompleted: "",
				  gasConnMtrRis: ""
				},
				status: "loadmore",
				list: [],
				total: null,
			}
		},
		computed: {

		},
		onReachBottom() {
		  let allTotal = this.params.pageNum * this.params.pageSize
		  if (allTotal < this.total) {
		    //当前条数小于总条数 则增加请求页数
		    this.params.pageNum++;
		    this.status = 'loading';
		    this.initData() //调用加载数据方法
		  } else {
		    this.status = "nomore"
		    // console.log('已加载全部数据')
		  }
		},
		onPullDownRefresh() {
		  this.params.pageNum = 1;
		  this.keyword = "";
		  this.initData();
		  setTimeout(() => {
		    //结束下拉刷新
		    uni.stopPullDownRefresh();
		  }, 500);
		},
		onLoad() {
		  this.initData()
		},
		methods: {
			async initData() {
			  let {
			    code,
			    rows,
			    total
			  } = await getMcConstructionList(this.params);
			  if (code === 200) {
			    if (this.params.pageNum > 1) {
			      this.list = [...this.list, ...rows]
			    } else {
			      this.list = rows;
			    }
			    this.total = total;
			    console.log('list', JSON.parse(JSON.stringify(this.list)));
			  }
			},
      // 查看详情
      handleDetail(item) {
        uni.navigateTo({
          url: '/pages/charge/constructionMaintenance/detail?objData=' + JSON.stringify(item)
        })
      },
      handleOpen(){
        this.$refs.popUpFillInRef.open();
      }
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-search__content {
		width: 70vw;
		padding-right: 140rpx;
	}

	/deep/.u-search__action {
		position: absolute;
		left: 50%;
	}

	.nodeCss {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 25rpx auto;
		border-radius: 20rpx;
		width: 95%;
		height: 80rpx;
		background: #EFF1FD;
		color: #5875EB;
		text-align: center;
	}


	.nodeCss::after {
		content: '';
		position: absolute;
		top: 0%;
		right: 25rpx;
		transform: translate(-50%, -50%) rotate(45deg);
		width: 10px;
		height: 10px;
		background: #EFF1FD;
		border: 1px solid #EFF1FD;
		border-style: none none solid solid;
	}
</style>