<style>
.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">
    <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.TCNUM"></el-input>
            </el-form-item>
          </el-col>
          <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.BName' :value='item.Id' :key='item.Id'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <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-row>
      </el-form>
      <ul>
        <li>
          <button
            class="hollowFixedBtn"
            @click="resetPageIndex(),getPageList()"
          >{{$t('pub.searchBtn')}}</button>
          <!-- <button
            class="normalBtn"
            @click="goUrlAdd('invoicesManagerAdd')"
          >{{$t('pub.addBtn')}}</button> -->
        </li>
      </ul>
    </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>
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: 1,
        RB_Branch_Id:-1
      },
      productionDate: [],
      dataList: [],
      loading: false,
      currentPage: 0,
      total:0,
    };
  },
  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(){

      this.RB_Group_Id = this.getLocalStorage().RB_Group_id;
      this.apipost('admin_get_BranchGetList', {RB_Group_Id:this.RB_Group_Id}, res=>{
        if (res.data.resultCode == 1) {
          this.companyList=res.data.data;
        }
      }, null)
    }
  },
  mounted() {
    this.getPageList();
    this.getBranchList();
  }
};
</script>