<template>
	<view class="container">
		<Navbar title="入户安检" canBack></Navbar>
		<view class="topSelectCss">
			<view class="flex justify-between">
				<view class="flex align-center" v-for="(item,index) of searchList" @click="openPicker(item)" :key="`${$assignKeys(item.id)}`">
					<view class="text-lg">
            <span v-if="searchForm[item.name]">{{searchForm[item.name]}}</span>
            <span v-else>{{ item.title}}</span>
					</view>
          <view class="margin-left-xs" v-if="item.title == '安检时间'">
            <u-icon name="calendar-fill" size="25"></u-icon>
          </view>
					<view class="margin-left-xs" v-else>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="checkCardCss usuallyCard" v-for="(item,index) in securityCheckList" :key="index" @click="goToCheckDetailPage(item)">
			<view class="text-gray">
				安检时间：<text class="text-black">{{item.fAjsj}}</text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex">
					<view class="margin-top-sm margin-bottom-sm">
						<u-tag color="#5875EB" borderColor="#EFF1FD" bgColor="#EFF1FD" :text="item.fAjlx"></u-tag>
					</view>
				<!-- 	<view class="margin-top-sm margin-left-sm margin-bottom-sm">
						<u-tag color="#00AEAA" borderColor="#E6F7F7" bgColor="#E6F7F7" :text="item.fAjlx"></u-tag>
					</view> -->
				</view>
				<view class="flex justify-between align-center">
					<view class="text-gray">
						查看安检单
					</view>
					<view class="">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="text-gray">
				异常项目数：<text class="themeColor">{{item.fYcts}}项</text>
			</view>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="!securityCheckList.length"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10" v-else />
    <u-picker :show="showPicker" :defaultIndex="[0]" :closeOnClickOverlay="true" @close="handleCancel"
              :columns="pickerColumns" @cancel="handleCancel" @confirm="handleConfirm">
    </u-picker>
    <datetime-picker :show="showTimeParams.showStartDailog" :cancelText="'重置'" :mode="'date'"  :value="showTimeParams.timeValue" @cancel="handleTimeCancel" @confirm="hanleTimeConfirm"></datetime-picker>
	</view>
</template>

<script>
import datetimePicker from "@/components/date-time-picker/date-time-picker.vue";
	export default {
	  components:{datetimePicker},
		data() {
			return {
        showPicker: false,
        showTimeParams:{
          showStartDailog:false,
          timeValue:Date.now()
        },
        searchForm:{
          ajlx:'',
          ajzt:'',
          ajsj:'',
        },
        pickerColumns: [],
        searchList:[
          {
            title:'安检类型',
            name:'ajlx',
            type:'select',
            dict:'安检类型',

          },
          {
            title:'安检状态',
            name:'ajzt',
            type:'select',
            dict:'安检状态'
          },
          {
            title:'安检时间',
            name:'ajsj',
            type:'time'
          }
        ],
				securityCheckList:[],
				paramsPage:{
					current:1,
					size:10
				},
				status: "loadmore",
				total: 0,
			};
		},
		async onLoad() {
			this.paramsPage.current = 1;
			await this.getInitData();
		},
    //下滑加载刷新
		onPullDownRefresh() {
			this.securityCheckList = []
			//调用获取数据方法
			this.getInitData()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
    //触底加载
		onReachBottom() {
			let allTotal = this.paramsPage.current * this.paramsPage.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.paramsPage.current++;
				this.status = 'loading';
				setTimeout(() => {
					this.getInitData()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		methods:{
      async openPicker(data) {
        console.log('打印data-===', data);
        this.pickerName = data.name;
        if (data.type === 'select') {
          const columns = await this.getDIctData(data.dict);
          this.pickerColumns = columns;
          this.showPicker = true;
        }else{
          console.log('打印data===',data);
          this.showTimeParams.showStartDailog = true;
        }
      },
      async getDIctData(dict) {
        console.log('打印dict', dict)
        let query = [{
          key: 'NAME_',
          value: dict
        }];
        return new Promise(async (resolve, reject) => {
          try {
            const result = await this.$api.dictApi.getDict(query);
            console.log("字典返回", result);
            let {
              rows
            } = result;
            rows = rows.map(item => item.NAME_);
            resolve([rows]);
          } catch (error) {
            reject(error);
          }
        });
      },
      //关闭时间弹窗
     async handleTimeCancel(){
        this.showTimeParams.showStartDailog = false;
        this.searchForm[this.pickerName] = '';
        await this.initQuery();
        console.log('打印是否触发关闭时间弹窗');
      },
		  //关闭弹窗
      handleCancel() {
        this.showPicker = false
      },
      //点击时间弹窗完成按钮
      async hanleTimeConfirm(time){
        console.log('打印time',time);
        // 创建一个新的Date对象并设置其时间戳属性
        var dateObj = new Date(time.value);
        // 提取年份、月份和日期信息
        var year = dateObj.getFullYear();
        var month = (dateObj.getMonth() + 1 < 10 ? '0' + (dateObj.getMonth() + 1) : dateObj.getMonth() + 1); // 注意月份从0开始计数，所以需要加1
        var day = (dateObj.getDate() < 10 ? '0' + dateObj.getDate() : dateObj.getDate());
        this.showTimeParams.showStartDailog = false;
        this.searchForm[this.pickerName] = year+'-'+month+'-'+day;
        await this.initQuery();
      },
      //点击弹窗完成按钮
      async handleConfirm(e) {
        console.log('打印e', e);
        this.showPicker = false;
        this.searchForm[this.pickerName] = e.value[0];
        await this.initQuery();
      },
		goToCheckDetailPage(val){
			console.log('打印val',val);
			uni.navigateTo({
				url:`/pages/mine/appList/homeSecurity/checkDetail?id=${val.id}`
			})
		},
      //初始化搜索
      async initQuery(){
        this.paramsPage.current = 1;
        await this.getInitData();
      },
			async getInitData(){
        console.log('打印this.ser',this.searchForm.ajzt)
				let params ={
					size:10,
					current:this.paramsPage.current,
					ajlx:this.searchForm.ajlx?this.searchForm.ajlx=='全部'?null:this.searchForm.ajlx:null,
					ajsj:this.searchForm.ajsj?this.searchForm.ajsj:'',
					ajjl: this.searchForm.ajzt?this.searchForm.ajzt=='全部'?null:this.searchForm.ajzt:''
				}
				 let result = await this.$api.securityCheckApi.getMyselfAjList(params);
				 let {
				 	code,
				 	value
				 } = result;
				 if (code === 200) {
					 console.log('打印value', value)
				 	let allTotal = this.paramsPage.current * this.paramsPage.size
				 	this.total = value.total
				 	const newlist = value.records;
				 	if (this.paramsPage.current === 1) {
				 		this.securityCheckList = newlist;
				 	} else {
				 		this.securityCheckList.push(...newlist)
				 	}
				 	if (this.securityCheckList.length < allTotal) {
				 		this.status = 'nomore'
				 	}
				 }
				console.log('打印getInitData',result)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		// background-color: #f1f1f1 !important;
		padding-bottom: 10px;
	}
	.topSelectCss {
		padding: 10px 20px;
		background: #fff;
	}
	.checkCardCss{
		margin: 10px;
		padding: 20px 10px;
	}
</style>