<style>
  @import "../../assets/css/newTravelManager.css";

  .productQuerySearch {
    width: 100%;
    min-height: auto;
    overflow: hidden;
    padding: 0 0 20px 0;
  }

  .productQuerySearch li {
    float: left;
    font-size: 12px;
    color: #666;
    margin: 20px 0 0px 0;
  }

  .productQuerySearch li>span {
    display: inline-block;
  }

  .productQuerySearch li span>em {
    display: inline-block;
    min-width: 60px;
    text-align: right;
    font-style: normal;
    margin: 0 12px 0 0;
  }

  .productQuerySearch li:last-child {
    position: fixed;
    z-index: 50;
    top: 36px;
    right: 20px;
  }

  .productQuerySearch ul {
    position: relative;
    overflow: hidden;
  }

  .elPopoverLayer {
    padding: 0px 10px;
  }

  .elPopoverLayer p {
    line-height: 34px;
    font-size: 12px;
  }

  .elPopoverLayer p>i {
    font-style: normal;
    border: 1px solid #999;
    padding: 0 3px;
    font-size: 12px;
    margin-right: 10px;
    font-weight: bold;
    color: #333;
  }

  .elPopoverLayer p>span {
    display: inline-block;
    width: 130px;
  }

  .elPopoverLayer p>span>b {
    margin-left: 10px;
    color: #2aaef2;
  }

  .superSearchLayer>p {
    padding: 20px 0;
    font-size: 14px;
    color: #333;
    font-weight: bold;
  }

  .superSearchLayer>div {
    margin-top: 20px;
    color: #666;
    font-size: 12px;
  }

  .superSearchLayer>div>span {
    margin: 0 15px 0 5px;
  }

  .productQuerybottomLayer {
    overflow: auto;
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
    border-top: 3px solid #38425d;
    background-color: #ffffff;
    padding: 10px 10px 0;
    width: 100%;
  }

  .productQuerybottomLayer .el-form-item__label {
    font-size: 12px !important;
  }

  .productQuerybottomLayer>p {
    border-left: 3px solid #e95252;
    text-indent: 15px;
    height: 16px;
    font-family: "PingFangSc-Fine";
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 14px;
    color: #000;
  }

  .productQuerybottomLayer .el-input {
    width: auto !important;
  }

  .productQueryList .disabledBtn {
    background: #999 !important;
    border-color: #999 !important;
  }

  .product_union {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    border-top: 15px solid red;
    border-bottom: 15px solid transparent;
    border-left: 15px solid red;
    border-right: 15px solid transparent;
  }

  .product_union::after {
    content: "联";
    position: absolute;
    top: -14px;
    left: -11px;
    white-space: nowrap;
    color: #ffffff;
    font-size: 12px;
  }

  .product_union1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    border-top: 15px solid red;
    border-bottom: 15px solid transparent;
    border-left: 15px solid red;
    border-right: 15px solid transparent;
  }

  .product_union1::after {
    content: "内";
    position: absolute;
    top: -14px;
    left: -11px;
    white-space: nowrap;
    color: #ffffff;
    font-size: 12px;
  }

  .product_warning {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: 10px solid red;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid red;
  }

  .product_warning::after {
    content: "!";
    position: absolute;
    top: -12px;
    right: -5px;
    white-space: nowrap;
    color: #ffffff;
    font-size: 12px;
  }

  .PQ_detail {
    width: 100%;
    border-collapse: collapse;
  }

  .PQ_detail tr th,
  .v-table-title-cell {
    background: #e6e6e6;
    height: 40px;
    font-size: 14px;
    border-right: 1px solid #e6e6e6;
    color: #333;
  }

  .PQ_detail tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .PQ_detail tr td {
    font-size: 12px;
    border: 1px solid #e5e5e5;
  }

  .PQ_HotelPop {
    overflow: auto;
    max-height: 350px;
  }

  .PQ_HotelPop table td {
    padding: 5px 0;
    text-align: center;
  }

  .PQ_HotelPop table th {
    text-align: center;
  }

  .productQuerybottomLayer .el-upload-list {
    width: 200px;
  }

</style>
<template>
  <div class="flexOne">
    <div class="productQuerySearch" v-if="!TCIDList">
      <ul>
        <li>
          <span><em>{{ $t("scen.sc_cp") }}</em>
            <!--台湾印象只能看自公司的 不能切换 HK 2023-10-26 添加-->
            <el-select class="w150" v-model="msg.BranchId" filterable :disabled="CurrentUserInfo.RB_Branch_id==1220" :placeholder="$t('pub.pleaseSel')">
              <el-option v-for="item in companyList" :label="item.BName" :value="item.Id" :key="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{ $t("advmanager.v_line") }}</em>
            <el-select class="w150" v-model="msg.LineId" filterable :placeholder="$t('pub.pleaseSel')" @change="
                getLineTeamList(msg.LineId), getAimPlaceList(msg.LineId, '')
              ">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="(item,index) in LineList" :label="item.LineName" :value="item.LineID" :key="index">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{ $t("advmanager.v_xilie") }}</em>
            <el-select class="w150" v-model="msg.LineTeamId" filterable :placeholder="$t('pub.pleaseSel')"
              @change="getAimPlaceList('', msg.LineTeamId)">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in LineTeamList" :label="item.LtName" :value="item.LtID" :key="item.LtID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{ $t("system.query_dest") }}</em>
            <el-select class="w150" v-model="msg.AimPlaceId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in AimPlaceList" :label="item.PlaceName" :value="item.PlaceID" :key="item.PlaceID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{ $t("visa.v_tuanhao") }}</em>
            <el-input v-model="msg.TCID" class="w150"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('Operation.Op_TeamName')}}</em>
            <el-input v-model="msg.Title" class="w150" clearable></el-input>
          </span>
        </li>
        <li>
          <span><em>{{ $t("hotel.hotel_StarDate") }}</em>
            <!-- <el-date-picker v-model="msg.StartTime" @change="dataDui()" class="w135" value-format="yyyy-MM-dd"
              type="date"></el-date-picker> -->
            <DateLimit :clearable="false" :StartGroupDate="msg.StartTime" :EndGroupDate="msg.EndTime" @change="(date)=> {msg.StartTime = date,dataDui()}"></DateLimit>
            -
            <el-date-picker v-model="msg.EndTime" @change="dataDui()" class="w135" value-format="yyyy-MM-dd"
              type="date"
              :picker-options="pickerBeginDateAfter"></el-date-picker>
          </span>
        </li>
        <li>
          <span><em>{{ $t("system.table_goCity") }}</em>
            <el-select class="w150" v-model="msg.CityId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in startCityList1" :label="item.startCityName" :value="item.ID" :key="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li style="
            height: 34px;
            line-height: 34px;
            padding: 0 0 0 20px;
            vertical-align: middle;
          ">
          <el-popover width="270" trigger="click">
            <div class="superSearchLayer">
              <p>{{ $t("visa.v_tkgjcx") }}</p>
              <div>
                <span>{{ $t("system.query_airCompanyName") }}</span>
                <el-select v-model="msg.FlightID" filterable :placeholder="$t('system.ph_buxian')" class="w150">
                  <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
                  <el-option v-for="item in airlineList" :key="item.AirLineId" :label="item.AlName"
                    :value="item.AirLineId">
                  </el-option>
                </el-select>
              </div>
              <div>
                <span>{{ $t("visa.v_xcdays") }}</span>
                <el-input class="w150" v-model="msg.DaysTrip" @keyup.native="checkInteger(msg, 'DaysTrip')"></el-input>
              </div>
              <div>
                <span>{{ $t("visa.v_teamnum") }}</span>
                <el-input class="w69" v-model="msg.minGroupSize" @keyup.native="checkInteger(msg, 'minGroupSize')">
                </el-input>
                -
                <el-input class="w69" v-model="msg.maxGroupSize" @keyup.native="checkInteger(msg, 'maxGroupSize')">
                </el-input>
              </div>
              <div>
                <span>{{ $t("leader.leader_registraNum") }}</span>
                <el-input class="w69" v-model="msg.minApplySize" @keyup.native="checkInteger(msg, 'minApplySize')">
                </el-input>
                -
                <el-input class="w69" v-model="msg.maxApplySize" @keyup.native="checkInteger(msg, 'maxApplySize')">
                </el-input>
              </div>
              <div>
                <span>{{ $t("Airticket.Air_salesPlatform") }}</span>
                <el-select filterable multiple v-model="msg.SalePlat" :placeholder="$t('system.ph_buxian')"
                  class="w150 multiple_input">
                  <el-option v-for="item in salePlace" :key="item.Id" :label="item.Name" :value="item.Id">
                  </el-option>
                </el-select>
              </div>
              <div>
                <input type="button" style="width: 230px !important" class="normalBtn" :value="$t('pub.searchBtn')"
                  @click="
                    getList();
                    resetPageIndex();
                  " />
              </div>
            </div>
            <span slot="reference" style="cursor: pointer">{{ $t("visa.v_gjchaxun") }}<i
                class="el-icon-caret-bottom"></i></span>
          </el-popover>
        </li>
        <li style="
            height: 34px;
            line-height: 34px;
            padding: 0 0 0 20px;
            vertical-align: middle;
          ">
          <el-popover width="260" trigger="click">
            <div>
              <div class="TC_queryTitle">
                {{ $t("Operation.Op_TeamWarningSearch") }}
              </div>
              <div class="clearfix">
                <div class="TC_leftSearch">
                  <div>
                    <span style="
                        display: inline-block;
                        margin: 0 5px 0 0;
                        width: 50px;
                        text-align: right;
                      ">{{ $t("leader.leader_registraNum") }}</span>
                    <el-select v-model="msg.WarningQuery" filterable :placeholder="$t('system.ph_buxian')" class="w150">
                      <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
                      <el-option :label="$t('salesModule.Nobaoming')" value="1"></el-option>
                      <el-option :label="$t('salesModule.Less10')" value="2"></el-option>
                      <el-option :label="$t('salesModule.More10')" value="3"></el-option>
                      <el-option :label="$t('salesModule.YWLess5')" value="4"></el-option>
                      <el-option :label="$t('salesModule.YHBRS')" value="5"></el-option>
                    </el-select>
                  </div>
                  <div>
                    <span style="
                        display: inline-block;
                        margin: 0 5px 0 0;
                        width: 50px;
                        text-align: right;
                      ">{{ $t("Operation.Op_daysChoice") }}</span>
                    <el-select v-model="msg.RateOnDay" filterable :placeholder="$t('system.ph_buxian')" class="w150">
                      <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
                      <el-option :label="$t('salesModule.Inner10')" value="1"></el-option>
                      <el-option :label="$t('salesModule.Inner15')" value="2"></el-option>
                      <el-option :label="$t('salesModule.Inner20')" value="3"></el-option>
                      <el-option :label="$t('salesModule.Out20')" value="4"></el-option>
                    </el-select>
                  </div>
                  <div>
                    <span style="
                        display: inline-block;
                        margin: 0 5px 0 0;
                        width: 50px;
                        text-align: right;
                      ">{{ $t("Operation.Op_Attendance") }}</span>
                    <el-select v-model="msg.RateOn" filterable :placeholder="$t('system.ph_buxian')" class="w150">
                      <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
                      <el-option label="100%" value="1"></el-option>
                      <el-option :label="$t('salesModule.Nomore80')" value="2"></el-option>
                      <el-option :label="$t('salesModule.Nomore60')" value="3"></el-option>
                      <el-option :label="$t('salesModule.Nomore40')" value="4"></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <button class="normalBtn TC_SearchBtn" @click="
                  getList();
                  resetPageIndex();
                ">
                {{ $t("pub.searchBtn") }}
              </button>
            </div>
            <span slot="reference" style="cursor: pointer">{{ $t("Operation.Op_warningSearch")
              }}<i class="iconfont icon-xiaotuziCduan_1"></i></span>
          </el-popover>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="
              getList();
              resetPageIndex();
            " />
        </li>
      </ul>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>
    <!-- 产品列表 -->
    <productOrderList :loading="loading" :list="list" @success="reSearchPage" :pagesTitle="pagesTitle"
      :PBranchId="msg.BranchId"></productOrderList>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import productOrderList from "../orderCommon/productOrderList.vue";
  import DateLimit from '../public/DateLimit.vue';
  export default {
    data() {
      return {
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.msg.StartTime);
            return startTime.getTime() >= time.getTime();
          }
        },
        pagesTitle: '跟团游产品',
        //当前登录用户信息
        CurrentUserInfo: {},
        userId: "",
        loading: true,
        currentPage: 1,
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          LineId: "-1",
          LineTeamId: "-1",
          AimPlaceId: "-1",
          TCID: "",
          StartTime: "",
          EndTime: "",
          BranchId: "-1",
          CityId: "-1",
          DaysTrip: "",
          SalePlat: [],
          minGroupSize: "",
          maxGroupSize: "",
          minApplySize: "",
          maxApplySize: "",
          FlightID: "-1",
          TCIDList: "",
          WarningQuery: "-1",
          RateOnDay: "-1",
          RateOn: "-1",
          Title: "", //团名
        },
        list: [],
        LineList: [],
        LineTeamList: [],
        AimPlaceList: [],
        airlineList: [],
        companyList: [],
        salePlace: [],
        startCityList: [],
        startCityList1: [],
        TCIDList: null,
        userInfo: {},
        crmOrderObj: null,
      };
    },
    components: {
      productOrderList,
      DateLimit
    },
    methods: {
      //刷新页面
      reSearchPage() {
        this.getList();
      },
      // 结束日期不能大于开始日期
      dataDui() {
        if (this.msg.StartTime > this.msg.EndTime && this.msg.EndTime !== "") {
          this.$message.error(this.$t('tips.jsrqbndyksriqi'));
          this.msg.EndTime = "";
        }
      },
      getList() {
        this.loading = true;
        this.apipost(
          "TaskManagemnet_get_GetSellProductCenter",
          this.msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.loading = false;
              this.total = res.data.data.count;
              for (let i = 0; i < res.data.data.pageData.length; i++) {
                res.data.data.pageData[i]["wxImage"] = "";
              }
              this.list = res.data.data.pageData;
            } else {
              this.Error(res.data.message);
            }
          },
          (err) => {}
        );
      },
      // 线路
      getLineList() {
        this.apipost("line_post_GetAllList_V2", {
          LineDirection: 0
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList(lineId) {
        this.LineTeamList = [];
        this.apipost(
          "team_post_GetList", {
            lineID: lineId,
            isTOOP: 1,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.msg.LineTeamId = "-1";
              this.LineTeamList = res.data.data;
            }
          }
        );
      },
      //获取目的地列表
      getAimPlaceList(lineId, lineTeamId) {
        let myLineId = lineId === "" ? this.msg.LineId : lineId;
        let myLineTeamId = lineTeamId === "" ? this.msg.LineTeamId : lineTeamId;
        this.AimPlaceList = [];

        this.apipost(
          "team_post_GetListForCascading", {
            LineID: myLineId,
            LtID: myLineTeamId,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.msg.AimPlaceId = "-1";
              this.AimPlaceList = res.data.data;
            }
          }
        );
      },
      // 出发城市、目的地
      getStartList() {
        this.apipost("sellorder_get_GetAllStartCity", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.startCityList = res.data.data;
          } else {}
        });
      },
      getStartList1() {
        this.apipost(
          "city_post_GetList", {
            isDefault: -1,
            priceType: -1,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.startCityList1 = res.data.data;
            } else {}
          }
        );
      },
      // 公司
      getCompanyList() {
        let RB_Group_id = this.CurrentUserInfo.RB_Group_id;
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id,
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.companyList = [{
                Id: "-1",
                BName: this.$t('pub.unlimitedSel'),
              }, ];
              res.data.data.forEach((x) => {
                var obj = {
                  Id: "",
                  BName: "",
                };
                obj.Id = x.Id.toString();
                obj.BName = x.BName;
                this.companyList.push(obj);
              });
            }
          },
          (err) => {}
        );
      },
      getAirlineList() {
        //获取航空公司*
        let msg = {};
        this.apipost(
          "airline_post_GetList",
          msg,
          (res) => {
            this.airlineList = res.data.data;
          },
          (err) => {}
        );
      },

      getSalePlace() {
        this.apipost(
          "travel_get_GetTravelSelectEnum", {},
          (res) => {
            if (res.data.resultCode == 1) {
              this.salePlace = res.data.data.SalePlat;
            }
          },
          (err) => {}
        );
      },

      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      this.CurrentUserInfo = this.userInfo;
      this.userId = this.userInfo.EmployeeId;
      this.msg.BranchId = this.userInfo.RB_Branch_id.toString();
      if (this.$route.query.id) {
        this.msg.BranchId = "-1";
        this.msg.TCID = this.$route.query.id;
      }
      if (this.$route.query.TCIDList) {
        this.msg.TCIDList = this.TCIDList = this.$route.query.TCIDList;
      }
      if (this.msg.StartTime === "") {
        let nowDay = this.FormartDate(new Date());
        this.msg.StartTime = nowDay;
      }
      this.getCompanyList(); //公司
      this.getList(); //产品列表
      this.getLineList(); //线路
      this.getSalePlace(); //销售平台
      this.getAirlineList(); //获取航空公司
      this.getStartList(); //出发城市
      this.getStartList1(); //目的地
    },
  };

</script>
