<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.newWord.serve" :isGoback="false" @isNoback="isNoback" :isRightext="ifBinaji" rightextColor="#3ECEB2"
			:rightText="i18n.newWord.finish" @Jump="complete"></myNav>
		<view class="">
			<view class="padding-w-30">
				<view class="height-50 flex align-center">
					<text v-if="ifBinaji==false" class="font-26 nummedium-font">{{i18n.newWord.title1}}</text>
					<text v-else class="font-26 nummedium-font">{{i18n.newWord.title2}} {{7 - hot_cate.length}} {{i18n.newWord.title3}}</text>
				</view>

				<view v-if="ifBinaji==false" class="height-100 flex align-center justify-between">
					<view class="height-100 flex align-center">
						<view class="width-44 height-44 margin-r-17" v-for="(item,index) in hot_cate" :key="item.id">
							<!-- <image class="width-44 height-44" :src="item.logo_image" mode=""></image> -->
							<image v-if="theme.theme=='light'" class="width-44 height-44" :src="item.logo_image" mode=""></image>
							<image v-else class="width-44 height-44" :src="item.logo2_image" mode=""></image>
						</view>
						<view class="width-44 height-44 margin-r-17" v-for="(item,index) in my_cate" :key="item.id">
							<!-- <image class="width-44 height-44" :src="item.logo_image" mode=""></image> -->
							<image v-if="theme.theme=='light'" class="width-44 height-44" :src="item.logo_image" mode=""></image>
							<image v-else class="width-44 height-44" :src="item.logo2_image" mode=""></image>
						</view>
					</view>
					<image @click="ifBinaji=true,my_cate_copy=my_cate" class="width-52 height-52"
						src="/static/imgs/index/bianji@2x.png" mode=""></image>
				</view>
			</view>

			<view v-if="ifBinaji==true" class="padding-c-18 flex align-center flex-wrap">
				<view v-for="(item,index) in hot_cate" :key="item.id" style="width: 25%;"
					class="height-120 flex direction-column align-center justify-center">
					<!-- <image class="width-44 height-44" :src="item.logo_image" mode=""></image> -->
					<image v-if="theme.theme=='light'" class="width-44 height-44" :src="item.logo_image" mode=""></image>
					<image v-else class="width-44 height-44" :src="item.logo2_image" mode=""></image>
					<text class="font-24 margin-t-10">{{item.name}}</text>
				</view>
				<view v-for="(item,index) in my_cate_copy" :key="item.id" style="width: 25%;"
					class="height-120 flex direction-column align-center justify-center relative">
					<!-- <image class="width-44 height-44" :src="item.logo_image" mode=""></image> -->
					<image v-if="theme.theme=='light'" class="width-44 height-44" :src="item.logo_image" mode=""></image>
					<image v-else class="width-44 height-44" :src="item.logo2_image" mode=""></image>
					<text class="font-24 margin-t-10">{{item.name}}</text>
					<image @click="reduce(item,index)" class="width-28 height-28 absolute"
						style="top: 0rpx;right: 20rpx;" src="/static/imgs/index/jianshao@2x.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 隔断 -->
		<view class="height-16"></view>

		<view class="">
			<view class="height-90">
				 <swiper class="swiper padding-w-10">
					<swiper-item>
						<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
							<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in all_cata"
								:key="index" @tap="tabSelect" :data-id="index" :data-name="'id'+item.id">
								{{item.name}}
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<scroll-view @scroll="scroll" :scroll-into-view="scrollID" scroll-y="true" scroll-with-animation
				:class="ifBinaji?'scroll-view-high':'scroll-view'">
				<view :id="'id'+item.id" class="width-750 margin-b-10" v-for="(item,index) in all_cata"
					:key="item.id">
					<view class="height-60 flex align-center padding-w-30">
						<text class="font-26 medium-font">{{item.name}}</text>
					</view>
					<view class="flex width-750 flex-wrap padding-t-18">
						<view @click="add(itm)" v-for="(itm,idx) in item.son" :key="itm.id" style="width: 25%;"
							:style="ifBinaji==true&&itm.is_hot==1?'opacity: 0.5;':''"
							class="height-120 flex direction-column align-center justify-center relative margin-b-10">
							<!-- <image class="width-44 height-44" :src="itm.logo_image" mode=""></image> -->
							<image v-if="theme.theme=='light'" class="width-44 height-44" :src="itm.logo_image" mode=""></image>
							<image v-else class="width-44 height-44" :src="itm.logo2_image" mode=""></image>
							<text class="font-24 margin-t-10">{{itm.name}}</text>
							<image v-if="ifBinaji==true" class="width-28 height-28 absolute"
								style="top: 0rpx;right: 20rpx;" src="/static/imgs/index/zengjia@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-popup style="z-index: 5000;" :mask-close-able="false" border-radius="30" mode="center" v-model="qcShow"
			@click.stop="">
			<view class="width-600" :style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="width-100b height-220 padding-w-30 padding-c-30 flex direction-column align-center justify-between">
					<image class="width-92 height-92" src="/static/imgs/index/tishi@2x.png" mode=""></image>
					<view class="font-26 weight-bold text-center padding-w-20">
						{{i18n.newWord.tips1}}
					</view>
				</view>
				<view class="width-100b height-90 flex align-center justify-between">
					<view @click="router.goBack()" class="qcbtn1">{{i18n.newWord.tips2}}</view>
					<view class="qcbtn2" @click.stop="complete">{{i18n.newWord.tips3}}</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifBinaji: false,
				TabCur: 0,
				scrollLeft: 0,

				ifaddOrjian: false,
				hot_cate: [],
				my_cate: [],
				all_cata: [],
				scrollID: '',
				my_cate_copy: [],

				qcShow: false,
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getopenList()
		},
		methods: {
			tabSelect(e) {
				// console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollID = e.currentTarget.dataset.name
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 减少
			reduce(item, index) {
				this.my_cate_copy.splice(index, 1)
				let subid = item.cate_id
				this.all_cata.forEach(obj => {
					if (obj.id == subid) {
						obj.son.forEach(objs => {
							if (objs.id == item.id) {
								objs.is_hot = 0
							}
						})
					}
				})
				this.ifaddOrjian = true
			},
			// 增加
			add(itm) {
				if (this.ifBinaji == true) {
					if (itm.is_hot == 1) return
					let arr = [...this.hot_cate, ...this.my_cate_copy]
					if (arr.length >= 7) return
					const result = arr.find(item => item.id === itm.id)
					console.log(result);
					if (result == undefined) {
						itm.is_hot = 1
						this.my_cate_copy.push(itm)
						this.ifaddOrjian = true
					}
				} else {
					if (itm.open_status == 1) {
						if (itm.type == 1) {
							console.log(itm.url);
							if(itm.types==1){
								uni.navigateTo({
									url: itm.url
								})
							}else{
								uni.switchTab({
									url: itm.url
								})
							}
						} else {
							// #ifdef APP-PLUS
							plus.runtime.openURL(itm.url)
							// #endif
							// #ifdef H5
							window.location.replace(itm.url)
							// #endif
						}
					} else if (itm.open_status == 2) {
						this.tos(this.i18n.newWord.toOpen)
					} else {
						this.tos(this.i18n.newWord.no)
					}
				}

			},
			getopenList() {
				this.post('/index/cate_list').then(res => {
					console.log(res)
					if (res.code == 1) {
						this.hot_cate = res.data.hot_cate
						this.my_cate = res.data.my_cate
						this.ma_cate_copy = res.data.my_cate
						this.all_cata = res.data.all_cata
					}
				})
			},

			// 完成编辑
			complete() {
				if(this.ifaddOrjian){
					let ids = []
					this.my_cate_copy.forEach(item => {
						ids.push(item.id)
					})
					this.post('/index/set_mydapp', {
						ids: ids.join(',')
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.tos(res.msg)
							this.getopenList()
							this.ifBinaji = false
							this.ifaddOrjian = false
							this.qcShow = false
						}
					})
					console.log(ids);
				}else{
					this.ifBinaji = false
					this.ifaddOrjian = false
				}
			},
			// 返回逻辑判断
			isNoback() {
				if (this.ifaddOrjian) {
					this.qcShow = true
				} else {
					if (this.ifBinaji) {
						this.ifBinaji = false
					} else {
						uni.navigateBack()
					}
				}
			},
			scroll(e){
				// console.log(e.target.scrollTop);
			},
		}
	}
</script>

<style lang="scss">
	.scroll-view {
		height: calc(100vh - 55px - var(--status-bar-height) - 150rpx - 16rpx - 90rpx);
		width: 750rpx;
	}

	.scroll-view-high {
		height: calc(100vh - 55px - var(--status-bar-height) - 326rpx - 16rpx - 90rpx);
	}

	.qcbtn1 {
		width: 320rpx;
		height: 86rpx;
		background: rgba(160, 171, 181, 0.1);
		border-radius: 0rpx 0rpx 0rpx 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #8B99A2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qcbtn2 {
		width: 320rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
		border-radius: 0rpx 0rpx 30rpx 0rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
