<template>
  <div class="Feedback">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>团号</em>
            <el-input v-model="msg.TCNUM"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>线路</em>
          </span>
          <el-select filterable v-model="obj.LineID" value-key="LineID" @change="getLineTeamList">
            <el-option label="不限" :value='{LineName:"不限",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>系列</em>
          </span>
          <el-select filterable v-model="obj.LineteamId" value-key="LtID" @change="getLineLtID">
            <el-option label="不限" :value='{LtName:"不限",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>发团时间</em>
          </span>
          <el-date-picker value-format="yyyy-MM-dd" :picker-options="pickerDisabled" size="small" v-model="dateList"
            type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()">
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>发团日期</th>
        <th>团号</th>
        <th>领队</th>
        <th>未填写人数/总人数</th>
        <th>整体评分</th>
        <template v-if="dataList&&dataList.length>0">
          <th v-for="(item,i) in dataList[0].SurveyItemList" :key="i">{{item.Title}}</th>
        </template>
        <th>操作</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.FinishNum}}/{{item.TotalNum}}</td>
        <td>
          {{item.ScoreNum}}
        </td>
        <template v-if="item.SurveyItemList&&item.SurveyItemList.length>0">
          <td v-for="(subItem,subIndex) in item.SurveyItemList" :key="subIndex">{{subItem.ItemValue}}</td>
        </template>
        <td>
          <span style="cursor:pointer" @click="setInfo(item)">填写</span>
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="6" align="center">暂无数据</td>
      </tr>
    </table>
    <el-dialog title="问券填写" :visible.sync="DiaoChaShow" center :before-close="closeDialog">
      <div class="main NewSurveyList" v-loading="saveShow">
        <el-select filterable v-model="GuestId" value-key="LineID" @change="getOrderID(GuestId)">
          <el-option v-for="item in ppList" :label='item.GuestName' :value='item.GuestId' :key='item.GuestId'>
          </el-option>
        </el-select>
        <div class="">
          <table id="table">
            <tr>
              <td class="_name">旅客意见</td>
              <td class="_name">非常满意</td>
              <td class="_name">满意</td>
              <td class="_name">基本合格</td>
              <td class="_name">不满意</td>
            </tr>
            <tr v-for="(item, index) in wqList">
              <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="请输入内容" 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>
    </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"
  export default {
    data() {
      return {
        obj: {},
        dataList: [],
        loading: false,
        DiaoChaShow: false,
        wqList: [],
        saveShow: false,
        msg: {
          pageSize: 10,
          pageIndex: 1,
          TCNUM: '',
          lineID: 0,
          LineteamId: 0,
          reStartDate: '',
          reEndDate: '',
          isScore: 0,
          lineName: "不限",
          LineteamName: "不限",
        },
        texts: [
          '非常不满意',
          '不满意',
          '感觉一般',
          '满意',
          '非常满意'
        ],
        total: 0,
        currentPage: 1,
        dateList: [],
        LineList: [],
        LineTeamList: [],
        fields: [],
        ppList: [],
        GuestId: '',
        TCID: '',
        OrderID: '',
        pickerDisabled: { //验证时间范围
          disabledDate: (time) => {
            let _now = Date.now();
            return time.getTime() > _now;
          }
        }
      }
    },
    created() {
      this.dateList[0] = moment().subtract(6, "month").format("YYYY-MM-DD");
      this.dateList[1] = moment().format("YYYY-MM-DD");
      this.getTitle();
    },
    mounted() {
      this.getLineList();
      this.getList();
      this.GetSurveyShowList();
    },
    methods: {
      goUrl(path, id, name) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            blank: 'y',
            tab: name
          }
        })
      },
      getOrderID(id) {
        this.ppList.map(x => {
          if (id === x.GuestId) {
            this.OrderID = x.OrderID;
          }
        })
      },
      setInfo(obj) {
        if (obj.number < 1) {
          return this.$message.error('此团已完成意见调查！')
        }
        this.TCID = obj.TCID;
        this.DiaoChaShow = true;
        this.getppList();
      },
      getppList: function () {
        this.apipost('survey_post_GetTotalListAPP', {
          TCID: this.TCID,
          OrderID: 0
        }, res => {
          if (res.data.resultCode === 1) {
            this.ppList = res.data.data.objNoScore;
          }
        }, null)
      },
      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.wqList = data;
          }
        }, null)
      },
      saveMessage: function () {
        if (this.GuestId == '') {
          return this.$message.error('请选择客人')
        }
        this.saveShow = true
        let data = JSON.parse(JSON.stringify(this.wqList))
        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.GuestId = '';
            this.DiaoChaShow = false;
            this.saveShow = false;
            this.getList();
          } else {
            this.$message.error(res.data.message)
            this.saveShow = false;
          }
        })
      },
      closeDialog: function () {
        this.DiaoChaShow = false;
      },
      chaKan(item) {
        this.$router.push({
          name: 'NewSurvey',
          query: {
            "TCID": item.tcid,
            "OrderId": item.orderId,
            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;
          }
        });
      },
      getTitle() {
        this.apipost("survey_post_GetSurveyShowList", {}, res => {
            if (res.data.resultCode === 1) {
              res.data.data.forEach(item => {
                this.fields.push(item.Title)
              })
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      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("最多查询一年的数据！")
            return;
          }
        } else {
          this.msg.reStartDate = "";
          this.msg.reEndDate = "";
        }
        this.loading = true;
        this.apipost("survey_post_GetTravelSurveyPage", 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>