<template>
	<view class="content">
		<view class="lan box_shadow" @click="visible = true">
			<view class="left">{{$t("infoAddress")}}:</view>
			<view class="right">{{region?region:$t('verifyPicker')}}<uni-icons type="bottom"></uni-icons></view>
		</view>
		<view class="lan box_shadow">
			<view class="left">{{$t("infoGender")}}:</view>
			<view class="right">
				<picker mode="selector" :range="sexItem" @change="onsexArr">
					<view class="uni-input">{{gender==1?$t('infoMan'):$t('infoWoman')}}</view>
					<icon class="iconfont icon-arrow-down-bold"></icon>
				</picker>
			</view>
		</view>
		<!-- 估分 -->
		<view class="box">
			<view class="title bold">{{$t("titleScoreResult")}}</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="title bold Max_score" v-if="Max_score">{{$t("MaxScore")}}:{{Max_score}}</view>
		</view>
		<!--  -->
		<view v-if="selectllist.length" style="width: 100%;">
			<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>
						<!-- 列表 -->
						<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="$t('verifyRecord')"
										v-if="it.type ==1" :style="{'color':it.inputStyle}"
										@input="changeDisabled(it)" />
									<!-- 小数类型 -->
									<input type="digit" v-model="it.value" confirm-type="done" :placeholder="$t('verifyRecord')"
										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:$t('verifyPicker')}}</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()">{{$t("titleAnewScore")}}</view>
			<view class="gfbtn" @click="handlescore()" v-else>{{$t("titleStartScore")}}</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">{{$t("verifyRecord")}}<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">{{$t("btnSancellation")}}</view>
				<view class="btn" @click="handleTarget">{{$t("btnConfirm")}}</view>
			</view>
		</view>
		<!--  -->
		<view v-if="visible" class="visible" @click="visible=false">
			<view @click.stop class="item">
				<view class="groupBtn">
					<view @click="visible=false">{{$t("btnSancellation")}}</view>
					<view @click="handlesure()" class="sure">{{$t("btnConfirm")}}</view>
				</view>
				<picker-view @change="bindChange" :value="value" class="picker-view" :indicator-style="indicatorStyle">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in city" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-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 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
					}]
				},
				sexItem: [
					this.$t("infoMan"),
					this.$t("infoWoman")
				],
				value: [1, 0],
				visible: false,
				region: "",
				province: [], //省
				city: [], //市
				area: [], //区
				indicatorStyle: `height: 45px;`,
				gender: 1,
				sportsList: [],
				List: [],
				score: 0,
				Max_score: 0,
				isDrawe: false,
				selectllist: [],
				isActive: {},
				isActiveList: [],
				isActiveNameList: [],
				region_list: {},
				timeList: [],
				timesTndex: [0, 0],
				isSports: false,
				msg: this.$t("msgNoMoreData"),
				isresult: false,
				choice: 0,
				isRefresh: false,
			}
		},
		computed: {
			...mapState(["user", "configInfo"]),
			userId() {
				return this.user.aud_id
			},
		},
		components: {
			uslider,
			qiunDataCharts
		},
		onLoad() {
			let that = this
			uni.setNavigationBarTitle({
				title: this.$t('titleScore'),
			})
			that.province = that.configInfo.area_list
			that.city = that.province[1].list
			let defaultRegion = [that.province[that.value[0]].name, that.city[that.value[1]]]
			that.region = defaultRegion.join(",");
			that.score = 0
			that.tips = ""
			that.isTips = false
			that.selectllist = []
			that.sportsList = []
			that.timeList = that.$tools.gethms()
			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()
			that.getList(0)
			setTimeout(() => {
				that.isRefresh = false
				uni.stopPullDownRefresh()
			}, 200);
			console.log("刷新")
		},
		onShow() {},
		watch: {
			isTips() {
				let that = this
				if (that.isTips) {
					setTimeout(() => {
						that.isTips = false
					}, 4000);
				}
			}
		},
		methods: {
			bindChange: function(e) {
				let that = this
				if (e.detail.value[0] != that.value[0]) {
					e.detail.value[1] = 0
				}
				that.value = e.detail.value
				that.city = that.province[that.value[0]].list
			},
			handlesure() {
				let that = this
				let defaultRegion = [that.province[that.value[0]].name, that.city[that.value[1]]]
				that.region = defaultRegion.join(",");
				that.visible = false
				that.score = 0
				that.isresult = false
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.isActiveNameList = []
				that.getList(0)
			},
			// 地区
			handleCityList() {
				let that = this
				that.value = [2, 0]
				that.city = that.configInfo.area_list[2].list
			},
			// 
			getList(ind) {
				let that = this
				that.isresult = false
				that.isSports = false
				that.$model.getSportsListAll({
					gender: that.gender,
					parameter_data: that.region,
				}).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
				})
			},
			// 重新估分
			handleNewScore() {
				let that = this
				that.isActive = {}
				that.selectllist = []
				that.sportsList = []
				that.isActiveList = []
				that.isActiveNameList = []
				that.getList(0)
			},
			changeDisabled(item) {
				item.inputStyle = '#333'
			},
			//确定性别
			onsexArr(e) {
				this.gender = this.sexItem[e.target.value] == this.$t("infoMan") ? 1 : 2
			},
			// 多项选择
			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)
			},
			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
			},
			handleValue(item) {
				item.value = ""
			},
			// 开始估分
			handlescore() {
				let that = this
				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({
					gender: that.gender,
					aud_id: that.user.aud_id,
					parameter_data: that.region,
					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";

	.lan {
		width: calc(100% - 40px);
		display: flex;
		padding: 0 10px;
		margin: 15px 10px 0;
		border-radius: 10px;
		background: #fff;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 50%;
			text-align: left;
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 70%;
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			position: relative;
			text-align: right;

			picker {
				width: 100%;
				text-align: right;
				border: none;
				margin-right: 15px;
				font-size: 32rpx;
				color: #333333;
			}

			.iconfont {
				color: #333333;
				font-size: 32rpx;
				position: absolute;
				right: 0px;
				top: 0;
			}
		}
	}

	.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>