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

  .flex {
    display: flex;
  }

  .w-25 {
    width: 25%;
  }

  .w-50 {
    width: 50%
  }

  .p20 {
    padding: 20px;
  }

  .TC_companyList span,
  .TC_OtherCompany span {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid #d1d1d1;
    margin: 5px 10px 0 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .TC_companyList span:first-child {
    margin-right: 20px;
  }

  .TC_companyList {
    padding-top: 15px;
    margin-left: 32px;
  }

  .TC_checked {
    border: 1px solid #d95454 !important;
    box-sizing: border-box;
  }

  .TC_OtherCompany {
    margin: 0 0 20px 20px;
  }

  .TC_customerInfo tbody th {
    height: 40px;
    text-align: center;
  }

  .TC_firTable td {
    height: 20px !important;
    text-align: center !important;
  }

  .TC_midTable td {
    text-align: center !important;
  }

  .TC_showUnion {
    float: right;
    color: #2aaef2;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .go_date {
    font-weight: 700;
    font-size: 14px;
  }

  .TC_Content ._pic_upload .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

  .TC_Content ._pic_upload>div {
    float: left;
    width: 138px;
    height: 92px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
  }

  .TC_Content .avatar-uploader-icon {
    height: auto;
  }

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

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

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

  .TC_CarNum {
    padding: 5px 10px;
    background: #5151f5;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    border-radius: 5px;
  }

  .comSearchDiv .el-checkbox {
    margin-right: 0;
  }

</style>
<template>
  <div class="TC_Content">
    <div class=" TC-MyList">
      <div class="query-box">
        <ul>
          <li>
            <span>
              <em>{{$t('system.table_ssLine')}}</em>
              <el-select class="w150" v-model="queryMsg.LineId" filterable :placeholder="$t('pub.pleaseSel')"
                @change="resetQuery">
                <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                <el-option v-for="item in queryDataObj.LineList" :label="item.LineName" :value="item.LineID"
                  :key="item.LineID"></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>业务名称</em>
              <el-input maxlength="50" v-model="queryMsg.GTeamName" class="permiss-input w150"
                @keyup.native.enter="resetQuery" :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('scen.sc_ftTime')}}</em>
              <el-date-picker class="w150" type="date" v-model="queryMsg.SelectStartDate"
                :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
              <el-date-picker class="w150" type="date" v-model="queryMsg.SelectEndDate"
                :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
            </span>
          </li>
          <li>
            <button class="hollowFixedBtn" @click="resetQuery">{{$t('pub.searchBtn')}}</button>
          </li>
        </ul>
      </div>
      <div class="TravelTclList" v-loading="queryMsg.loading">
        <ul>
          <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>
          <li v-for="(item,index) in queryDataObj.dataList" :key="index"
            :class="{'TC_hasContent':item.OPInnerRemark==''&&item.OPRemark==''}">
            <div class="TC_remarkContent">
              <div class="el-col w-25">
                <div class="p20">
                  <div><span>韩国包机业务</span></div>
                  <div>流水号<span>1234546</span></div>
                  <div><span>韩国包机业务</span></div>
                  <div><span>韩国包机业务</span></div>
                </div>
              </div>
              <div class="el-col w-25 ">
                <div class="p20">
                  <div><span>航空公司</span></div>
                  <div>航班号<span>1234546</span></div>
                  <div><span>出发日期</span></div>
                  <div><span>起飞日期</span></div>
                </div>
              </div>
              <div class="el-col w-25 ">
                <div class="p20">
                  <div><span>经济舱</span></div>
                  <div>商务舱</div>
                  <div><span>头等舱</span></div>
                </div>
              </div>
              <div class="el-colw-25">
                <div class="p20">
                  <span>操作</span>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"报名情况")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">报名情况
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"财务入账")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">财务入账
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"财务审核")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">财务审核
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"修改")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">修改
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"删除")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">删除
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"包机结算")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">包机结算
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"查看包机团")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">查看包机团
                  </el-button>
                  <el-button @click.native='goUrl("RegistrationList", item.TCID,"添加包机团")' type="primary" size="mini"
                    style="background:#00C6FF; border-color:#00C6FF">添加包机团
                  </el-button>
                </div>
              </div>
            </div>
            <div class="TC_remarkContent">
              <div class="el-col w-50">
                <div class="p20">发起人</div>
              </div>
              <div class="el-col w-50">
                <div class="p20">合作伙伴</div>
              </div>
            </div>
            <div class="TC_remarkContent">
              <div class="p20">备注</div>

            </div>
          </li>
        </ul>
        <div class="noData" v-show="queryMsg.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>
    </div>
  </div>
</template>
<script>
  export default {
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        //查询参数
        queryMsg: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
          //是否有数据
          noData: false,
          currentPage: 1,
          loading: false, //加载层
          GTeamName: "", //业务名称
          SelectStartDate: "", //开始时间
          SelectEndDate: "", //结束时间
        },
        queryDataObj: {
          LineList: [], //线路列表
          AirlineList: [], //航空公司列表
          dataList: [], //数据列表
        },
        //当前登录用户信息
        CurrentUserInfo: {},
        IsModifyTravelControl: 0, //分公司是否有修改团控权限
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.queryMsg.SelectEndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.queryMsg.SelectEndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryMsg.SelectStartDate);
            return startTime.getTime() >= time.getTime();
          }
        },
      };
    },
    components: {

    },
    //监听器
    watch: {
      // 方法1
      '$route'(to, from) { //监听路由是否变化
        location.reload()
      },
    },
    methods: {
      //翻页
      handleCurrentChange(val) {
        this.queryMsg.pageIndex = val;
        this.getTravelTeamList();
      },
      //获取线路列表
      getLineList() {
        this.apipost(
          "line_post_GetList", {
            LineDirection: 2
          },
          res => {
            if (res.data.resultCode == 1) {
              this.queryDataObj.LineList = res.data.data;
            }
          }
        );
      },
      //获取航空公司
      getAirlineList() {
        this.apipost(
          "airline_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.queryDataObj.AirlineList = res.data.data;
            }
          }
        );
      },
      //重新查询
      resetQuery() {
        this.queryMsg.pageIndex = 1;
        this.getTravelTeamList();
      },
      //获取包机列表
      getTravelTeamList() {
        this.queryMsg.loading = true;
        this.apipost(
          "travel_get_GetTravelPrciePageList_V2",
          this.queryMsg,
          res => {
            this.queryMsg.loading = false;
            if (res.data.resultCode == 1) {
              this.queryDataObj.dataList = res.data.data.pageData;
              this.queryMsg.total = res.data.data.count;
            }
          }
        );
      },
    },
    mounted() {
      this.getTravelTeamList();
    },
    created() {
      this.CurrentUserInfo = this.getLocalStorage();
      this.getLineList();
    }
  };
</script>