<template>
  <div class="report">
    <el-container>
      <el-aside width="21%">
        <div class="robot"></div>
        <div class="text">
          <p style="font-size: 40px;">{{robotName}}</p>
          <p style="font-size: 24px;">
            <span style="margin-right: 10px;">工号:</span>
            <span>{{serviceId}}</span>
          </p>
        </div>
        <div class='star'>
          <ul>
            <li class="active" v-for="i of stars"></li>
            <li class="halfstar" v-if="halfStar > 0"></li>
            <li class="littel-whitestar" v-for="t of (5 - stars - halfStar)"></li>
          </ul>
        </div>
      </el-aside>
      <el-aside class="line" ></el-aside>
      <el-main width="70%">
        <div class="title">
          <p>请您参加政务服务“好差评”</p>
        </div>
        <div class="hint">
          <p>您对我本次的服务还满意吗？您可以对我进行评价哦！</p>
        </div>
        <div class='right'>
          <ul>
            <template v-for="(dict, index) of dicts">
              <li :class="'li' + dict.code" @click="getEvaluateDictDetail(dict)">
                <span>{{dict.name}}</span>
              </li>
            </template>
          </ul>
        </div>
        <div class="evaluationContent" v-show="show">
          <div class="reason" :class="[confirmed === true ? 'divReadOnly' : '' ]">
            <p>{{reasonName}}的具体原因：</p>
            <ul>
              <template v-for="(reason, index) of reasons">
                <li :class="{'active':reason.active}" @click="changeSelect(reason, index)">
                  <span>{{reason.name}}</span>
                </li>
              </template>
            </ul>
          </div>
          <div class='btns'>
            <button class='confirm' @click="confirm" :class="[confirmed === true ? 'divReadOnly confirmed' : 'unconfirm' ]">确认</button>
            <button class='close' @click="close">取消</button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
  <count-down times=300 bottomOffset="10" rightOffset="10" fontSize="18" ref="child"></count-down>
  <b-page @bPageLoaded="voiceCallback"></b-page>
</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%;
	}

  .divReadOnly{
    pointer-events: none;
  }

  .robot{
    width: 157px;
    height: 181px;
    background-image: url('../assets/images/ico/robot.png');
    background-repeat: no-repeat;
    overflow:auto;
    position: absolute;
    top: 37%;
    left: 11%;
    transform: translate(-50%, -50%);
  }

  .text{
    color: white;
    position: relative;
    top: 392px;
  }

  .text p{
    margin-bottom: 3px;
  }

  .star{
    position: relative;
    top: 400px;
  }
  .star ul{
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .star li{
    display: inline-block;
    width:28px;
    height:27px;
    margin: 0 5px;
  }
  .star li.active{
    background-image: url('../assets/images/ico/yellowstar.png');
    background-repeat: no-repeat;
    overflow:auto;
  }

  .star li.halfstar{
    background-image: url('../assets/images/ico/halfstar.png');
    background-repeat: no-repeat;
    overflow:auto;
  }

  .star li.littel-whitestar{
    background-image: url('../assets/images/ico/littelWhitestar.png');
    background-repeat: no-repeat;
    overflow:auto;
  }

  .line{
    width: 5px;
    height: 605px;
    margin-top: 100px;
    background-image: url('../assets/images/337.png');
    background-repeat: no-repeat;
    overflow:auto;
  }

  .title{
    color: #ffffff;
    font-size:40px;
    height: 200px;
    line-height: 200px;
  }

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

  .right{
    position: relative;
    top: 115px;
  }
  .right ul{
    margin: 0;
    padding: 0;
  }
  .right ul li{
    display: inline-block;
    height: 163px;
    width: 163px;
    margin: 5px 13px;
  }

  .right ul li span{
    color: #ffffff;
    font-size:21px;
    position: relative;
    top: 113px;
  }
  .right  ul li.li5{
    background-image: url('../assets/images/ico/greatSatisfaction.png');
  }
  .right  ul li.li4{
    background-image: url('../assets/images/ico/satisfaction.png');
  }
  .right  ul li.li3{
    background-image: url('../assets/images/ico/BasicSatisfaction.png');
  }
  .right  ul li.li2{
    background-image: url('../assets/images/ico/NotSatisfied.png');
  }
  .right  ul li.li1{
    background-image: url('../assets/images/ico/VeryDissatisfied.png');
  }

	.el-container {
		width: 100%;
    height: 100%;
	}
	.el-main {
    padding: 0;
	}

  /********************************************评价原因框************************************************/
  .evaluationContent{
    background-color:rgba(0,0,0,0.64);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:block;
  }

  .evaluationContent .reason{
    color:#4787d6;
    text-align: center;
    padding:30px 50px;
    margin:0 75px;
    border-radius:10px;
    background:rgba(255,255,255,0.8);
  }
  .evaluationContent .reason>p{
    color:#27a4fd;
    text-align: left;
    font-size:32px;
    line-height:40px;
    width:100%;
  }

  .evaluationContent .reason ul{
    margin: 0;
    padding: 0;
    font-size:24px;
    color:#27a4fd;
    overflow: hidden;
  }
  .evaluationContent .reason ul li{
    float:left;
    height:54px;
    line-height: 54px;
    padding:0 65px 0 30px;
    border:2px solid #27a4fd;
    border-radius: 27px;
    margin-right:20px;
    margin-top:18px;
    background-image:url(../assets/images/gray-right.png);
    background-repeat: no-repeat;
    background-position: 95% center;
  }
  .evaluationContent .reason ul li.active{
    color:#fff;
    background-color:#2898fd;
    background-image:url(../assets/images/white-right.png);
  }
  .btns{
    text-align: center;
  }

  .confirm{
    display:inline-block;
    width:215px;
    height:54px;
    margin:25px auto;
    line-height:54px;
    color:#fff;
    font-size:30px;
    border-radius:10px;
    border:none;
    outline:none;
    margin-right:10px;
  }
  .unconfirm{
    background:#04bdfa;
  }
  .confirmed{
    background:#aaa;
  }
  .close{
    display:inline-block;
    width:215px;
    height:54px;
    margin:25px auto;
    line-height:54px;
    color:#fff;
    font-size:30px;
    border-radius:10px;
    border:none;
    background:#aaa;
    outline:none;
  }
  /**************************************************扫码******************************************************/

</style>

<script>
import { layer } from "@layui/layer-vue";
import BPage from "@/components/registerVoice";

export default{
  components: {
    BPage,
  },


  data() {
	  return {
		  robotName: '',
      batchId: '',
      serviceId: '',
      stars: 5,
      halfStar: 0,
      dicts: [],
      reasonName: '',
      reasons:[],
      show: false,
      rootDict: {},
      tempMap: new Map(),
      confirmed: false
	  }
	},
	created() {
    var caseData = this.$LocalStorage.SessionGet("caseData");
    this.serviceId = caseData.serviceId;
    this.batchId = caseData.batchId;
    this.getEvaluateDict();
	},
  mounted () {
    //将Vue方法传到全局对象window中
    window.toIndex = this.toIndex;
    if(robotType){
      robotsdk.playAudio({
        cmd: 'playAudio',
        animation: 0,
        videocontent: '您对我本次的服务还满意吗？您可以对我进行评价哦！',
        callback: ""
      });
    }
  },
	methods:{
    getEvaluateDict() {
			var _this = this;
			$.ajax({
				type: "get",
				url: window.config.api + 'lilo/evaluate/getEvaluateDict',
				async: false, //改为同步请求
				data: {serviceId: this.serviceId},
				success:function(data){
					if(data.success){
            _this.robotName = data.obj.robotName;
            _this.stars = data.obj.stars;
            _this.halfStar = data.obj.halfStar;
            _this.dicts = data.obj.dicts;
					} else {
            layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
            console.log(data.msg);
					}
				},error: function(error){
          layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
					console.log(error);
				}
			})
		},

    getEvaluateDictDetail(dict) {
      this.rootDict = dict;
      this.reasonName = dict.name;
      this.reasons = dict.children;
      this.show = true;
      this.$nextTick(function () {
        var H=$('.reason').height();
        $('.reason').css('margin-top',(806-H-54)/2);
      })

    },

    changeSelect(reason,index) {
      if(reason.active){
        this.reasons[index]['active'] = false;
        this.tempMap.delete(index);
      }else{
        this.reasons[index]['active'] = true;
        this.tempMap.set(index, reason);
      }
    },

    confirm() {
      var _this = this;
      var arr = [];
      var obj = {};
      var count = this.tempMap.size;
      if(count == 0){
        layer.msg('请至少勾选一个评价理由！', { time: 1500, icon: 3 })
      } else {
        this.confirmed = true;
        this.tempMap.forEach(function(value,key){
          obj = new Object();
          obj.batchId = _this.batchId;
          obj.evaluateId = value.id;
          obj.evaluateValue = value.code;
          arr.push(obj);
        });
        $.ajax({
          type: 'post',
          data: {
            batchId: this.batchId,
            evaluateId: this.rootDict.id,
            evaluateValue: this.rootDict.code,
            parentId:'0',
            dicts:JSON.stringify(arr)
          },
          url: window.config.api + "lilo/evaluate/saveHandle",
          success: function(result) {
            if(result.success){
              if(robotType){
                robotsdk.playAudio({
                  cmd: 'playAudio',
                  animation: 0,
                  videocontent: '非常感谢您的评价，本次服务就要结束了哦！感谢您的使用！',
                  callback: "toIndex"
                });
              }
            }else{
              layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
              console.log(result.msg);
            }
          },
          error: function(err){
            layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
            console.log(err);
          }
        });
      }

    },

    close() {
      var _this = this;
      this.show = false;
      this.tempMap.forEach(function(value,key){
        _this.reasons[key]['active'] = false;
      });
      this.tempMap.clear();
    },

    toIndex() {
      if(robotType){
        robotsdk.closeExternalApp({
          mode:0
        });
      }
    },

    //语音回调（只处理退出）
    voiceCallback(res){
      if (res=="quit"){
         this.toIndex();
      }
    }

	}
}
</script>