<template>
	<view class="imgDetail">
    <view class="img-view">
      <image class="main-img" :src="detailMsg.imgUrl" :style="'width:'+imgWidth+';height:'+imgHeight+';'" mode=""></image>
    </view>
    <view class="toolbar" :style="'display:'+showOrmis">
			<view class="toolbarLeft" @click="$noMultipleClicks(topImg)">置顶</view>
			<view class="border"></view>
			<view class="toolbarMid" @click="$noMultipleClicks(onOrOffHandler)">{{upOrDown}}架</view>
			<view class="border"></view>
			<view class="toolbarRight" @click="$noMultipleClicks(changeSign)">修改标签</view>
			<view>
				<uni-popup class="popup-modal" ref="showPopup" type="bottom" background-color="#141b29">
          <view class="segmented-control">
            <view class="segmented-title">标签列表（最多选择3个）</view>
            <uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3"></uni-data-checkbox>
          </view>
          <button class="upLoadBtn" @click="$noMultipleClicks(modifySign)">保存</button>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getImgDetails,// 获取图片详情
		onlineOrOfflineImg ,//上下架图片
		topImg, //置顶图片
		getSignList,//获取标签列表
		modifySign //修改艺术家图片标签
	} from '@/api/index.js'
	export default {
		data() {
			return {
				detailMsg: {}, // 图片信息
				userInfo: {}, // 登录用户信息
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高,
				marginTop: 0 ,//外顶部边距
				showOrmis: 'none' ,//限时或者隐藏
				upOrDown: '下',
				showRight: false,
				noClick:true, //防止重复提交
				signListSelected:[],
				signList:[],
        typeId: 0,
        typeCurrent: 0,
        status: 0,
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			const detailId = uni.getStorageSync('detailId')
			if (detailId) {
				this.getImgDetail(detailId)
			} else {
				this.getImgDetail(detailId)
			}
			this.getSignList();
		},
    onLoad(option) {
      if (option?.categoryId && option?.categoryIndex && option?.status) {
        this.typeId = option.categoryId * 1;
        this.typeCurrent = option.categoryIndex * 1;
        this.status = option.status * 1;
      }
    },
		methods: {
			
			//保存修改过后标签事件
			modifySign(){
				let that = this;
				//调用修改标签方法
				const param = {
					imgId: that.detailMsg.id,
					typeId: that.detailMsg.typeId,
					signList: that.signListSelected
				}
				modifySign(param).then(res=>{
					if (res.data.code === 200) {
						uni.showToast({
							title:'修改标签成功!',
							duration: 1000,
							success() {
								that.$refs.showRight.close();
								that.signListSelected = [];
							}
						})
					}else{
						uni.showModal({
							content: '修改标签失败！',
							showCancel: false
						});
					}
				});
			},
			//获取标签列表
			async getSignList(){
				const res = await getSignList({})
				if (res.data.code === 200) {
					for (let s of res.data.data) {
						let signObject = {}
						signObject.text = "#" + s.name
						signObject.value = s.id
						this.signList.push(signObject)
					}
					console.log('signList',this.signList)
				} else {
					uni.showModal({
						content: '标签列表加载失败！',
						showCancel: false
					});
				}
			},
			//上下架图片事件
			onOrOffHandler(){
				if(this.detailMsg.status === '2'){
					//点击下架
					this.changeStatus(this.detailMsg.id,'3')
				}else if(this.detailMsg.status === '3'){
					//点击上架
					this.changeStatus(this.detailMsg.id,'2')
				}
			},
			//选中标签事件
			selectedSign(e){
				let that = this;
				that.signListSelected = e.detail.value; 
				//console.log('that.signListSelected'+that.signListSelected);
			},
			//置顶图片
			topImg(){
				//console.log('点击了',this.detailMsg)
				topImg(this.detailMsg.id).then(res =>{
					if(res.data.code === 200){
						uni.showToast({
							title:'置顶成功!',
							duration: 1000
						})
					}else{
						uni.showModal({
							content: "置顶图片失败！",
							showCancel: false,
						});
					}
				});
			},
			
			//修改标签事件
			changeSign(){
				console.log('修改标签');
				// 打开窗口
				this.$refs.showPopup.open();
			},
			//上下架图片
				changeStatus:function(id,status){
          let that = this;
					const param = {
						id: id,
						status: status
					}
					onlineOrOfflineImg(param).then(res =>{
						if (res.data.code === 200) {
							uni.showToast({
								title: '修改成功!',
								duration: 1000,
								success() {
									setTimeout(() => {
										uni.redirectTo({
											url: `/pages/index/material/material?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`
										});
									}, 1000)
									
								}
							});
						}else{
							uni.showModal({
								content: "上下架图片失败！",
								showCancel: false,
							});
						}
					});
			},
			// 图片详情
			async getImgDetail(id) {
				const res = await getImgDetails(id)
				if (res.data.code === 200) {
					this.detailMsg = res.data.data
					console.log('图片详情', this.detailMsg)
					//控制显示图片尺寸
					if(this.detailMsg.typeId === 1){
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 750 + 'rpx';
						this.marginTop = 250 + 'rpx';
					}else if(this.detailMsg.typeId === 2){
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 100 + '%';
						this.marginTop = 0 + 'rpx';
					}else if(this.detailMsg.typeId === 3){
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 100 + '%';
						this.marginTop = 0 + 'rpx';
					}else if(this.detailMsg.typeId === 4){
						this.marginTop = 300 + 'rpx';
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 600 + 'rpx';
					}else if(this.detailMsg.typeId === 5){
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 750 + 'rpx';
						this.marginTop = 250 + 'rpx';
					}else if(this.detailMsg.typeId === 6){
						this.imgWidth = 750 + 'rpx';
						this.imgHeight = 750 + 'rpx';
						this.marginTop = 250 + 'rpx';
					}
					//控制显示/隐藏盒子
					//待审核
					if(this.detailMsg.status === "0"){
						this.showOrmis = 'none';
					//审核拒绝
					}else if(this.detailMsg.status === "1"){
						this.showOrmis = 'none';
					//已上架
					}else if(this.detailMsg.status === "2"){
						this.showOrmis = 'flex';
						this.upOrDown = '下'
					//已下架	
					}else{
						this.showOrmis = 'flex';
						this.upOrDown = '上'
					}
				} else {
					uni.showModal({
						content: "获取图片详情数据失败！",
						showCancel: false,
					});
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.imgDetail{
		height:100%;
		width:750rpx;
		overflow: hidden;
		background-color: $uni-bg-color;
		position: absolute;
		z-index: 0;

    .img-view {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      z-index: 1;

    }

			.main-img {
			}
			
			.toolbar{
				height: 100rpx;
				width: 700rpx;
				z-index: 2;
				border-radius: 20rpx;
				background-color: $uni-primary;
        color: $uni-white;
        position: absolute;
				bottom: 68rpx;
				left: 25rpx;
        right: 25rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				
				
				
				.border {
				  width: 1rpx;
				  height: 30rpx;
				  background-color: $uni-white;
				  position: relative;
				  z-index: 2;
				}
				
				.toolbarLeft{
					display: flex;
					justify-content: center; 
					flex-direction: column;
					align-items: center;
					width: 200rpx;
					position: relative;
					z-index: 2;
				}
				
				.toolbarMid{
					display: flex;
					justify-content: center; 
					flex-direction: column;
					align-items: center;
					width: 200rpx;
					position: relative;
					z-index: 2;
				}
				
				.toolbarRight{
					display: flex;
					justify-content: center; 
					flex-direction: column;
					align-items: center;
					width: 200rpx;
					position: relative;
					z-index: 2;
				}
			}
	}

  .popup-modal {

    .segmented-control {
      width: 654rpx;
      margin: 40rpx auto;

      .segmented-title {
        font-size: 28rpx;
        color: $uni-white;
        margin-bottom: 20rpx;
      }

      ::v-deep .checklist-box {
        border: none !important;
        background: none !important;
        margin-right: 0 !important;
      }

      ::v-deep .checklist-text {
        color: $uni-secondary-color !important;
        font-size: 24rpx !important;
      }

      ::v-deep .is-checked .checklist-text {
        color: $uni-primary !important;
        font-size: 24rpx !important;
      }

      ::v-deep .is-disable .checklist-text {
        color: $uni-base-color !important;
        font-size: 24rpx !important;
      }

    }

    .upLoadBtn{
      width: 654rpx;
      height: 100rpx;
      line-height: 100rpx;
      background: linear-gradient(180.00deg, $uni-primary 0%, $uni-primary 100%);
      margin: 60rpx auto 0;
      color: $uni-white;
      border-radius: 20rpx;
      font-size: 28rpx;
    }

  }
</style>
