<style>
.ElectronicAudit .icon-shenhebohui{
  color:#fff;
}
</style>

<template>
  <div class="flexOne ElectronicAudit">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>合同编号</em>
            <el-input :placeholder="$t('system.ph_in')" v-model="msg.contractNum" @keyup.native.enter="getList" class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>产品名称</em>
            <el-input :placeholder="$t('system.ph_in')" v-model="msg.productName" @keyup.native.enter="getList" class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>订单号</em>
            <el-input :placeholder="$t('system.ph_in')" v-model="msg.orderID" @keyup.native.enter="getList" class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>团号</em>
            <el-input :placeholder="$t('system.ph_in')" v-model="msg.tcid" @keyup.native.enter="getList" class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>状态</em>
            <el-select v-model='msg.auditContract' filterable :placeholder="$t('pub.pleaseSel')">
                <el-option label='不限' value=''></el-option>
                <el-option label='驳回' :value='3'></el-option>
                <el-option label='待审核' :value='1'></el-option>
                <el-option label='审核通过' :value='2'></el-option>
            </el-select>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>日期</em>
            <el-date-picker v-model='msg.startDate' class='w135' value-format="yyyy-MM-dd" type="date"
              :picker-options="pickerBeginDateBefore"></el-date-picker>
            -
            <el-date-picker v-model='msg.returnDate' class='w135' value-format="yyyy-MM-dd" type="date"
              :picker-options="pickerBeginDateAfter"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="getList()" />
        </li>
      </ul>
    </div>
    <div class="commonContent" v-loading="loading">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>合同编号</th>
          <th>订单号</th>
          <th>团号</th>
          <th>产品名称</th>
          <th>出发日期</th>
          <th>返回日期</th>
          <th>状态</th>
          <th width="200">操作</th>
        </tr>
        <tr v-for="item in dataList">
          <td>{{item.contractNum}}</td>
          <td>{{item.orderId}}</td>
          <td>{{item.tcid}}</td>
          <td>{{item.productName}}</td>
          <td>
            <template v-if="item.startDate!=null">
              {{getDate(item.startDate)}}
            </template>
          </td>
          <td>
            <template v-if="item.returnDate!=null">
              {{getDate(item.returnDate)}}
            </template>
          </td>
          <td>
            <span v-if="item.auditContract==3" style="color:red;">已驳回</span>
            <span v-if="item.auditContract==1" style="color:blue;">待审核</span>
            <span v-if="item.auditContract==2" style="color:green;">审核通过</span>
          </td>
          <td>
            <el-row>
              <el-tooltip class="item" effect="dark" content="审核通过" placement="top-start">
                <el-button type="primary" icon="iconfont icon-shenpi" @click="AuditElec(item,2)" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="驳回" placement="top-start">
                <el-button type="danger" v-if="item.auditContract!=3" icon="iconfont icon-shenhebohui" @click="AuditElec(item,3)" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                <el-button type="danger" icon="iconfont icon-chakan" @click="goToDetail(item)" circle></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="dataList.length<1">
        <i class="iconfont icon-kong" style="font-size:100px;"></i>
        <p>{{$t("active.ld_noData")}}</p>
      </div>
    </div>
     </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      msg: {
        contractNum:'',
        productName:'',
        orderID:'',
        tcid:'',
        startDate:'',
        returnDate:'',
        auditContract:''
      },
      dataList:[],
      loading:false,
      pickerBeginDateBefore: {
        disabledDate: time => {
          if (this.msg.returnDate == null) {
            return false;
          } else {
            let endTime = new Date(this.msg.returnDate)
            return endTime.getTime() < time.getTime()
          }
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
          let startTime = new Date(this.msg.startDate)
          return startTime.getTime() >= time.getTime()
        }
      }
    };
  },
  methods: {
    dateChange(val){
      if(val){
        this.msg.startDate=val[0];
        this.msg.returnDate=val[1];
      }
    },
    //跳转至详情
    goToDetail(item){
        this.$router.push({
            name: 'TravelContractDetail',
            query: {
                TCID: item.tcid,
                guestId:item.guestId,
                orderID: item.orderId,
                blank: "y",
            }
        });
    },
    getList() {
      this.loading=true;
      this.apiJavaPost("/api/contract/auditContract",this.msg,res => {
          this.loading=false;
          if (res.data.resultCode === 1) {
              this.dataList = res.data.data;
          } else {
              this.Error(res.data.message);
          }
      },null);
    },
    //审核通过或者驳回
    AuditElec(item,type){
        item.auditContract=type;
        this.apiJavaPost("/api/contract/dosaveOrUpdate",item,res => {
          if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
          } else {
              this.Error(res.data.message);
          }
      },null);
    },
    getDate(date) {
        return moment(date).format("YYYY-MM-DD");
    }
  },
  mounted() {
    this.getList();
  }
};
</script>