<style>
.PL_List {
  width: 235px;
  height: 310px;
  border-radius: 4px;
  color: #fff;
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#38ef7d),
    to(#11998e)
  );
  margin: 20px 20px 0 0;
  padding: 20px;
  float:left;
  font-size: 12px;
}
.PL_Name {
  margin: auto;
  border-bottom: 1px solid #038b6a;
  text-align: left;
  min-height: 30px;
  font-size: 14px;
  font-weight: bold;
}
.PL_phoneNum {
  width: 120px;
  height: 20px;
  background-color: #16a082;
  margin: 10px 0;
  font-size: 12px;
  line-height: 20px;
}
.PL_phoneNum i {
  color: #28bf9b;
  margin-left: 10px;
  font-size: 12px;
  transform: scale(0.833333);
}
.PL_comdiv {
  margin-bottom: 10px;
}
.PL_left {
  margin-right: 12px;
  display: inline-block;
  width: 40px;
  text-align: right;
}
.PL_LeftAge {
  float: left;
}
.PL_RightHeader {
  float: right;
  line-height: 30px;
  margin-top: -5px;
}
.PL_hderImg {
  width: 20px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  float: left;
}
.PL_hderImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>
<template>
  <div class='flexOne'>
    <div class='query-box'>
      <ul>
        <li>
          <span>
            <em>订单号</em>
            <el-input class="w210" v-model="QueryMsg.OrderId"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>业务员</em>
            <el-select filterable v-model="QueryMsg.EmployeeId">
              <el-option label='不限' :value="selectDefauleValue"></el-option>
              <el-option v-for="item in EmployeeList"
                  :label='item.EmName'
                  :value='item.EmployeeId'
                  :key='item.EmployeeId'>
              </el-option>

            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>游客名称</em>
            <el-input class="w210" v-model="QueryMsg.QName" @keyup.enter.native="GetList"></el-input>
          </span>
        </li>
        <li><input type="button" class="hollowFixedBtn" value="查询" @click="GetList(),resetPageIndex()" />
        </li>
      </ul>
    </div>
    <div class="clearfix">
      <div class="PL_List" v-for="item in DataList" :key="item.subCode">
        <div class="PL_Name">
          {{item.SurName}}{{item.Name}}/{{item.ESurName}}{{item.EName}}
        </div>
        <div class="PL_phoneNum">
          <i class="iconfont icon-dianhua"></i>
          {{item.MobilePhone}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">护照号</span>{{item.PassportNo}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">签发地</span>{{item.PassportAddress}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">出生地</span>{{item.BirthdayAddress}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">有效期</span>{{item.PassportExpiry}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">身份证</span>{{item.Id}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">房号</span>{{item.HouseNo}}
        </div>
        <div class="PL_comdiv">
          <span class="PL_left">性别</span>{{item.SexStr}}
        </div>
        <div class="PL_comdiv clearfix">
          <div class="PL_LeftAge">
            <span class="PL_left">年龄</span>{{item.Age}}
          </div>
          <div class="PL_RightHeader">
            <div class="PL_hderImg">
              <i class="iconfont icon-rentou"></i>
            </div>
            {{item.SurName}}{{item.Name}}
          </div>
        </div>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="QueryMsg.currentPage"
                   layout="total,prev, pager, next, jumper" :page-size="QueryMsg.pageSize" :total="QueryMsg.TotalCount">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //查询参数
      QueryMsg: {
        PageIndex: 1,
        PageSize: 10,
        TotalCount: 0,
        CurrentPage: 1,
        TCID: 0, //团队编号
        OrderId: 0, //订单编号
        EmployeeId: 0, //业务员
        QName: "" //旅客姓名
      },
      DataList: [],
      EmployeeList:[],
      selectDefauleValue:0,
    };
  },
  methods: {
    GetList() {
      this.apipost("travel_get_OPGetGuestPageList", this.QueryMsg, res => {
        if (res.data.resultCode == 1) {
          this.QueryMsg.TotalCount = res.data.data.count;
          this.DataList = res.data.data.pageData;
          console.log(this.DataList);
        }
      });
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.QueryMsg.pageIndex = val;
      this.GetList();
    },
    resetPageIndex() {
      //查询初始化页码
      this.QueryMsg.pageIndex = 1;
      this.QueryMsg.currentPage = 1;
    },
    //获取员工列表获取账号
    getEmployeeList() {
      let msg = {
        GroupId: "",
        BranchId: "",
        DepartmentId: "",
        PostId: "",
        IsLeave: "0"
      };
      this.apipost(
        "admin_get_EmployeeGetList",
        msg,
        res => {
          this.EmployeeList = res.data.data;
        },
        err => {}
      );
    },

  },
  mounted() {
    this.QueryMsg.TCID = this.$route.query.id;
    this.getEmployeeList();
    this.GetList();
  }
};
</script>
