
<template>
  <div class="AppActivity Feedback">
      <ul style="overflow: initial!important">
         <li>
          <span>
            <em>{{$t('visa.v_tuanhao')}}：</em>
          </span>
          <el-input class="w180" v-model="obj.TCNUM"></el-input>
        </li>
        <li>
          <span>
            <em>{{$t('salesModule.Docments')}}</em>
          </span>
          <el-input @keyup.native="checkInteger(obj,'FinanceId')" class="w180" v-model="obj.FinanceId"></el-input>
        </li>
        <li>
            <span>
                <em>{{$t('fnc.acc')}}</em>
            </span>
            <el-select  filterable  v-model='obj.AccountId' >
                <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option v-for='item in accountList'
                    :label='item.Name'
                    :value='item.ID'
                    :key='item.ID'>
                </el-option>
            </el-select>
        </li>
        <!-- <li>
          <span>
            <em>{{$t('fnc.zhanghuleixing')}}</em>
          </span>
          <el-select filterable v-model="obj.Type" >
            <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
            <el-option :label="$t('fnc.yinhang')" :value='1'></el-option>
            <el-option :label="$t('fnc.pingtai')" :value='2'></el-option>
            <el-option :label="$t('fnc.xianjin')" :value='3'></el-option>
            <el-option :label="$t('fnc.zjinchi')" :value='4'></el-option>
          </el-select>
        </li> -->
        <li>
          <em>{{$t('salesModule.Time')}}</em>
          <el-date-picker
            v-model="dateList"
            type="daterange"
            :range-separator="$t('OrderList.zhi')"
            :start-placeholder="$t('OrderList.star')"
            value-format="yyyy-MM-dd"
            :end-placeholder="$t('OrderList.end')">
            </el-date-picker>
        </li>
        <li style="float:right;margin-bottom:10px">
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.searchBtn')"
            @click="getList(),getdataInfo()"
          >
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.addBtn')"
            @click="addRule"
          >
        </li>
      </ul>
      <div style="margin-top:15px">
          <span>{{$t('objFill.zhidanysh')}}：{{dataInfo.CXMoney}}</span>
          <span style="margin:0 20px">{{$t('objFill.zhidanwsh')}}：{{dataInfo.ZDMoney}}</span>
          <span>{{$t('objFill.v101.FinancialModule.weizhidan')}}：{{dataInfo.Money}}</span>
      </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>ID</th>
        <th>{{$t('visa.v_tuanhao')}}</th>
        <th>{{$t('fnc.zhanghuleixing')}}</th>
        <th>{{$t('objFill.zhanghuname')}}</th>
        <th>{{$t('objFill.shoujujine')}}</th>
        <th>{{$t('hotel.hotel_CurrentRate')}}</th>
        <th>{{$t('fnc.bweibi')}}</th>
        <th>{{$t('objFill.shoujuriqi')}}</th>
        <th>{{$t('hotel.hotel_Order')}}</th>
        <th>{{$t('fnc.a_djztai')}}</th>
        <th>{{$t('fnc.a_cnyshenhe')}}</th>
        <th>{{$t('pub.pubRemark')}}</th>
        <th>{{$t('admin.admin_czPerson')}}/{{$t('salesModule.Time')}}</th>
        <th>{{$t('system.table_operation')}}</th>

      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.Id}}</td>
        <td>{{item.TCNUM}}（{{item.TCID}}）</td>
        <td>
            <span v-if="item.Type==1">{{$t('fnc.yinhang')}}</span>
            <span v-if="item.Type==2">{{$t('fnc.pingtai')}}</span>
            <span v-if="item.Type==3">{{$t('fnc.xianjin')}}</span>
            <span v-if="item.Type==4">{{$t('fnc.zjinchi')}}</span>
        </td>
        <td>{{item.AccountName}}</td>
        <td>{{item.WBMoney}}</td>
        <td>{{item.Rate}}</td>
        <td>{{item.Money}}</td>
        <td>{{item.Time}}</td>

        <td>{{item.FinanceId}}</td>
        <td>{{item.fStatusName}}</td>
        <td>
            <span v-if="item.Is_Cashier==1">{{$t('pub.yes')}}</span>
            <span v-if="item.Is_Cashier==0">{{$t('pub.no')}}</span>
        </td>
        <td>{{item.Remark}}</td>
        <td>{{item.UpdateBy}}/{{item.UpdateDate}}</td>

        <td>
            <el-button v-if="item.FinanceId==0 && EmployeeId == item.UpdateById" @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button v-if="item.FinanceId==0 && EmployeeId == item.UpdateById" @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="15" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange"
      layout="total,prev, pager, next, jumper" :page-size="obj.pageSize" :total='total'>
    </el-pagination>
    <el-dialog
        :title="$t('pub.updateMsg')"
        :visible.sync="ruleVisible"
        width="800px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item :label="$t('visa.v_tuanhao')" prop="TCNUM">
                <el-input class="w220" v-model="form.TCNUM"></el-input>
            </el-form-item>
            <el-form-item :label="$t('fnc.acc')" prop="AccountId">
                <el-select filterable v-model="form.AccountId" @change="getAccName(form.AccountId,1)">
                    <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
                    <el-option v-for='item in accountList'
                        :label='item.Name'
                        :value='item.ID'
                        :key='item.ID'>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('objFill.originalamount')" prop="WBMoney">
                <el-input @blur="getMoney" class="w220" v-model="form.WBMoney"></el-input>
            </el-form-item>
            <el-form-item :label="$t('hotel.hotel_CurrentRate')">
                <el-input class="w220" v-model="form.Rate" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('fnc.bwbjine')">
                <el-input class="w220" v-model="form.Money" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item :label="$t('objFill.shoujuriqi')" prop="Time" >
                <el-date-picker type="date" v-model="form.Time"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('pub.pubRemark')">
                <el-input class="w220" v-model="form.Remark"></el-input>
            </el-form-item>
            <div class="DocumentStatisticsDiv" >
                    <div>

                        <div class="_addUpload_box 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="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>
                            </template>
                            <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">{{$t('active.ld_djscwj')}}</div>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="ruleVisible = false">{{$t('pub.cancelBtn')}}</el-button>
            <el-button size="small" type="danger" @click="RulesOk('form')">{{$t('pub.sureBtn')}}</el-button>
        </span>
        </el-dialog>
        <div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
            <div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;">
                <el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
                <el-carousel-item style="height: 600px;overflow:auto;"  v-for="(item,index) in picObj" :key="index">
                    <img :src="item"  style=""/>
                </el-carousel-item>
                </el-carousel>
            </div>
        </div>
  </div>
</template>

<script>
import moment from "moment"
export default {

    name: 'Feedback',
    data (){

        return{
            initialIndex:0,
            edittrue:false,
            allzb:100,
            total:0,
            obj:{
                pageIndex:1,
                pageSize:10,
                TCNUM:'',
                FinanceId:0,
                AccountId:-1,
                Type:3,
                StartTime:'',
                EndTime:'',

            },
            dataList:[],
            loading:false,
            dateList:[],
            LineList:[],
            companyList:[],
            ruleVisible:false,
            form:{
                Id:0,
                TCNUM:'',
                AccountId:-1,
                Type:3,
                WBMoney:'',
                Rate:'',
                Money:'',
                Time:'',
                Remark:'',
                VoucherList:[],
            },
            LineTeamList:[],
            EmployeeList:[],
            rules:{
                TCNUM: [{ required: true, message: this.$t('objFill.v101.activity.rul2.t9'), trigger: 'blur' }],
                AccountId: [{ required: true, message: this.$t('admin.admin_choAcc'), trigger: 'change' }],
                WBMoney: [{ required: true, message: this.$t('objFill.v101.FinancialModule.qiingxzybje'), trigger: 'blur' }],
            },

            LineListObj:{},
            companyListObj:{},
            AccList:[],
            accountList:[],
            saveMsg:[],
            imgList:[],
            picIsShow:false,
            picObj:[],
            dataInfo:{},
            EmployeeId:-1,
        }
    },
    created(){
        let userInfo = this.getLocalStorage();
        this.form.groupId=userInfo.RB_Group_id;
        this.EmployeeId=userInfo.EmployeeId;

        if(this.$route.query.id){
            this.obj.Id=Number(this.$route.query.Id);
        }
        if(this.$route.query.AccountId){
            this.obj.AccountId=Number(this.$route.query.AccountId);
        }
        if(this.$route.query.StartTime){
            this.dateList[0]=this.$route.query.StartTime;
            this.dateList[1]=this.$route.query.EndTime;
        }

    },
    mounted(){
       this.getList();
       this.AccountType_post_GetList();
       this.getAccountList();
       this.getdataInfo();

    },
    filters:{
        YMD(date){
        return moment(date).format("YYYY-MM-DD");
        }
    },
    methods:{
        getdataInfo(){
            if(this.dateList && this.dateList.length>0){
                this.obj.StartTime=this.dateList[0];
                this.obj.EndTime=this.dateList[1];
            }else{
                this.obj.StartTime='';
                this.obj.EndTime='';
            }
            this.apipost('Financial_get_GetFinanceReceiptStatistics',this.obj,res=>{

                if(res.data.resultCode==1){
                    this.dataInfo = res.data.data;
                }else{
                    this.$message.error(res.data.message);
                }
            },err=>{})
        },
        getMoney(){
           this.form.Money=(this.form.WBMoney * this.form.Rate).toFixed(2);
        },
        getAccName(i,o){ // 根据选择账户获取账户名
            this.accountList.forEach(x=>{
                if(x.ID == i){
                    this.form.Rate=x.Rate;
                    this.getMoney();
                }
            })

        },
        showUpLoadFile(i){  // 预览上传文件
            if(i.Type==3){
              this.picObj.push(i.Url);
              this.imgList.push(i.Url);
              this.picIsShow= true;
              // this.hideFlashMan = 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.Success(this.$t('tips.scchenggong'))
            },1);
        },
        getAccountList(){
          this.apipost('FinancialInstitutions_post_GetALLAccountList',{TypeId:8}, res => {
            if(res.data.resultCode == 1) {
              let data = res.data.data;
              data.forEach(x=>{
                x.allName = x.BackNo+"("+x.Alias+")";
                x.Name = x.Alias;
              })
              this.accountList = data;

            }
          }, err => {})

        },
        AccountType_post_GetList(){  //获取账户类型下拉
            this.apipost('AccountType_post_GetList',{},res=>{
                if(res.data.resultCode==1){
                    this.AccList = res.data.data;
                }else{
                    this.$message.error(res.data.message);
                }
            },err=>{})
        },
        handleCurrentChange(val) {
            this.obj.pageIndex = val;
            this.getList();
        },
        Delete(item) {
            this.$confirm(this.$t('objFill.shifouscbkhf'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: "warning"
            })
            .then(() => {
                this.apipost('Financial_post_DelFinanceReceiptInfo', {ReceiptId:item.Id}, res => {
                if (res.data.resultCode == 1) {
                    this.Success(res.data.message)
                    this.getList()
                }else{
                    this.Error(res.data.message)

                }
                })
            })
            .catch(() => {});
        },
        addRule(){
            this.ruleVisible=true;
            this.edittrue=false;
            this.InitForm();

        },
        SetRules(item){

            this.ruleVisible=true;
            this.edittrue=true;
            this.form={
                Id:item.Id,
                TCNUM:item.TCNUM,
                AccountId:item.AccountId,
                Type:3,
                WBMoney:item.WBMoney,
                Rate:item.Rate,
                Money:item.Money,
                Time:item.Time,
                Remark:item.Remark,
                VoucherList:item.VoucherList,
            }
            this.saveMsg=[];
            this.form.VoucherList.forEach(item=>{
                let obj={
                    Url:item,
                    Type:3,
                }
                this.saveMsg.push(obj)
            })


        },
        RulesOk(formName){
            this.form.VoucherList=[];
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.saveMsg.forEach(item=>{
                        this.form.VoucherList.push(item.Url);
                    })
                    this.apipost('Financial_post_SetFinanceReceiptInfo',this.form,res=>{
                        if(res.data.resultCode==1){
                            this.Success(res.data.message)
                            this.getList();
                            this.ruleVisible=false;
                            this.InitForm();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    },err=>{})
                } else {


                }
                });

        },
        InitForm(){
            this.form={
                Id:0,
                TCNUM:'',
                AccountId:-1,
                Type:3,
                WBMoney:'',
                Rate:'',
                Money:'',
                Time:'',
                Remark:'',
                VoucherList:[],
            }
            this.saveMsg=[];
        },


      getList(){
        this.loading=true;
        if(this.dateList && this.dateList.length>0){
            this.obj.StartTime=this.dateList[0];
            this.obj.EndTime=this.dateList[1];
        }else{
            this.obj.StartTime='';
            this.obj.EndTime='';
        }
        this.apipost('Financial_get_GetFinanceReceiptPageList',this.obj,res=>{
            this.loading=false;
            if(res.data.resultCode==1){
                this.dataList = res.data.data.pageData;
                this.total=res.data.data.count;
            }else{
                this.$message.error(res.data.message);
            }
        },err=>{})
      },
    }
}

</script>
<style>
.DocumentStatisticsDiv .el-upload-dragger{
    width: 124px!important;
    height: 80px!important;
}
._addUpload_box{
    display: block;
    margin-top: 15px;
}
._addUpload_box img{
    width: 100%;
}
._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;
}
._addUpload_box>div:hover{
    background-color: #f5f5f5;
}
._addFile_name{
    padding-left: 15px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
._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;
}
._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
}
._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
}
.AppActivity .el-form-item{
    display: inline-block;
}
.Feedback ul>li{
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
}
.Feedback .singeRowTable{
    margin-top: 20px;
}
</style>
