<template>
    <div class="passengerInfo">
        <div class="passengerInfo_cheak">
            <div @click="checkBtn()">查询</div>
        </div>
        <div class="passengerInfo_header">
            <div>
                <em>团队编号</em><el-input class="passengerInfo_header_input1" v-model='msg.TCNUM' placeholder="请输入"></el-input>
            </div>
            <div>
                <em>订单编号</em><el-input class="passengerInfo_header_input1" v-model='msg.OrderId' @keyup.native="checkInteger(msg,'OrderId')"  placeholder="请输入"></el-input>
            </div>
            <div>
                <em>姓名</em><el-input class="passengerInfo_header_input1" v-model='msg.Name' placeholder="请输入"></el-input>
            </div>
            <div>
                <em>性别</em>
                <el-select class="passengerInfo_header_input1" v-model='msg.Sex' clearable filterable>
                    <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </div>
            <div>
                <em>身份证</em><el-input class="passengerInfo_header_input1" v-model='msg.IdCard' placeholder="请输入"></el-input>
            </div>
            <div>
                <em>护照号</em><el-input class="passengerInfo_header_input1" v-model='msg.PassportNo' placeholder="请输入"></el-input>
            </div>
            <div>
                <em>
                    <el-popover width="405" trigger="click">
                        <div class="passengerInfo_layer_header">
                            <p>旅客信息高级查询</p>
                        </div>
                        <div class="passengerInfo_header">
                            <div>
                                <em>发团日期</em>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.TCStartDate' @change="dataDui('TCDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                                <i>-</i>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.TCEndDate' @change="dataDui('TCDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                            </div>
                            <div>
                                <em>报名日期</em>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.EnterOrderSDate' @change="dataDui('OrderDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                                <i>-</i>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.EnterOrderEDate' @change="dataDui('OrderDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                            </div>
                            <div>
                                <em>出生日期</em>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.BirthdayStart' @change="dataDui('BirthDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                                <i>-</i>
                                <el-date-picker class="passengerInfo_header_input2" v-model='msg.BirthdayEnd' @change="dataDui('BirthDate')" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')" clearable></el-date-picker>
                            </div>
                            <div>
                                <em>是否免签</em>
                                <el-select class="passengerInfo_header_input1" v-model='msg.IsVisaFree' clearable filterable>
                                    <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="2"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <em>产品类型</em>
                                <el-select class="passengerInfo_header_input1" v-model='msg.IsAllograph' clearable filterable>
                                    <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
                                    <el-option label="签证" value="1"></el-option>
                                    <el-option label="跟团" value="2"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <em>销售</em><el-input class="passengerInfo_header_input1" v-model='msg.CreateBy' placeholder="请输入"></el-input>
                            </div>
                        </div>
                        <div class="passengerInfo_layer_btn" @click="checkBtn()">查询</div>
					    <span slot="reference" style="cursor: pointer;">高级查询<i class="el-icon-caret-bottom"></i></span>
				    </el-popover>
                </em>
            </div>
        </div>
        <div class="passengerInfo_tableBox">
            <table class="passengerInfo_table" border="0" cellspacing="0" cellpadding="0" :loading="loading">
                <thead>
                    <tr>
                        <th width="7%">团队编号</th>
                        <th width="7%">订单编号</th>
                        <th width="7%">类型</th>
                        <th width="7%">{{$t('system.query_name')}}</th>
                        <th width="7%">性别</th>
                        <th width="7%">出生地</th>
                        <th width="7%">出生日期</th>
                        <th width="7%">身份证号</th>
                        <th width="7%">护照号</th>
                        <th width="6%">签发地</th>
                        <th width="6%">签发日期</th>
                        <th width="6%">有效日期</th>
                        <th width="6%">是否需要签证</th>
                        <th width="7%">创建人</th>
                        <th width="7%">{{$t('hotel.table_operat')}}</th>
                    </tr>
                </thead>
                <tbody v-show="tableList.length>0">
                    <tr v-for="(item,index) in tableList" :key="index">
                        <td>
                            <span class="passengerInfo_url" @click="goUrlT(item)">{{item.TCID}}</span>
                        </td>
                        <td>
                            <span class="passengerInfo_url" @click="goUrlO(item)">{{item.OrderId}}</span>
                        </td>
                        <td>{{item.Type}}</td>
                        <td>{{item.Name}}</td>
                        <td>{{item.Sex}}</td>
                        <td>{{item.BirthdayAddress}}</td>
                        <td>{{item.Birthday}}</td>
                        <td>{{item.IdCard}}</td>
                        <td>{{item.PassportNo}}</td>
                        <td>{{item.PassportAddress}}</td>
                        <td>{{item.PassportIssued}}</td>
                        <td>{{item.PassportExpiry}}</td>
                        <td>
                          <span style="color: red;">{{item.NeedVisa?'是':''}}</span>
                        </td>
                        <td>{{item.CreateByName}}</td>
                        <td>
                            <el-button-group>
                                <el-tooltip  class="item" effect="dark" :content="$t('fnc.chakan')" placement="top-start">
                                    <el-button type="primary" style='background:#00C6FF; border-color:#00C6FF' icon="iconfont icon-sousuo" @click="goUrlD(item)"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </td>
                    </tr>
                </tbody>
                <tbody v-show="tableList.length===0" class="passengerInfo_table_noInfo">
                    <tr>
                        <td colspan="15" class="">{{$t('system.content_noData')}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <el-pagination background @current-change="handleCurrentChange"
                  :current-page.sync="msg.pageIndex"
                  layout="total,prev, pager, next, jumper"
                  :page-size="msg.pageSize"
                  :total="msg.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                loading: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    TCNUM: '',
                    TCStartDate: '',
                    TCEndDate: '',
                    OrderId: '',
                    EnterOrderSDate: '',
                    EnterOrderEDate: '',
                    Name: '',
                    Sex: '-1',
                    IdCard: '',
                    PassportNo: '',
                    BirthdayStart: '',
                    BirthdayEnd: '',
                    IsVisaFree: '-1',
                    IsAllograph: '-1',
                    CreateBy: '',
                    total: 0
                },
                tableList: []
            }
        },
        methods: {
            checkBtn: function () {
                this.getList()
            },
            // 结束日期不能大于开始日期
            dataDui(type) {
                if (type === "TCDate") {
                    if (this.msg.TCStartDate > this.msg.TCEndDate && this.msg.TCEndDate !== "") {
                        this.$message.error("结束日期不能大于开始日期");
                        this.msg.TCEndDate = "";
                    }
                } else if (type === "OrderDate") {
                    if (this.msg.EnterOrderSDate > this.msg.EnterOrderEDate && this.msg.EnterOrderEDate !== "") {
                        this.$message.error("结束日期不能大于开始日期");
                        this.msg.EnterOrderEDate = "";
                    }
                } else if (type === "BirthDate") {
                    if (this.msg.BirthdayStart > this.msg.BirthdayEnd && this.msg.BirthdayEnd !== "") {
                        this.$message.error("结束日期不能大于开始日期");
                        this.msg.BirthdayEnd = "";
                    }
                }
            },
            // 分页切换
            handleCurrentChange: function(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            getList: function () {
                this.loading = true
                this.apipost("sellorder_get_GetTravelGuestPageList", this.msg, res => {
                    if (res.data.resultCode == 1) {
                        this.tableList = res.data.data.pageData
                        this.msg.pageIndex = res.data.data.pageIndex
                        this.msg.total = res.data.data.count
                    } else {
                        this.$message.error(res.data.message)
                    }
                    this.loading = false
                });
            },
            goUrlD: function (item) {
                this.$router.push({ name: 'passengerDetail', query: { guestId: item.Id, TCID: item.TCID, orderId: item.OrderId, blank: 'y', tab: '旅客资料'} });
            },
            goUrlT: function (item) {
                if (item.TypeId===1) {
                    this.$router.push({ name: 'VisaProduct', query: { VisaID: item.TCID, blank: 'y', tab: '签证产品'} });
                } else if (item.TypeId===2) {
                    this.$router.push({ name: 'productQuery', query: { id: item.TCID, blank: 'y', tab: '产品查询'} });
                }
            },
            goUrlO: function (item) {
                if (item.TypeId===1) {
                    this.$router.push({ name: 'VisaProductOrder', query: { id: item.TCID, blank: 'y', tab: '签证详情'} });
                } else if (item.TypeId===2) {
                    this.$router.push({ name: 'groupTourOrderByTuan', query: { id: item.TCID, tcmun: item.TCNUM, blank: 'y', tab: '团报名清单'} });
                }
            }
        },
        created: function () {
            this.getList()
        }
    }
</script>

<style>
.passengerInfo {
  font-size: 0px;
}
.passengerInfo_cheak {
  position: fixed;
  z-index: 10;
  top: 36px;
  right: 20px;
  margin: 20px 0 0px 0;
}
.passengerInfo_cheak > div:nth-child(1) {
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #e95252;
  border: 1px solid #e95252;
  border-radius: 15px;
  background-color: #FFFFFF;
  cursor: pointer;
}


.passengerInfo_header {
  margin: 10px 0 20px 0;
  font-size: 0px;
}
.passengerInfo_header > div {
  margin: 10px 20px 0 0;
  display: inline-block;
  white-space: nowrap;
}
.passengerInfo_header > div > em {
  margin: 0 10px 0 0;
  display: inline-block;
  width: 50px;
  text-align: right;
  font-size: 12px;
  color: #666666;
}
.passengerInfo_header > div > i {
  margin: 0 5px;
  color: #dde0e6;
  font-size: 14px;
}
.passengerInfo_header .passengerInfo_header_input1 {
  width: 160px;
}
.passengerInfo_header .passengerInfo_header_input2 {
  width: 150px!important;
}

.passengerInfo_layer_header > p {
  padding: 10px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.passengerInfo_layer_btn{
  color: #fff;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  background: #E95252;
  border: 1px solid #E95252;
  cursor: pointer;
  border-radius: 15px;
}

.passengerInfo_tableBox {
  padding: 20px 0 0 0;
  width: 100%;
}
.passengerInfo_table {
  width: 100%;
  color: #333;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.passengerInfo_table tr {
  background: #fff;
}
.passengerInfo_table tr th {
  background: #e6e6e6;
  height: 30px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
.passengerInfo_table tr td {
  padding: 10px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
.passengerInfo_table_noInfo tr td {
  height: 30px;
  text-align: center;
  font-size: 12px;
  color: #999999;
}

.passengerInfo_url{
    text-decoration: underline;
    cursor: pointer;
}
</style>