<style>
.page_iisMgdetail {
  width: 830px;
  background-color: white;
  padding: 10px;
  position: relative;
}
.page_iisMgdetail > p {
  font-size: 18px;
  text-align: center;
  padding-bottom: 15px;
}
.page_iisMgdetail p.iisMgdetail_status {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
}
.page_iisMgdetail .page_iisMgdetail_table {
  width: 100%;
  font-size: 14px;
  text-align: center;
}
.page_iisMgdetail .page_iisMgdetail_table td {
  padding: 10px;
}
.page_iisMgdetail .page_iisMgdetail_table .page_iisMgdetail_bank td._bank_td{
  width: 679px;
}
.iis_save{
  text-align: right;
  padding: 10px 0 0 0;
}
.page_iisMgdetail .page_iisMgdetail_table tr td.font-weight{
  font-weight: 800;
}
.page_iisMgdetail .cursorpointer{
  text-decoration: underline;
}
.page_iisMgdetail .imd_img_box {
  position: absolute;
  right: -400px;
  top: 0;
  width: 400px;
  /* background-color: #eaeaea; */
}
.page_iisMgdetail .imd_img_box .querenhan,.page_iisMgdetail .bg_white{
  background-color: white;
}
.page_iisMgdetail .imd_img_box .querenhan{
  margin-top: 50px;
}
.page_iisMgdetail .imd_img_box .querenhan>p{
  padding: 10px 25px 15px 25px;
  font-size: 14px;
}
.page_iisMgdetail_red {
  color: #FF0000;
}

.page_iisMgdetail_blue {
  color: #0000FF;
}

.page_iisMgdetail_green {
  color: #008000;
}
.page_iisMgdetail_black {
  color: #000000;
}
.page_iisMgdetail ._fujian_zhankai{
  color: white;
  width: 64px;
  height: 0;
  font-size: 12px;
  border-top: 26px solid #E95252;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  left: -18px;
  bottom: -27px;
}
.page_iisMgdetail ._fujian_zhankai>span{
  display: inline-block;
  height: 100%;
  width: 50%;
  position: absolute;
  left: 25px;
  bottom: 15px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.page_iisMgdetail ._fujian_zhankai>span:nth-child(2){
  left: 18px;
  bottom: 3px;
}
.page_iisMgdetail ._fujian_box_tit{
  display: flex;
  justify-content:space-between;
  font-size: 14px;
  color: #333333;
}
.page_iisMgdetail ._fujian_box_tit .iconfont{
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
}
.page_iisMgdetail ._fujian_box_tit .iconfont.icon-bangdingzhagnhuxinxi{
  color: #E95252;
}
.page_iisMgdetail ._fujian_box_tit .iconfont.icon-gengduo{
  transform:rotate(90deg);
  font-size: 12px;
}
.page_iisMgdetail ._addUpload_box_btm .icon-excel{
  text-align: center;
  font-size: 38px;
  color: green;
  line-height: 75px;
}
.page_iisMgdetail ._wenjian{
  padding: 15px;
  width: 91px;
  height: 80px;
  border:1px solid rgba(221,221,221,1);
  float: left;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 10px;
}
.page_iisMgdetail ._wenjian_P{
  font-size: 30px;
  text-align: center;
  color: #41D2A1;
}
.page_iisMgdetail .el-carousel__item{
  align-items: center;
  justify-content: center;
  display: flex;
}
.page_iisMgdetail ._addUpload_tips {
  margin-top: 20px;
  font-size: 12px;
  color: #999999;
}
.page_iisMgdetail ._addUpload_box {
  display: block;
  margin-top: 15px;
}
.page_iisMgdetail ._addUpload_box img {
  width: 100%;
  height: 100%;
}
.page_iisMgdetail ._addUpload_box > div {
  float: left;
  width: 138px;
  height: 92px;
  border: 1px dashed rgba(210, 210, 210, 1);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
}
.page_iisMgdetail ._addUpload_box > div:hover {
  background-color: #f5f5f5;
}
.page_iisMgdetail ._addFile_name {
  padding-left: 15px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page_iisMgdetail ._addUpload_box .icon-guanbi1 {
  font-size: 12px;
  color: white;
  display: inline-block;
  margin-left: 15px;
  position: absolute;
  right: -6px;
  top: -9px;
  background-color: #f56c6c;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
}
.page_iisMgdetail ._addUpload_box .icon-guanbi1:hover {
  font-size: 12px;
  color: #c94052;
}
.page_iisMgdetail ._addUpload_box .icon-excel,
.page_iisMgdetail ._addUpload_box .icon-pdf {
  text-align: center;
  font-size: 38px;
  color: green;
  line-height: 75px;
}
.page_iisMgdetail .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
}
</style>
<template>
  <div class="page_iisMgdetail" v-loading="loading">
    <p>{{$t('ios.fpkjsqdan')}} </p>
    <p class="iisMgdetail_status">
      <span v-if="detail.InvoiceApplyState === 1" class="page_iisMgdetail_green">申请中</span>
      <span v-if="detail.InvoiceApplyState === 2" class="page_iisMgdetail_black">取消</span>
      <span v-if="detail.InvoiceApplyState === 3" class="page_iisMgdetail_green">通过</span>
      <span v-if="detail.InvoiceApplyState === 4" class="groupTourOrder_tickets_red">拒绝</span>
      <span v-if="detail.InvoiceApplyState === 5" class="groupTourOrder_tickets_red">欠票</span>
      <span v-if="detail.InvoiceApplyState === 6" class="page_iisMgdetail_blue">发票追回</span>
    </p>
    <table
      data-v-ca5157c2
      border="1"
      class="page_iisMgdetail_table"
      style="border-collapse: collapse;"
    >
      <tr>
        <td width="130">{{$t('ios.bumen')}}</td>
        <td>{{detail.deptName}}</td>
        <td width="130">{{$t('ios.sqren')}}</td>
        <td>{{detail.CreateBy}}</td>
      </tr>
      <tr>
        <td>{{$t('ios.kjjine')}}</td>
        <td>
          {{detail.ApplyMoney}}
        </td>
        <td>{{$t('ios.dzjine')}}</td>
        <td @click="goSaleFinacial" class="cursorpointer">
          {{orderList.moneyStr}}
        </td>
      </tr>
      <tr>
        <td>应收总额</td>
        <td class="w600  font-weight cursorpointer">
          <span @click="goUrlO(detail.OrderId)">{{detail.PreferPrice}}</span>
        </td>
        <td>待收金额</td>
        <td class="w600  font-weight cursorpointer">
          <span @click="goUrlO(detail.OrderId)">{{detail.DueInMoney}}</span>
        </td>
      </tr>
      <tr class="page_iisMgdetail_bank">
        <td>{{$t('ios.dzyinhang')}}</td>
        <td colspan="3" class="_bank_td">
          {{orderList. AccountNumber}}
        </td>
      </tr>
      <tr>
        <td>{{$t('ios.sqriqi')}}</td>
        <td>
          {{detail.CreateDateStr}}
        </td>
        <td>{{$t('ios.dzriqi')}}</td>
        <td>
          {{orderList.TradeDateStr}}
        </td>
      </tr>
      <tr>
        <td>{{$t('ios.tuanhao')}}</td>
        <td  class="text-align-left font-weight cursorpointer" @click="goUrlT('productQuery', detail.TCNUM, '产品查询')">
          {{detail.TCNUM}}({{detail.TCID}})
        </td>

        <td>{{$t('ios.ddanhao')}}</td>
        <td  class="text-align-left font-weight cursorpointer">
          <span @click="goUrlO(detail.OrderId)">{{detail.OrderId}}</span>
        </td>
      </tr>

      <tr>
        <td>{{$t('ios.cwdanju')}}</td>
        <td colspan="3" class="w600 text-align-left font-weight cursorpointer">
          <template v-for="item in orderList.FrIDs">
            <span @click="goUrlSFD('SalesFinancialDetail', '销售财务单据', detail.OrderId, detail.TCNUM, detail.TCID)">{{item}}</span>
          </template>
          <span v-if="orderList.FrIDs && orderList.FrIDs.length<1">{{$t('ios.zanwu')}}</span>
        </td>
      </tr>
      <tr>
        <td rowspan="6">{{$t('ios.kjneirong')}}</td>
        <td>{{$t('admin.admin_company')}}</td>
        <td colspan="2" class="font-weight">
          {{detail.CompanyName}}
        </td>
      </tr>
      <tr>
        <td>{{$t('ios.shuihao')}}</td>
        <td colspan="2" class="font-weight">
          {{detail.DutyParagraph}}
        </td>
      </tr>
      <tr>
        <td>{{$t('admin.admin_address')}}</td>
        <td colspan="2">
          {{detail.Address}}
        </td>
      </tr>
      <tr>
        <td>{{$t('hotel.table_tel')}}</td>
        <td colspan="2">
          {{detail.CompanyPhone}}
        </td>
      </tr>
      <tr>
        <td>{{$t('ios.khuhang')}}</td>
        <td colspan="2">
          {{detail.OpeningBank}}
        </td>
      </tr>
      <tr>
        <td>{{$t('system.table_acc')}}</td>
        <td colspan="2">
          {{detail.BankNo}}
        </td>
      </tr>
      <tr>
        <td>{{$t('hotel.hotel_remark')}}</td>
        <td>
          {{detail.Remarks}}
        </td>
        <td>预计到账时间</td>
        <td style="width: 190px;">
          {{detail.AccountingDate}}
        </td>
      </tr>
    </table>
    <el-dialog :title="$t('pub.hintMsg')" width="400px" :visible.sync="dialogFormVisible2" center :before-close="closeChangeMachie" >
      <el-form label-width="110px">
        <el-form-item :label="$t('ios.shuihao2')">
          <el-input class="" v-model="msg.InvoiceNo" :placeholder="$t('ios.qsrshuihao')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <button class="hollowFixedBtn" @click="dialogFormVisible2=false">{{$t('pub.cancelBtn')}}</button>
        <button class="normalBtn" type="primary" @click="setStatus(3)">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <div style="padding:20px 0">
      <el-row v-if="detail.InvoiceApplyState === 4">
        拒绝说明：{{detail.RefuseRemarks}}
      </el-row>
      <el-row v-if="detail.InvoiceNo">
        {{$t('ios.shuihao2')}}{{detail.InvoiceNo}}
      </el-row>
    </div>
    <div class="iis_save" v-if="!noDetail && detail.InvoiceApplyState===1">
      <button class="normalBtn" @click="dialogFormVisible2 = true">{{$t('ios.tonggei')}}</button>
      <button class="hollowFixedBtn" @click="dialogFormVisible = true">{{$t('ios.jujue')}}</button>
    </div>
    <div class="iis_save" v-else-if="noDetail && detail.InvoiceApplyState===1 && (EmployeeId === detail.CreateById || EmployeeId === 1)">
      <button class="normalBtn" @click="setStatus(2)">{{$t('pub.cancelBtn')}}</button>
    </div>
    <div class="imd_img_box">
       <!-- v-show="EmployeeId === detail.CreateById && detail.InvoiceApplyState === 4" -->
      <button class="normalBtn" v-show="EmployeeId === detail.CreateById && detail.InvoiceApplyState === 4" @click="goEdit()">修改</button>
      <div class="_fujian_box" >
        <div v-if="detail.ApplyPics&&detail.ApplyPics.length>0">
          <div class="_fujian_zhankai cursorpointer" v-if="!fujianShow" @click="fujianShow = true">
            <span>附件</span>
            <span>></span>
          </div>
          <p class="_fujian_box_tit" v-if="fujianShow">
            <span>
              <i class="iconfont icon-bangdingzhagnhuxinxi"></i>
              <span>附件</span>
            </span>
            <span class="cursorpointer" @click="fujianShow = false">收起 <i class="iconfont icon-gengduo"></i></span>
          </p>
          <div class=" clearfix" v-if="fujianShow">
            <div style="width:100%;" v-if="FuImgList.length>0">
              <el-carousel trigger="click" height="293px" width="440px" :interval="5000">
                <el-carousel-item style="height: 293px;" v-for="item in FuImgList" :key="item">
                  <img @click="showImg(item, 2)" :src="item" alt="" style="width: 100%;">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="clearfix" v-if="detail.ApplyPics && detail.ApplyPics.length">
              <template v-for="(file,fIndex) in detail.ApplyPics" v-if="file.Type==='1'">
                <div class="_wenjian" @click="showUpLoadFile(file)">
                  <p v-if="file.Type==='1'" class="_wenjian_P iconfont" :class="file.Url.substring(file.Url.lastIndexOf('.')+1,file.Url.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"></p>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div v-else-if="!detail.ApplyPics && EmployeeId === detail.CreateById">
          <div class="_addUpload_box _addUpload_box_btm clearfix" >
            <template v-for="(file,fIndex) in saveMsg">
              <div v-if="file.Type==3">
                <div style="width:100%;height:100%;overflow: hidden;">
                  <img :src="file.Url?file.Url:file.Content" @click="showImg(file.Url?file.Url:file.Content)">
                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==1">
                <div class="iconfont _wenjian_P" :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFileT(file)">

                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
            </template>
          </div>
          <div style="margin-top: 80px;">
            <div class="_pic_upload" >
              <el-upload
                drag
                :http-request="uploadFileBtn"
                :multiple="true"  :show-file-list="false"  action="">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__text">点击/拖拽上传</div>
              </el-upload>
            </div>
            <div class="shangchuanfujian"><button class="hollowFixedBtn" @click="upLoadFuJian">上传附件</button></div>
          </div>
        </div>
        <div class="querenhan">
          <p >确认函</p>
          <div style="width:100%;" >
            <div v-if="detail.ConfirmFileList && detail.ConfirmFileList.length>0">
              <el-carousel trigger="click" height="293px" width="440px" :interval="5000" v-if="detail.ConfirmFileList[0].Url.indexOf('.png')!=-1 || detail.ConfirmFileList[0].Url.indexOf('.jp')!=-1">
                  <el-carousel-item style="height: 293px;">
                      <img @click="showImg(detail.ConfirmFileList[0].Url)" :src="domainManager().ViittoFileUrl + detail.ConfirmFileList[0].Url" alt="" style="width: 100%;">
                  </el-carousel-item>
              </el-carousel>
              <div v-else>
                <p style="padding-top: 5px;padding-left: 20px;font-size: 14px;margin-bottom: 10px;" class="cursorpointer">
                  <a target="_blank" :href="domainManager().ViittoFileUrl + detail.ConfirmFileList[0].Url">下载文件</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- v-if="detail.ConfirmFileList && detail.ConfirmFileList.length>0" -->
    </div>
    <el-dialog title="提示信息" width="400px" :visible.sync="dialogFormVisible" center :before-close="closeChangeMachie" >
      <el-form label-width="110px">
        <el-form-item label="拒绝理由">
          <el-input type="textarea" v-model="msg.RefuseRemarks" class="w216"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <button class="hollowFixedBtn" @click="dialogFormVisible=false">{{$t('pub.cancelBtn')}}</button>
        <button class="normalBtn" type="primary" @click="setStatus(4)">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detail: {},
      orderList: {},
      loading: true,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      AccountInfo: '',
      msg: {
        RefuseRemarks: '',
        ID: 0,
        InvoiceApplyState: 0,
        InvoiceNo: '',
      },
      noDetail: false,
      EmployeeId: 0,
      images: [],
      FuImgList: [],
      imageOptions:{
        navbar:false,
        title:false
      },
      fujianShow:true,
      saveMsg: [],
    };
  },
  methods: {
    // 修改
    goEdit: function () {
       this.$router.push({ name: 'invoicesManagerAdd', query:{id: this.detail.ID, OrderId: this.detail.OrderId, TCID: this.detail.TCID, CustomerId: this.detail.CustomerId, edit: 1, blank:'y', tab:'修改发票单据'} })
    },
    uploadFileBtn(file) { //上传
      if(file.file.size > 1024 * 1024 * 10) {
        this.$message.warning('文件大小不能超过10M！')
        return
      }
      //  1 文档  2 数据 3 图片
      let typeArr=[
        {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
        {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
      ]
      let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
      let fileTypeNumber = 2;
      let typeOk  = false;
      typeArr.forEach(x=>{
        if(x.stringArr.indexOf(ft)!='-1')
        {
          fileTypeNumber=x.type;
          typeOk = true;
        }
      });
      if (!typeOk) return this.$message.error('请上传图片、word、excel类型的文件！');
      let newArr = [];
      newArr.push(file.file)
      let path = "/Upload/Temporary/"
      this.$message.info('上传中...')
      this.UploadSelfFileT(path, newArr, x => {
        let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
        this.saveMsg.push({
          Type: fileTypeNumber,
          Content: x.data.FilePath,
          Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
        });
        this.$message.success('上传成功');
      });
    },
    upLoadFuJian: function() {
      if (this.saveMsg.length===0) return this.$message.error('请上传文件！');
      let msg = {
        ID: this.msg.ID,
        ApplyPics: this.saveMsg
      };
      this.apipost('InvoiceApply_get_UpdateInvoiceApplyInfo', msg, res=>{
        if (res.data.resultCode===1) {
          this.getDetail(this.msg.ID)
        } else {
          this.$message.error(res.data.message);
        }
      }, null)
    },
    showUpLoadFile(i){  // 预览上传文件
      if(i.Url.substring(i.Url.lastIndexOf('.')+1,i.Url.length).toUpperCase()=='PDF'){
        this.previewPDF(i.Url)
      }else{
        window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url)
      }
    },
    inited (viewer){
      this.$viewer = viewer
    },
    showImg(src ,t){
      src = t ? src : this.domainManager().ViittoFileUrl + src;
      let isExsit=false
      this.images.forEach(x=>{
          if(x==src)
          isExsit=true
      })
      if(!isExsit) {
          this.images.push(src)
      } else {
          this.$viewer.view(this.images.indexOf(src))
      }
      this.$viewer.show()
    },
    goUrlO: function (OrderId) {
        this.$router.push({ name: 'enrollTotal', query: { id: OrderId, blank: 'y', tab: '报名统计'} });
    },
    goUrlT: function (path, obj, title){  // 跳转团页面
	 	   this.$router.push({ name:path,query:{"id":obj,blank:'y',tab:title}})
		},
    goSaleFinacial: function () {  // 跳转销售财务单据
      let obj = {
        orderId: this.detail.OrderId,
        tcnum: this.detail.TCNUM,
        tcid: this.detail.TCID
      }
      this.$router.push({
        name: 'SalesFinancialDetail',
        query: {blank: 'y', tab: '销售财务单据', item: JSON.stringify(obj)}
      });
    },
    setStatus: function (type) {  // 审核发票单据
      this.msg.InvoiceApplyState = type
      if (type === 3 && this.msg.InvoiceNo==='') {
        return this.$message.error('请填写税号！')
      }
      this.apipost('InvoiceApply_get_UpdateInvoiceApply', this.msg, res=>{
        if (res.data.resultCode == 1) {
          this.$message.success(res.data.message)
          if (type !== 2) {
            setTimeout(()=>{
              this.$router.push({
                name: 'invoicesManager',
              });
            },1000)
          } else {
            setTimeout(()=>{
              this.$router.push({
                name: 'groupTourOrder',
                query: {blank: "y",}
              });
            },1000)
          }

        }
      }, null)
    },
    getDetail: function (id) { // 获取详情
      this.apipost('InvoiceApply_get_GetDetails', {ID: id}, res=>{
        if (res.data.resultCode == 1) {
          let detail = res.data.data
          if(detail.ApplyPics && detail.ApplyPics.length>0){
            detail.ApplyPics.forEach(x=>{
              if(x.Type==='3'){
                this.FuImgList.push(x.Url);
                this.images.push(x.Url)
              }
            })
          }
          this.detail = detail
          this.getOrderDetail();
        }
        this.loading = false
      }, null)
    },
    closeChangeMachie(done) {  //  转交窗口关闭
      done();
    },
    getOrderDetail: function () { // 获取交易信息详情
      this.apipost(
        'InvoiceApply_get_GetOrderFinanceList',
        {OrderId: this.detail.OrderId, OrderResource: 8, IsTravelMoney: 1},
        res => {
          if (res.data.resultCode == 1) {
            this.orderList = res.data.data
          }
        },
        err => {
        }
      )
    },
    goUrlSFD: function (path, name, OrderId, tcnum, tcid) {
      let obj = {
        OrderId: OrderId,
        tcnum: tcnum,
        tcid: tcid
      }
      this.$router.push({
        name: path,
        query: {blank: 'y', tab: name, item: JSON.stringify(obj)}
      })
    },
  },
  mounted() {
    let userInfo = this.getLocalStorage();
    this.EmployeeId=userInfo.EmployeeId;
    let id = this.$route.query.id
    this.noDetail = this.$route.query.noDetail ? true : false
    this.msg.ID = id
    this.getDetail(id)
  }
};
</script>