<style>
.NewSurveyList.main{
      padding: 1.5rem;
    }
    .NewSurveyList .tit{
      font-size: 2rem;
      text-align: center;
      margin-bottom: .5rem;
    }
    .NewSurveyList .sub_tit{
      font-size: 1.4rem;
      margin-bottom: .4rem;
    }
    .NewSurveyList .indet_2{
      text-indent: 2.4rem;
    }
    .NewSurveyList .tit_det{
      text-indent: 2.4rem;
      font-size: 1rem;
    }
    .NewSurveyList table { border-collapse:collapse; border-spacing:0; }
    .NewSurveyList table{
      margin-top: 1rem;
      width: 100%;
    }
    .NewSurveyList tr td{
      padding: .5rem;
      border: 1px solid #5b5653;
      font-size: 1rem;
    }
    .NewSurveyList .qianming{
      margin-top: 2.5rem;
    }
    .NewSurveyList .qianming label{
      margin-right: .2rem;
    }
    .NewSurveyList.main{
      width: 720px;
      margin: 0 auto;
    }
    .NewSurveyList #table td,.NewSurveyList .qianming span{
      color: #111;
    }
    .NewSurveyList #table td._name,.NewSurveyList .qianming label{
      color: #5d5d5d;
    }
</style>
<template>
  <div class="main NewSurveyList">
    <!-- <p class="tit">印象旅游服务意见表</p>
    <div class="message-box">
      <p class="sub_tit">亲爱的旅客：</p>
      <div class="tit_det">
        <p>感谢与您同行,让我们的旅行更加圆满!</p>
        <p>我们十分珍视倾听您的声音。它将是我们改善服务的重要基础。</p>
        <p>最后，需要您花一点点时间填写此表。诚挚地感谢您!</p>
      </div>
    </div> -->
    <div class="qianming">
      <label class="_name">{{$t('objFill.v101.administrative.lvkeqianm')}}：<span id="name">{{obj.GuestName}}</span></label>
      <!-- <label class="_name">{{$t('pub.mbPhone')}}：<span id="phone"></span></label>
      <label class="_name">{{$t('pub.date')}}：<span id="day"></span></label> -->
    </div>
    <div class="">
      <table id="table">
        <!-- <tr>
          <td class="_name">{{$t('advmanager.v_line')}}：</td>
          <td id="LineName"></td>
          <td class="_name">{{$t('Airticket.Air_StartTime')}}：</td>
          <td id="StartDateStr"></td>
          <td class="_name">{{$t('leader.leader_Leader')}}：</td>
          <td width="80" id="LeaderName"></td>
        </tr>
        <tr>
          <td class="_name">您的报名公司：</td>
          <td id="BranchName"></td>
          <td class="_name">报名接待员：</td>
          <td id="ContactName"></td>
          <td class="_name">专业度及服务评价：</td>
          <td></td>
        </tr> -->
        <tr>
          <td class="_name">{{$t('objFill.lkyj')}}</td>
          <td class="_name">{{$t('objFill.feichangmanyi')}}</td>
          <td class="_name">{{$t('objFill.manyi')}}</td>
          <td class="_name">{{$t('objFill.jibenhege')}}</td>
          <td class="_name">{{$t('objFill.bumanyi')}}</td>
          <!-- <td class="_name">评价</td> -->
        </tr>
        <tr v-for="(item, index) in dataList">
          <td class="_name">{{index+1}}、{{item.Title}}</td>
          <template v-if="item.SurveyType === 1">
            <td colspan="4">
              <el-rate
                v-model="item.ScoreNum"
                show-text
                :texts="texts">
              </el-rate>
            </td>
          </template>
          <template v-if="item.SurveyType === 2">
            <td colspan="4">
              <el-radio-group v-model="item.ScoreNum">
                <el-radio v-for="(radio, rIndex) in item.SurveyOptionsList" :label="radio.ID" :key="rIndex">{{radio.OptionsName}}</el-radio>
              </el-radio-group>
            </td>
          </template>
          <template v-if="item.SurveyType === 3">
            <td colspan="4">
              <el-checkbox-group v-model="item.SurveyOptionsList">
                <el-checkbox v-for="(radio, rIndex) in item.SurveyOptionsList" :label="radio.ID" :key="rIndex">{{radio.OptionsName}}</el-checkbox>
              </el-checkbox-group>
            </td>
          </template>
          <template v-if="item.SurveyType === 4">
            <td colspan="4">
              <el-input
                type="textarea"
                :rows="2"
                :placeholder="$t('fnc.qsrneirong')"
                v-model="item.TextContent">
              </el-input>
            </td>
          </template>
        </tr>
      </table>
    </div>

    <div style="margin: 20px 0; text-align: right;">
      <button class="normalBtn" @click="saveMessage">{{$t('fnc.tijiao')}}</button>
    </div>
  </div>
</template>
<script>

export default {
  components:{

  },
  data(){
    return{
      leaderData: {},
      loading: false,
      dataList: [],
      TCID: '',
      OrderID: '',
      GuestId: '',
      obj: {},
      texts: [
        this.$t('objFill.pingfens')[0],
        this.$t('objFill.pingfens')[1],
        this.$t('objFill.pingfens')[2],
        this.$t('objFill.pingfens')[3],
        this.$t('objFill.pingfens')[4]
      ]
    }
  },mounted() {
    this.TCID = this.$route.query.TCID;
    this.OrderID = this.$route.query.OrderId;
    this.obj = JSON.parse(this.$route.query.obj)
    this.GuestId = this.obj.GuestId
    this.GetSurveyShowList();
  },methods: {
    saveMessage: function(){
      let data = JSON.parse(JSON.stringify(this.dataList))
      data.forEach(x=>{
        x.TCID = this.TCID;
        x.OrderID = this.OrderID;
        x.GuestId = this.GuestId;
        if (x.SurveyType === 2 || x.SurveyType === 3) {
          x.SurveyOptionsList.forEach(y=>{
            y.IsCheck = x.ScoreNum == y.ID ? '1' : '0'
          })
          x.ScoreNum = 0
        }
      })
      this.apipost('survey_post_SetGuestSurvey', data, res=>{
        if (res.data.resultCode === 1) {
          this.$message.success(this.$t('objFill.tijiaochgo'))
          setTimeout(()=>{
            window.close()
          }, 1000)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    GetSurveyShowList: function () {
      let data = {
        IsShow: 1,
        SurveyType: -1
      }
      this.apipost('survey_post_GetSurveyShowList', data, res=>{
        if (res.data.resultCode === 1) {
          let data = res.data.data
          data.map(item => {
            if (item.SurveyType === 2) {
              item.SurveyOptionsList.map((cItem, cIndex) => {
                cItem.IsCheckS = false
              })
            }
            if (item.SurveyType === 3) {
              item.SurveyOptionsList.map((cItem, cIndex) => {
                cItem.IsCheckS = false
              })
            }
            if (item.SurveyType === 1) {
              item.ScoreNum = 5;
            }
          })
          this.dataList = data;
        }
      }, null)
    }
  }
}
</script>