<template>
	<view class="bg-page">
		<u-navbar :isBack="showAppbar" :title="showAppbar?'友情链接':''" :background="background" :custom-back="goback"
		 :title-color="titleColor" :back-icon-color="titleColor">
			<view class="nav_slot_right_box" slot="right">
				<view v-auth="['endpoint.friend_links.edit']" class="custom_btn add_btn" @click="addBtn()">新增</view>
			</view>
		 </u-navbar>
		 <u-sticky z-index="99">
		<view class="secreen-section" style="background-color: #fff;">
			<u-dropdown class="dropdown-box" :class="[dropDownShow?'':'downClose']" ref="uDropdown" 
			@open="openDropDown" @close="dropdownClose">
				<u-dropdown-item title="类型" v-model="q_type"
				:options="typelist" @change="change1"></u-dropdown-item>
				<u-dropdown-item title="时间范围">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<view class="select-date u-border-bottom" >
							<view class="name" @click="calendarShow = true">
								<u-icon name="calendar" color="#333" size="32"></u-icon>
								<text style="margin-left: 6rpx;">时间范围：</text>
							</view>
							<view class="time_box" @click="calendarShow = true">
								<view class="tip_txt" v-if="!start_date_c"
								>开始日期-结束日期</view>
								<view class="tile_val" v-else
								>{{start_date_c}} ~ {{end_date_c}}</view>
								<view class="delete_btn" v-if="start_date_c" @click.stop="deleteDateFn()">
									<u-icon name="close-circle" color="#333" size="34"></u-icon>
								</view>
							</view>
							
						</view>
						<u-button type="primary" @click="selectedDateConform()">确定</u-button>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		</u-sticky>
		<!-- <view class="page-top-title-box">
			<view class="title">链接列表</view>
			<view class="handle-option">
				<u-button class="btn" size="medium"
				 @click="addBtn()" type="primary">新增</u-button>
			</view>
		</view> -->

		
		<view class="content-box">
			<u-swipe-action class="tb_swipe_list" 
				 v-for="(item, index) in list" 
				 :show="item.show" :index="index" :key="item.id" 
				@click="click"
				@open="open"
				:options="options"
				>
				<view class="tb_body" @click="showInfo(index)">
					<view class="row_box">
						<view class="text">名称：{{ item.name }}</view>
					</view>
					<!-- <view class="row_box">
						<view class="text">排序：{{ item.sort }}</view>
					</view> -->
					<view class="row_box">
						<view class="text">类型：{{typeName[item.type]}}</view>
					</view>
					<!-- <view class="row_box">
						<view class="text">内链：{{item.is_iframe==1?'开启':'关闭'}}</view>
					</view>
					<view class="row_box">
						<view class="text">推荐：{{item.is_recommend==1?'是':'否'}}</view>
					</view> -->
					<view class="row_box">
						<view class="text">状态：{{item.is_show==1?'开启':'关闭'}}</view>
					</view>
					<view class="row_box">
						<view class="text">创建时间：{{item.created_at|timeFormat}}</view>
					</view>
					
				</view>
			</u-swipe-action>
			<u-loadmore :status="loading" margin-top="60"/>
		</view>
		<!-- 编辑 -->
		<u-popup v-model="editShow" border-radius="28" width="92%" height="70%"
		 mode="center" :closeable="true" :mask-close-able="false" z-index="910">
			<view class="popup-form-ubox">
				<view class="top_box">
					<view class="title" v-if="setInfo.id">编辑链接</view>
					<view class="title" v-else>新增链接</view>
				</view>
				<scroll-view class="scroll-y" scroll-y="true">
					<view class="form_edit" style="padding-left: 50rpx;">
						<u-form>
							<u-form-item label="ID" label-width="140" v-if="setInfo.id">
								<view class="input_box bg_colorf8 pdlr12">
									<u-input v-model="setInfo.id" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="名称" label-width="140" :required='true'>
								<view class="input_box">
									<u-input v-model="setInfo.name" />
								</view>
							</u-form-item>
							<u-form-item label="排序" label-width="140">
								<view class="input_box">
									<u-input v-model="setInfo.sort" type="number"/>
								</view>
							</u-form-item>
							<u-form-item label="是否内链" label-width="140">
								<view class="input_box flex-row align-items-c">
									<u-switch v-model="setInfo.is_iframe" size="34"
									></u-switch>
									<view class="text ml20">
										{{setInfo.is_iframe==1?'是':'否'}}
									</view>
								</view>
							</u-form-item>
							<u-form-item label="推荐" label-width="140">
								<view class="input_box flex-row align-items-c">
									<u-switch v-model="setInfo.is_recommend" size="34"
									></u-switch>
									<view class="text ml20">
										{{setInfo.is_recommend?'是':'否'}}
									</view>
								</view>
							</u-form-item>
							<u-form-item label="状态" label-width="140">
								<view class="input_box flex-row align-items-c">
									<u-switch v-model="setInfo.is_show" size="34"
									></u-switch>
									<view class="text ml20">
										{{setInfo.is_show?'开启':'关闭'}}
									</view>
								</view>
							</u-form-item>
							<u-form-item label="类型" label-width="140">
								<view class="input_box">
									<view class="u-select-list select_multiple" @click="typePopupShow()">
										<view class="value u-line-2" 
										v-if="setInfo.type">{{typeName[setInfo.type]}}</view>
										<view class="placeholder" v-else>请选择</view>
										<view class="right">
											<!-- <u-icon name="arrow-right" color="#999" size="28"></u-icon> -->
										</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item label="地址" label-width="140" :required='true'>
								<view class="input_box">
									<u-input v-model="setInfo.content" type="text"/>
								</view>
							</u-form-item>
						</u-form>
						
					</view>
				</scroll-view>
				<view class="buttom_section">
					<u-button class="btn" type="default" @click="editShow = false">取消</u-button>
					<u-button class="btn" @click="editInfoBtn()" type="primary">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow" mode="bottom" border-radius="28" z-index="900">
			<view class="popup-form-info">
				<view class="top_box u-border-bottom">
					<view class="handle-btns">
						<view v-auth="['endpoint.friend_links.destroy']" class="btn_del" @click="deleteInfoId(formInfo.id)">删除</view>
						<view v-auth="['endpoint.friend_links.edit']" class="btn_edit" @click="editInfoId(formInfo.id)">编辑</view>
					</view>
				</view>
				<view class="section_c">
					
					<view class="plist u-border-bottom">
						<view class="label_t">名称</view>
						<view class="flex-1">{{formInfo.name}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">排序</view>
						<view class="flex-1">{{formInfo.sort}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">类型</view>
						<view class="flex-1">{{typeName[formInfo.type]}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">内链</view>
						<view class="flex-1">{{formInfo.is_iframe==1?'开启':'关闭'}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">推荐</view>
						<view class="flex-1 flex-row align-items">
							<view class="text" style="margin-right: 20rpx;">
								{{formInfo.is_recommend==1?'是':'否'}}
							</view>
						</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">状态</view>
						<view class="flex-1">{{formInfo.is_show==1?'开启':'关闭'}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">创建时间</view>
						<view class="flex-1">{{formInfo.created_at|timeFormat}}</view>
					</view>
					<view class="plist u-border-bottom">
						<view class="label_t">地址</view>
						<view class="flex-1">{{formInfo.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="select2" :list="typelist" :default-value="select2Value" mode="single-column"
		 @confirm="uselectConfirm"></u-select>
		 <u-calendar v-model="calendarShow" :mode="'range'"
		  @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	import {formatDate,navigateBack,showLoading,hideLoading} from '@/com/utils.js'
	import checkPermission from '@/utils/permission.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor:'#2a7dc9',
				},
				titleColor:"#ffffff",
				per_page:10,
				page:1,
				list:[],
				loading:'loadmore',
				popupShow:false,
				cindex:-1,//操作的索引
				editShow:false,
				formInfo:{},
				typeName:{
					1:'链接',
					2:'视频',
					3:'文章'
				},
				setInfo:{
					id:'',
					name:'',
					sort:1,
					is_iframe:false,
					is_recommend:false,
					is_show:true,
					type:1,
					content:'',
				},
				select2:false,
				typelist: [
					{
						value: 1,
						label: '链接'
					},
					{
						value: 2,
						label: '视频'
					},
					{
						value: 3,
						label: '文章'
					}
				],
				select2Value:[0],
				start_date_c:'',
				end_date_c:'',
				calendarShow:false,
				q_start_time:'',
				q_end_time:'',
				q_type:'',
				dropDownShow:false,
			};
		},
		computed: {
    options() {
      return [
        {
          text: '编辑',
          opt: 'edit',
          permission: ['endpoint.friend_links.edit'],
          style: {
            backgroundColor: '#007aff',
          },
        },
        {
          text: '删除',
          opt: 'delete',
          permission: ['endpoint.friend_links.destroy'],
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ].filter((e) => checkPermission(e.permission))
    },
  },
		filters:{
			timeFormat(val){
				return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
			},
		},
		onLoad() {
			this.queryDataList();
		},
		methods: {
			change1(){
				this.queryDataList(true);
			},
			selectedDateConform(){
				this.q_start_time = this.start_date_c;
				this.q_end_time = this.end_date_c;
				this.queryDataList(true);
				this.$refs.uDropdown.close();
			},
			//日期范围
			calendarChange(e){
				console.log(e,'日期范围')
				this.start_date_c = e.startDate;
				this.end_date_c = e.endDate;
			},
			deleteDateFn(){
				this.start_date_c = '';
				this.end_date_c = '';
			},
			dropdownClose(){
				this.dropDownShow= false;
			},
			openDropDown(index){
				this.dropDownShow= true;
				if(index==1){//日期
					this.start_date_c = this.q_start_time;
					this.end_date_c = this.q_end_time;
				}
			},
			typePopupShow(){
				// this.select2 = true;
			},
			addBtn(){
				this.setInfoKeys('add');
				this.editShow = true;
			},
			showInfo(index){
				this.cindex = index;
				let _id = this.list[index].id;
				this.queryInfo(_id);
				this.formInfo = this.list[index];
				this.popupShow = true;
				
			},
			open(index){
				this.list[index].show = true;
			},
			click(index, index1) {
				console.log(index,index1,this.list[index])
				if(index1 == 1) {
					this.cindex = index;
					let _id = this.list[index].id;
					this.deleteInfoId(_id);
				} else {//编辑
					let _id = this.list[index].id;
					this.queryInfo(_id);
					this.formInfo = this.list[index];
					this.setInfoKeys();
					this.editShow = true;
					this.list[index].show = false;
					
				}
				
			},
			queryDataList(refresh){
				if(refresh){
					this.loading = 'loadmore';
					this.page = 1;
				}
				if(this.loading=='nomore'){//超出最大页
					return false;
				}
				let params = {
					per_page:this.per_page,
					page: this.page ++,
					_t: new Date().getTime()
				}
				if(this.q_start_time){
					params['start_time'] = this.q_start_time +' 00:01';
					params['end_time'] = this.q_end_time+' 23:59';
				}
				if(this.q_type){
					params['type'] = this.q_type
				}
				this.loading = 'loading';
				this.$http.get('/api/friend-links',{params:params}).then(({data})=>{
					console.log(data)
					if(refresh){
						this.list = [];
					}
					this.loading = 'loadmore';
					if(data.code==200){
						let _list = data.data|| [];
						for(let item of _list){
							item.show = false;
						}
						this.list = this.list.concat(_list);
						console.log(this.list);
						if(this.list.length>= data.meta.total){
							this.loading ='nomore';
						}
					}
				}).catch(()=>{
					this.loading = 'loadmore';
				})
			},
			//修改
			editInfoBtn(){
				if(!this.valiFormRule()){
					return false;
				}
				let {id,name,sort,is_iframe,is_recommend,is_show,type,content} = this.setInfo;
				let params = {
					name:name,
					sort:sort,
					is_iframe:is_iframe?1:0,
					is_recommend:is_recommend?1:0,
					is_show:is_show?1:0,
					type:type,
					content:content,
				}
				showLoading('请稍等...');
				if(id){params['id'] = id;}
				if(params['id']){
					this.$http.put(`/api/friend-links/${id}`,params).then(({data})=>{
						hideLoading();
						if(data.code==200){
							this.editShow = false;
							this.queryDataList(true);
						}
						uni.showToast({ title: data.message, icon: 'none' });
					}).catch(()=>{
						hideLoading();
					})
				}else{
					this.$http.post(`/api/friend-links`,params).then(({data})=>{
						hideLoading();
						if(data.code==200){
							this.queryDataList(true);
							this.editShow = false;
						}
						uni.showToast({ title: data.message, icon: 'none' });
					}).catch(()=>{
						hideLoading();
					})
				}
				
			},
			editInfoId(id){
				// this.queryInfo(id);

				this.setInfoKeys();
				this.editShow = true;
				this.popupShow = false;
			},
			setInfoKeys(type){
				let info = {
					id:'',
					name:'',
					sort:1,
					is_iframe:false,
					is_recommend:false,
					is_show:true,
					type:1,
					content:'',
				}
				if(type=='add'){
					this.setInfo = info;
				}else{
					let {id,name,sort,is_iframe,is_recommend,is_show,type,content} = this.formInfo;
					info['id'] = id;
					info['name'] = name;
					info['sort'] = sort;
					info['is_iframe'] = is_iframe==1?true:false;
					info['is_recommend'] = is_recommend==1?true:false;
					info['is_show'] = is_show==1?true:false;
					info['type'] = type;
					info['content'] = content;
					this.setInfo = info;
				}
			},
			//删除deleteInfoId
			deleteInfoId(id){
				uni.showModal({
					title: '提示',
					content: '是否确定删除？',
					success:  (res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							showLoading('请稍等...');
							this.$http.delete(`/api/friend-links/${id}`).then(({data})=>{
								hideLoading();
								if(data.code==200){
									this.formInfo = {};//重置删除
									this.popupShow = false;
									this.list.splice(this.cindex,1);
									
								}
								uni.showToast({ title: data.message, icon: 'none' });
							}).catch(()=>{
								hideLoading();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			valiFormRule(){
				let {id,name,sort,is_iframe,is_recommend,is_show,type,content} = this.setInfo;
				
				if(name==''){
					uni.showToast({ title: '名称不能为空', icon: 'none' });
					return false;
				}

				if(type==''){
					uni.showToast({ title: '类型不能为空', icon: 'none' });
					return false;
				}
				if(content==''){
					uni.showToast({ title: '地址不能为空', icon: 'none' });
					return false;
				}
				
				return true;
			},
			queryInfo(id){
				this.$http.get(`/api/friend-links/${id}`).then(({data})=>{
					console.log(data,'queryInfo===')
					if(data.code==200){
						this.formInfo = data.data;
						this.setInfoKeys();
					}
				}).catch((err)=>{
					
				})
			},
			goback(){
				navigateBack()
			}
		},
		//触底加载
		onReachBottom() {
			if(this.loading=='loadmore'){
				this.queryDataList();
			}
		},
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding: 30rpx;
}

</style>
