<template>
	<view class="content">
		<!-- 头部 -->
		<headerIndex @getAciveCity="getAciveCity"></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"/>
				<view class="name">{{score?score:'--'}}</view>
			</view>
			<view class="btn history" @click="navTo('/pageTwo/score/history')">估分历史</view>
			<view class="title bold" v-if="Max_score">该地区体育总成绩为:{{Max_score}}分</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" @click="handleHistory(ite)">选择项目</view>
						</view>
						<!-- 列表 -->
						<view class="item3" v-for="(it,ik) in ite.list" :key="ik" v-if="!isresult">
							<view class="name overflow">{{it.name}}<uni-icons type="info" color="#f0ad4e" size="20"
									@click="handleTips(it.describe)" 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" />
									<!-- 小数类型 -->
									<input type="digit" v-model="it.value" confirm-type="done" placeholder="请输入"
										maxlength="4" v-else-if="it.type ==2||it.type ==3" />
									<!-- 分秒类型 -->
									<picker mode="multiSelector" :range="timeList" @change="bindTimeChange($event,it)"
										v-else-if="it.type ==4">
										<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="it.value=''" size="20"></uni-icons>
								</view>
								<text>{{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="getList()">重新估分</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="isActiveList.indexOf(item)!=-1?'checkbox-filled':'circle'" size="22"
						:color="isActiveList.indexOf(item)!=-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>
	</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 {
				chartData: {
					series: [{
						name: "正确率",
						color: "#4687F9",
						data: 0.8
					}]
				},
				sportsList: [],
				List: [],
				score: 0,
				Max_score: 0,
				isDrawe: false,
				selectllist: [],
				isActive: {},
				isActiveList: [],
				region_list: {},
				timeList: [],
				timesTndex: [0, 0],
				isSports: false,
				msg: "暂无信息",
				address: "",
				isresult: false,
				choice: 0
			}
		},
		computed: {
			...mapState(["user", "familayList"]),
			userId() {
				return this.user.id
			}
		},
		components: {
			uslider,
			headerIndex,
			qiunDataCharts
		},
		onLoad() {
			let that = this
			that.score = 0
			that.selectllist = []
			that.sportsList = []
			that.timeList = that.$tools.gethms()
			if (that.familayList.length) {
				that.address = that.user.address
				that.getList()
			}
		},
		onPullDownRefresh() {
			let that = this
			that.score = 0
			that.choice = 0
			that.Max_score = 0
			that.selectllist = []
			that.sportsList = []
			that.timeList = that.$tools.gethms()
			if (that.familayList.length) {
				that.address = that.user.address
				that.getList()
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		onShow() {
			let that = this
			// that.isresult = false
			// that.isSports = false
			if (!that.familayList.length) {
				that.score = 0
				that.Max_score = 0
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.chartData.series[0].data = 0.8
			}
		},
		watch: {
			// userId() {
			// 	let that = this
			// 	that.score = 0
			// 	that.selectllist = []
			// 	that.sportsList = []
			// 	that.address = that.user.address
			// 	that.getList()
			// 	that.handleSportsList()
			// 	console.log("user变了", that.sportsList, that.selectllist)
			// },
		},
		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.getList()
			},
			// 
			getList() {
				let that = this
				that.isresult = false
				that.isSports = false
				that.$model.getSportsListAll({
					gender: uni.getStorageSync('gender'),
					parameter_data: that.address,
					// parameter_data: "辽宁,沈阳市"
				}).then((res) => {
					console.log("全部项目", res)
					if (res.code != 0) {
						that.msg = res.msg
						return
					}
					that.score = 0
					that.Max_score = 0
					that.selectllist = res.data
					that.chartData.series[0].data = 0.8
					that.handleSportsList()
				})
			},
			// 地区单个类型项目列表
			handleSportsList() {
				let that = this
				that.$model.getSportsList({
					aud_id: uni.getStorageSync('userid'),
					gender: uni.getStorageSync('gender'),
					address: that.address
					// address: "辽宁,沈阳市"
				}).then((res) => {
					console.log("单地区", res)
					if (res.code != 0) return
					that.sportsList = res.data.list
				})
			},
			// 开始估分
			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,
					// parameter_data: "辽宁,沈阳市",
					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
			},
			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)
			},
			// 选择项目
			toggle(item) {
				let that = this
				if (that.choice == 1) {
					that.isActive = that.isActive.name == item.name ? {} : item
					return
				}
				if (that.isActiveList.indexOf(item.name) == -1) {
					that.isActiveList.push(item)
				} else {
					that.isActiveList = that.isActiveList.filter(ite => ite.name !== item.name)
				}
				if (that.isActiveList.length > that.choice) {
					that.isActiveList.splice(0, 1)
				}
				// console.log("isActiveList", that.selectllist, that.region_list, item)
			},
			// 确定选择项目
			handleTarget() {
				let that = this
				// console.log('确定', that.selectllist, that.region_list)
				that.selectllist.forEach(item => {
					item.list.forEach(it => {
						if (it.key == that.region_list.key) {
							it.list = []
						}
					})
				})
				if (that.choice == 1) {
					that.region_list.list.push(that.isActive)
				} else {
					that.region_list.list = that.isActiveList
				}
				that.isDrawe = false
			},
			handleTips(text) {
				uni.showToast({
					title: text,
					duration: 4000,
					icon: 'none'
				})
			},
			// 取消选择
			onTap() {
				this.isActive = {}
				this.isDrawe = false
			},
			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;
	}
</style>