<style>
.investigationList td button{
  width: 30px;
  height: 30px;
  display: inline-block;
  color: white !important;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.investigationList .el-button.is-circle{
  padding: 0;
}
</style>
<template>
  <div class="investigationList">
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>订单号</th>
        <th>客人名称</th>
        <th>销售名称</th>
        <th>客户名称</th>
        <th>分数</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in dataList">
         <td>{{item.OrderID}}</td>
         <td>{{item.GuestName}}</td>
         <td>{{item.EnterName}}</td>
         <td>{{item.CustomerName}}</td>
         <td>{{item.ScoreNum}}</td>
         <td>
            <el-tooltip class="item" effect="dark" content="查看问券" placement="top">
              <el-button
                type="primary"
                icon="iconfont icon-sousuo"
                circle
                @click="dialogTitle = '游客问券', openPage(item)"
              ></el-button>
              <!-- showID = item.ID, DiaoChaShow = true -->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="查看游记" placement="top">
              <el-button
                v-if="item.NotesId > 0"
                type="primary"
                icon="iconfont icon-youji"
                circle
                @click="dialogTitle = '游记', showID = item.NotesId, YouJiShow = true"
              ></el-button>
            </el-tooltip>
         </td>
      </tr>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>
    <el-dialog
      custom-class="w400"
      :title="dialogTitle"
      :visible.sync="DiaoChaShow"
      center
      :before-close="closeDialog">
      <DiaoCha :ID="showID"/>
    </el-dialog>
    <el-dialog 
      custom-class="w500"
      :title="dialogTitle"
      :visible.sync="YouJiShow"
      center
      :before-close="closeDialog">
      <YouJi :ID="showID"/>
    </el-dialog>
    <a href="" id="blankLink" target="_blank" style="display:none">1</a>
  </div>
</template>
<script>
import DiaoCha from './investigationDetail';
import YouJi from './investigationYouDetail';
export default {
  components:{
    DiaoCha: DiaoCha,
    YouJi: YouJi,
  },
  data(){
    return{
      loading: false,
      dataList: [],
      DiaoChaShow: false,
      YouJiShow: false,
      showID: 0,
      dialogTitle: '',
    }
  },mounted() {
    let TCID = this.$route.query.TCID,
      OrderID = this.$route.query.OrderId;
    this.getList(TCID, OrderID);
  },methods: {
    openPage: function (obj){
      let dom = document.querySelector("#blankLink");
      dom.href = "http://activity.oytour.com/html/invesDetails2.html" + '?ID=' + obj.ID + '&name=' + encodeURI(obj.GuestName) + '&MobilePhone=' + obj.CustomerPhone
      dom.click();
    },
    closeDialog: function () {
      this.DiaoChaShow = false;
      this.YouJiShow = false;
    },
    getList: function (TCID, OrderID) {
      this.apipost('survey_post_GetTotalList', {TCID: TCID, OrderID: OrderID}, res=>{
        if (res.data.resultCode === 1) {
          this.dataList = res.data.data;
        }
      }, null)
    }
  }
}
</script>
