<template>
  <view class="risk-record-page">
	  <u-sticky>
	  	<view class="filter-bar">
	  		<view class="filter filter-date-range" @click="handleShowPicker({title: '时间区间', name: 'dateRange'})">
	  			<text>{{dateFilterTxt}}</text>
	  			<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
	  		</view>
	  		<uni-search-bar class="search-bar" radius="100" :value="keyword" @confirm="handleSearch"
	  			@cancel="handleCancelSearch" @clear="handleCancelSearch" placeholder="搜索"></uni-search-bar>
	  		<view class="filter filter-status" @click="handleShowPicker({title: '状态', name: 'status'})">
	  			<text>{{statusFilterTxt}}</text>
	  			<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
	  		</view>
	  	</view>
	  	</u-sticky>
    <view class="main">
      <view class="content-list">
        <common-card
          :dataSource="item"
          v-for="item in lists"
		  class="content"
          @click="handleToEdit"
        >
          <view>
			<view class="field">
			  <text class="label">发起人：</text>
			  <text class="value">{{item.Nav_User ? item.Nav_User.NAME : ''}}</text>
			</view>
			<view class="field">
			   <text class="label">发起时间：</text>
			   <text class="value">{{$u.timeFormat(item.CREATE_TIME,'yyyy-mm-dd')}}</text>
			 </view>
			<view class="field">
				<text class="label">状态：</text>
				<text class="status">{{item.STATUS}}</text>
			</view>
          </view>
        </common-card>
      </view>
	  <view v-if="!lists.length" class="empty-wrap">
	  	<u-empty text="暂无数据" icon="/static/empty@2x.png">
	  	</u-empty>
	  </view>
    </view>
    <u-picker
      :show="comPickerInfo.showPicker"
      :columns="comPickerInfo.columns"
      @confirm="onConfirmPicker"
	  :defaultIndex="[0]"
      @cancel="closePicker"
    ></u-picker>
  </view>
</template>

<script>
  import {
	  getRequestOrderPage
    // getTechData
  } from '../../../../services/apply/FOServices/FOServices.js'
  import {
    extendInclude, extendRule,
    initFilter
  } from '../../../../utils/common'
  import UniSearchBar from '../../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'

  export default {
    components: { UniSearchBar },
    data() {
      return {
        pageIndex: 1,
        total: 0,
        lists: [],
        keyword: '',
        searchStartTime: '',
        filterStatus: null,
        dateFilterTxt: '时间区间',
        statusFilterTxt: '状态筛选',
        comPickerInfo: {
          showPicker: false,
          columns: [],
          title: '',
          name: ''
        }
      }
    },
    onLoad() {
      this.loadData()
    },
    methods: {
     handleSearch(obj) {
     	this.keyword = obj.value
     },
      handleToEdit(obj) {
        uni.navigateTo({
          url: '/pages/apply/subPages/SCPT/changeIdentifyShow?ID=' + obj.ID
        })
      },
      handleCancelSearch() {
      	this.keyword = ''
      },
      loadData() {
        const orgId = uni.getStorageSync('orgId')
        const json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex)
          extendInclude(json, 'Nav_User');
			if (this.keyword) {
				extendRule(json, 'CODE', 9, this.keyword)
			}
			if (this.searchStartTime) {
				extendRule(json, 'CREATE_TIME', 6, this.searchStartTime)
			}
			if (this.filterStatus !== null) {
				extendRule(json, 'STATUS', 1, this.filterStatus)
			}
        getRequestOrderPage(json,"/PR/ChangeIdentifyEvaluation/OrderPaged").then(res => {
          this.total = res.TotalCount
		  for (let i = 0; i < res.Data.length; i++) {
		  	if (res.Data[i].STATUS == 0) {
		  		res.Data[i].STATUS = "草稿";
		  	}else if(res.Data[i].STATUS == 10) {
		  		res.Data[i].STATUS = "确认中";
		  	}else if(res.Data[i].STATUS == 20) {
		  		res.Data[i].STATUS = "审核中";
		  	}else if(res.Data[i].STATUS == 30) {
		  		res.Data[i].STATUS = "已归档";
		  	}
		  }
          const newRes = (res.Data || []).map(i => {
            return {
              ...i,
              title: i.CODE,
            }
          })
          if (this.pageIndex !== 1) {
            this.lists = this.lists.concat(newRes)
          } else {
            this.lists = newRes
          }
        })
      },
      handleShowPicker(p) {
        let column = []
        if (p.name === 'dateRange') {
			column = ['全部', '当天', '最近三天', '最近一周', '最近一月']
        }
        if (p.name === 'status') {
           column = ['全部', '草稿', '确认中', '审核中', '已归档']
        }
        this.comPickerInfo = {
          showPicker: true,
          title: p.title,
          name: p.name,
          columns: [column]
        }
      },
      onConfirmPicker(e) {
      	if (this.comPickerInfo.name === 'dateRange') {
      		let currentDate = new Date();
      		if (e.indexs[0] === 2) {
      			currentDate.setDate(currentDate.getDate() - 3);
      		} else if (e.indexs[0] === 3) {
      			currentDate.setDate(currentDate.getDate() - 7);
      		} else if (e.indexs[0] === 4) {
      			currentDate.setDate(currentDate.getMonth());
      		}
      		if (e.indexs[0] === 0) {
      			this.searchStartTime = ''
      			this.dateFilterTxt = '时间区间'
      		} else {
      			this.dateFilterTxt = e.value[0]
      			this.searchStartTime = uni.$u.timeFormat(currentDate, 'yyyy-mm-dd 00:00:00');
      		}
      	}
      	if (this.comPickerInfo.name === 'status') {
      		if (e.indexs[0] === 1) {
      			// 草稿 0
      			this.filterStatus = 0
      		} else if (e.indexs[0] === 2) {
      			// 确认中 10
      			this.filterStatus = 10
      		} else if (e.indexs[0] === 3) {
      			// 审核中 20
      			this.filterStatus = 20
      		}else if (e.indexs[0] === 4) {
				// 已归档 30
				this.filterStatus = 30
			}
      			
      		if (e.indexs[0] === 0) {
      			// 全部
      			this.filterStatus = null
      			this.statusFilterTxt = '状态筛选'
      		} else {
      			this.statusFilterTxt = e.value[0]
      		}
      	}
      	this.closePicker()
      },
      closePicker() {
        this.comPickerInfo = {
          showPicker: false,
          columns: [],
          title: '',
          name: ''
        }
      },
    },
	onReachBottom() {
		// 页码 +1
		if (this.total > 10 * this.pageIndex)
			this.pageIndex++
		// 重新获取列表数据
	},
	watch: {
		pageIndex(n, o) {
			this.loadData()
		},
		keyword(n, o) {
			this.pageIndex = 1
			this.keyword = n
			this.loadData()
		},
		searchStartTime(n, o) {
			this.pageIndex = 1
			this.searchStartTime = n
			this.loadData()
		},
		filterStatus(n, o) {
			this.pageIndex = 1
			this.filterStatus = n
			this.loadData()
		}
	}
  }
</script>

<style>
	.risk-record-page {
		position: relative;
	}

	.risk-record-page .main {
			padding: 0px 16px;
			position: relative;
		}
	
		.risk-record-page>>>.uni-searchbar {
			padding: 0px;
			display: flex;
			align-items: center;
			font-size: 12px;
	
			.uni-searchbar__box {
				height: 30px;
			}
	
			.uni-searchbar__box-icon-clear {
				display: flex;
				align-items: center;
			}
	
			.uni-input-placeholder {}
	
			.uni-searchbar__box-search-input {
				font-size: 12px;
			}
	
			.uni-searchbar__text-placeholder {
				font-size: 12px;
				margin-left: 0px;
			}
	
			.uni-text {
				font-size: 12px;
			}
		}
	
		.filter-bar .search-bar {
			margin-left: 20px;
			margin-right: 20px;
			width: 100%;
			display: flex;
			flex: 1;
			align-items: center;
			font-size: 12px;
		}
	
		.filter-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			padding: 10px 16px 10px 16px;
			box-shadow: 0px 0px 5px 0px #eaedf4;
		}

	.filter-bar .filter {
		display: flex;
		align-items: center;
		font-size: 12px;
		line-height: 18px;
		color: #333;
	}

	.content-list {
		padding: 10px 0;
	}

	.content .field {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 4px;
	}

	.content .field .label {
		color: #666;
	}

	.content .field .value {
		color: #333333;
	}
	.status {
		background-color: rgba(5, 109, 232, 0.1);
		color: #056DE8;
		padding: 0px 5px 0px 5px;
		border-radius: 5px;
	}
</style>