<style>
  @import "../css/cssReset.css";

  .page_iisMg ._nav {
    margin: 20px 0 0 0;
    background-color: #f5f5f5;
  }
  .page_iisMg ._nav li {
    float: left;
    font-size: 14px;
    color: #666666;
    padding: 15px 20px;
    cursor: pointer;
    position: relative;
    background-color: #f1f1f1;
    margin-right: 5px;
  }
  .page_iisMg ._nav li._active {
    background-color: #ffffff;
    color: #333333;
  }
  .page_iisMg ._nav li._active::after {
    content: "";
    width: 20px;
    height: 3px;
    background-color: #e95252;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 38%;
  }
  .page_iisMg .query-box {
    padding-bottom: 0;
  }
  .page_iisMg .iis_info_box {
    padding-top: 15px;
  }
  .page_iisMg .el-date-editor .el-range-separator {
    width: 9% !important;
  }
  .page_iisMg td span.status_Application{
    color: #409EFF;
  }
  .page_iisMg td span.status_Cancle{
    color: #909399;
  }
  .page_iisMg td span.status_Passed{
    color: #67C23A;
  }
  .page_iisMg td span.status_Rejected{
    color: #F56C6C;
  }
  .page_iisMg td span.status_owe{
    color: #E6A23C;
  }
  .page_iisMg td span.status_Recover{
    color: #67C23A;
  }
  .page_iisMg .cursorpointer{
    text-decoration: underline;
  }
  .page_iisMg ._icon_btn i{
    width: 30px;
    height: 30px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }
  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul{background-color: #F16C3C;}
  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul:hover{background-color: #e87c54}
  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul:active{background-color: #f76630}
  .page_iisMg ._icon_btn i.icon-quxiao1{background-color: #E95252;}
  .page_iisMg ._icon_btn i.icon-quxiao1:hover{background-color: #ea6d6d}
  .page_iisMg ._icon_btn i.icon-quxiao1:active{background-color:#e42d2d}
  .page_iisMg ._icon_btn i.icon-sousuo{background-color: #47BF8C;}
  .page_iisMg ._icon_btn i.icon-sousuo:hover{background-color: #66bb97}
  .page_iisMg ._icon_btn i.icon-sousuo:active{background-color: #35ab79}
  ._zhuihui{
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    color: white;
    background-color: #e42d2d;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin-right: 10px
  }
</style>
<template>
  <div class="page_iisMg page-body">
    <ul class="_nav clearfix">
      <li :class="active==1?'_active':''" @click="active=1,msg.InvoiceApplyState=0,getPageList()">全部发票</li>
      <li :class="active==2?'_active':''" @click="active=2,msg.InvoiceApplyState=3,getPageList()">已开发票</li>
      <li :class="active==3?'_active':''" @click="active=3,msg.InvoiceApplyState=5,getPageList()">欠票发票</li>
    </ul>
    <div class="query-box">
      <el-form class="iis_info_box clearfix" label-width="110px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item label="订单号">
              <el-input placeholder v-model="msg.OrderId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35" v-if="active !== 3">
            <el-form-item label="单据状态">
              <el-select v-model="msg.InvoiceApplyState" filterable>
                <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option :value="1" label="申请中"></el-option>
                <el-option :value="2" label="取消"></el-option>
                <el-option :value="3" label="通过"></el-option>
                <el-option :value="4" label="拒绝"></el-option>
                <el-option :value="5" label="欠票"></el-option>
                <el-option :value="6" label="发票追回"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item label="校区">
              <el-select v-model="msg.RB_Branch_Id" filterable >
                <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option v-for='item in CompanyList' :label='item.SName' :value='item.SId' :key='item.SId'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35" style="display:none;">
            <el-form-item label="发票类型">
              <el-select v-model="msg.InvoiceApplyType" filterable >
                <el-option :value="1" label="跟团游"></el-option>
                <el-option :value="2" label="签证"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :gutter="35">
            <el-form-item label="申请日期">
              <el-date-picker
                class="h34"
                @change="timeAdd"
                v-model="productionDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                :range-separator="$t('restaurant.res_To')"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item >
                <!-- <button
             class="hollowFixedBtn"
             @click="resetPageIndex(),getPageList()"
             >{{$t('pub.searchBtn')}}</button> -->
             <q-btn color="primary" size="11px" :label="$t('pub.searchBtn')" @click="resetPageIndex(),getPageList()" style="marginRight:10px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
        
          <!-- <button
            class="normalBtn"
            @click="goUrlAdd('invoicesManagerAdd')"
          >{{$t('pub.addBtn')}}</button> -->
      
    </div>
    <table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0">
      <tr>
        <th width="180">团号</th>
        <th>订单号</th>
        <th>销售</th>
        <th>客户</th>
        <th>开票金额</th>
        <th>差价</th>
        <th>申请日期</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <template v-for="(item, index) in dataList" v-loading="loading">
        <tr>
          <td class="cursorpointer" @click="goUrlT('productQuery', item.TCNUM, '产品查询')" :rowspan="item.InvoiceApplyList.length">{{item.TCNUM}}({{item.TCID}})</td>
          <td class="cursorpointer" :rowspan="item.InvoiceApplyList.length" @click="goUrlO(item.OrderId)">{{item.OrderId}}</td>
          <td :rowspan="item.InvoiceApplyList.length">{{item.CreateByStr}}</td>
          <td :rowspan="item.InvoiceApplyList.length">{{item.CustomerName}}:{{item.CustomerContact}}</td>
          <td :rowspan="item.InvoiceApplyList.length">{{item.ApplyTotalPrice}}</td>
          <td :rowspan="item.InvoiceApplyList.length">
            <span>{{item.DpreadPrice - item.ApplyTotalPrice}}</span>
          </td>
          <td>{{item.InvoiceApplyList[0].CreateDate.replace('T', ' ')}}</td>
          <td>
            <span v-if="item.InvoiceApplyList[0].InvoiceApplyState === 1" class="status_Application">申请中</span>
            <span v-else-if="item.InvoiceApplyList[0].InvoiceApplyState === 2" class="status_Cancle">已取消</span>
            <span v-else-if="item.InvoiceApplyList[0].InvoiceApplyState === 3" class="status_Passed">已通过</span>
            <span v-else-if="item.InvoiceApplyList[0].InvoiceApplyState === 4" class="status_Rejected">已拒绝</span>
            <span v-else-if="item.InvoiceApplyList[0].InvoiceApplyState === 5" class="status_owe">欠票</span>
            <span v-else-if="item.InvoiceApplyList[0].InvoiceApplyState === 6" class="status_Recover">发票追回</span>
          </td>
          <td class="_icon_btn" style="text-align: left;padding-left: 20px">
            <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')"  placement="top">
              <i class="iconfont icon-sousuo"  @click="goIisDetail(item.InvoiceApplyList[0].ID)"></i>
            </el-tooltip>
            <el-tooltip class="item"  effect="dark" content="追回发票"   placement="top">
              <span v-if="item.ApplyTotalPrice!=0" class="_zhuihui" @click="zhuihui(item.OrderId)">追</span>
            </el-tooltip>
            <el-tooltip class="item"  effect="dark" content="确认追回"   placement="top">
              <!-- v-if="item.InvoiceApplyList[0].InvoiceApplyState === 5"  -->
              <i v-if="item.InvoiceApplyList[0].InvoiceApplyState === 5" class="iconfont icon-ico_commodity_defaul" @click="setStatus(item.InvoiceApplyList[0].ID, 6)"></i>
            </el-tooltip>
          </td>
        </tr>
        <tr v-for="(item2, index2) in item.InvoiceApplyList"  v-if="index2!==0">
          <td>{{item2.CreateDate.replace('T', ' ')}}</td>
          <td>
            <span v-if="item2.InvoiceApplyState === 1" class="status_Application">申请中</span>
            <span v-else-if="item2.InvoiceApplyState === 2" class="status_Cancle">已取消</span>
            <span v-else-if="item2.InvoiceApplyState === 3" class="status_Passed">已通过</span>
            <span v-else-if="item2.InvoiceApplyState === 4" class="status_Rejected">已拒绝</span>
            <span v-else-if="item2.InvoiceApplyState === 5" class="status_owe">欠票</span>
            <span v-else-if="item2.InvoiceApplyState === 6" class="status_Recover">发票追回</span>
          </td>
          <td class="_icon_btn" style="text-align: left;padding-left: 20px">
            <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')"  placement="top">
              <i class="iconfont icon-sousuo"  @click="goIisDetail(item2.ID)"></i>
            </el-tooltip>
            <el-tooltip class="item"  effect="dark" content="追回发票"   placement="top">
              <span v-if="item.ApplyTotalPrice!=0" class="_zhuihui" @click="zhuihui(item.OrderId)">追</span>
            </el-tooltip>
            <el-tooltip class="item"  effect="dark" content="确认追回"   placement="top">
              <!-- v-if="item2.InvoiceApplyState === 5" -->
              <i v-if="item2.InvoiceApplyState === 5" class="iconfont icon-ico_commodity_defaul" @click="setStatus(item2.ID, 6)"></i>
            </el-tooltip>
          </td>
        </tr>
      </template>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1"><i class="iconfont icon-kong"></i> <p>没有找到你需要的数据</p></div>
    <div v-if="dataList.length>0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :page-size='msg.pageSize'
        :total='total'>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    getSchoolPage
  } from '../../../api/school/index'
  export default {
    data() {
      return {
        active: 1,
        RB_Group_Id:'',
        CompanyList:[],
        msg: {
          TCID: 0,
          TCNUM: '',
          OrderId: 0,
          ApplyMoney: 0,
          AactualMoney: 0,
          CompanyName: '',
          InvoiceApplyState: 0,
          DutyParagraph:'',
          sDate: '',
          eDate: '',
          pageIndex: 1,
          pageSize: 10,
          InvoiceApplyType: 3,
          RB_Branch_Id:-1
        },
        productionDate: [],
        dataList: [],
        loading: false,
        currentPage: 0,
        total:0,
        schoolMsg:{
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          SName: "",
          Status: '-1'
        }
      };
    },
    methods: {
      zhuihui: function (OrderId) {
        this.$confirm('是否设置发票状态为追回？', this.$t('tips.tips'), {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('InvoiceApply_get_BatchUpdateInvoiceApply', {OrderId: OrderId}, res=>{
            if (res.data.resultCode == 1) {
              this.getPageList()
            }
          }, null)
        }).catch(() => {
        });
      },
      goIisDetail: function (id) {
        this.$router.push({
          name: 'invoicesManagerDetail',
          query: { id: id,InvoiceApplyType:this.msg.InvoiceApplyType,blank: "y",}
        });
      },
      setStatus: function (id, type) {
        let msg = {
          RefuseRemarks: '',
          ID: id,
          InvoiceApplyState: type,
        }
        this.$confirm('是否设置发票状态为已追回？', this.$t('tips.tips'), {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('InvoiceApply_get_UpdateInvoiceApply', msg, res=>{
            if (res.data.resultCode == 1) {
              this.getPageList()
            }
          }, null)
        }).catch(() => {
        });
      },
      timeAdd: function () {
        // 日期格式
        if (!this.productionDate) {
          this.msg.sDate = "";
          this.msg.eDate = "";
          return;
        }
        this.msg.sDate = this.productionDate[0];
        this.msg.eDate = this.productionDate[1];
      },
      getPageList: function () {
        this.loading = true
        if (this.msg.OrderId === '') {
          this.msg.OrderId = 0
        }
        this.apipost('InvoiceApply_get_GetGroupByInvoiceApplyList', this.msg, res=>{
          this.loading = false
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData
          }

          if (this.msg.OrderId === 0) {
            this.msg.OrderId = ''
          }
        }, null)
      },
      goUrlAdd: function (path) {
        this.$router.push({
          name: path,
          query: { blank: "y",}
        });
      },
      goUrlT: function (path, obj, title){
        this.$router.push({ name:path,query:{"id":obj,blank:'y',tab:title}})
      },
      goUrlO: function (OrderId) {
        this.$router.push({ name: 'enrollTotal', query: { id: OrderId, blank: 'y', tab: '报名统计'} });
      },
      handleCurrentChange: function (val) { //翻页
        this.msg.pageIndex = val;
        this.getPageList();
      },
      resetPageIndex: function (){  // 重置页码
        this.msg.pageIndex=1;
        this.currentPage = 1;
      },
      getBranchList(){
        getSchoolPage(this.schoolMsg).then(res => {
          this.CompanyList = res.Data.PageData;
        }).catch(() => {

        })
      }
    },
    mounted() {
      this.getPageList();
      this.getBranchList();
    }
  };
</script>
