<template>
    <div class="passengerInfo">
        <div class="passengerInfo_cheak">
            <div @click="checkBtn()">{{$t('pub.searchBtn')}}</div>
        </div>
        <div class="passengerInfo_header">
            <div>
                <em>{{$t('scen.sc_temID')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.TCNUM' :placeholder="$t('pub.pleaseImport')"></el-input>
            </div>
            <div>
                <em>{{$t('fnc.ddbianhao')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.OrderId' @keyup.native="checkInteger(msg,'OrderId')"  :placeholder="$t('pub.pleaseImport')"></el-input>
            </div>
            <div>
                <em>{{$t('system.query_name')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.Name' :placeholder="$t('pub.pleaseImport')"></el-input>
            </div>
            <div>
                <em>{{$t('system.table_sex')}}</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="$t('pub.man')" value="1"></el-option>
                    <el-option :label="$t('pub.woman')" value="2"></el-option>
                </el-select>
            </div>
            <div>
                <em>{{$t('objFill.shengfenzheng')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.IdCard' :placeholder="$t('pub.pleaseImport')"></el-input>
            </div>
            <div>
                <em>{{$t('system.table_Passport')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.PassportNo' :placeholder="$t('pub.pleaseImport')"></el-input>
            </div>
            <div>
                <em>
                    <el-popover width="405" trigger="click">
                        <div class="passengerInfo_layer_header">
                            <p>{{$t('objFill.v101.Rest.lvkexxgjicx')}}</p>
                        </div>
                        <div class="passengerInfo_header">
                            <div>
                                <em>{{$t('scen.sc_ftTime')}}</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>{{$t('fnc.bmriqi')}}</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>{{$t('admin.admin_BirthDate')}}</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>{{$t('objFill.v101.Rest.shifoumianq')}}</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="$t('pub.yes')" value="1"></el-option>
                                    <el-option :label="$t('pub.no')" value="2"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <em>{{$t('objFill.chanpinglx')}}</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="$t('active.cl_qianzheng')" value="1"></el-option>
                                    <el-option :label="$t('objFill.gengtuan')" value="2"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <em>{{$t('visaT.sale')}}</em><el-input class="passengerInfo_header_input1" v-model='msg.CreateBy' :placeholder="$t('pub.pleaseImport')"></el-input>
                            </div>
                        </div>
                        <div class="passengerInfo_layer_btn" @click="checkBtn()">{{$t('pub.searchBtn')}}</div>
					    <span slot="reference" style="cursor: pointer;">{{$t('visa.v_gjchaxun')}}<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%">{{$t('scen.sc_temID')}}</th>
                        <th width="7%">{{$t('fnc.ddbianhao')}}</th>
                        <th width="7%">{{$t('advmanager.v_type')}}</th>
                        <th width="7%">{{$t('system.query_name')}}</th>
                        <th width="7%">{{$t('system.table_sex')}}</th>
                        <th width="7%">{{$t('admin.admin_BirthPlace')}}</th>
                        <th width="7%">{{$t('admin.admin_BirthDate')}}</th>
                        <th width="7%">{{$t('system.table_IDcard')}}</th>
                        <th width="7%">{{$t('system.table_Passport')}}</th>
                        <th width="6%">{{$t('admin.admin_IssuePlace')}}</th>
                        <th width="6%">{{$t('admin.admin_IssueDate')}}</th>
                        <th width="6%">{{$t('objFill.v101.Rest.youxiaoriqi')}}</th>
                        <th width="6%">{{$t('objFill.v101.Rest.shifouxuyqianz')}}</th>
                        <th width="7%">{{$t('active.cl_addPp')}}</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?$t('pub.yes'):''}}</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.$t('tips.jsrqbndyksriqi'));
                        this.msg.TCEndDate = "";
                    }
                } else if (type === "OrderDate") {
                    if (this.msg.EnterOrderSDate > this.msg.EnterOrderEDate && this.msg.EnterOrderEDate !== "") {
                        this.$message.error(this.$t('tips.jsrqbndyksriqi'));
                        this.msg.EnterOrderEDate = "";
                    }
                } else if (type === "BirthDate") {
                    if (this.msg.BirthdayStart > this.msg.BirthdayEnd && this.msg.BirthdayEnd !== "") {
                        this.$message.error(this.$t('tips.jsrqbndyksriqi'));
                        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>
