<style>
  .CM_detail {
    color: #3980C8;
    cursor: pointer;
  }

  .CM_detail:hover {
    text-decoration: underline;
    color: #E95252;
  }

</style>

<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('salesModule.keyWords')}}</em>
            <el-input placeholder="" v-model="queryMsg.IdCard"></el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList(),resetPageIndex()" />&nbsp;
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="showDialog(null)" />
        </li>
      </ul>
    </div>

    <div class="commonContent" v-loading="queryCommonData.loading">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>{{$t('hotel.hotel_SerialNumber')}}</th>
          <th>{{$t('admin.admin_IDcard')}}</th>
          <th>{{$t('pub.mbPhoneNum')}}</th>
          <th>{{$t('salesModule.Passport')}}</th>
          <th>{{$t('pub.pubRemark')}}</th>
          <th>{{$t('active.cl_addPp')}}</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in queryCommonData.dataList" :key="index+10000">
          <td>{{item.Id}}</td>
          <td>
            {{item.IdCard}}
          </td>
          <td>{{item.MobilePhone}}</td>
          <td>{{item.PassportNo}}</td>
          <td style="text-align:left;">{{item.Notes}}</td>
          <td>{{item.CreateByName}}</td>
          <td>
            <template v-if="CurrentUserInfo.EmployeeId==item.CreateBy||IsEditDlete">
              <span class="CM_detail" @click="showDialog(item)">{{$t('pub.updateMsg')}}</span>
              <span class="CM_detail" @click="delGuest(item)">{{$t('system.table_delete')}}</span>
            </template>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="queryCommonData.noData">
        {{$t('system.content_noData')}}
      </div>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
        layout="total,prev, pager, next, jumper" :page-size="queryMsg.pageSize" :total="queryMsg.total">
      </el-pagination>
    </div>
    <el-dialog custom-class='w500' :title="editTitle" :visible.sync="isShowGuestForm" center
      :before-close="closeDailog">
      <table class="layerTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100" align="right">{{$t('admin.admin_IDcard')}}：</td>
          <td>
            <el-input v-model='postMsg.IdCard' maxlength='100' :placeholder="$t('objFill.qingtxsfzhm')"></el-input>
          </td>
        </tr>
        <tr>
          <td width="100" align="right">{{$t('pub.mbPhoneNum')}}：</td>
          <td>
            <el-input v-model='postMsg.MobilePhone' maxlength='100' :placeholder="$t('objFill.qingtxsjhm')"></el-input>
          </td>
        </tr>
        <tr>
          <td width="100" align="right">{{$t('system.table_Passport')}}：</td>
          <td>
            <el-input v-model='postMsg.PassportNo' maxlength='100' :placeholder="$t('visaT.ptxPassportNo')"></el-input>
          </td>
        </tr>
        <tr>
          <td width="100" align="right">{{$t('pub.pubRemark')}}:</td>
          <td>
            <el-input v-model='postMsg.Notes' maxlength='200' :placeholder="$t('objFill.v101.Complaints.zuiduosrgz')"></el-input>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="closeDailog">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" type="primary" @click="saveGuest">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryCommonData: {
          //加载
          loading: false,
          //是否有数据
          noData: false,
          //数据列表
          dataList: [],
        },
        queryMsg: {
          IdCard: "",
          pageIndex: 1,
          pageSize: 10,
          //第几页
          currentPage: 1,
          //总数
          total: 0,
        },
        //新增修改旅客黑名单参数
        postMsg: {
          Id: 0,
          IdCard: "", //身份证号码
          MobilePhone: "", //手机号码
          PassportNo: "", //护照号
          Notes: "", //备注
        },
        isShowGuestForm: false, //是否显示新增修改弹窗
        editTitle: this.$t('objFill.v101.Complaints.xinzlkhmd'), //弹窗标题
        CurrentUserInfo: {}, //当前登录用户信息
        IsEditDlete: false, //是否有修改删除权限
      }
    },
    methods: {
      //添加修改投诉
      showDialog(item) {
        if (item) {
          this.editTitle = this.$t('objFill.v101.Complaints.xiuglkhmd');
          this.postMsg.Id = item.Id;
          this.postMsg.IdCard = item.IdCard;
          this.postMsg.MobilePhone = item.MobilePhone;
          this.postMsg.PassportNo = item.PassportNo;
          this.postMsg.Notes = item.Notes;
        }
        this.isShowGuestForm = true;
      },
      //关闭弹窗
      closeDailog() {
        this.isShowGuestForm = false;
        this.postMsg.Id = 0;
        this.postMsg.IdCard = "";
        this.postMsg.MobilePhone = "";
        this.postMsg.PassportNo = "";
        this.postMsg.Notes = "";
      },
      //新增修改旅客黑名单
      saveGuest() {
        this.apipost('travel_post_SetTravelGuestBlack', this.postMsg, res => {
          if (res.data.resultCode == 1) {
            this.closeDailog();
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      getList() {
        this.queryCommonData.loading = true;
        this.apipost('travel_post_GetGuestBlackPageList', this.queryMsg, res => {
          this.queryCommonData.loading = false;
          if (res.data.resultCode == 1) {
            this.queryMsg.total = res.data.data.count;
            this.queryCommonData.noData = !this.queryMsg.total > 0;
            this.queryCommonData.dataList = res.data.data.pageData;
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      //翻页
      handleCurrentChange(val) {
        this.queryMsg.pageIndex = val
        this.getList()
      },
      //重新查询
      resetPageIndex() {
        this.queryMsg.pageIndex = 1;
        this.queryMsg.currentPage = 1;
      },
      //删除
      delGuest(item) {
        var that = this;
        var tipMsg = this.$t('objFill.shifousc')+"【" + item.IdCard + "/" + item.MobilePhone + "/" + item.PassportNo + "】?";
        that.Confirm(tipMsg, function () {
          var msg = {
            Id: item.Id
          };
          that.apipost(
            "travel_post_DelTravelGuestBlack", msg, res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //是否有修改和删除旅客黑名单权限
      CheckAuth() {
        var actionCode = this.$AuthCode.F_EditDeleteGuest;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.IsEditDlete = true;
          }
        });
      },
    },
    created() {
      this.CurrentUserInfo = this.getLocalStorage();
      this.CheckAuth();
    },
    mounted() {
      this.getList();
    }
  }

</script>