<template>
	<div class="securityReMainViews" v-if="showDecide">
		<div class="securityReSmallTitle">安全检查表</div>
		<img src="../../../../assets/images/truckTuPian/close.png" class="securityReClose" @click="viewClose()">
		<div class="securityReContent">
			<div class="securityReContentFromViews" style="width:80%">
				<div>
					<img class="tu1" src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
					<span class="securityReContent_left_title"> 安检项目：</span>
				</div>
        <div v-show="submitReportFormId" style="display:block;overflow:auto;width:100%;height:60vh;">
          <div v-for="(item,index) in fromList" :key="index">
            <div class="srCheckFrom_content">
              <div style="width:30vw">{{item.anjianClass}}：</div>
              <div class="srCheckFrom_input" style="width:16vw">{{item.anjianData ? item.anjianData : '无'}}</div>
            </div>
          </div>
        </div>
        <div v-show="!submitReportFormId" style="display:block;overflow:auto;width:100%;height:60vh;">
          <div v-for="(item,index) in fromList" :key="index">
            <div v-if="item.projectClass==1">
              <div class="failure_textarea">{{item.anjianClass}}：</div>
              <div class="srCheckFrom_input">
                <el-radio v-model="item.anjianData" label="是" style="color:wheat;margin:0 10px;">是</el-radio>
                <el-radio v-model="item.anjianData" label="否" style="color:wheat;margin:0 10px;">否</el-radio>
              </div>
            </div>
            <div v-if="item.projectClass==2">
              <div class="failure_textarea">{{item.anjianClass}}：</div>
              <el-input v-model="item.anjianData" size="mini" placeholder="请输入值" clearable></el-input>
            </div>
            <div v-if="item.projectClass==3">
              <div class="failure_textarea">{{item.anjianClass}}：</div>
              <el-input v-model="item.anjianData" type="textarea" :rows="3" placeholder="请输入文本">
              </el-input>
            </div>
          </div>

        </div>
			</div>
		</div>
		<div class="submitDeStyle">
			<el-button type="primary" v-show="!submitReportFormId" round @click="submitReport()">提交</el-button>
		</div>
	</div>
</template>

<script>
import { httpGet, httpPostForJson, putForJson, httpDelForJson} from "@/common/httpBean.js"
import {
    ajReportModel, ajReportSubmit
} from "@/axios/api.js"

export default {
	data() {
		return {
			showDecide:false,
			from:{car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''},
			getLocationText:'点击获取车辆位置',
			carnumber:'',
			personName:'',
      submitReportFormId: false,
      fromList:[]
		}
	},
	methods: {
		loadData(carnumber,personName, submitReportFormId) {
			this.showDecide = true;
			this.carnumber = carnumber;
			this.personName = personName;
			this.submitReportFormId = submitReportFormId;
			if(submitReportFormId){
        httpGet(ajReportModel, {formId:submitReportFormId}).then((res) => {
          if(res.code == 200){
            this.fromList = res.data.records;
          }else{
            this.$notify({
              title: res.head.message,
              type: 'error',
              duration: 2500
            })
          }
        });
      }else{
        httpGet(ajReportModel, {}).then((res) => {
          if(res.code == 200){
            this.$notify({
              title: '请进行安全检查！',
              type: 'success',
              duration: 2500
            });
            this.fromList = res.data.records;
          }else{
            this.$notify({
              title: res.head.message,
              type: 'error',
              duration: 2500
            })
          }
        });
      }
		},
		viewClose(){
			this.showDecide = false;
      this.$parent.selectFunction = 0;
		},
		//提交申报
		submitReport(){
      httpPostForJson(ajReportSubmit, {
        records:this.fromList,
        username:this.personName,
        carNo:this.carnumber,
      }).then((res) => {
        if(res.code == 200){
          this.$notify({
            title: '报告已提交！',
            type: 'success',
            duration: 2500
          });
          this.viewClose();
          this.$parent.safetySubmitCheckFn();
        }else{
          this.$notify({
            title: res.head.message,
            type: 'error',
            duration: 2500
          })
        }
      });
		},
	},
}
</script>

<style scope>
@media screen and (max-width:901px){
  .srCheckFrom_content{
    height: 4vh;
    line-height: 4vh;
    margin-bottom: 1vh;
    color: rgb(23,249,250);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
  }
  .srCheckFrom_input{
    height: 100%;
    width: 100%;
    text-align: center;
    border: 1px solid rgb(23,249,250);
    border-radius: 5px;
    padding:0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .failure_textarea{
    width: 100%;
    color:gainsboro;
    font-size: 12px;
    margin-bottom:1vh;
  }
  .failure_textarea2{
    font-size: 13px;
    width:30vw;
  }
  .failure_textarea2 .el-textarea__inner{
    max-height: 20vh !important;
  }
  .getweizhitu1{
    cursor: pointer;
  }
  .getweizhitu1>img{
    height: 2.5vh;
  }
  .getweizhitu1>span{
    color: rgb(24,228,240);
    font-size:12px;
    text-decoration:underline;
  }
  .el-select-dropdown__item{
    font-size: 20px;
    height: 45px;
    line-height: 45px;
  }
  .securityReMainViews{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    height: 90vh;
    width: 40vw;
    background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbankuang1.png');
    background-size:100% 100%;
    transform: translate(-50%,-48%);
    padding: 2vh 2vw 0px;
    box-sizing: border-box;
  }
  .securityReSmallTitle{
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 7vh;
    width: 14vw;
    height: 7vh;
    background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
    background-size:100% 100%;
  }
  .securityReClose{
    position: absolute;
    top: 4vh;
    right: 1vw;
    cursor: pointer;
  }
  .securityReContent{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .securityReContent_left_title{
    font-size: 13px !important;
    font-weight: 500;
    color: rgb(24,228,240);
  }
  .securityReContentFromViews .tu1{
    width: 3vw;
  }
  /* 未选中样式 */
  .is-bordered .el-radio__label{
    font-size: 13px !important;
    color: wheat;
  }
  .is-bordered {
    border: wheat 2px solid;
    height: 38px;
    line-height: 20px;
  }
  .is-bordered .el-radio__inner{
    height: 18px;
    width: 18px;
  }
  .securityReContentFromViews .el-radio.is-bordered{
    height: 7vh;
    width: 49%;
    padding: 0.5vh 1vw 0px;
  }
  /* 选中样式 */
  .el-radio__input.is-checked+.el-radio__label{
    color: #1890ff;
  }
  .el-radio.is-bordered.is-checked{
    border-color: #1890ff;
  }
  .el-radio__input.is-checked .el-radio__inner{
    border-color: #1890ff;
    background: #1890ff;
  }
  .el-radio{
    margin: 0;
  }
  .el-radio.is-bordered{
    padding: 8px 20px 0px 10px;
  }
  .securityReContentFromViews{
    margin-top: 1vh;
  }
  .securityReContentFromViews>div{
    margin-bottom: 1vh;
  }
  .securityReContentFromViews>div>span{
    color: rgb(24,228,240);
    font-size: 13px;
  }
  .el-input--small .el-input__inner{
    font-size: 18px;
  }
  .submitDeStyle{
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .submitDeStyle button{
    width:11vw;
    height:7vh;
    font-size:13px;
    letter-spacing:1px;
    text-align: center;
    line-height: 0;
    padding: 0 !important;
  }
  .securityReContentFromViews .el-input--suffix .el-input__inner{
    height: 6.5vh;
    font-size: 13px;
  }
  .securityReContentFromViews .el-select__caret.el-input__icon.el-icon-arrow-up{
    line-height: 0px !important;
  }
}
@media screen and (min-width:901px){
  .srCheckFrom_content{
    height: 3vh;
    line-height: 3vh;
    margin-bottom: 1vh;
    color: rgb(23,249,250);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
  }
  .srCheckFrom_input{
    height: 100%;
    width: 100%;
    text-align: center;
    border: 1px solid rgb(23,249,250);
    border-radius: 5px;
    padding:0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
	.failure_textarea{
    width: 100%;
    color:gainsboro;
    font-size: 16px;
    margin-bottom:1vh;
	}
	.failure_textarea2{
		font-size: 18px;
		width:30vw;
	}
	.getweizhitu1{
		cursor: pointer;
	}
	.getweizhitu1>img{
		height: 20px;
	}
	.getweizhitu1>span{
		color: rgb(24,228,240);
		font-size:18px;
		margin-top:-10px;
		text-decoration:underline;
	}
	.el-select-dropdown__item{
		font-size: 20px;
		height: 45px;
		line-height: 45px;
	}
	.securityReMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 90vh;
		width: 40vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbankuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-48%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.securityReSmallTitle{
		color: white;
		font-size: 17px;
		text-align: center;
		line-height: 4.5vh;
		width: 11vw;
		height: 4.5vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.securityReClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.securityReContent{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.securityReContent_left_title{
		font-size: 20px;
		font-weight: 500;
		color: rgb(24,228,240);
	}
	/* 未选中样式 */
	.is-bordered .el-radio__label{
		font-size: 17px;
		color: wheat;
	}
	.is-bordered {
		border: wheat 2px solid;
		height: 38px;
		line-height: 20px;
	}
	.is-bordered .el-radio__inner{
		height: 18px;
		width: 18px;
	}
	/* 选中样式 */
	.el-radio__input.is-checked+.el-radio__label{
		color: #1890ff;
	}
	.el-radio.is-bordered.is-checked{
		border-color: #1890ff;
	}
	.el-radio__input.is-checked .el-radio__inner{
		border-color: #1890ff;
		background: #1890ff;
	}
	.el-radio{
		margin: 0;
	}
	.el-radio.is-bordered{
		padding: 8px 20px 0px 10px;
	}
	.securityReContentFromViews{
		margin-top: 10px;
	}
	.securityReContentFromViews>div{
		margin-bottom: 25px ;
	}
	.securityReContentFromViews>div>span{
		color: rgb(24,228,240);
		font-size: 20px;
	}
	.el-input--small .el-input__inner{
		font-size: 18px;
	}
	.submitDeStyle{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	.submitDeStyle button{
		width:10vw;
		height:6.5vh;
		font-size:18px;
		letter-spacing:2px;
	}
}
</style>