<template>
	<view class="content">
		<!-- 头部 -->
		<headerIndex @getAciveCity="getAciveCity" v-if="!isRefresh"></headerIndex>
		<!-- 估分 -->
		<view class="box">
			<view class="title bold">本次估分成绩为</view>
			<view class="charts mt-15">
				<qiun-data-charts type="arcbar" :chartData="chartData" :Height="140" :Width="140" :canvas2d="true" />
				<view class="name">{{score?score:'--'}}</view>
			</view>
			<view class="btn history" @click="navTo('/pageTwo/score/history')">估分历史</view>
			<view class="title bold Max_score" v-if="Max_score">该地区体育总成绩为:{{Max_score}}分</view>

			<view class="Lastdata" @click="getList(1)">上次数据</view>
		</view>
		<!--  -->
		<view v-if="selectllist.length">
			<view v-for="(item,index) in selectllist">
				<view class="titleName bold mt-15 ml-15 size16">{{item.name}}</view>
				<view class="indexCarList">
					<view class="card" v-for="(ite,ind) in item.list">
						<view class="title">
							<view class="name ">{{ite.name}}</view>
							<!-- <view class="right" v-if="ite.is_choice!=0&&!isresult" @click="handleHistory(ite)">选择项目
							</view> -->
						</view>
						<!-- 列表 -->
						<view class="item3" v-for="(it,ik) in ite.list" :key="ik" v-if="!isresult">
							<!-- 单选 -->
							<uni-icons :type="it.choice_state==1?'circle-filled':'circle'"
								:color="it.choice_state==1?'#FEC407':'#dfdfdf'" size="22"
								v-if="Number(ite.is_choice)>=1" @click="handleActiveState(ite,it,ik)"></uni-icons>


							<view class="name" @click="handleTips(it.describe)">
								<text>{{it.name}}</text>
								<uni-icons type="info" color="#f0ad4e" size="20" v-if="it.describe"></uni-icons>
							</view>

							<view class="weight">
								<view class="input">
									<!-- 整数类型 -->
									<input type="number" v-model="it.value" confirm-type="done" placeholder="请输入"
										v-if="it.type ==1" :style="{'color':it.inputStyle}"
										@input="changeDisabled(it)" />
									<!-- 小数类型 -->
									<input type="digit" v-model="it.value" confirm-type="done" placeholder="请输入"
										maxlength="4" v-else-if="it.type ==2||it.type ==3"
										:style="{'color':it.inputStyle}" @input="changeDisabled(it)" />
									<!-- 分秒类型 -->
									<picker mode="multiSelector" :range="timeList" @change="bindTimeChange($event,it)"
										v-else-if="it.type ==4" :style="{'color':it.inputStyle}"
										@input="changeDisabled(it)">
										<view>{{it.value?it.value:'请选择'}}</view>
										<uni-icons type="down" color="#999" size="20" class="down"></uni-icons>
									</picker>
									<uni-icons type="clear" color="#999" v-if="it.value &&it.type !='4'"
										@click="handleValue(it)" size="24" class="uni-icons"></uni-icons>
								</view>
								<text :style="{'color':it.inputStyle}" @input="changeDisabled(it)">{{it.unit}}</text>
							</view>
						</view>
						<!-- 结果展示 -->
						<view class="result item3" v-for="(ita,idx) in ite.list" :key="idx"
							v-if="isresult&&ite.list.length>1">
							<view class="name">{{ita.name}}</view>
							<view class="weight">
								<view style="width: 40%;">{{ita.value?ita.value:'-'}}</view>
								<view class="cblue bold">{{ita.proportion_value?ita.proportion_value:'-'}}</view>
								<view class="cblue bold">{{ita.total_score?ita.total_score:'-'}}</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="gfbtn" v-if="isSports" @click="handleNewScore()">重新估分</view>
			<view class="gfbtn" @click="handlescore()" v-else>开始估分</view>
		</view>
		<!--  -->
		<view class="nolist" v-else>
			<image src="../../static/none.png"></image>
			<text>{{msg}}</text>
		</view>

		<!-- 占比 -->
		<uslider></uslider>
		<!-- 弹框 -->
		<view class="wrapper" v-if="isDrawe">
			<view class="bg" @click="onTap"></view>

			<!-- 单选 -->
			<view class="edit" @click.stop>
				<view class="title">请选择<text class="choice">({{List.length}}选{{choice}})</text></view>
				<view class="item" v-for="(item, index) in List" :key="index" @click="toggle(item)">
					<!-- d单选 -->
					<uni-icons :type="isActive.name==item.name?'circle-filled':'circle'" size="22"
						:color="isActive.name==item.name?'#FEC407':'#dfdfdf'" v-if="choice==1"></uni-icons>

					<!-- 多选 -->
					<uni-icons :type="isActiveNameList.indexOf(item.name)!=-1?'checkbox-filled':'circle'" size="22"
						:color="isActiveNameList.indexOf(item.name)!=-1?'#FEC407':'#dfdfdf'"
						v-if="choice>1"></uni-icons>

					<view class="name">
						<view class="overflow">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn close" @click="onTap">取消</view>
				<view class="btn" @click="handleTarget">确定</view>
			</view>
		</view>
		<!--  -->
		<!-- #ifndef APP-PLUS -->
		<view class="uni-stat-tooltip" v-if="isTips">
			{{tips}}
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import uslider from "@/element/slider-fraction.vue";
	import headerIndex from "@/element/headerIndex.vue";
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				tips: "",
				isTips: false,
				chartData: {
					series: [{
						name: "正确率",
						color: "#4687F9",
						data: 0.8
					}]
				},
				sportsList: [],
				List: [],
				score: 0,
				Max_score: 0,
				isDrawe: false,
				selectllist: [],
				isActive: {},
				isActiveList: [],
				isActiveNameList: [],
				region_list: {},
				timeList: [],
				timesTndex: [0, 0],
				isSports: false,
				msg: "暂无信息",
				address: "",
				isresult: false,
				choice: 0,
				isRefresh: false,
			}
		},
		computed: {
			...mapState(["user", "familayList"]),
			userAddress() {
				return this.user.address
			},
			userId() {
				return this.user.id
			},
		},
		components: {
			uslider,
			headerIndex,
			qiunDataCharts
		},
		onLoad() {
			let that = this
			that.score = 0
			that.tips = ""
			that.isTips = false
			that.selectllist = []
			that.sportsList = []
			that.timeList = that.$tools.gethms()
			if (that.familayList.length) {
				that.address = that.user.address
				that.getList(0)
			}
			console.log("onLoad")
		},
		onPullDownRefresh() {
			let that = this
			that.tips = ""
			that.isTips = false
			that.score = 0
			that.choice = 0
			that.Max_score = 0
			that.selectllist = []
			that.sportsList = []
			that.isRefresh = true
			that.timeList = that.$tools.gethms()
			if (that.familayList.length) {
				that.address = that.user.address
				that.getList(0)
			}
			setTimeout(() => {
				that.isRefresh = false
				uni.stopPullDownRefresh()
			}, 200);
			console.log("刷新")
		},
		onShow() {
			let that = this
			// that.isresult = false
			// that.isSports = false
			that.tips = ""
			that.isTips = false
			if (!that.familayList.length) {
				that.score = 0
				that.Max_score = 0
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.isActiveNameList = []
				that.chartData.series[0].data = 0.8
			}
		},
		watch: {
			isTips() {
				let that = this
				if (that.isTips) {
					setTimeout(() => {
						that.isTips = false
					}, 4000);
				}
			}
		},
		methods: {
			getAciveCity(item) {
				console.log("item", item)
				let that = this
				that.address = item
				that.score = 0
				that.isresult = false
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.isActiveNameList = []
				that.getList(0)
			},
			// 
			getList(ind) {
				let that = this
				that.isresult = false
				that.isSports = false
				that.$model.getSportsListAll({
					gender: uni.getStorageSync('gender'),
					parameter_data: that.address,
					aud_id: uni.getStorageSync('userid'),
					choice_last_time: ind
				}).then((res) => {
					console.log("全部项目", res)
					if (res.code != 0) {
						that.msg = res.msg
						return
					}
					res.data.forEach(item => {
						item.list.forEach(list => {
							list.list.forEach(val => {
								val.inputStyle = "#999"
								if (list.is_choice == 2 && val.choice_state == 1) {
									that.isActiveList.push(val.name)
								}
							})
						})
					})

					that.score = 0
					that.Max_score = 0
					that.selectllist = res.data
					that.chartData.series[0].data = 0.8
					that.tips = ""
					that.isTips = false
					// that.handleSportsList()
				})
			},
			// 重新估分
			handleNewScore() {
				let that = this
				that.isActive = {}
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.isActiveNameList = []
				that.getList(0)
			},
			changeDisabled(item) {
				item.inputStyle = '#333'
			},

			// 多项选择
			handleActiveState(item, ite, ind) {
				let that = this
				// 单选
				if (Number(item.is_choice) == 1) {
					item.list.forEach(list => {
						list.choice_state = 0
					})
					ite.choice_state = ite.choice_state == 1 ? 0 : 1
				}
				// 多选
				let isActive = []
				if (Number(item.is_choice) >= 2) {
					if (that.isActiveList.indexOf(ite.name) == -1) {
						that.isActiveList.push(ite.name);
					} else {
						that.isActiveList.splice(that.isActiveList.indexOf(ite.name), 1);
					}
					if (that.isActiveList.length > 2) {
						that.isActiveList.splice(0, 1)
					}
					item.list.forEach(list => {
						list.choice_state = 0
						that.isActiveList.forEach(it => {
							if (list.name == it) {
								list.choice_state = 1
							}
						})
					})
				}
			},
			bindTimeChange(e, it) {
				let that = this
				let minute = e.target.value[0]
				let second = e.target.value[1]
				it.value = that.timeList[0][minute].substring(0, 2) + ':' + that.timeList[1][second].substring(
					0, 2)
				// console.log(e.target.value, it)
			},
			handleTips(text) {
				if (text == null || text == '') return
				//  #ifndef APP-PLUS
				this.tips = text
				this.isTips = true
				// #endif
				// #ifdef APP-PLUS
				uni.showToast({
					title: text,
					duration: 4000,
					icon: 'none'
				})
				// #endif
			},

			// 地区单个类型项目列表
			handleSportsList() {
				let that = this
				that.$model.getSportsList({
					aud_id: uni.getStorageSync('userid'),
					gender: uni.getStorageSync('gender'),
					address: that.address
				}).then((res) => {
					console.log("单地区", res)
					if (res.code != 0) return
					that.sportsList = res.data.list
				})
			},
			handleValue(item) {
				item.value = ""
			},
			// 开始估分
			handlescore() {
				let that = this
				if (!that.familayList.length) {
					that.$tools.msg("请先添加成员")
					return
				}
				console.log("selectllist", that.selectllist)
				that.selectllist.forEach(item => {
					item.list.forEach(ite => {
						ite.list.forEach(it => {
							it.value = it.value == "" ? "0" : it.value
						})
					})
				})
				that.$model.getSportsData({
					aud_id: uni.getStorageSync('userid'),
					gender: uni.getStorageSync('gender'),
					parameter_data: that.address,
					result_data: that.selectllist,
				}).then((res) => {
					console.log("开始估分", res)
					if (res.code != 0) {
						that.$tools.msg(res.msg)
						return
					}
					that.isSports = true
					that.isresult = true
					that.selectllist = res.data.list
					that.score = res.data.total_score
					that.Max_score = res.data.max_score
					that.chartData.series[0].data = Number(res.data.total_score) / res.data.max_score
				})
			},
			// 项目项目
			handleHistory(item) {
				let that = this
				that.List = []
				that.region_list = item
				that.sportsList.forEach(ite => {
					if (ite.key == item.key) {
						that.List = ite.list
						that.choice = item.is_choice
					}
				})
				console.log("添加项目", item)
				that.isDrawe = true
			},
			// 选择项目
			toggle(item) {
				let that = this
				// 单选
				if (that.choice == 1) {
					that.isActive = that.isActive.name == item.name ? {} : item
					return
				}
				// 多选
				if (that.isActiveNameList.indexOf(item.name) == -1) {
					that.isActiveNameList.push(item.name)
					that.isActiveList.push(item)
				} else {
					for (var n = 0; n < that.isActiveNameList.length; n++) {
						if (item.name == that.isActiveNameList[n]) {
							if (that.isActiveNameList.indexOf(item.name) == -1) {
								that.isActiveNameList.push(item.name)
								that.isActiveList.push(item);
							}
							that.isActiveNameList.splice(n, 1)
							that.isActiveList.splice(n, 1);
						}
					}

				}
				if (that.isActiveList.length > that.choice) {
					that.isActiveList.splice(0, 1)
					that.isActiveNameList.splice(0, 1)
				}
				console.log("isActiveList", item.name, that.isActiveList, that.region_list.list)
			},
			// 确定选择项目
			handleTarget() {
				let that = this
				that.selectllist.forEach(item => {
					item.list.forEach(it => {
						if (it.key == that.region_list.key) {
							it.list = []
						}
					})
				})
				if (that.choice == 1) {
					if (Object.keys(that.isActive).length != 0) {
						that.region_list.list.push(that.isActive)
					}
				} else {
					that.region_list.list = that.isActiveList
				}
				that.isDrawe = false
			},
			// 取消选择
			onTap() {
				let that = this
				// 单选
				if (that.choice == 1) {
					if (Object.keys(that.isActive).length == 0) {
						that.region_list.list = []
						that.selectllist.forEach(item => {
							item.list.forEach(it => {
								if (it.key == that.region_list.key) {
									it.list = []
								}
							})
						})
					}
				}
				that.isDrawe = false
				console.log("取消", Object.keys(that.isActive).length, this.isActive)
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/scss/score.scss";

	.content {
		min-height: 100vh;
		padding-bottom: 15px;
		background-color: #f7f7f7;
	}

	.Max_score {
		width: 100%;
		text-align: center;
	}

	.Lastdata {
		height: 35px;
		line-height: 35px;
		margin-top: 15px;
		font-size: 28rpx;
		padding: 0 10px;
		background: #FEC407 !important;
		border-radius: 10px;
		color: #fff;
		width: 30%;
		text-align: center;
	}


	.uni-stat-tooltip {
		width: 80%;
		height: auto;
		overflow: scroll;
		word-break: break-word;
		position: fixed;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		z-index: 999;
		padding: 10px;
		border-radius: 10px;
		top: 33%;
		left: 10%;
	}
</style>