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

  .ContractManage .query-box .el-button--primary {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button--primary:focus,
  .query-box .el-button--primary:hover {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button {
    border-radius: 16px;
    height: 30px;
    position: relative;
    top: 5px;
  }

  .ContractManage .query-box .el-button i {
    color: #e95252;
  }

  .ContractManage .query-box .el-button span {
    position: relative;
    top: -3px;
  }

  .ContractManage .el-button+.el-button {
    margin-left: 0 !important;
  }

  .newContract .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #f5f5f5;
  }

</style>

<template>
  <div class="flexOne newContract">
    <el-tabs v-model="activeName" type="card" @tab-click="getSwitch">
      <el-tab-pane label="其他合同" name="2"></el-tab-pane>
      <el-tab-pane label="出境游合同" name="1"></el-tab-pane>
    </el-tabs>
    <template v-if="activeName==1">
      <div class="ElectronicAudit">
        <div class="query-box">
          <ul>
            <li>
              <span>
                <em>合同编号</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.ContractNum" @keyup.native.enter="getList"
                  class="w210"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>产品名称</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.ProductName" @keyup.native.enter="getList"
                  class="w210"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>订单号</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.OrderID" @keyup.native.enter="getList"
                  class="w210"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>团号</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.TCID" @keyup.native.enter="getList"
                  class="w210"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>状态</em>
                <el-select v-model='msgOut.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="getListOutTract(),resetOutPage()" />
            </li>
          </ul>
        </div>
        <div class="commonContent" v-loading="loadingOut">
          <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>是否盖章</th>
              <th width="200">操作</th>
            </tr>
            <tr v-for="item in dataListOut">
              <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>
                <span v-if="item.IsTravelAgencySignature==0">未盖章</span>
                <span v-if="item.IsTravelAgencySignature==1" 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" v-if="item.IsTravelAgencySignature==0" content="盖章"
                    placement="top-start">
                    <el-button type="success" icon="iconfont icon-gaizhang" circle @click="OutGaiZhang(item.Id)"
                      style="padding:4px;"></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="dataListOut.length<1">
            <i class="iconfont icon-kong" style="font-size:100px;"></i>
            <p>{{$t("active.ld_noData")}}</p>
          </div>
          <el-pagination background @current-change="handleOutChange" :current-page.sync="currentPage2"
            layout="total,prev, pager, next, jumper" :page-size="msgOut.PageSize" :total="total2">
          </el-pagination>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="ContractManage">
        <div class="query-box">
          <ul>
            <li>
              <span><em>合同编号</em>
                <el-input class="w210" v-model="msg.T_ContractNum" placeholder="请输入合同编号" @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>合同类型</em>
                <el-select v-model="msg.CType" :placeholder="$t('pub.pleaseSel')">
                  <el-option label="请选择" :value="0" :key="0"> </el-option>
                  <el-option label="单向委托合同" :value="1" :key="1"> </el-option>
                  <el-option label="境内旅游合同" :value="2" :key="2"> </el-option>
                  <el-option label="一日游合同" :value="3" :key="3"> </el-option>
                </el-select>
              </span>
            </li>
            <li>
              <span><em>甲方名称</em>
                <el-input class="w210" v-model="msg.Tourists_Name" placeholder="请输入客户名称" @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>客户电话</em>
                <el-input class="w210" v-model="msg.Tourists_Tel" placeholder="请输入客户电话" @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>团号</em>
                <el-input class="w210" v-model="msg.C_TCNUM" placeholder="请输入团号" @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>线路名称</em>
                <el-input class="w210" v-model="msg.C_ProductName" placeholder="请输入线路名称" @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>经办人</em>
                <el-input class="w210" v-model="msg.TravelAgency_DealMan" placeholder="请输入经办人"
                  @keyup.enter.native="getList">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>合同状态</em>
                <el-select v-model="msg.Status" :placeholder="$t('pub.pleaseSel')">
                  <el-option label="请选择" :value="-1" :key="-1"> </el-option>
                  <el-option label="待审" :value="1" :key="1"> </el-option>
                  <el-option label="审核通过" :value="2" :key="2"> </el-option>
                  <el-option label="驳回" :value="3" :key="3"> </el-option>
                </el-select>
              </span>
            </li>
            <li>
              <span><em>{{ $t("sm.Date") }}</em>
                <el-date-picker v-model="msg.StartDate" class="w135" value-format="yyyy-MM-dd" type="date"
                  :picker-options="pickerBeginDateBefore2"></el-date-picker>
                -
                <el-date-picker v-model="msg.EndDate" class="w135" value-format="yyyy-MM-dd" type="date"
                  :picker-options="pickerBeginDateAfter2"></el-date-picker>
              </span>
            </li>
            <li>
              <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="
                      getList();
                      resetPageIndex();
                    " />
            </li>
          </ul>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
          <tr>
            <th width="50">编号</th>
            <th width="80">合同类型</th>
            <th width="100">合同编号</th>
            <th width="100">甲方名称</th>
            <th width="120">乙方名称</th>
            <th width="100">经办人</th>
            <th width="100">团号</th>
            <th width="150">产品名称</th>
            <th width="100">合同状态</th>
            <th width="100">创建人</th>
            <th width="120">创建时间</th>
            <th width="80">是否盖章</th>
            <th width="130">操作</th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{ item.ID }}
            </td>
            <td>
              <template v-if="item.CType == 2">
                境内旅游合同
              </template>
              <template v-else-if="item.CType == 3">
                一日游合同
              </template>
              <template v-else-if="item.CType == 1">
                单向委托合同
              </template>
            </td>
            <td>{{ item.T_ContractNum }}</td>
            <td>{{ item.Tourists_Name }}</td>
            <td>{{ item.TravelAgency_Name }}</td>
            <td>{{ item.TravelAgency_DealMan }}</td>
            <td>{{ item.C_TCNUM }}</td>
            <td>{{ item.C_ProductName }}</td>
            <td>
              <span v-if="item.Status==3" style="color:red;">已驳回</span>
              <span v-else-if="item.Status==1" style="color:blue;">待审核</span>
              <span v-else-if="item.Status==2" style="color:green;">审核通过</span>
              <span v-else>{{item.StatusStr}}</span>
            </td>
            <td>{{ item.CreateByName }}</td>
            <td>{{ item.CreateTimeStr }}</td>
            <td>
              <template v-if="item.IsTravelAgencySignature">
                <span v-if="item.IsTravelAgencySignature==0">未盖章</span>
                <span v-if="item.IsTravelAgencySignature==1" style="color:green;">已盖章</span>
              </template>
              <template v-else>
                <span>未盖章</span>
              </template>
            </td>
            <td>
              <el-tooltip class="item" effect="dark" content="审核通过" placement="top-start" v-if="item.Status==1">
                <el-button type="primary" icon="iconfont icon-shenpi" circle @click="SubmitContract(item,2)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="驳回" placement="top-start" v-if="item.Status==1">
                <el-button type="danger" icon="iconfont icon-chehui" circle @click="SubmitContract(item,3)">
                </el-button>
              </el-tooltip>
              <template v-if="item.Status==2">
                <el-tooltip class="item" effect="dark"
                  v-if="item.IsTravelAgencySignature==null|| item.IsTravelAgencySignature==0 " content="盖章"
                  placement="top-start">
                  <el-button type="success" icon="iconfont icon-gaizhang" circle @click="GaiZhang(item.ID)"
                    style="padding:4px;"></el-button>
                </el-tooltip>
              </template>
              <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                <el-button type="success" icon="iconfont icon-chakan" circle @click="ViewContract(item)"
                  style="padding:5px;"></el-button>
              </el-tooltip>
            </td>
          </tr>
        </table>
        <el-pagination background @current-change="handleOutChange" :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        msgOut: {
          ContractNum: '',
          ProductName: '',
          OrderID: '',
          TCID: '',
          StartDate: '',
          ReturnDate: '',
          AuditContract: '',
          PageIndex: 1,
          PageSize: 15
        },
        dataListOut: [],
        loadingOut: 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()
          }
        },
        //切换出境游合同
        activeName: '2',
        //ContractMange参数
        total: 0,
        total2: 0,
        currentPage: 1,
        currentPage2: 1,
        dataList: [],
        loading: false, //页面加载
        msg: {
          T_ContractNum: "", //合同编号
          CType: 0, //合同类型
          Tourists_Name: "", //客户名称
          Tourists_Tel: "", //客户电话
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          Status: -1, //合同状态
          pageIndex: 1,
          pageSize: 15,
          TravelAgency_DealMan: "", //经办人
          C_TCNUM: "", //团号
          C_ProductName: "", //线路名称
          IsAduitPage: 1, //是否是审核页面
          IsQueryAll: 1
        },
        pickerBeginDateBefore2: {
          disabledDate: time => {
            if (this.msg.EndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.EndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter2: {
          disabledDate: time => {
            let startTime = new Date(this.msg.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    methods: {
      //切换
      getSwitch() {
        if (this.active == 1) {
          this.getListOutTract();
        } else {
          this.getList();
        }
      },
      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,
            ID: item.Id,
            blank: "y",
          }
        });
      },
      getListOutTract() {
        this.loadingOut = true;
        this.apipost("travelcontract_post_GetContractPageListService", this.msgOut, res => {
          this.loadingOut = false;
          if (res.data.resultCode === 1) {
            this.dataListOut = res.data.data.pageData;
            this.total2 = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //审核通过或者驳回
      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");
      },
      //提交并盖章
      SubmitContract(item, status) {
        var that = this;
        var message = "审核通过";
        if (status == 3) {
          message = "驳回";
        }
        this.Confirm("是否【" + message + "】此合同?", function () {
          that.apipost(
            "travelcontract_post_UpdateTravelContractStatusService", {
              ID: item.ID,
              Status: status
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      getList() {
        this.loading = true;
        //获取列表数据
        this.apipost(
          "travelcontract_get_GetPageListService",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.dataList.forEach(x => {
                let Url = "";
                if (this.isOnline()) {
                  Url = window.location.hostname + '/#/TravelContractConfirm?ContractId=' + x.ID;
                } else {
                  Url = window.location.hostname + ":8080/" + '#/TravelContractConfirm?ContractId=' + x.ID;
                }
                x.Url = Url;
              })
              this.total = res.data.data.count;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      resetOutPage() {
        this.msgOut.PageIndex = 1;
        this.currentPage2 = 1;
      },

      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      handleOutChange(val) {
        this.msgOut.PageIndex = val;
        this.getListOutTract();
      },
      ViewContract(item) {
        this.$router.push({
          name: "TravelContractView",
          query: {
            id: item.ID,
            blank: "y",
            tab: '预览合同'
          }
        });
      },
      //其他合同盖章
      GaiZhang(ID) {
        let msg = {
          ID: ID,
          Status: 1
        }
        this.apipost("travelcontract_post_UpdateTravelContractSignatureService", msg, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //出境合同盖章
      OutGaiZhang(ID) {
        let msg = {
          ID: ID,
          Status: 1
        }
        this.apipost("travelcontract_post_UpdateContractSignatureService", msg, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getListOutTract();
          } else {
            this.Error(res.data.message);
          }
        });
      },
    },
    mounted() {
      // this.getListOutTract();
      this.getList();
    }
  };

</script>
