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

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

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

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

  .page_FinancialOrder {
    padding: 25px 0;
  }

  .page_FinancialOrder>p {
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #E95252;
    font-size: 16px;
    color: #000000;
  }

  ._VorcherInos_img {
    width: 45px;
    height: 45px;
    cursor: pointer;
  }

  ._show_img_box {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    overflow: auto
  }

  .page_FinancialOrder .icon-excel {
    font-size: 30px;
    text-align: center;
    color: #41D2A1;
  }

  .page_FinancialOrder .allMoney {
    text-align: right !important;
    font-size: 16px;
    font-weight: bold;
  }

  .page_FinancialOrder ._color_red {
    color: #e95252;
  }

  .page_FinancialOrder ._color_green {
    color: #2BBB7E;
  }

  .page_FinancialOrder ._bg_color_red {
    background-color: #e95252;
  }

  .page_FinancialOrder ._bg_color_green {
    background-color: #2BBB7E;
  }

  .page_FinancialOrder ._shouzhi {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
  }

  ._jump_page {
    cursor: pointer;
    text-decoration: underline;
  }

  ._jump_page:hover {
    color: #c94052;
  }

</style>
<template>
  <div class="flexOne page_SettlementOrder page_FinancialOrder">
    <p>{{Name}}收入</p>
    <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>{{$route.query.type==1?'实收':'应付'}}金额</th>
          <th>制单人</th>
          <th>凭证</th>
          <th>状态</th>
        </tr>
        <template v-for="(item,index) in SRDataList">
          <tr :key="index" v-if="type&&item.Type==type&&(item.Status==2||(item.Status==1&&item.TradeDate))">
            <td><span class="_jump_page" @click="goUrl('FinancialDocumentsDetail',item.FrID)">{{item.FrID}}</span></td>
            <td>{{item.TradeDate}}</td>
            <td>{{item.Type==1?'收入':'支出'}}</td>
            <td>
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
            </td>
            <td>{{item.TicketNum}}</td>
            <td width="600">
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.Remark}}</span>
            </td>
            <td>{{item.Money}}</td>
            <td>
              <span> {{ item.EmName }} </span><br />
              <span> {{ item.CreateDate }} </span>
            </td>
            <td>
              <template v-for="(son,sIndex) in item.VorcherInos">
                <template v-if="son.Type==1||son.Type==2">
                  <i class="iconfont icon-excel" @click="showUpLoadFile(son)" :key="sIndex"></i>
                </template>
                <template v-if="son.Type==3">
                  <img class="_VorcherInos_img" @click="showImg(item.VorcherInos)" :src="son.Content" alt="" :key="sIndex" />
                </template>
              </template>
            </td>
            <td>{{item.StatusStr}}</td>
          </tr>
          <tr :key="index" v-else>
            <td><span class="_jump_page" @click="goUrl('FinancialDocumentsDetail',item.FrID)">{{item.FrID}}</span></td>
            <td>{{item.TradeDate}}</td>
            <td>{{item.Type==1?'收入':'支出'}}</td>
            <td>
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
            </td>
            <td>{{item.TicketNum}}</td>
            <td width="600">
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.Remark}}</span>
            </td>
            <td>{{item.Money}}</td>
            <td>
              <span> {{ item.EmName }} </span><br />
              <span> {{ item.CreateDate }} </span>
            </td>
            <td>
              <template v-for="(son,sIndex) in item.VorcherInos">
                <template v-if="son.Type==1||son.Type==2">
                  <i class="iconfont icon-excel" @click="showUpLoadFile(son)" :key="sIndex"></i>
                </template>
                <template v-if="son.Type==3">
                  <img :key="sIndex" class="_VorcherInos_img" @click="showImg(item.VorcherInos)" :src="son.Content" alt="" />
                </template>
              </template>
            </td>
            <td>{{item.StatusStr}}</td>
          </tr>
        </template>
        <tr>
          <td>总计</td>
          <td :colspan="9" class="allMoney PingFangSC" :class="Money>0?'_color_red':'_color_green'">{{SRMoney}}</td>
        </tr>
      </table>
    </div>
    <p style="margin-top: 15px;">{{Name}}支出</p>
    <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>{{$route.query.type==1?'实收':'应付'}}金额</th>
        <th>制单人</th>
        <th>凭证</th>
        <th>状态</th>
      </tr>
      <template v-for="(item,index) in ZCDataList">
        <tr :key="index" v-if="type&&item.Type==type&&(item.Status==2||(item.Status==1&&item.TradeDate))">
          <td><span class="_jump_page" @click="goUrl('FinancialDocumentsDetail',item.FrID)">{{item.FrID}}</span></td>
          <td>{{item.TradeDate}}</td>
          <td>{{item.Type==1?'收入':'支出'}}</td>
          <td>
            <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
          </td>
          <td>{{item.TicketNum}}</td>
          <td width="600">
            <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.Remark}}</span>
          </td>
          <td>{{item.Money}}</td>
          <td>
            <span> {{ item.EmName }} </span><br />
            <span> {{ item.CreateDate }} </span>
          </td>
          <td>
            <template v-for="(son,sIndex) in item.VorcherInos">
              <template v-if="son.Type==1||son.Type==2">
                <i class="iconfont icon-excel" @click="showUpLoadFile(son)" :key="sIndex"></i>
              </template>
              <template v-if="son.Type==3">
                <img class="_VorcherInos_img" @click="showImg(item.VorcherInos)" :src="son.Content" alt="" :key="sIndex" />
              </template>
            </template>
          </td>
          <td>{{item.StatusStr}}</td>
        </tr>
        <tr :key="index" v-else>
          <td><span class="_jump_page" @click="goUrl('FinancialDocumentsDetail',item.FrID)">{{item.FrID}}</span></td>
          <td>{{item.TradeDate}}</td>
          <td>{{item.Type==1?'收入':'支出'}}</td>
          <td>
            <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
          </td>
          <td>{{item.TicketNum}}</td>
          <td width="600">
            <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.Remark}}</span>
          </td>
          <td>{{item.Money}}</td>
          <td>
            <span> {{ item.EmName }} </span><br />
            <span> {{ item.CreateDate }} </span>
          </td>
          <td>
            <template v-for="(son,sIndex) in item.VorcherInos">
              <template v-if="son.Type==1||son.Type==2">
                <i class="iconfont icon-excel" @click="showUpLoadFile(son)" :key="sIndex"></i>
              </template>
              <template v-if="son.Type==3">
                <img :key="sIndex" class="_VorcherInos_img" @click="showImg(item.VorcherInos)" :src="son.Content" alt="" />
              </template>
            </template>
          </td>
          <td>{{item.StatusStr}}</td>
        </tr>
      </template>
      <tr>
        <td>总计</td>
        <td :colspan="9" class="allMoney PingFangSC" :class="Money>0?'_color_red':'_color_green'">{{ZCMoney}}</td>
      </tr>
    </table>
    </div>
    <div v-if='picIsShow' class="viewBigPicLayer" @click="picIsShow=false,picObj=[]">
      <el-carousel height="600px" :interval="5000" trigger="click">
        <el-carousel-item v-for="(item,index) in picObj" :key="index">
          <div class="inlineDiv ownScrollbarStyle"><img :src="item" /></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        SRMoney: 0,
        ZCMoney: 0,
        SRDataList: [],
        ZCDataList: [],
        dataList: [],
        loading: true,
        picIsShow: false,
        picObj: [],
        Money: 0,
        Name: '',
        type: null,
      }
    },
    created() {
      if (this.$route.query.type) {
        this.type = this.$route.query.type;
      }
      if (this.$route.query.OrderSource == 4) {
        this.Name = '机票款';
      } else if (this.$route.query.OrderSource == 10) {
        this.Name = '签证款';
      } else if (this.$route.query.OrderSource == 9) {
        this.Name = '国内票务款';
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      goUrl(path, id) {
        this.$router.push({
          path: '/' + path,
          query: {
            id: id,
            blank: 'y',
            tab: id + '单据详情'
          }
        })
      },
      showUpLoadFile(i) { // 预览上传文件
        if (i.Content.substring(i.Content.lastIndexOf('.') + 1, i.Content.length).toUpperCase() == 'PDF') {
          this.previewPDF(i.Content)
        } else {
          window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i.Content)
        }
      },
      showImg(obj) {
        obj.forEach(x => {
          if (x.Type == 3) {
            this.picObj.push(x.Content)
          }
        })
        this.picIsShow = true;
      },
      getList() {
        this.loading = true;
        let msg = {
          OrderResource: this.$route.query.OrderSource,
          SourceID: this.$route.query.SourceID,
        }
        this.apipost('Financial_post_GetTicketFinanceList', msg, r => {
          if (r.data.resultCode == 1) {
            if (this.total > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
            this.SRMoney =  0,
            this.ZCMoney = 0,
            this.SRDataList = [],
            this.ZCDataList = [],
            r.data.data.forEach(item=>{
              if(item.Type==1){
                this.SRDataList.push(item)
              }else{
                this.ZCDataList.push(item)
              }
            })
            let SRMoney = 0;
            this.SRDataList.forEach(x => {
              if ((this.type && this.type == x.Type && (x.Status == 2 || (x.Status == 1 && x.TradeDate))) ||
                this.type == null) {
                  SRMoney = x.Money + SRMoney;
              }
            })
            this.SRMoney = SRMoney
            let ZCMoney = 0;
            this.ZCDataList.forEach(x => {
              if ((this.type && this.type == x.Type && (x.Status == 2 || (x.Status == 1 && x.TradeDate))) ||
                this.type == null) {
                  ZCMoney = x.Money + ZCMoney;
              }
            })
            this.ZCMoney = ZCMoney

            this.dataList = r.data.data;
            let Money = 0;
            this.dataList.forEach(x => {
              if ((this.type && this.type == x.Type && (x.Status == 2 || (x.Status == 1 && x.TradeDate))) ||
                this.type == null) {
                Money = x.Money + Money;
              }
            })
            this.Money = Money;
            this.loading = false;
          } else {
            this.$message.error(r.data.message);
            this.loading = false;
          }
        }, null)
      },
    }
  }

</script>
