<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,index) in tableList" :key="index">
            <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>