<style>
  @import url('../../assets/css/domestic/SettlementOrder.css');

  .page_SettlementOrder td._hover span {
    border-bottom: 1px solid #333;
    cursor: pointer;
  }

  .page_SettlementOrder td._hover._color_red span {
    border-bottom: 1px solid #E95252;
    cursor: pointer;
  }

  .page_SettlementOrder td._hover:hover span {
    border-bottom: 1px dotted #333;
  }

  .sett_popover {
    max-height: 300px;
    overflow: auto;
  }

</style>
<template>
  <div class="flexOne page_SettlementOrder">
    <div class='query-box'>
      <ul>
        <li>
          <span>
            <em>期数日期</em>
            <el-date-picker class="h34" v-model="transactionDate" @change="timeAdd()" type="daterange"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>机票类别</em>
            <el-select filterable v-model='msg.IsInter'>
              <el-option label='全部' value='-1'></el-option>
              <el-option label='国内机票' value='0'></el-option>
              <el-option label='国际机票' value='1'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>状态</em>
            <el-select filterable v-model='msg.status'>
              <el-option label='全部' value='-1'></el-option>
              <el-option label='已完成' value='1'></el-option>
              <el-option label='未完成' value='0'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
          <button class="normalBtn" @click="method5()">导出</button>
        </li>
      </ul>
    </div>
    <div class="_content">
      <table class="_content_tab singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
        v-loading='loading'>
        <tr>
          <th>机票类别</th>
          <th>期数</th>
          <th>应收金额</th>
          <th>成本</th>
          <th>预期利润</th>
          <th>实收</th>
          <th>实付</th>
          <th>待收金额</th>
          <th>实际利润</th>
          <th>操作人</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>{{item.IsInter==0?"国内机票":"国际机票"}}</td>
          <td>{{item.Term}}</td>
          <td>¥{{item.Money}}</td>
          <td>¥{{item.Cost}}</td>
          <td>¥{{item.Profit}}</td>
          <td :class="item.Money===item.InCome?'':'_color_red'"
            @click="jumpPage('FinancialOrderNew',item.ID,item.Term,1)" class="_hover">¥
            <span>{{item.InCome}}</span>
          </td>
          <td :class="item.Cost===item.PayMoney?'':'_color_red'"
            @click="jumpPage('FinancialOrderNew',item.ID,item.Term,2)" class="_hover">
            ¥
            <span>{{item.PayMoney}}</span>
          </td>
          <td :class="Math.abs(item.Money-item.InCome)>0?'_color_red':''">
            <span v-if="item.Money > item.InCome">{{(item.Money- item.InCome).toFixed(2)}}</span>
            <span v-else>0</span>
          </td> 
          <td>
            <span v-if="item.Status!=0"
              :class="Math.abs(item.RealProfit)>0?'_color_red':''">¥{{Math.abs(item.RealProfit)}}</span>
            <span v-else>-</span>
          </td>
          <td>{{item.EmName}}<br />{{item.UpdateDate}}</td>
          <td>
            <el-tooltip class="item" effect="dark" content="详情" placement="top">
              <el-button type="danger" class="_bth_bg_gr" @click="goUrl('OrderDetails',item.Term,item.ID)" circle>详
              </el-button>
            </el-tooltip>
            <el-tooltip v-if="item.UpdateBy==emID" class="item" effect="dark" content="收款" placement="top">
              <el-button type="primary" class="_bth_bg_bl" @click="goUrlT(item,1)" circle>收</el-button>
            </el-tooltip>
            <el-tooltip v-if="item.UpdateBy==emID" class="item" effect="dark" content="付款" placement="top">
              <el-button type="danger" class="_bth_bg_bgr" @click="goUrlT(item,2)" circle>付</el-button>
            </el-tooltip>
            <el-tooltip v-if="item.UpdateBy==emID" class="item" effect="dark" content="确认" placement="top">
              <el-button v-if="item.Status==0" type="danger" class="_bth_bg_bl" @click="queren(item)" circle>确
              </el-button>
            </el-tooltip>
            <el-tooltip v-if="item.UpdateBy==emID" class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
              <el-button v-if="item.Status==0" type="danger" class="_bth_bg_br" @click="delperiods(item)" circle>删
              </el-button>
            </el-tooltip>
          </td>
        </tr>
      </table>
    </div>
    <div class="noData" v-show="noData">
      {{$t('system.content_noData')}}
    </div>
    <div>
      <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 {
        msg: {
          Term: '',
          status: '-1',
          PageIndex: 1,
          pageSize: 15,
          sDate: '',
          eDate: '',
          IsInter: '-1',
          ID: 0,
        },
        dataList: [],
        noData: false,
        total: 0,
        emID: 0,
        currentPage: 1,
        loading: true,
        transactionDate: [],
        RB_Branch_Id: '',
        Details: [],
      }
    },
    created() {
      if (this.$route.query.Term) {
        this.transactionDate[0] = this.$route.query.Term;
        this.transactionDate[1] = this.$route.query.Term;
      }
    },
    mounted() {
      this.getList();
      let userInfo = this.getLocalStorage();
      this.emID = userInfo.EmployeeId;
      this.RB_Branch_Id = userInfo.RB_Branch_id;
      this.msg.ID = this.$route.query.id;
    },
    methods: {
      jumpPage(path, id, term, type) {
        this.$router.push({
          name: path,
          query: {
            SourceID: id,
            OrderSource: 9,
            type: type,
            blank: 'y',
            term: term
          }
        })
      },
      queren(obj) {
        this.$confirm('是否已完成' + '“' + obj.Term + '”' + '期？确认后不可撤回！', this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('Domestic_Ticket_post_Confirm', {
            ID: obj.ID
          }, r => {
            if (r.data.resultCode == 1) {
              let data = r.data.data;
              this.$message.success(r.data.message);
              this.getList();
            }
          }, null);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('OrderList.orderStatus.cancel'),
          });
        });
      },
      delperiods(obj) {
        this.$confirm('是否删除' + '“' + obj.Term + '”' + '期？删除后不可恢复！', this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('DomesticTicket_post_DelBillInfo', {
            BillId: obj.ID
          }, r => {
            if (r.data.resultCode == 1) {
              let data = r.data.data;
              this.$message.success(r.data.message);
              this.getList();
            }
          }, null);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('OrderList.orderStatus.cancel'),
          });
        });
      },
      getDetails(id) {
        this.Details = [];
        this.apipost('Financial_post_GetOrderFinanceList', {
          OrderId: 0,
          OrderResource: 9,
          SourceID: id
        }, r => {
          if (r.data.resultCode == 1) {
            let data = r.data.data;
            this.Details = data;
          }
        }, null);
      },
      timeAdd() { // 日期格式      
        if (!this.transactionDate) {
          this.msg.sDate = '';
          this.msg.eDate = '';
          return
        }
        this.msg.sDate = this.transactionDate[0];
        this.msg.eDate = this.transactionDate[1];
      },
      goUrlT(obj, t) {
        let orderObj = {
          OrderID: 0,
          OrderSource: 9,
          Obj: {},
          SourceID: obj.ID,
          TCIDList: []
        }
        this.$router.push({
          name: 'ChoiceAddFinancialDocuments',
          query: {
            'Type': t,
            'path': 'TicketingModule',
            'Cmd': 'Domestic_Ticket_post_UpdateFrID',
            'blank': 'y',
            'orderObj': JSON.stringify(orderObj)
          }
        });
      },
      goUrl(path, Term, id) {
        this.$router.push({
          name: path,
          query: {
            'Term': Term,
            'ID': id,
            blank: 'y'
          }
        })
      },
      getList() {
        this.loading = true;
        this.apipost('Domestic_Ticket_post_GetBillPageList', this.msg, r => {
          if (r.data.resultCode == 1) {
            this.total = r.data.data.count;
            if (this.total > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
            this.dataList = r.data.data.pageData
            this.loading = false;
          } else {
            this.$message.error(r.data.message);
            this.loading = false;
          }
        }, null)
      },
      method5: function () {
        this.GetLocalFile("DomesticTicket_post_DownBill", {
          'Term': this.msg.Term,
          'Status': this.msg.Status,
          'sDate': this.msg.sDate,
          'eDate': this.msg.eDate,
          'emID': this.emID,
          'IsInter': this.msg.IsInter
        }, "历史账单.xls");
      },
      resetPageIndex() { //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      handleCurrentChange(val) { //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
    }
  }
</script>