<template>
  <div :v-if="breakshow">
    <el-dialog :visible.sync="itemshow" width="56%" top='30vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
     	<div class="scan_box2">
			<el-input value="" clearable v-model="text" placeholder="请输入需要评估的机器条码" @input="getnum" />
        	<i class="iconfont iconsousuo1" style="font-size:28px;" @click="getbreak"></i>
		</div>
    </el-dialog>
    <el-dialog :visible.sync="itemshow2" width="56%" top='5vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
      <div class="content">
		<div style="padding: 15px 15px 0 15px;">当前选择机型：{{phone}}</div>
		<div style="margin: 15px;">
			<div class="line">
				<div class="line_item" :style="width"></div>
			</div>
		</div>
		<div class="list_box">
			<div class="list">
				<div class="list_item" v-for="(item,index) in list1" :key="index" v-if="item.chooseid<num" :style="index==list1.length-1?'border:none':''" >
					<div class="item_title">
						<div>({{index+1}}){{item.property_name}}</div>
						<div style="display: flex;">
							<div class="t1">{{item.text}}</div>
							<i class="iconfont iconceshishenqing" style="font-size:20px;font-weight:400;" @click="changelist" :data-index='index'>
								<span style='font-size: 14px;'>改</span>
							</i>
						</div>
					</div>
					<div class="item_nav" v-if="item.newCreated">
						<div class="item" v-for="(item2,index2) in item.children" :key="index2" :class="item2.isChoose==false?'item':'item1'" @click="getGrade(item2,index)" :data-id='item2.id' :data-index='index'>
							<div style="word-wrap: normal;">{{item2.property_name}}</div>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 75px;" v-if="num>list1.length"></div>
			<div class="btn_box" v-if="num>list1.length">
				<div class="btn" @click="next">下一步</div>
			</div>
		</div>
	</div>
    </el-dialog>
	<el-dialog :visible.sync="itemshow3" width="56%" top='5vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
		<div class="content2">
			<div style="padding: 15px 15px 0 15px;">当前选择机型：{{phone}}</div>
			<div class="list_box">
				<div class="list">
					<div class="list_text">是否存在以下功能问题</div>
					<div class="list_item" v-for="(item,index) in list2" :key='index'>
						<div class="item_title">
							<div>({{index+1}}){{item.property_name}}（单选）</div>
						</div>
						<div class="item_nav">
							<div class="item" v-for="(item2,index2) in item.children" :key='index2' :class="item2.isChoose==false?'item':'item1'" @click="getGrade2(item2,index)" :data-id='item2.id' :data-index='index'>
								<div style="word-wrap: normal;">{{item2.property_name}}</div>
							</div>
						</div>
					</div>
					<div class="list_item">
						<div class="item_title">
							<div>其他功能问题（多选或不选）</div>
						</div>
						<!-- <checkbox-group name=""> -->
							<div class="item_nav">
								<div v-for="(item,index) in list3" :key='index' :class="item.isChoose==false?'item':'item1'" @click="getGrade3(item,index)">
									<div v-for="(item2,index2) in item.children" :key='index2' v-if="item2.is_preferred==0"  :data-id='item.id' :data-index='index' style="display: flex;align-items: center;">
										<div style="word-wrap: normal;">{{item2.property_name}}</div>
									</div>
								</div>
							</div>
						<!-- </checkbox-group> -->
					</div>
				</div>
				<div style="height: 75px;"></div>
				<div class="btn_box">
					<div class="btn" @click="next2">确认</div>
				</div>
			</div>
			
			<!-- 弹窗 -->
			<div class="show_box" v-if="show">
				<div class="show_bg">
					<div class="show_item1">
						{{level_name}}
					</div>
					<div class="show_item2">当前评级为{{level_name}}</div>
					<div class="show_item3">
						<div class="showbtn1" @click="agree" style="height: 30px;">确定</div>
						<!-- <div class="showbtn2" style="height: 30px;" @click="photo">拍摄详情</div> -->
					</div>
				</div>
			</div>
		</div>
    </el-dialog>
  </div>
</template>

<script>
var that;
import { pjt_model_fault,recycle_img_save,pjt_fault_level } from "@/api/machineList"; //获取接口
import { MessageBox, Message } from 'element-ui'
export default {
  name: "break",
  data() {
    return {
		text:'',
      	scan_num:'',
      	// itemshow:false,
     	itemshow2:false,
		itemshow3:false,
		show:false,
     	phone:'',
     	list1:[],
		list2:[],
		list3:[],
		width:'width:0%',
		num:1,
		chooselist:[],
		level_name:'',
    };
  },
  created() {
    that = this
    // that.getbreak()
  },
  computed:{
    date() {
      var date = new Date();
      return date.toLocaleDateString();
    },
  },
  props: {
    breakshow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
	itemshow: {
      type: Boolean,
      default: () => {
        return false;
      },
    }
  },
 	methods: {
	  	agree(){
			that.$emit("showbox", 'false');
			that.itemshow2 = false
			that.itemshow3 = false
			that.text = ''
			that.scan_num = ''
     		that.phone= ''
     		that.list1= []
			that.list2= []
			that.list3= []
			that.width= 'width:0%'
			that.num= 1
			that.chooselist= []
			that.level_name= ''
			that.show = false
		},
    getnum(e){
		that.scan_num = e
	},
	handleClose(){
		that.text = ''
		that.scan_num = ''
     	that.phone= ''
     	that.list1= []
		that.list2= []
		that.list3= []
		that.width= 'width:0%'
		that.num= 1
		that.chooselist= []
		that.level_name= ''
		console.log(that.text)
		that.itemshow2 = false
		that.itemshow3 = false
		that.$emit("showbox", 'false');
		// that.$emit("breakshow", 'false');
	},
    getbreak(){
		// that.itemshow = false
		if (!!that.scan_num) {
      	pjt_model_fault({serial_number:that.scan_num}).then((res) => {
			console.log('获取故障',res)
			var list = res.datas.p_property_list
			that.phone = res.datas.model_info
			that.model_id = res.datas.model_id
			if(list.length!=0){
				console.log(1)
				that.itemshow2 = true
				var arr = []
				var arr2 = []
				var arr3 = []
				list.forEach(function(item,index){
					if(item.group_type==1){
						arr.push(item)
					}
					if(item.group_type==2){
						arr2.push(item)
					}
					if(item.group_type==3){
						arr3.push(item)
					}
				})
				arr.forEach(function(item,index){
					item.newCreated = true
					item.chooseid = index
					item.children.forEach(function(item2,index2){
						item2.isChoose=false
					})
				})
				console.log(12)
				arr2.forEach(function(item,index){
					item.newCreated = true
					item.children.forEach(function(item2,index2){
						if(index2==0){
							item2.isChoose=true
						}else{
							item2.isChoose=false
						}
					})
				})
				that.list1 = arr
				arr3.forEach(function(item,index){
					item.isChoose=false
				})
				that.list3 = arr3
				that.list2 = arr2
			}else{
				Message({
        			duration:4000,
        			message: '该机型暂无评估数据',
        			type: 'warning',
        			showClose:true,
      			})
			}
					
        });
		}else{
			this.$message({type:'warning',message:"请输入需要评估的机器条码"})
		}
	},
	getGrade(e,i){//选择故障
		// console.log(e.target.parentElement.dataset.index,'index')
		var indexid = i
		var id = e.id
		if(that.num==1){
			that.width = 'width:'+100/that.list1.length+'%'
			console.log(123)
		}
		var widthnum = 100/that.list1.length.toFixed(2)
		console.log(indexid*1+1, that.num)
		if((indexid*1+1)==that.num){
			that.num++
			that.width = 'width:'+widthnum*(indexid*1+1)+'%'
			console.log('n', that.num)
		}
		that.list1.forEach(function(item,index){
			if(indexid == index){
				item.newCreated = false
				item.children.forEach(function(item2,index2){
					// console.log(indexid,index,id)
					item2.isChoose=false
					if(id == item2.id){
						item2.isChoose = true
						item.text=item2.property_name
					}
				})
			}
		})
		console.log(that.list1)
	},
	changelist(e){
		var id = e.target.parentElement.dataset.index
		var list = that.list1
		that.list1.forEach(function(item,index){
			if(id == index){
				console.log(id,index)
				item.newCreated = !item.newCreated
			}
		})
	},
	next(){
		var chooselist = []
		that.text = ''
		that.list1.forEach(function(item,index){
			item.children.forEach(function(item2,index2){
				if(item2.isChoose == true){
					chooselist.push(item2.id)
				}
			})
		})
		that.chooselist = chooselist
		that.itemshow2 = false
		that.itemshow3 = true
	},

	// 第二版面
	backhome(){
		uni.switchTab({
			url:'../index/index'
		})
	},
	photo(){
		uni.reLaunch({
			url:'../break_detail/break_detail?level_name='+that.level_name+'&scan_num='+that.scan_num+'&phone='+that.phone
		})
	},
	getGrade2(e,i){//选择故障
		console.log(e)
		var indexid = i
		var id = e.id
		that.list2.forEach(function(item,index){
			if(indexid == index){
				item.newCreated = false
				item.children.forEach(function(item2,index2){
					console.log(indexid,index,id)
					item2.isChoose=false
					if(id == item2.id){
						item2.isChoose = true
						item.text=item2.property_name
					}
				})
			}
		})
		console.log(that.list2)
	},
	getGrade3(e,i){//选择其他故障
		console.log(e)
		var indexid = i
		var id = e.id
		console.log('tag', indexid)
		that.list3.forEach(function(item,index){
			if(indexid == index){
				item.isChoose=!item.isChoose
			}
		})
		console.log(that.list3)
	},
	// changelist2(e){
	// 	var id = e.target.parentElement.dataset.index
	// 	var list = that.list2
	// 	that.list2.forEach(function(item,index){
	// 		if(id == index){
	// 			console.log(id,index)
	// 			item.newCreated = !item.newCreated
	// 		}
	// 	})
	// 	console.log(that.list2)
	// },
	next2(){
		// uni.showLoading({
		// 	title:'评估中...'
		// })
		// Message({
        // 	duration:4000,
        // 	message: '评估中...',
        // 	type: 'success',
        // 	showClose:true,
      	// })
		const loading = this.$loading({
          lock: true,
          text: '评估中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        });
        // setTimeout(() => {
        //   loading.close();
        // }, 2000);
		var chooselist = that.chooselist
		that.list2.forEach(function(item,index){
			item.children.forEach(function(item2,index2){
				if(item2.isChoose == true){
					chooselist.push(item2.id)
				}
			})
		})
		that.list3.forEach(function(item,index){
			if(item.isChoose == true){
				item.children.forEach(function(item2,index2){
					if(item2.is_preferred == 0){
						chooselist.push(item2.id)
					}
				})
			}else{
				item.children.forEach(function(item2,index2){
					if(item2.is_preferred == 1){
						chooselist.push(item2.id)
					}
				})
			}
		})
		console.log(chooselist,'参数')
		pjt_fault_level({property:chooselist,model_id:that.model_id,serial_number:that.scan_num}).then((res) => {
			console.log('提交故障',res)
			loading.close();
			// Message({
        	// 	duration:4000,
        	// 	message: '评估成功',
        	// 	type: 'success',
        	// 	showClose:true,
      		// })
			that.level_name = res.datas.level_name
			that.show = true
			console.log(123)
			that.postlevel()
			// setTimeout(function() {
			// 	that.$emit("showbox", 'false');
			// 	that.itemshow2 = false
			// 	that.itemshow3 = false
			// 	that.text = ''
			// 	that.scan_num = ''
     		// 	that.phone= ''
     		// 	that.list1= []
			// 	that.list2= []
			// 	that.list3= []
			// 	that.width= 'width:0%'
			// 	that.num= 1
			// 	that.chooselist= []
			// 	that.level_name= ''
			// }, 5000)
        });
		// post_request('/api/recycle/pjt_fault_level',{property:chooselist,model_id:that.model_id,serial_number:that.scan_num}, (res) =>{
		// 	console.log('提交故障',res)
		// 	uni.hideLoading()
		// 	that.level_name = res.data.datas.level_name
		// 	that.postlevel()
		// 	that.show = true
		// })

	},
	postlevel(){
		recycle_img_save({serial_number:21112132480,level_name:that.level_name}).then((res) => {
			console.log('保存等级',res)
        });
	}
  },
};
</script>

<style lang="less" scoped>

  	.scan_box2{
		background-color: white;
		border-radius: 5px;
		box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.14);
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
    	width: 500px;
    	margin: 0 auto;
	}
  	input{
    	width: 80%;
    	height: 50px;
    	border-radius: 30px;
    	border: none;
    	font-size: 18px;
 	}
  	page{
		background-color: #FFFFFF;
	}
	.icon-img{
		font-size: 20px;
		color: rgba(187, 187, 187, 1);
		font-weight: 400;
	}
	.list_box{
		padding: 0 15px;
		margin: 15px;
		background-color: #FFFFFF;
		border-radius: 5px;
		font-size: 13px;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
	}
	.list_title{
		color: #101010;
		font-size: 16px;
		font-weight: 600;
		height: 50px;
		line-height: 50px;
	}
	.list_item{
		border-bottom: 1px solid #ececec;
	}
	.item_title{
		color: #5b5b5b;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
	}
	.item_nav{
		flex-wrap: nowrap;
		font-size: 13px;
	}
	.item{
		margin-bottom: 10px;
		padding: 13px;
		text-align: left;
		font-size: 13px;
		background-color: rgba(187, 187, 187, 0.2);
		color: rgba(88, 88, 88, 1.0);
		border:1px solid rgba(187, 187, 187, 0.2);
		border-radius: 5px;
	}
	.item1{
		margin-bottom: 10px;
		padding: 10px;
		text-align: left;
		font-size: 13px;
		background-color: rgba(255,87,48,0.1);
		border:1px solid rgba(255,87,48,0.5);
		color: #FF5730;
		border-radius: 5px;
	}
	.t1{
		width: 175px;
		text-align: right;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-right: 5px;
		font-size: 13px;
		color: #8c8c8c;
	}
	
	/* 进度条 */
	.line{
		height: 10px;
		width: 100%;
		background-color: #E5E5E5;
		border-radius:5px ;
	}
	.line_item{
		height: 10px;
		background-color: #FF5730;
		border-radius:5px ;
	}
	/* 按钮 */
	.btn_box{
		height: 75px;
		background-color: #FFFFFF;
		width: 100%;
		margin: 0 auto;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
	}
	.btn{
		background-color: #FF5730;
		color: #FFFFFF;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		padding: 10px 0;
		margin: 10px auto 0;
	}


	.content2 page{
		background-color: #FFFFFF;
	}
	.content2 .icon-img{
		font-size: 20px;
		color: rgba(187, 187, 187, 1);
		font-weight: 400;
	}
	.content2 .list_box{
		padding: 0 15px;
		margin: 15px;
		background-color: #FFFFFF;
		border-radius: 5px;
		font-size: 13px;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
	}
	.content2 .list_title{
		color: #101010;
		font-size: 16px;
		font-weight: 600;
		height:50px;
		line-height: 50px;
	}
	.content2 .list_text{
		padding: 10px 0;
		border-bottom: 1px solid #E5E5E5;
	}
	.content2 .list_item{
		border-bottom: 1px solid #ececec;
	}
	.content2 .item_title{
		color: #5b5b5b;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
	}
	.content2 .item_nav{
		font-size: 13px;
		display: flex;
		align-items: inherit;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.content2 .item{
		margin-bottom: 10px;
		padding: 10px;
		text-align: left;
		font-size: 13px;
		background-color: rgba(187, 187, 187, 0.2);
		color: rgba(88, 88, 88, 1.0);
		border:1px solid rgba(187, 187, 187, 0.2);
		border-radius: 5px;
		width: 48%;
		display: flex;
		align-items: center;
	}
	.content2 .item1{
		width: 48%;
		margin-bottom: 10px;
		padding: 10px;
		text-align: left;
		font-size: 13px;
		background-color: rgba(255,87,48,0.1);
		border:1px solid rgba(255,87,48,0.5);
		color: #FF5730;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}
	.content2 .t1{
		width: 125px;
		text-align: right;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-right: 5px;
		font-size: 13px;
		color: #8c8c8c;
	}
	
	/* 按钮 */
	.content2 .btn_box{
		height: 75px;
		background-color: #FFFFFF;
		width: 100%;
		margin: 0 auto;
	}
	.content2 .btn{
		background-color: #FF5730;
		color: #FFFFFF;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		padding: 10px 0;
		margin: 10px auto 0;
	}
	/* 多选框 */
	
	.content2 checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		width: 15px;
		height: 15px;
	}
	
	.content2 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border-radius: 50% !important;
		width: 15px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		color: #fff;
		background: #FF5730;
		border: 1px solid #FF5730;
	}
	
	/* 弹窗 */
	.content2 .show_box{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.2);
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 999;
	}
	.content2 .show_box image{
		width: 110px;
	
	}
	.content2 .show_bg{
		width: 275px;
		background-color: white;
		margin: 160px auto 0;
		border-radius: 15px;
		padding: 20px 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.content2 .show_item1{
		color: #409eff;
		font-size: 40px;
		font-weight: 600;
	}
	.content2 .show_item2{
		font-size: 14px;
		color: #101010;
		margin: 10px;
	}
	.content2 .show_item3{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10px 0;
	}
	.content2 .showbtn2{
		padding: 0 18px;
		background-color: #409EFF;
		border: 1px solid #409EFF;
		color: #FFFFFF;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20px;
		margin: 0 15px;
	}
	.content2 .showbtn1{
		padding: 0px 18px;
		background-color: #FFFFFF;
		border: 1px solid #409EFF;
		color: #409EFF;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20px;
		margin: 0 15px;
	}

</style>