<style>
  @import "./css/cssReset.css";

  .currentManage ._vMG_edit{overflow: auto;display: none;position:absolute;font-family: 'PingFangSc-Fine';bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 10px;width: 100%;}
  .currentManage ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
  .currentManage ._vMG_edit ._tit span{color: #666666;font-size: 14px;}
  ._edHeight{height:400px;}
  .edHeight{display: block !important;height: 230px;}
  ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
  ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
  ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
  .currentManage ._info_box ul{margin-top: 15px}
  .currentManage ._info_box ul li{float: left;    width: 250px;}
  .currentManage .po_content{
    border-collapse: collapse;
  }
  .currentManage .po_content{
    width: 100%;
  }
  .currentManage .po_content tr:first-child{
    font-size: 12px;
    color: #666666;
    background-color: #DCDCDC;
  }
  .currentManage .po_content tr th,.currentManage .po_content tr td{
    padding: 10px 20px;
    text-align: left;
  }
  .currentManage .po_content tr td{
    color: #333333;
    font-size: 14px;
    border:1px solid #E6E6E6;
  }
  .currentManage .po_content tr td .iconfont{
    font-size: 14px;
    padding: 4px;
  }
  .RoomMealImport .query-box .iconfont{
    cursor: pointer;
    background-color: #E95252;
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
  }
  .currentManage ._yuan{
    width:12px;
    height:12px;
    background:rgba(233,82,82,1);
    border-radius:50%;
    display: inline-block;
  }
  .currentManage ._yuan._yuan_red{
    background:#47BF8C;
  }

  .RoomMealImport .picload{
    width: 138px;
    height: 92px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
  }
  .RoomMealImport .picload .el-upload{
    width: 138px;
    height: 92px;
  }
  .RoomMealImport .picload .el-upload-dragger{
    width: 100%;
    height: 100%;
  }
  .RoomMealImport ._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;
  }
  .RoomMealImport ._addUpload_box .icon-excel, .RoomMealImport ._addUpload_box .icon-pdf{
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
  }
  .RoomMealImport ._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;
  }
</style>
<template>
  <div class="flexOne currentManage RoomMealImport">
    <div>
      <ul style="margin:10px 0;text-align:right">
        <li>
          <a class="hollowFixedBtn downBtn" style="padding:4px 9px;" :href="downList">导入模板下载</a>
          <button class="hollowFixedBtn" @click="outerVisible=true">导入</button>
          <button class="hollowFixedBtn" @click="AddR">提交</button>
          <button class="hollowFixedBtn" @click="Gourl">跳转到我的财务单据</button>
        </li>
      </ul>
    </div>
    <div class="cm_content _scrollbar">
      <table class="po_content 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>

        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>{{item.ID}}</td>
          <td>{{item.BranchName}}</td>
          <td>{{item.TCNUM}}</td>
          <td>{{item.WBMoney}}</td>
          <td>{{item.CurrencyName}}</td>
          <td>{{item.Remark}}</td>

          <!-- <td>{{item.Money}}</td> -->
          <!-- <td>
              <span style="cursor: pointer;color:blue;text-decoration:underline" v-if="item.Type==2">认领</span>

              <span style="cursor: pointer;color:red;text-decoration:underline" @click="Delete(item)" v-if="item.IsDelete==1">删除</span>
          </td> -->
        </tr>
      </table>
      <div class="noData" v-if="DataList.length==0">
        {{$t('system.content_noData')}}
      </div>
    </div>
    <el-dialog custom-class='w700' title="导入" :visible.sync="outerVisible" center>
      <el-upload :show-file-list="false" style="text-align: center;" drag class="upload-demo" :action="importFileUrl2" :on-success="handleAvatarSuccess"
                 :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> -->
      </el-upload>
    </el-dialog>
    <el-dialog width="1000px" title="保存" :visible.sync="moneyR" center>
      <el-form :rules="rules" class="Rform" ref="form" :model="form" label-width="110px">
        <el-row>
          <!-- <el-col :span="8">
              <el-form-item label="导入类型">
                  <el-select  filterable  prop="ImportType" v-model='msg.ImportType' >
                      <el-option label="房费" :value='1'></el-option>
                      <el-option label="餐费" :value='2'></el-option>
                      <el-option label="CHI包房" :value='3'></el-option>
                      <el-option label="用房手配费" :value='4'></el-option>
                      <el-option label="转账手续费" :value='5'></el-option>
                  </el-select>
              </el-form-item>

          </el-col> -->
          <el-col :span="8">
            <el-form-item label="预计付款日期">
              <el-date-picker
                v-model="msg.PayDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="付款类型">
              <el-select  filterable  prop="IsPublic" v-model='msg.IsPublic' >
                <el-option :label="$t('fnc.gongzhang')" :value='1' :key='1'></el-option>
                <el-option :label="$t('fnc.sizhang')" :value='0' :key='0'></el-option>
                <el-option :label="$t('fnc.rmbxianjin')" :value='2' :key='2'></el-option>
                <el-option :label="$t('fnc.wbxianjin')" :value='3' :key='3'></el-option>
                <el-option :label="$t('fnc.zjinchi')" :value='4' :key='4'></el-option>
                <el-option :label="$t('fnc.ptxnzhanghu')" :value='5' :key='5'></el-option>
                <el-option :label="$t('fnc.djxnzhanghu')" :value='6' :key='6'></el-option>
                <el-option :label="$t('fnc.szxiangdi')" :value='7' :key='7'></el-option>
                <el-option label="原路退款" :value='8' :key='8'></el-option>
                <el-option label="地接预支款" :value='9' :key='9'></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="客户类型">
              <el-select v-if="!showDisable"  filterable  v-model='msg.ClientType' @change="financeinfo_post_GetClientAccountList(msg.ClientType)">
                <el-option v-for='item in ClientTypeList'
                           :label='item.Name'
                           :value='item.ID'
                           :key='item.ID'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称">
              <el-select  filterable  v-model='msg.ClientID'>
                <el-option v-for='item in ClientAccountList'
                           :label='item.Name'
                           :value='item.ID'
                           :key='item.ID'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="上传附件">
              <div class="picload">
                <el-upload style="width: 138px;height: 92px;"
                           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">{{$t('active.ld_djscwj')}}</div>
                </el-upload>
              </div>

            </el-form-item>
          </el-col>
          <el-col :span="16" style="padding-top:5px">
            <div class="_addUpload_box" v-for="(file,fIndex) in saveMsg" :key="fIndex">
              <div v-if="file.Type==3">
                <div style="width:100%;height:100%;overflow: hidden;">
                  <img style="width:100%" :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)">
                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==1">
                <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"  @click="showUpLoadFile(file)">

                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==2">
                <div class="iconfont icon-excel"  @click="showUpLoadFile(file)">

                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="moneyR = false">取 消</el-button>
                <el-button :loading="Btnloading" size="small" type="danger" @click="RSumbit">确 定</el-button>
            </span>
    </el-dialog>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        form:{
          ID:"",
          FrId:'',
        },
        moneyR:false,
        outerVisible:false,
        msg:{
          ImportType:'',
          IsPublic:"",
          ClientType:"",
          ClientID:"",
          vorcherInos:[],
          PayDate:'',
        },
        productionDate:[],
        DataList:[],
        loading:false,
        currentPage:1,
        total:0,
        currencyTypeList:[],
        importFileUrl2: "",
        downList:"",
        showDisable:false,
        ClientAccountList:[],
        ClientTypeList:[],
        saveMsg:[],
        rules: {
          ImportType: [
            { required: true, message: '请选择导入类型', trigger: 'change' }
          ],
          IsPublic: [
            { required: true, message: '请选择付款类型', trigger: 'change' }
          ],
        },
        Btnloading:false,
      }
    },created(){
      let userInfo = this.getLocalStorage();
      this.importFileUrl2=this.domainManager().UploadFileUrl +
        "?cmd=dmc_post_LocalFileUpload&fileType=1&fileLimit=1&RB_Group_id=2&Type=8&EmployeeId="+userInfo.EmployeeId;
      this.downList =this.domainManager().LocalTemplateFileDownLoadUrl +"/Upload/Template/汇率批量导入模板.xls";

    },
    filters:{
      PNumber(val){
        if(val){
          return val.substr(0, 4) + "****" + val.substr(-4,4)
        }

      },
    },
    mounted(){
      this.GetAccount();
      this.financeinfo_post_GetClientTypeList();
    },
    methods: {
      financeinfo_post_GetClientTypeList(){  // 获取对象类型
        this.apipost('financeinfo_post_GetClientTypeList',{}, res => {
          if(res.data.resultCode == 1) {
            this.ClientTypeList = res.data.data;
          }
        }, err => {})
      },
      showUpLoadFile(i){  // 预览上传文件
        if(i.Type==3){
          this.picObj.push(i.Url);
          this.picIsShow= true;
        }else{
          if(i.Content.substring(i.Content.lastIndexOf('.')+1,i.Content.length).toUpperCase()=='PDF'){
            this.previewPDF(i.Url)
          }else{
            window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url)
          }
        }
      },
      deleteUploadFile(i){  // 删除上传文件
        this.saveMsg.splice(i,1);
      },
      uploadFileBtn(file) { //上传
        if(file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          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(this.$t('tips.qscWEfile'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
          this.saveMsg.push({
            Content: x.data.FilePath,
            ID:0,
            Type:fileTypeNumber,
            Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
          })
          this.$message.success(this.$t('tips.scchenggong'))
        }, 1);
      },
      IsPublicChange(val){
        this.showDisable=false;
        this.msg.ClientType = '';
        this.msg.ClientID = '';
        this.msg.AccountNumber = '';
        this.ClientAccountListS=[];
        if(val==8||val==9){
          this.showDisable=true;
        }
      },
      financeinfo_post_GetClientAccountList(t,i){  //获取付款 对象类型  新增用
        let msg = {
          ID:0,
          Type:t,
          ObjID:0,
          CardNum:''
        }
        if(i>=0){
          msg.ID=i;
        }else{
          this.msg.ClientID='';
          this.msg.AccountNumber='';
          this.msg.RemitterName='';
          this.msg.IsLeader=1;
        }
        this.apipost('financeinfo_post_GetClientAccountList',msg, res => {
          if(res.data.resultCode == 1) {
            let data = res.data.data;
            let ClientAccountList = [];
            if(i){
              data.forEach(x=>{
                let obj = {
                  ID:x.ID,
                  Name:x.AccountHolder + + `（${x.AccountAlias}）`,
                  Nom:x.CardNum,
                  OpenBankName:x.OpenBankName,
                  allName:x.CardNum+" "+x.OpenBankName,
                  ObjID:x.ObjID,
                }
                ClientAccountList.push(obj)
              })
              this.ClientAccountListS = ClientAccountList;
            }else{
              data.forEach(x=>{
                let obj = {
                  ID:x.ID,
                  Name:x.AccountHolder + `（${x.AccountAlias}）`,
                  Nom:x.CardNum,
                  OpenBankName:x.OpenBankName,
                  ObjID:x.ObjID,
                }
                ClientAccountList.push(obj)
              })
              this.ClientAccountList = ClientAccountList;
            }
          }
        }, err => {})
      },
      GetClientAccountList(i){ //获取客户名称并且根据费用类型和付款对象获取客户账号
        this.msg.AccountNumber='';
        this.ClientAccountList.forEach(x=>{
          if(x.ID==i){
            this.msg.RemitterName=x.Name;
            this.financeinfo_post_GetClientAccountList(this.msg.ClientType,x.ID);
          }
        })
      },
      AddR(item){
        this.moneyR=true;
      },
      Delete(item){
        var msg = {
          ID: item.ID
        }
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost(
            'Financial_post_DelFinanceRemittanceClaim',
            msg,
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            },
            null
          )
        }).catch(() => {

        });

      },
      RSumbit(){
        this.msg.vorcherInos = this.saveMsg;
        if(this.msg.PayDate==""){
          this.Error("请选择时间！");
          return;
        }
        if(!this.msg.RateDiffList||this.msg.RateDiffList.length==0){
          this.Error("请先导入模板！");
          return;
        }
        this.Btnloading=true;
        this.apipost('Financial_post_SetRateDifferenceBetchImport',this.msg,res=>{
          this.Btnloading=false;
          if(res.data.resultCode==1){
            this.Success(res.data.message)
            this.DataList=[];
            this.initMsg();
            this.moneyR=false;

          }else{
            this.Error(res.data.message)
          }
        },err=>{})

      },
      initMsg(){
        this.saveMsg=[];
        this.msg={
          ImportType:'',
          IsPublic:"",
          ClientType:"",
          ClientID:"",
          vorcherInos:[],
          PayDate:'',
        }
      },
      Gourl(){
        this.$router.push({
          name: "FinancialDocuments",
          query: {
            blank: 'y'
          }
        })
      },
      beforeAvatarUpload(file) {
        return;
        const isJPG = file.type === "application/x-msdownload";
        if (!isJPG) {
          this.$message.error("上传文件只能是 excel 格式!");
        }
        return isJPG && isLt2M;
      },
      //上传
      handleAvatarSuccess(res, file) {

        if (res.resultCode == 1) {
          this.msg.RateDiffList=res.data;
          this.DataList=res.data;
          this.outerVisible = false;
        }else{
          this.Error(res.message);

        }
      },



      GetAccount(){
        this.apipost('bankaccount_post_GetList',{TypeId:'0'},res=>{
          if(res.data.resultCode==1){
            this.currencyTypeList = res.data.data;
          }else{

          }
        },err=>{})
      },
    },

  }
</script>
