<style>
.Ticketlibrary .typeInner {
  font-size: 12px;
  margin-top: 30px;
}
.Ticketlibrary .lineTypeOne {
  background-color: #e95252;
  display: inline-block;
  width: 5px;
  height: 12px;
  border-radius: 3px;
  position: relative;
  top: 1px;
}
.Ticketlibrary .lineTypeTwo {
  background-color: #47bf8c;
  display: inline-block;
  width: 5px;
  height: 12px;
  border-radius: 3px;
  margin-left: 30px;
  position: relative;
  top: 1px;
}
.Ticketlibrary .redType {
  color: #e95252;
}
.Ticketlibrary .greenType {
  color: #47bf8c;
}
.Ticketlibrary .Listinfo {
  width: 100%;
  min-width: 1500px;
  height: 70px;
  background-color: #fff;
  margin: 20px 0;
  border-left: 5px solid #e95252;
  border-top-left-radius: 4px;
  color: #333333;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.Ticketlibrary .leftType {
  float: left;
  width: 100px;
  height: 100%;
  text-align: center;
  border-right: 1px dashed #dcdfe6;
  line-height: 70px;
}
.Ticketlibrary .typeList {
  width: 44px;
  height: 44px;
  background-color: #47bf8c;
  border: 3px solid #39b17e;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
}
.Ticketlibrary .xunList {
  width: 44px;
  height: 44px;
  background-color: #f25f5f;
  border: 3px solid #e95252;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
}
.Ticketlibrary .ticketInfo {
  height: 100%;
  border-right: 1px dashed #dcdfe6;
  width: 600px;
  float: left;
}
.Ticketlibrary .leftInfo {
  float: left;
  width: 100px;
  text-align: right;
  margin: 20px 10px 0 40px;
}
.Ticketlibrary .rightInfo span,
.leftInfo span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}
.Ticketlibrary .centerInfo {
  float: left;
  text-align: center;
  margin-top: 20px;
}
.Ticketlibrary .rightInfo {
  float: left;
  text-align: left;
  margin: 20px 0 0 10px;
}
.Ticketlibrary .ctCode {
  color: #666666;
  font-size: 12px;
}
.Ticketlibrary .lineList {
  width: 66px;
  height: 2px;
  border-bottom: 1px dashed #b7b7b7;
}
.Ticketlibrary .centerInfo i {
  font-size: 12px;
  color: #2aaef2;
}
.Ticketlibrary .dateTime {
  float: left;
  width: 120px;
  height: 100%;
  text-align: center;
  line-height: 70px;
}
.Ticketlibrary .dateTime i {
  color: #e0e0e0;
}
.Ticketlibrary .isacceptTwo,
.isaccept {
  float: left;
  text-align: center;
  width: 120px;
  height: 100%;
  line-height: 70px;
}
.Ticketlibrary .isaccept i {
  color: #4bca81;
}
.Ticketlibrary .isacceptTwo i {
  color: #f25f5f;
}
.Ticketlibrary .positionInfo {
  float: left;
  width: 440px;
  height: 100%;
  border-right: 1px dashed #d1d1d1;
}
.Ticketlibrary .poList {
  width: 200px;
  height: 100%;
  text-align: center;
  line-height: 70px;
  font-size: 12px;
  float: left;
}
.Ticketlibrary .position {
  padding: 3px 8px;
  width: 58px;
  height: 22px;
  background-color: #2aaef2;
  color: #fff;
  border-radius: 11px;
}
.Ticketlibrary .useIN {
  float: left;
  width: 200px;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 70px;
}
.Ticketlibrary .toProcessed {
  float: left;
  width: 150px;
  height: 100%;
  line-height: 70px;
  text-align: center;
  position: relative;
}
.Ticketlibrary .lastDay {
  width: 150px;
  float: left;
  text-align: center;
  line-height: 70px;
}
.Ticketlibrary .classOne {
  border-color: #e95252;
}
.Ticketlibrary .classTwo {
  border-color: #47bf8c;
}
.Ticketlibrary .el-button {
  padding: 0;
  line-height: 30px;
}
.sureRemark {
  color: #fff;
  width: 60px;
  height: 22px;
  background: #e95252;
  margin: 12px 0 0 8px;
  border: 1px solid #e95252;
  cursor: pointer;
  border-radius: 15px;
}
.Ticketlibrary .addCompany {
  width: 400px;
}
.Ticketlibrary .addCompany .el-dialog__body {
  height: 486px;
  overflow: auto;
}
.Ticketlibrary .Listinfo:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.Ticketlibrary .w150 .el-input {
  width: 150px;
}
.Ticketlibrary .orderNum_info {
  width: 230px;
  height: 196px;
  background-color: #fff;
  position: absolute;
  left: -7px;
  z-index: 50;
  top: 60px;
  padding: 20px;
  font-size: 12px;
  box-shadow: 0px 0px 14px 0px #adadad;
  border-radius: 4px;
  line-height: 0;
}
.Ticketlibrary .orderNum_info:after {
  position: absolute;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 0;
  height: 0;
  top: -9px;
  left: 48%;
}
.Ticketlibrary .chuli {
  display: inline-block;
  color: #333333;
  text-align: left;
  width: 100%;
  height: 15px;
}
.Ticketlibrary .beizhuInfo {
  width: 190px;
  height: 110px;
  resize: none;
  background: #ededed;
  border: none;
  padding: 5px;
}
.Ticketlibrary .closeBtn {
  color: #e95252;
  position: absolute;
  right: -18px;
  top: 0;
  display: inline-block;
  z-index: 999;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.Ticketlibrary .closeBtn i {
  font-size: 25px;
}
.Ticketlibrary .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
.Ticketlibrary .TicketMain {
  width: 100%;
  height: 100%;
  /* overflow-x: auto; */
}
.Ticketlibrary .TicketMain::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.Ticketlibrary .TicketMain::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.Ticketlibrary .TicketMain::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.Ticketlibrary .TicketMain table {
  border-collapse: collapse;
  width: 100%;
}
.Ticketlibrary .TicketMain table tr th {
  height: 30px;
  line-height: 30px;
  background: #dcdcdc;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-family: Microsoft YaHei;
}
.TicketMain i {
  color: #bbbbbb;
  margin-right: 5px;
}
.Ticketlibrary .TicketMain table tbody tr {
  height: 70px;
  background: rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(229, 229, 229, 1);
  border-right: 1px solid rgba(229, 229, 229, 1);
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}
.Ticketlibrary .TicketMain table tr td {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding-left: 10px;
  color: rgba(51, 51, 51, 1);
}
.Ticketlibrary .TicketMain .SubName {
  min-width: 52px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  margin-right: 20px;
  display: inline-block;
  background: rgba(42, 174, 242, 1);
  border-radius: 4px;
}
.Ticketlibrary .TicketMain .MainName {
  padding-left: 10px;
}
.Describe {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 130px;
}
.Ticketlibrary .UseTime {
  font-size: 14px;
}
.Ticketlibrary .DealStatus {
  margin-bottom: 5px;
}
.Ticketlibrary .DealStatus i {
  font-size: 14px;
}
.Ticketlibrary .yiqueren {
  color: #1bc594 !important;
}
.Ticketlibrary .daichuli {
  color: #2aaef2 !important;
  font-size: 16px !important;
}
.Ticketlibrary .quxiao {
  color: #e95252 !important;
}
.Ticketlibrary .UpdateUrl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  float: left;
}
.Ticketlibrary .UpdateUrl img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.Ticketlibrary .UpdateName {
  position: relative;
  left: 10px;
  top: 8px;
}
.Ticketlibrary .ticketDan {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #d1d1d1;
  height: 270px;
}
.Ticketlibrary .ticketTitle {
  display: inline-block;
  font-size: 14px;
  margin: 20px 0 20px 40px;
  padding-left: 20px;
  border-left: 3px solid #e95252;
}
.Ticketlibrary .TRSave {
  margin: 10px 0 0 100px;
}
</style>
<template>
  <div class="flexOne Ticketlibrary">
      <div class="query-box">
          <ul>
              <li>
                  <span>  
                      <em>{{$t('salesModule.SaveTime')}}</em>
                      <el-date-picker class="w150"
                              v-model="msg.StartDate"
                              type="date"
                              :picker-options="pickerBeginDateBefore"
                              value-format="yyyy-MM-dd"
                              placeholder="">
                      </el-date-picker>
                      <el-date-picker class="w150"
                              v-model="msg.EndDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              :picker-options="pickerBeginDateAfter"
                              placeholder="">
                      </el-date-picker>
                  </span>
              </li>
              <li>
                  <span>
                      <em>{{$t('Airticket.Air_ProcessState')}}</em>
                      <el-select class="w150" v-model="msg.DealStatus" filterable>
                          <el-option :label="$t('pub.unlimitedSel')"  :value="selectDefaultValue"></el-option>
                          <el-option v-for="item in DealStatusList" 
                              :key="item.Id" 
                              :label="item.Name" 
                              :value="item.Id">
                          </el-option>
                      </el-select>
                  </span>
              </li>
              <li>
                  <button class="hollowFixedBtn" @click="resetPageIndex(),initTableInfo()">{{$t('pub.searchBtn')}}</button>
              </li>
          </ul>
      </div>
      <div v-loading="msg.loading" class="TicketMain">
          <table>
            <tr>
                <th width="200">
                  {{$t('system.query_airName')}}
                </th>
                <th width="80">
                  {{$t('adm.adm_time')}}
                </th>
                <th width="80">
                {{$t('ground.taocanrenshu')}}
                </th>
                <th width="80">
                  {{$t('ground.huojiachengshi')}}
                </th>
                <th width="100">
                  {{$t('ground.xuqiumiaoshu')}}
                </th>
                <th width="100">
                   {{$t('Airticket.Air_ProcessState')}}
                </th>
                <th width="80">
                  {{$t('ground.chuliren')}}
                </th>
                <th width="150">
                  {{$t('system.table_operation')}}
                </th>
            </tr>
            <tbody >
                <tr v-for="item in tableList">
                  <td>
                     <span class="MainName"> {{item.MainName}}</span>
                  </td>
                  <td>
                      <i class="iconfont icon-img-rili"></i>{{item.NeedDateStr}}
                  </td>
                  <td>
                     <span class="SubName" v-if="item.SubName">{{item.SubName}}</span>{{item.UseNum}}人
                  </td>
                  <td>
                     <i class="iconfont icon-img_dz"></i><span v-if="item.CountryName!=''">{{item.CountryName}} / </span>
                     {{item.CityName}}
                  </td>
                  <td>
                      <div class="Describe">{{item.Describe}}</div>
                  </td>
                  <td>
                      <div class="DealStatus" v-if="item.DealStatus==1">
                        <i class="iconfont icon-jinzhi daichuli"></i>{{item.DealStatusStr}}
                      </div>
                      <div class="DealStatus" v-if="item.DealStatus==2">
                        <i class="iconfont icon-yiqueren yiqueren"></i>{{item.DealStatusStr}}
                      </div>
                      <div class="DealStatus" v-if="item.DealStatus==3">
                        <i class="iconfont icon-yiquxiao quxiao"></i>{{item.DealStatusStr}}
                      </div>
                      <i class="iconfont icon-qingjia UseTime"></i>{{$t('ground.haoshi')}}: {{item.UseTimeStr}}
                    
                  </td>
                  <td>
                    <span v-if="item.UpdateBy>0">
                      <div class="UpdateUrl">
                          <img src="../../assets/img/default_head_img.jpg" alt="">
                      </div>
                      <span class="UpdateName">{{item.UpdateName}}</span>
                    </span>
                  </td>
                  <td>
                     <button type="button" class="normalBtn"  @click="dealNeed(item)" v-if="item.DealStatus==1">{{$t('ground.lijichuli')}}</button>
                     <button type="button" class="hollowFixedBtn" @click="dealFeedback(item),isShow=true" v-if="item.DealStatus==1||item.DealStatus==3">{{$t('ground.fankui')}}</button>
                  </td>
                </tr>
              </tbody>
          </table>
      </div>
      <el-pagination 
        background
        @current-change="handleCurrentChange" 
        :current-page.sync="msg.currentPage"
        layout="total,prev, pager, next, jumper"
        :page-size=msg.pageSize 
        :total=msg.total>
      </el-pagination>
      <div class="ticketDan" v-if="isShow">
          <span class="ticketTitle">{{$t('ground.fankui')}}</span>
          <el-form label-width="100px" :model="postData" :rules="rules" ref="postDataForm" >
              <ul class="ticketUl">
                  <li>
                      <el-form-item :label="$t('ground.chulijieguo')" prop="DealStatus">
                          <el-select class="w150" v-model="postData.DealStatus" filterable clearable>
                            <el-option :label="$t('pub.unlimitedSel')"  :value="selectDefaultValue"></el-option>
                            <el-option v-for="item in DealStatusList" 
                                :key="item.Id" 
                                :label="item.Name" 
                                :value="item.Id">
                            </el-option>
                          </el-select>
                      </el-form-item>
                  </li>
                  <li>
                      <el-form-item :label="$t('pub.pubRemark')">
                           <el-input type="textarea" v-model="postData.Remarks"  class="w300"></el-input>
                      </el-form-item>
                  </li>
              </ul>
              <div class="travelBtm">
                  <button type="button" class="normalBtn TRSave" @click="submitForm('postDataForm')">{{$t('pub.saveBtn')}}</button>
                  <button type="button" class="hollowFixedBtn" @click="CancelData(),isShow=false">{{$t('pub.cancelBtn')}}</button>
              </div>
          </el-form>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    var DealStatusValidate = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error(this.$t('ground.qingxuanzcljg')));
      } else {
        callback();
      }
    };
    return {
      //显示反馈
      isShow: false,
      //处理状态
      DealStatusList: [],
      //列表数据
      tableList: [],
      //下拉框默认值
      selectDefaultValue: 0,
      //查询参数
      msg: {
        loading: true,
        total: 0,
        currentPage: 1,
        pageIndex: 1,
        pageSize: 5,
        NeedType: 2, //需求类型
        StartDate: "",
        EndDate: "",
        DealStatus: 0
      },
      //提交数据
      postData: {
        ID: 0, //编号
        DealStatus: 0, //处理状态
        Remarks: "" //备注
      },
      rules: {
        //表单必填验证
        DealStatus: [{ validator: DealStatusValidate, trigger: "change" }]
      },

      pickerBeginDateBefore: {
        disabledDate: time => {
          let endTime = new Date(this.msg.EndDate);
          return endTime.getTime() < time.getTime();
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
          let startTime = new Date(this.msg.StartDate);
          return startTime.getTime() >= time.getTime();
        }
      }
    };
  },
  methods: {
    //初始化列表信息
    initTableInfo() {
      this.msg.loading = true;
      this.apipost(
        "AirticketNeed_get_GetPageList",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data.pageData;

            tempData.forEach(item => {
              if (item.DealStatus == 2) {
                var str = this.$commonUtils.formatMsgTime2(
                  item.CreateTimeStr,
                  item.UpdateTimeStr
                );
                item.UseTimeStr = str.replace("前", "");
              } else {
                var str = this.$commonUtils.formatMsgTime(item.CreateTimeStr);
                item.UseTimeStr = str.replace("前", "");
              }
            });
            this.tableList = tempData;
            this.msg.total = res.data.data.count;
          }
          this.msg.loading = false;
        },
        null
      );
    },
    //分页
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initTableInfo();
    },
    //重新查询
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.msg.currentPage = 1;
    },
    //处理状态
    getDealStatus() {
      this.apipost(
        "AirticketNeed_get_GetDealStatusList",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.DealStatusList = res.data.data;
          }
        },
        null
      );
    },
    //立即处理
    dealNeed(item) {
      //跳转到报价详情
      if (item.SubId > 0) {
        this.$router.push({
          name: "RestaurantPrice",
          query: { MealId: item.SubId, DiningId: item.MainId }
        });
      } else {
        //跳转到产品页面
        this.$router.push({
          name: "RestaurantPackage",
          query: { id: item.MainId }
        });
      }
    },
    //处理反馈
    dealFeedback(item) {
      this.postData.ID = item.ID;
    },
    //取消保存
    CancelData() {
      this.postData.ID = 0;
      this.postData.DealStatus = 0;
      this.postData.Remarks = "";
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.SaveData();
        } else {
          this.isShow = true;
          return false;
        }
      });
    },
    //保存数据
    SaveData() {
      this.apipost(
        "AirticketNeed_post_SetRemark",
        this.postData,
        res => {
          if (res.data.resultCode == 1) {
            this.isShow = false;
            this.initTableInfo();
            this.Success(this.$t('ground.chulichenggong'));
            this.CancelData();
          } else {
            this.isShow = true;
            this.Warning(res.data.message);
          }
        },
        null
      );
    }
  },
  mounted() {
    this.initTableInfo();
    this.getDealStatus();
  }
};
</script>