<style> 
.page_addCapitalAllocation{
  width: 800px;
  /* position: absolute; */
  padding: 15px;
  background-color: white;
  color: #c94052;
  margin: 0 auto;
}
.page_addCapitalAllocation ._top{
  text-align: center
}
.page_addCapitalAllocation ._top p{
  font-size: 20px;
  padding: 5px 0;
}
.page_addCapitalAllocation ._top p:last-child{
  font-size: 18px;
  padding:0 0 10px 0
}
.page_addCapitalAllocation ._top p:last-child span{
  display: inline-block;
  border-bottom: 2px solid #c94052;
  padding: 0 20px;
}
.page_addCapitalAllocation ._border_b_1{border-bottom: 1px solid #666666 !important;color: #666666}
.page_addCapitalAllocation input {
    border: none !important;
    background-color: transparent !important;
    padding: 0 2px !important;
}
.page_addCapitalAllocation ._conten ._lable{
  display: inline-block;
  width: 90px;
  text-align: right;
}
.page_addCapitalAllocation ._conten ul li._inList{
  border: 1px solid #c94052;
  padding: 10px 0;
  position: relative;
}
.page_addCapitalAllocation ._conten ul li._inList>p{
  border-bottom: 1px dotted #c94052;
  padding-bottom: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-size: 18px;
}
.page_addCapitalAllocation ._conten ul li._inList>div{
  padding: 5px 0;
}
.page_addCapitalAllocation ._conten ul li._inList ._add_btn{
  text-align: right;
  height: 35px;
  line-height: 35px;
  position: absolute;
  right: 22px;
  bottom: 10px;
}
.page_addCapitalAllocation ._conten ul li._inList ._add_btn span{
  cursor: pointer;
}
.page_addCapitalAllocation ._conten ul li._inList textarea{
  border: none;
  border-bottom: 1px solid #666666;
  min-height: 300px;
}
.page_addCapitalAllocation ._conten ul li._inList ._uoload{
  padding-left: 10px;
}
.page_addCapitalAllocation ._addUpload_box{
    display: block;
    margin: 15px;
}
.page_addCapitalAllocation ._addUpload_box img{
    width: 100%;
}
.page_addCapitalAllocation ._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_addCapitalAllocation ._addUpload_box>div:hover{
    background-color: #f5f5f5;
}
.page_addCapitalAllocation ._addFile_name{
    padding-left: 15px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page_addCapitalAllocation ._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_addCapitalAllocation ._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
}
.page_addCapitalAllocation ._addUpload_box .icon-excel,.page_addCapitalAllocation ._addUpload_box .icon-pdf {
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
}
.page_addCapitalAllocation ._pic_upload .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
}
</style>
<template>
  <div class="page_addCapitalAllocation">
    <div class="_top">
      <p>四川和平国际旅行社有限公司</p>
      <p><span>资金调拨单</span></p>
    </div>
    <div class="_conten">
      <ul v-if="inList.length">
        <li v-for="(item, index) in inList" class="_inList">
          <p>收款对象</p>
          <div>
            <span class="_lable">收款方式：</span>
            <el-select  filterable  v-model='item.mode' @change="FinancialInstitutions_post_GetAccountList(item.mode, item.Type)" class="w100 _border_b_1">
              <el-option v-for='item in AccList'
                :label='item.Name'
                :value='item.ID'
                :key='item.ID'>
              </el-option>
            </el-select>
            <span class="_lable">账户类型：</span>
            <el-select  filterable  v-model='item.Type' @change="FinancialInstitutions_post_GetAccountList(item.mode, item.Type)" class="w100 _border_b_1">
              <el-option v-for='item in shouAccList'
                :label='item.Name'
                :value='item.ID'
                :key='item.ID'>
              </el-option>
            </el-select>
            <span class="_lable">到款账户：</span>
            <el-select  filterable  v-model='item.AccountId' @change="getAccInfo(index, item.AccountId)" class="w250 _border_b_1">
              <el-option v-for='item in shouAccNumList'
                :label='item.allName'
                :value='item.ID'
                :key='item.ID'>
              </el-option>
            </el-select>
          </div>
          <div>
            <span class="_lable">收款金额：</span>
            <el-input v-model='item.OriginalMoney' class="w100 _border_b_1"></el-input>
            <span class="_lable">汇率：</span>
            <el-input v-model='item.Rate' class="w100 _border_b_1"></el-input>
            <span class="_lable">本位金额：</span>
            <el-input v-model='item.Money' class="w100 _border_b_1"></el-input>
          </div>
          <div>
            <span class="_lable">调拨日期：</span>
            <el-date-picker clearable class="w100 _border_b_1"
              v-model="item.AllotDate"
              prefix-icon='1'
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <span class="_lable">备注：</span>
            <el-input v-model="item.Description" type="textarea" class="w300 _border_b_1"></el-input>
            <div class="_add_btn">
              <span @click="initMsg(1)">添加</span>
              <span @click="deleteItem(1, index)">删除</span>
              <span @click="clearItem(1, index)">清空</span>
            </div>
          </div>
          <div class="_uoload">
            <p>上传附件<span class="_addUpload_tips">（单个附件大小不得超过10M）</span></p>
            <div class="_addUpload_box clearfix" >
                <template v-for="(file,fIndex) in item.VorcherInos">
                    <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(1, index, 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(1, index, 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(1, index, fIndex)"></span>
                    </div>
                </template>
                <div class="_pic_upload" @click="inUploadIndex = index,inUploadTrue = true">
                    <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>
          </div>
        </li>
      </ul>
    </div>
    <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 {
      msg: {
        FrID: 0,
        TemplateId: 27,
        Status: 1,
        IsPublic: 0,
        RB_Depart_Id: 0,
        RB_Branch_Id: 0,
        Description: '',
        IsHave: 1,
        emList: [],
        BankList: []
      },
      queryAccMsg: {
        pageIndex: 1,
        pageSize: 999,
        ID: 0,
        BackId: 0,
        TypeId: 0,
        BankType: 0,
        Alias: ''
      },
      AccList: [],
      accountList: [],
      shouAccList: [],
      shouAccNumList: [],
      loading: false,
      bankType: '',
      inList: [],
      outList: [],
      inUploadIndex: 0,
      inUploadTrue: false,
      imageOptions:{
        navbar:false,
        title:false
      },
      images: [],
    }
  },
  created(){
    this.initMsg()
  },
  methods:{
    clearItem: function (type, index) {
      if (type===1) { 
        this.inList[index].ID = 0
        this.inList[index].Type = ''
        this.inList[index].mode = ''
        this.inList[index].AccountId = ''
        this.inList[index].OriginalMoney = 0
        this.inList[index].Rate = 0
        this.inList[index].Money = 0
        this.inList[index].CurrencyId = ''
        this.inList[index].Description = ''
        this.inList[index].AllotDate = ''
        this.inList[index].AllotType = 1
        this.inList[index].Sort = ''
        this.inList[index].allName = ''
        this.inList[index].VorcherInos = [] 
      }else if(type===2) {
        this.outList[index].ID = 0
        this.outList[index].Type = ''
        this.outList[index].mode = ''
        this.outList[index].AccountId = ''
        this.outList[index].OriginalMoney = 0
        this.outList[index].Rate = 0
        this.outList[index].Money = 0
        this.outList[index].CurrencyId = ''
        this.outList[index].Description = ''
        this.outList[index].AllotDate = ''
        this.outList[index].AllotType = 2
        this.outList[index].Sort = ''
        this.outList[index].allName = ''
        this.outList[index].VorcherInos = []
      }
      this.$forceUpdate()
    },
    deleteItem: function (type, index) {
      if (type===1) {
        if (this.inList.length===1) {
          return this.$message.error('不能删除了！');
        } else {
          this.inList.splice(index, 1)
        }
      } else if (type===2){
        if (this.outList.length===1) {
          return this.$message.error('不能删除了！');
        } else {
          this.outList.splice(index, 1)
        }
      }
      this.$forceUpdate()
    },
    initInList: function () {
      this.inList.push({
        ID: 0,
        Type: '',
        mode: '',
        AccountId: '',
        OriginalMoney: 0,
        Rate: 0,
        Money: 0,
        CurrencyId: '',
        Description: '',
        AllotDate: '',
        AllotType: 1,
        Sort: '',
        allName: '',
        VorcherInos: []
      })
    },
    initOnList: function () {
      this.outList.push({
        ID: 0,
        Type: '',
        mode: '',
        AccountId: '',
        OriginalMoney: 0,
        Rate: 0,
        Money: 0,
        CurrencyId: '',
        Description: '',
        AllotDate: '',
        AllotType: 2,
        Sort: '',
        allName: '',
        VorcherInos: []
      })
    },
    initMsg: function (t) { 
      if(!t){
        this.initInList()
        this.initOnList()
      } else if (t===1) {
        this.initInList()
      } else if (t===2) {
        this.initOnList()
      }
      this.$forceUpdate()
    },
    GetBranchAccountList: function () {  //收款方式
      this.apipost('Financial_post_GetBranchAccountList', {}, res=>{
        if(res.data.resultCode==1){
          let List = res.data.data;
          this.AccList = List;
        }else{
          this.$message.error(res.data.message);
        }
      },err=>{})
    },
    AccountType_post_GetList: function (){  //获取收款方式类型下拉
      this.apipost('AccountType_post_GetList', {}, res=>{
        if(res.data.resultCode==1){
          let List = res.data.data;
          this.shouAccList = List;
        }else{
          this.$message.error(res.data.message);
        }
      },err=>{})
    },
    FinancialInstitutions_post_GetAccountList: function (Type, id) {
      if (!id) return
      this.queryAccMsg.TypeId = id
      this.queryAccMsg.BankType = Type
      this.apipost('FinancialInstitutions_post_GetAccountList', this.queryAccMsg, res=>{
        if(res.data.resultCode==1){
          let List = res.data.data.pageData;
          List.forEach(x => {
            x.allName = x.BackNo+"("+x.Alias+")";
          });
          this.shouAccNumList = List
        }else{
            this.$message.error(res.data.message);
        }
      },err=>{})
    },
    getAccInfo: function (i, id) {
      this.shouAccNumList.forEach(x => {
        if (x.ID === id) {
          console.log(x)
          this.inList[i].Rate = x.Rate
          this.inList[i].AccountId = x.ID
          this.inList[i].CurrencyId = x.CurrencyId
        }
      })
    },
    uploadFileBtn: function (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.uploadFile(path, newArr, x => {
        console.log(x.res.requestUrls[0])
          let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
          if (this.inUploadTrue) {
            this.inList[this.inUploadIndex].VorcherInos.push({
              Content: x.name,
              ID:0,
              Type:fileTypeNumber,
              Url:x.res.requestUrls[0].split("?")[0],
            })
          } else {
            this.outList[this.inUploadIndex].VorcherInos.push({
              Content: x.name,
              ID:0,
              Type:fileTypeNumber,
              Url:x.res.requestUrls[0].split("?")[0],
            })
          }
          this.$message.success('上传成功');
      });
    },
    deleteUploadFile: function (type, i , ind) {  // 删除上传文件
      if (type===1) {
        this.inList[i].VorcherInos.splice(ind, 1)
      } else {
        this.outList[i].VorcherInos.splice(ind, 1)
      }
    },
    showUpLoadFile(i){  // 预览上传文件
      if(i.Type==3){
        this.picIsShow= true;
        let isExsit=false
        this.images.forEach(x=>{
          if(x==i.Url)
          isExsit=true
        })
        if(!isExsit) {
          this.images.push(i.Url)
        } else {
          this.$viewer.view(this.images.indexOf(i.Url))
        }
        this.$viewer.show()
      }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)
        }
      }
    },
    inited (viewer){
      this.$viewer = viewer
    },
  },
  mounted(){
    this.GetBranchAccountList()
    this.AccountType_post_GetList()
  }
}
</script>