<template>
  <div class="Feedback">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('visa.v_tuanhao')}}</em>
            <el-input v-model="msg.TCNUM"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
          </span>
          <el-select filterable v-model="msg.lineID" @change="getLineTeamList">
            <el-option :label="$t('pub.unlimitedSel')" :value="{LineName:`${$t('pub.unlimitedSel')}`,LineID:0}">
            </el-option>
            <el-option v-for="item in LineList" :label='item.LineName' :value='item' :key='item.LineID'></el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_xilie')}}</em>
          </span>
          <el-select filterable v-model="msg.LineteamId" @change="getLineLtID">
            <el-option :label="$t('pub.unlimitedSel')" :value="{LtName:`${$t('pub.unlimitedSel')}`,LtID:0}"></el-option>
            <el-option v-for="item in LineTeamList" :label='item.LtName' :value='item' :key='item.LtID'>
            </el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('objFill.fatuantime')}}</em>
          </span>
          <el-date-picker value-format="yyyy-MM-dd" :picker-options="pickerDisabled" size="small" v-model="dateList"
            type="daterange" :range-separator="$t('OrderList.zhi')" :start-placeholder="$t('OrderList.star')"
            :end-placeholder="$t('OrderList.end')">
          </el-date-picker>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()">
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('scen.sc_ftTime')}}</th>
        <th>{{$t('visa.v_tuanhao')}}</th>
        <th>{{$t('leader.leader_Leader')}}</th>
        <th>{{$t('leader.leader_Guide')}}</th>
        <th>{{$t('objFill.zongrenshu')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.StartDate}}</td>
        <td @click='goUrl("RegistrationList", item.TCID,"报名清单")' class="go_regis">{{item.TCNUM}} ({{item.TCID}})</td>
        <td>{{item.LeaderName}}</td>
        <td>{{item.GuideName}} </td>
        <td>{{item.TotalNum}}</td>
        <td>
          <template v-if="item.BusSurveyId>0">
            <span style="cursor:pointer;color:blue;" @click="showBusSurveyInfo(item)">{{$t('fnc.chakan')}}</span>
          </template>
          <template v-else>
            <span style="cursor:pointer;color:red;" @click="setInfo(item)">{{$t('objFill.tianxie')}}</span>
          </template>
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="6" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <el-dialog :title="$t('objFill.wenquantianxie')" :visible.sync="DiaoChaShow" center :before-close="closeDialog">
      <div class="main NewSurveyList" v-loading="saveShow">
        <div class="">
          <div style="text-align:center;font-size:20px;font-weight:bold;"><template
              v-if="surveyInfo&&surveyInfo.Title&&surveyInfo.Title!=''">{{surveyInfo.Title}}</template>
          </div>
          <div style="text-indent:2em;"><template
              v-if="surveyInfo&&surveyInfo.SubTitle&&surveyInfo.SubTitle!=''">{{surveyInfo.SubTitle}}</template>
          </div>
          <table id="table">
            <template v-if="optionType==1">
              <template v-for="(item, index) in wqList">
                <tr :key="`t_`+index">
                  <td class="_name">{{index+1}}、{{item.Title}}</td>
                </tr>
                <tr :key="`a_`+index">
                  <template v-if="item.SurveyType === 1">
                    <td>
                      <el-rate v-model="item.ScoreNum" show-text :texts="texts">
                      </el-rate>
                    </td>
                  </template>
                  <template v-if="item.SurveyType === 2">
                    <td>
                      <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>
                      <el-checkbox v-for="(radio, rIndex) in item.SurveyOptionsList" v-model="radio.IsCheckS"
                        :label="radio.ID" :key="rIndex">
                        {{radio.OptionsName}}</el-checkbox>
                    </td>
                  </template>
                  <template v-if="item.SurveyType === 4">
                    <td>
                      <el-input type="textarea" :rows="2" :placeholder="$t('fnc.qsrneirong')"
                        v-model="item.TextContent">
                      </el-input>
                    </td>
                  </template>
                </tr>
              </template>
            </template>
            <template v-else>
              <template v-for="(item, index) in busDetailsList">
                <tr :key="`t_`+index">
                  <td class="_name">{{index+1}}、{{item.Title}}</td>
                </tr>
                <tr :key="`a_`+index">
                  <template v-if="item.SurveyType === 1">
                    <td>
                      <el-rate v-model="item.ScoreNum" show-text :texts="texts" disabled>
                      </el-rate>
                    </td>
                  </template>
                  <template v-if="item.SurveyType === 2">
                    <td>
                      <el-radio-group v-model="item.ScoreNum">
                        <el-radio v-for="(radio, rIndex) in item.SurveyOptionsList" :label="radio.ID" :key="rIndex"
                          disabled>
                          {{radio.OptionsName}}</el-radio>
                      </el-radio-group>
                    </td>
                  </template>
                  <template v-if="item.SurveyType === 3">
                    <td>
                      <el-checkbox v-for="(radio, rIndex) in item.SurveyOptionsList" :checked="radio.IsCheck=='1'"
                        :label="radio.ID" :key="rIndex" rea>
                        {{radio.OptionsName}}</el-checkbox>
                    </td>
                  </template>
                  <template v-if="item.SurveyType === 4">
                    <td>
                      <el-input type="textarea" :rows="2" :placeholder="$t('fnc.qsrneirong')" v-model="item.TextContent"
                        disabled>
                      </el-input>
                    </td>
                  </template>
                </tr>
              </template>
            </template>
          </table>
        </div>
        <div style="margin: 20px 0; text-align: right;">
          <button v-if="optionType==1" class="normalBtn" @click="saveMessage">{{$t('fnc.tijiao')}}</button>
          <button v-if="optionType==2" class="normalBtn" @click="closeDialog">{{$t('pub.closeSel')}}</button>
        </div>
      </div>
    </el-dialog>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total"></el-pagination>
  </div>
</template>

<script>
  import moment from "moment"
  import Temporarystaff from './Temporarystaff.vue';
  export default {
    components: {
      Temporarystaff
    },
    data() {
      return {
        dataList: [],
        loading: false,
        DiaoChaShow: false,
        wqList: [],
        saveShow: false,
        msg: {
          pageSize: 10,
          pageIndex: 1,
          TCNUM: '',
          lineID: 0,
          LineteamId: 0,
          reStartDate: '',
          reEndDate: '',
          lineName: this.$t('pub.unlimitedSel'),
          LineteamName: this.$t('pub.unlimitedSel'),
        },
        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]
        ],
        total: 0,
        currentPage: 1,
        dateList: [],
        LineList: [],
        LineTeamList: [],
        TCID: '',
        pickerDisabled: { //验证时间范围
          disabledDate: (time) => {
            let _now = Date.now();
            return time.getTime() > _now;
          }
        },
        surveyInfo: {}, //问卷信息
        busDetailsList: [], //车问卷详情
        optionType: 1, //1-新增，2-查看
      }
    },
    created() {
      this.dateList[0] = moment().subtract(6, "month").format("YYYY-MM-DD");
      this.dateList[1] = moment().format("YYYY-MM-DD");
      this.GetBusSurveyInfo()
    },
    mounted() {
      this.getLineList();
      this.getList();
      this.GetSurveyShowList();
    },
    methods: {
      goUrl(path, id, name) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            blank: 'y',
            tab: name
          }
        })
      },
      setInfo(obj) {
        this.optionType = 1;
        if (obj.number < 1) {
          return this.$message.error(this.$t('objFill.v101.administrative.chitywcyjdc'))
        }
        this.TCID = obj.TCID;
        this.DiaoChaShow = true;
      },
      //显示车行详情
      showBusSurveyInfo(item) {
        this.optionType = 2;
        this.DiaoChaShow = true;
        var postMsg = {
          TCID: item.TCID
        }
        this.apipost("survey_post_GetBusSurveyDetails", postMsg, res => {
          if (res.data.resultCode == 1) {
            this.busDetailsList = res.data.data;
          }
        })
      },
      //获取文件标题和描述
      GetBusSurveyInfo() {
        this.apipost("survey_post_GetBusSurveyInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.surveyInfo = res.data.data;
          }
        });
      },
      GetSurveyShowList() {
        let data = {
          IsShow: 1,
          SurveyType: -1
        }
        this.apipost('survey_post_GetBusSurveyShowList', 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.wqList = data;
          }
        }, null)
      },
      saveMessage() {
        this.saveShow = true
        let data = JSON.parse(JSON.stringify(this.wqList))
        data.forEach(x => {
          x.TCID = this.TCID;
          if (x.SurveyType === 2 || x.SurveyType === 3) {
            x.SurveyOptionsList.forEach(y => {
              y.IsCheck = "0";
              if (x.SurveyType === 2 && x.ScoreNum == y.ID) {
                y.IsCheck = '1';
              }
              //多选
              if (x.SurveyType == 3 && y.IsCheckS) {
                y.IsCheck = "1";
              }
            })
            x.ScoreNum = 0;
          }
        })
        var newMsg = {
          busDetailsList: data
        }
        this.apipost('survey_post_SetBusSurvey', newMsg, res => {
          if (res.data.resultCode === 1) {
            this.$message.success(this.$t('objFill.tijiaochgo'));
            this.DiaoChaShow = false;
            this.saveShow = false;
            this.getList();
          } else {
            this.$message.error(res.data.message)
            this.saveShow = false;
          }
        })
      },
      closeDialog() {
        this.DiaoChaShow = false;
      },
      chaKan(item) {
        this.$router.push({
          name: 'NewSurvey',
          query: {
            "TCID": item.tcid,
            blank: 'y'
          }
        })
      },
      getLineList() {
        this.apipost("line_post_GetAllList_V2", {
          LineDirection: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },
      getLineLtID(val) {
        this.msg.LineteamId = val.LtID;
        this.msg.LineteamName = val.LtName;
      },
      //获取系列列表
      getLineTeamList(val) {
        let lineId = val.LineID;
        this.msg.lineID = val.LineID;
        this.msg.lineName = val.LineName;
        this.LineTeamList = []
        this.apipost("team_post_GetList", {
          lineID: lineId,
          isTOOP: 1
        }, res => {
          if (res.data.resultCode == 1) {
            this.LineTeamList = res.data.data;
          }
        });
      },
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.reStartDate = this.dateList[0];
          this.msg.reEndDate = this.dateList[1];
          //计算相差多少天 day可以是second minute
          let m1 = moment(this.msg.reStartDate)
          let m2 = moment(this.msg.reEndDate)
          let year = m2.diff(m1, 'year');
          if (year > 0) {
            this.Error(this.$t('objFill.zuiduochaxynsj'))
            return;
          }
        } else {
          this.msg.reStartDate = "";
          this.msg.reEndDate = "";
        }
        this.loading = true;
        this.apipost("survey_post_GetTravelBusSurveyPage", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Error(res.data.message)
          }
        }, null);
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
    }
  }

</script>
<style scoped>
  .Feedback ul>li {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
  }

  .Feedback .singeRowTable {
    margin-top: 20px;
  }

  .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: 100%;
    margin: 0 auto;
  }

  .NewSurveyList #table td,
  .NewSurveyList .qianming span {
    color: #111;
  }

  .NewSurveyList #table td._name,
  .NewSurveyList .qianming label {
    color: #5d5d5d;
  }

  .go_regis {
    text-decoration: underline;
    cursor: pointer;
  }

</style>