<template>
  <div v-loading="loading" class="Application">
      <div class="Application_content">
          <div>
              <el-select @change="ChangeType" :disabled="numDisabled" v-model="formdata.Type" placeholder="请选择">
                <el-option label="现金" :value="1"></el-option>
                <el-option label="转账" :value="2"></el-option>
            </el-select>
          </div>
          <p style="text-align:right;margin:10px 0;font-size:14px">
              流水号：<span style="color:#E95252">{{data.ApplyForNumber}}</span>
          </p>
          <p style="text-align:center">
              <span class="download" @click="downLoad">下载并保存</span>
          </p>
          <!-- 现金 -->
        <div v-if="formdata.Type==1">
            <p style="text-align:center">
              <span style="font-weight:700;font-size:20px;">現金受取依頼書</span>
          </p>
            <div> 
            <div style="margin:30px 0">
                <el-select @change="CashListChange" :disabled="disabled" v-model="id"  placeholder="请选择">
                    <el-option
                    v-for="item in CashList"
                    :key="item.Name" 
                    :label="item.Name"
                    :value="item.Id">
                    </el-option>
                </el-select>
            </div>　　
            弊社は下記のガイド1名が現金を受け取りします。受取者の本人パスポートを提示して/身分証明書を確認してから現金を渡してください。ご対応お願い致します。
          </div>
            <table style="margin-top:30px" class="ApplicationTable singeRowTable" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <th>受取日</th>
                    <th width="200">受取者</th>	
                    <th>受取店舗</th>	
                    <th>金 額</th>
                </tr>
                <tr>
                    <td>
                        <el-input :disabled="numDisabled" v-model="formdata.GetDate" placeholder="请输入内容"></el-input>
                    </td>
                    <td>
                        <el-input :disabled="numDisabled" v-model="formdata.LeaderName" placeholder="请输入内容"></el-input>
                    </td>	
                    <td>
                        <el-select clearable :disabled="disabled1" v-model="formdata.GetAddress" placeholder="请选择">
                            <el-option v-if="id=='' || id==item.CashId"
                            v-for="item in StoreList"
                            :key="item.Name"
                            :label="item.Name"
                            :value="item.Name">
                            </el-option>
                        </el-select>
                    </td>	
                    <td>
                        <el-input :disabled="numDisabled" v-model="formdata.Money" placeholder="请输入内容"></el-input>
                    </td>
                </tr>
            </table>
            <div class="_addUpload_box clearfix">
                <div v-if="formdata.ImgAddress!=''">
                    <div style="width:100%;height:100%;overflow: hidden;">
                        <img :src="formdata.ImgAddress?formdata.ImgAddress:''">
                    </div>
                    <span v-if="!numDisabled" class="iconfont icon-guanbi1" @click="deleteUploadFile"></span>
                </div>
                <div v-if="!numDisabled" class="_pic_upload" >
                    <el-upload style="width:100%;height:100%"
                    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 class="zzDiv" v-if="formdata.Type==2">
            <p style="text-align:center">
                <span style="font-weight:700;font-size:20px;">振込み依頼書</span>
            </p>
            <div style="margin:30px 0">
                <el-select @change="CashListChange" :disabled="disabled" v-model="id"  placeholder="请选择">
                    <el-option
                    v-for="item in CashList"
                    :key="item.Name" 
                    :label="item.Name"
                    :value="item.Id">
                    </el-option>
                </el-select>
            </div>
            <p style="margin-bottom: 5px;">御担当様</p>
            <p style="margin-bottom: 5px;">お世話になっております。　</p>
            <p style="margin-bottom: 5px;">下記の振込先を<el-input size="small" style="width:120px;margin:0 5px" :disabled="numDisabled" v-model="formdata.Money" placeholder="请输入内容"></el-input> （合计：{{formdata.Money}}）を振り込むようお願いします。</p>
            <p style="margin-bottom: 5px;">振込先：</p>
            <div v-if="!numDisabled" style="margin-bottom: 5px;">
                <el-select @change="ChangezzType" :disabled="numDisabled" v-model="zzType" placeholder="请选择">
                    <el-option label="图片" :value="1"></el-option>
                    <el-option label="文字" :value="2"></el-option>
                </el-select>
            </div>
            <template v-if="zzType==1">
                <div v-if="numDisabled && formdata.ImgAddress!=''">
                    <img style="width:100%" :src="formdata.ImgAddress?formdata.ImgAddress:''">
                </div>
                <div v-if="!numDisabled" class="_addUpload_box clearfix">
                    <div v-if="formdata.ImgAddress!=''" >
                        <div style="width:100%;height:100%;overflow: hidden;">
                            <img :src="formdata.ImgAddress?formdata.ImgAddress:''">
                        </div>
                        <span v-if="!numDisabled" class="iconfont icon-guanbi1" @click="deleteUploadFile"></span>
                    </div>
                    <div  class="_pic_upload" >
                        <el-upload style="width:100%;height:100%"
                        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> 
            </template>    
            <template v-if="zzType==2">
                <p>
                    <el-input style="width:80%;" :disabled="numDisabled" v-model="formdata.GetDate" placeholder="请输入内容"></el-input>
                </p>
                <p>
                    <el-input style="width:80%;margin:10px 0;" :disabled="numDisabled" v-model="formdata.LeaderName" placeholder="请输入内容"></el-input>
                </p>
                <p>
                    <el-input style="width:80%" :disabled="numDisabled" v-model="formdata.GetAddress" placeholder="请输入内容"></el-input>
                </p>
            </template>  
　　


        </div>   
          
            <div style="text-align:right;margin-top:20px;font-size:14px;">
                <p style="padding-bottom: 10px;">{{companyName}}</p>
                <span>{{data.JapNowTime}}</span>
            </div>
            <div style="margin:50px 0">
                <p>{{data.CityName}}<span style="padding-left:6px;"> </span>{{data.TCNUM}}编号：{{data.FrId}}</p>
                
            </div>
      </div>
      
  </div>
</template>
<script>
export default {
  data () {
    return {
        companyName:'会社名 成都印象之旅',
        loading:false,
        zzType:1,
        FrId:0,
        CashList:[],
        formdata:{},
        data:{},
        StoreList:[],
        id:"",
        disabled:false,
        disabled1:false,
        numDisabled:false,
    }
  },
  created(){
      this.FrId = this.$route.query.id;
  },
  mounted() {
    this.GetData();
    
  },
  methods: {
      ChangeType(val){
        this.formdata.ImgAddress="";
      },
      ChangezzType(val){
        this.formdata.GetDate="";
        this.formdata.LeaderName="";
        this.formdata.GetAddress="";
        this.formdata.ImgAddress="";
      },
      uploadFileBtn(file) { //上传
        if(this.formdata.ImgAddress!=''){
            this.Error("只能上传一张图片！");
            return;
        }
        //  1 文档  2 数据 3 图片
        let typeArr=[
            {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
        ]
        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("请上传图片！");
        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);
            let url=this.domainManager().ViittoFileUrl + x.data.FilePath;
            
            this.formdata.ImgAddress=url;
            this.$message.success(this.$t('tips.scchenggong'))
        }, 1);
    },
      deleteUploadFile(i){  // 删除上传文件
            this.formdata.ImgAddress="";
        },
      downLoad(){
          if(this.formdata.Name==""){
              this.Error("请选择旅行社")
              return;
          }
          if(!this.formdata.GetAddress){
             this.formdata.GetAddress="";
          }
          this.apipost('Financial_get_FinanceCashWithDrawalsDownLoad',this.formdata,res=>{
                    if(res.data.resultCode==1){
                        const link = document.createElement('a');
                        let _loadUrl=this.domainManager().DomainUrl
                        let str = window.location.href
                        link.href = _loadUrl+res.data.data
                        document.body.appendChild(link);
                        link.click();
                        this.GetData();
                }else{
                    this.$message.error(res.data.message)
                }
                },err=>{})
      },
      CashListChange(val){
        this.companyName="会社名 成都印象之旅";
        if(val==11){
            this.companyName="会社名 成都欧亚旅行社有限公司";
        }
          this.id=val;
          this.CashList.forEach(item=>{
              if(item.Id==this.id){
                  this.formdata.Name=item.Name;
              }
          })
          this.formdata.GetAddress="";
        },
    GetData(){
        this.loading=true;
        this.apipost('Financial_get_GetFinanceCashWithDrawals',{FrId:this.FrId}, res => {
        this.loading=false;
        if(res.data.resultCode == 1) {
          this.data = res.data.data;
          if(this.data.ApplyForNumber!="待生成"){
              this.numDisabled=true;
              if(this.data.ImgAddress==''){
                  this.zzType=2;
              }
              
          }
          this.formdata=Object.assign({},res.data.data);
          if(this.formdata.Type==0){
              this.formdata.Type=1;
          }
          this.CashList= res.data.data.CashList;
          if(this.data.Name!=""){
              this.disabled=true;
              this.CashList.forEach(item=>{
              if(item.Name==this.data.Name){
                  this.id=item.Id;
              }
            })
          }
          if(this.data.GetAddress!=""){
              this.disabled1=true;
          }
          
          this.StoreList= res.data.data.StoreList;
        }
      }, err => {})
    },
  }
}
</script>

<style>
.Application .zzDiv .el-input.is-disabled .el-input__inner{
    /* border:none; */
    background-color:transparent;

}
.Application .ApplicationTable .el-input.is-disabled .el-input__inner{
    border:none;
    background-color:transparent;
}
.Application .singeRowTable tr td{
    padding: 6px;
}
.Application .el-upload,.Application .el-upload-dragger{
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
}
.Application ._addUpload_box{
    display: block;
    margin-top: 15px
}
.Application ._addUpload_box img{
    width: 100%;
    height: 100%;
}
.Application ._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;
}
.Application ._addUpload_box>div:hover{
    background-color: #f5f5f5;
}
.Application ._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;
    }
.Application ._addUpload_box .icon-guanbi1:hover {
        font-size: 12px;
        color: #c94052;
    }
.Application ._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
        text-align: center;
        font-size: 38px;
        color: green;
        line-height: 75px;
    }
.Application .download{
    float:right;
    cursor: pointer;
    font-size: 14px;
    color: #3980C8;

}
.Application .download:hover{
    text-decoration: underline;
    color: rgb(255, 0, 0);
}
.Application tr th{
    border: 1px solid #e5e5e5;
}
.Application{
    background: #fff;
    padding-top: 20px;
    min-height:800px;
}
.Application .Application_content{
    border: 1px solid #eeeeee;
    width:900px;
    margin:0 auto;
    padding: 20px;
}
</style>