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

</style>
<template>
  <div>
    <div class="TC_Content 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="getLineTeamList()">
                <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue'></el-option>
                <el-option v-for="item in queryCommonData.LineList" :label='item.LineName' :value='item.LineID'
                  :key='item.LineID'>
                </el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('active.ad_xlmc')}}</em>
              <el-select class='w150' v-model="queryMsg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue'></el-option>
                <el-option v-for="item in queryCommonData.LineTeamList" :label='item.LtName' :value='item.LtID'
                  :key='item.LtID'>
                </el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('visa.v_tuanhao')}}</em>
              <el-input maxlength="50" v-model="queryMsg.TCNUMS" class="permiss-input w150"
                :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('admin.admin_czPerson')}}</em>
              <el-select class='w150' v-model="queryMsg.CreateBy" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue'></el-option>
                <el-option v-for="item in queryCommonData.EmployeeList" :label='item.EmName' :value='item.EmployeeId'
                  :key='item.EmployeeId'>
                </el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('salesModule.keyWords')}}</em>
              <el-input maxlength="50" v-model="queryMsg.KeyWords" class="permiss-input w150"
                :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
          </li>
          <li>
            <button class="hollowFixedBtn" @click="getControlList(),resetPageIndex()">{{$t('pub.searchBtn')}}</button>
          </li>
        </ul>
      </div>
      <div class="TravelTclList" v-loading="queryCommonData.loading"
        :element-loading-text="queryCommonData.loadingText">
        <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 queryCommonData.dataList" :key="index"
            :class="{'TC_hasContent':item.OPInnerRemark==''&&item.OPRemark==''}">
            <div :data-id="item.ID">
              <div class="el-col" style="position:relative;width:200px">
                <div v-if="item.IsWarning===1" class="travel_warning"></div>
                <div>
                  <div class="TCL-TOPTCNUM">{{item.TCNUM}}</div>
                  <div class="d12" style="float:none;margin-top:10px">
                    <p><i class="iconfont icon-biaoti1"></i>{{item.LineName}}</p>
                    <p class="d12p">{{item.LtName}}</p>
                  </div>
                </div>
              </div>
              <div class="el-col" style="width:220px;">
                <div class="d3">
                  <p><i class="iconfont icon-tuandui"></i>{{$t('visa.v_teaminfo')}}</p>
                  <p><em>{{item.DayNum}}{{$t('hotel.hotel_day')}}{{item.NightNum}}{{$t('Operation.Op_night')}}</em></p>
                </div>
              </div>
              <div class="el-col" style="width:220px;">
                <div class="d3">
                  <p><i class="iconfont icon-tuandui"></i>{{$t('Operation.Op_teamInfo')}}</p>
                  <p class="d12p">{{item.TCNUMS}}</p>
                  <p v-if="item.ShareTeamType>=0" style="color:red;">{{$t('objFill.v101.gongxiangxc')}}</p>
                </div>
              </div>
              <div class="el-col" style="width:130px;">
                <div class="d5 TC-oparation" style="padding-top:10px;">
                  <p><i class="iconfont icon-yuangong"></i>{{$t('sm.shejirenyuan')}}</p>
                  <div class="clearfix TC-OpInfo">
                    <div class="TC-leftIMG">
                      <img v-if="item.OPPhoto" :src="item.OPPhoto" alt="">
                      <img v-else src="../../../assets/img/default_head_img.jpg" alt="">
                    </div>
                    <div class="TC-OPName">{{item.CreateUserName}}</div>
                  </div>
                </div>
              </div>
              <div class="el-col">
                <div class="d7">
                  <el-button v-if="item.CreateBy==CurrentUserId"
                    @click="goToOpenTravel('TravelManager',item.ID)" type="primary">{{$t('Operation.Op_tripUpdate')}}
                  </el-button>
                  <el-button @click="copyTravelInfo(item.ID)" type="primary">{{$t('Operation.Op_tripCopy')}}</el-button>
                  <el-button v-if="item.TCNUMS==''&&item.CreateBy==CurrentUserId" @click="delConfig(item.ID)"
                    type="primary">{{$t('system.table_delete')}}</el-button>
                  <el-button @click="goUrlR(item)" type="primary">
                    {{$t('Operation.Op_tripDownLoad')}}</el-button>
                </div>
              </div>
            </div>
            <div class="TC_remarkContent">
              <div class="clearfix">
                <div class="TCL_remarkTitle TCL-redType">{{$t('Operation.Op_TeamName')}}：</div>
                <div class="TCL_Content">{{item.Title}}</div>
              </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 {
    data() {
      return {
        //查询数据列表
        queryCommonData: {
          //线路列表
          LineList: [],
          //系列列表
          LineTeamList: [],
          //下拉框默认值
          SelectDefaultValue: 0,
          //数据列表
          dataList: [],
          loading: false,
          loadingText: "",
          //员工列表
          EmployeeList: [],
        },
        //查询参数
        queryMsg: {
          pageIndex: 1,
          pageSize: 10,
          LineId: 0,
          LineteamId: 0,
          CreateBy: 0,
          TeamType: 1,
          TCNUMS: "",
          KeyWords: "", //关键字
        },
        //当前用户id
        CurrentUserId: 0,
        remarkMsg: {
          TCID: 0,
          OPRemark: "",
          OPInnerRemark: ""
        },
        flightStatus: [{
          Id: 0,
          Name: this.$t('pub.unlimitedSel'),
          Checked: false
        }, {
          Id: 1,
          Name: this.$t('sm.yiPeizhi'),
          Checked: true
        }, {
          Id: 2,
          Name: this.$t('sm.weiPeizhi'),
          Checked: false
        }],
        pickerBeginDateBefore: {
          disabledDate: time => {
            let endTime = new Date(this.queryMsg.EndGroupDate);
            return endTime.getTime() < time.getTime();
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryMsg.StartGroupDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    methods: {
      //翻页
      handleCurrentChange(val) {
        this.queryMsg.pageIndex = val;
        this.getControlList();
      },
      //重新查询
      resetPageIndex() {
        this.queryMsg.pageIndex = 1;
        this.queryMsg.currentPage = 1;
      },
      //删除行程
      delConfig(ID) {
        var that = this;
        this.Confirm(that.$t('sm.schbnhfjscz'), function () {
          let msg = {
            ID: ID,
          };
          that.apipost(
            "travel_post_RemoveConfig",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(that.$t('tips.shanchuchenggong'));
                that.getControlList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //获取线路列表
      getLineList() {
        this.apipost("line_post_GetLineListExt", {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList() {
        this.queryMsg.LineteamId = 0;
        let msg = {
          lineID: this.queryMsg.LineId,
          isTOOP: 1
        };
        this.apipost("team_post_GetList", msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data;
          }
        });
      },
      //新获取列表数据
      getControlList() {
        var msg = JSON.parse(JSON.stringify(this.queryMsg));
        this.queryCommonData.loading = true;
        this.apipost(
          "travel_get_GetTravelV2PageList",
          msg,
          res => {
            this.queryCommonData.loading = false;
            if (res.data.resultCode == 1) {
              this.queryCommonData.dataList = res.data.data.pageData;
              this.queryMsg.total = res.data.data.count;
              this.queryMsg.noData = !this.queryMsg.total > 0;
            }
          },
          err => {}
        );
      },
      //开团或修改
      goToOpenTravel(path, configId) {
        if (configId > 0) {
          this.$store.commit("pageConditionUpdate", this.queryMsg);
          this.$router.push({
            name: path,
            query: {
              configId: configId,
              flag: true,
              openState: 1,
              blank: 'y',
              tab: '团期配置'
            }
          });
        } else {
          this.$router.push({
            name: path
          });
        }
      },
      //行程复制
      copyTravelInfo(configId) {
        var that = this;
        if (configId > 0) {
          that.Confirm(that.$t('sm.shifyfzhi'), function () {
            var msg = {
              targetConfigId: configId
            };
            that.queryCommonData.loading = true;
            that.queryCommonData.loadingText = that.$t('sm.fuzhiing');
            that.apipost(
              "travel_post_CopyTravelConfigInfo",
              msg,
              res => {
                that.queryCommonData.loading = false;
                that.queryCommonData.loadingText = "";
                if (res.data.resultCode == 1) {
                  that.getControlList();
                }
              },
              err => {}
            );
          });
        }
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList() {
        let userInfo = this.getLocalStorage();
        let msg = {
          GroupId: userInfo.RB_Group_id,
          BranchId: "-1",
          DepartmentId: "-1",
          PostId: "-1",
          IsLeave: "0"
        };
        this.apipost(
          "admin_get_EmployeeGetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.EmployeeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //跳转至下载
      goUrlR(item) {
        let routeData = this.$router.resolve({
          name: 'confirmationOrderDownLoadNew',
          query: {
            configId: item.ID,
            cityId: 0,
            tcid: item.TCID,
            orderId: 0,
            vshowL: false,
            vshowM: false,
            vshowTCNUM: true,
          }
        })
        window.open(routeData.href, '_blank')
      }
    },
    mounted() {
      let UserInfo = this.getLocalStorage();
      this.CurrentUserId = UserInfo.EmployeeId;
      this.getEmployeeList();
      this.getLineList();
    },
    created() {
      this.getControlList();
    },
  };

</script>