<style>

    .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>{{$t('hotel.hotel_SerialNumber')}}</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.ID}}</td>
                    <td>{{item.BranchName}}</td>
                    <td>{{item.CheckInDate}}</td>
                    <td>{{item.ReservationsTCNUM}}</td>
                    <td>{{item.TCNUM}}</td>
                    <td>{{item.WBMoney}}</td>
                    <td>{{item.CurrencyName}}</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-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>
        <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="$t('fnc.khleixing')">
                            <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="$t('fnc.khmingcheng')">
                            <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">{{$t('pub.cancelBtn')}}</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=7&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(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
						confirmButtonText: this.$t('pub.sureBtn'),
						cancelButtonText: this.$t('pub.cancelBtn'),
						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.HouseMealList||this.msg.HouseMealList.length==0){
                    this.Error("请先导入模板!");
                    return;
                }
                this.Btnloading=true;
                this.apipost('Financial_post_SetHouseMealBetchImport',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(this.$t('tips.shangchuanExcel'));
                }
                return isJPG && isLt2M;
            },
            //上传
            handleAvatarSuccess(res, file) {

                if (res.resultCode == 1) {
                    this.msg.HouseMealList=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>