<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%;
  }

  .page_SettlementOrder p._flex_ {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

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

  ._jump_page:hover {
    color: #c94052;
  }

</style>
<template>
  <div class="flexOne page_SettlementOrder page_FinancialOrder">
    <p class="_flex_"><span>{{Name}}</span><button type="button" class="normalBtn" @click="downMuban()">{{$t('visa.v_daochu')}}</button></p>
    <div class="_content">
      <table class="_content_tab singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
        v-loading='loading'>
        <tr>
          <th>{{$t('objFill.caiwufanhao')}}</th>
          <th>{{$t('fnc.djleixing')}}</th>
          <th>{{$t('fnc.feiyongleixing')}}</th>
          <th>{{$t('fnc.jiaoyiriqi')}}</th>
          <th>{{$route.query.type==1?$t('fnc.shishou'):$t('fnc.yingfu')}}{{$t('fnc.jine')}}</th>
          <th>{{$t('fnc.zhidanren')}}</th>
          <th>{{$t('ground.pingzheng')}}</th>
          <th>{{$t('hotel.hotel_status')}}</th>
        </tr>
        <template v-for="(item,index) in dataList">
          <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.Type==1?$t('restaurant.res_income'):$t('restaurant.res_outcome')}}</td>
            <td>
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
            </td>
            <td>{{item.TradeDate}}</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 v-else :key="index">
            <td><span class="_jump_page" @click="goUrl('FinancialDocumentsDetail',item.FrID)">{{item.FrID}}</span></td>
            <td>{{item.Type==1?$t('restaurant.res_income'):$t('restaurant.res_outcome')}}</td>
            <td>
              <span v-for="(son,sIndex) in item.DetailList" :key="sIndex">{{son.CostTypeName}}</span>
            </td>
            <td>{{item.TradeDate}}</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>
        </template>
        <tr>
          <td>{{$t('ground.zongji')}}</td>
          <td :colspan="9" class="allMoney PingFangSC" :class="Money>0?'_color_red':'_color_green'">{{Money}}</td>
        </tr>
      </table>
      <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>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        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 = this.$t('objFill.jipiaokuan');
      } else if (this.$route.query.OrderSource == 10) {
        this.Name = this.$t('objFill.v101.DomesticModule.qianzhengk');
      } else if (this.$route.query.OrderSource == 9) {
        this.Name = this.$t('fnc.gnjpqishu') + '：' + this.$route.query.term;
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      goUrl(path, id) {
        this.$router.push({
          path: '/' + path,
          query: {
            id: id,
            blank: 'y',
            tab: id + '单据详情'
          }
        })
      },
      downMuban() {
        let msg = {
          OrderResource: this.$route.query.OrderSource,
          SourceID: this.$route.query.SourceID,
          Type: this.$route.query.type
        }
        this.GetLocalFile("Financial_post_OutToExcelDomesticTicketFinanceList", msg, this.$t('tips.qishu') + this.$route.query.term +
          ".xls");
      },
      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,
          Type: this.$route.query.type,
          Term: this.$route.query.term,
        }
        this.apipost('Financial_post_GetDomesticTicketFinanceList', 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;
            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>