<template>
  <div class="report">
    <div class="hint">
      <p>选择{{evaluateName}}的具体原因</p>
    </div>
    <div class='right'>
      <ul>
        <template v-for="(dict, index) of dicts">
          <li>
            <div class="check"></div>
            <span class="reason">{{dict.name}}</span>
          </li>
        </template>
      </ul>
    </div>
    <div class="button">
      <div class="nextStep" @click="nextStep"></div>
      <div class="cancel" @click="cancel"></div>
    </div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.report{
		background-image: url('../assets/images/background.png');
		background-repeat: no-repeat;
		background-size: cover;
		overflow:auto;
		height:100%;
	}

  .hint{
    color: #ffffff;
    font-size:40px;
    position: relative;
    top: 25px;
  }

  .right{
    width: 1160px;
    height: 85%;
    position: relative;
    top: 40px;
    margin: 0 60px;
  }
  .right ul{
    margin: 0;
    padding: 0;
  }
  .right ul li{
    float:left;
    display: inline-block;
    height: 80px;
    width: 489px;
    margin: 16px 45px;
    background-image: url('../assets/images/evaluationblock.png');
  }

  .check{
    float: left;
    height: 34px;
    width: 34px;
    background-image: url('../assets/images/reservedbox.png');
    position: relative;
    top: 18px;
    left: 40px;
  }

  .reason{
    color: #ffffff;
    font-size: 30px;
    line-height: 65px;
  }

  .button{
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }

  .cancel{
    width: 300px;
    height: 85px;
    background-image: url('../assets/images/btn/btnCancel.png');
    background-repeat:no-repeat;
  }

  .nextStep{
    width: 300px;
    height: 85px;
    margin-right: 20px;
    background-image: url('../assets/images/btn/btnConfirm.png');
    background-repeat:no-repeat;
  }

</style>

<script>
export default{
	data() {
	  return {
      evaluateId: '',
      evaluateValue: '',
      evaluateName: '',
      dicts: [],
      arr: []
	  }
	},
	created() {
    this.evaluateId = this.$route.query.evaluateId;
    this.evaluateValue = this.$route.query.evaluateValue;
    this.evaluateName = this.$route.query.evaluateName;
    var caseData = this.$LocalStorage.SessionGet("caseData");
    this.batchId = caseData.batchId;
    this.getEvaluateDictList();
	},
	methods:{
    getEvaluateDictList() {
			var _this = this;
			$.ajax({
				type: "get",
				url: window.config.api + 'lilo/evaluate/getEvaluateDictList',
				async: false, //改为同步请求
				data: {parentId: this.evaluateId, useFlag:'1'},
				success:function(data){
					if(data.success){
            _this.dicts = data.obj;
					} else {
						alert(data.msg);
					}
				},error: function(){
					console.log("系统错误");
				}
			})
		},
    saveHandle() {
      $.ajax({
        type: 'post',
        data: {
          batchId: this.batchId,
          evaluateId: this.evaluateId,
          evaluateValue: this.evaluateValue,
          parentId: '0',
          dicts: JSON.stringify(arr)
        },
        url: ctx + "lilo/evaluate/saveHandle",
        success: function(result) {
          if(result.success){
            alert("提交成功！");
          }else{
            alert("提交成功！");
          }
        },
        error: function(err){
          console.log("系统错误");
        }
      });
    },
    cancel() {
      alert("111");
    },
    nextStep() {
      alert("222");
    }

	}
}
</script>