<template>
  <div class="app-container" >
      <div id="print" style="font-size: 18px;">
        <div style="text-align: center;font-weight: bold;font-size: 20px;">付款单</div>
        <div style="margin-top: 20px;">
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">付款单号：</div><span>{{ form.paymentNo || '无' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">最后付款日：</div> <span>{{ form.latestPayAt || '无' }}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">申请日期：</div> <span>{{ form.applicationAt || '无' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">结算方式：</div><span>{{ form.settlementType || '无' }}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">付款公司：</div><span>{{ form.supplierName || '无' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">银行户名：</div><span>{{ findBank(form.supplierBankAccount).baAccountName || '无' }}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">银行名称：</div><span>{{ findBank(form.supplierBankAccount).baBankName || '无' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">银行账号：</div><span>{{ findBank(form.supplierBankAccount).baAccountNum || '无' }}</span></div>
          </div>
          <!-- <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;">水单号：</div><span>{{form?form.accountBank:'无'}}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;">手续费：</div><span>{{form?form.accountBank:'无'}}</span></div>
          </div> -->
          <div style="display: flex;width: 80%;align-items: center;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">备注：</div><span>{{ form.notes || '无' }}</span></div>
          </div>
      </div>
      <table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse;line-height: 2 ">
          <tr>
            <th style="width: 6%;">序号</th>
            <th style="width: 15%;">自编号</th>
            <th style="width: 15%;">费用类型</th>
            <th style="width: 15%;">币别</th>
            <th style="width: 10%;">汇率</th>
            <th style="width: 15%;">发票号</th>
            <th style="width: 12%;">应付金额</th>
            <th style="width: 12%;">申请金额</th>
          </tr>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.payableNo }}</td>
            <td>
              <dict-tag
                :type="DICT_TYPE.FEE_TYPE"
                :value="item.feeType"
              ></dict-tag>
            </td>
            <td>
              <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="item.currencyId" />
            </td>
            <td>{{ item.exchangeRate }}</td>
            <td>{{ item.invoiceNumber }}</td>
            <td>{{ item.totalAmount }}</td>
            <td>{{ item.total }}</td>
          </tr>
          <tr>
            <td colspan="2">合计(大写)</td>
            <td colspan="2">{{ convertCurrency(totalMoney()) }}</td>
            <td colspan="2">合计付款</td>
            <td>{{ totalMoney() }}</td>
          </tr>
        </table>
        <div style="margin-top: 20px;">
          <div style="display: flex;width: 100%;align-items: center;">
            <div style="flex:1"><span style="width: 120px;">主管：</span></div>
            <div style="flex:1"><span style="width: 120px;">会计：</span></div>
            <div style="flex:1"><span style="width: 120px;">出纳：</span></div>
            <div style="flex:1"><span style="width: 120px;">经手人：</span></div>
          </div>
        </div>
      </div>
      <div slot="footer" class="card">
        <el-button type="primary" @click="print">确订打印</el-button>
      </div>
  </div>
</template>

<script>
  import { userList } from "@/api/system/user"
  import {DICT_TYPE} from  '@/utils/dict'
  import CustomerSelector from '@/components/CustomerSelector'
  import { getBankAccountPage } from "@/api/ecw/bankAccount";
  import { listSimpleDepts } from "@/api/system/dept"
  // import { getReceipt} from "@/api/ecw/receipt";
  import { getPaymentInfoByIds, getPaymentItem } from "@/api/ecw/financial"
  import lodop from '@/utils/lodop'

  export default {
    name: "PrintVoucher",
  components: {
     CustomerSelector
  },
    data() {
      return {
        loadings: false,
        form:{},
        title:'收款单',
         creatorData:[],
         list:[],
         fileList:[],
         bankData:[],
         params:{
           page:1,
           rows:20,
         },
        //  deptData:[],
        //  deptArr:[],
         id:0
      }
    },
    created() {
      let that = this
      if(that.$route.query.id){
        that.id = that.$route.query.id
        that.getCollectionData()
      }
      userList('salesman').then(res =>that.creatorData = res.data)
      getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
      // listSimpleDepts().then(res =>{
      //   res.data.forEach((item)=>{
      //     if(item.parentId==0){

      //       that.deptArr.push(item)

      //     }else{
      //       that.deptData.push(item)
      //     }
      //   })

      //   that.deptData.forEach((value)=>{
      //      var dept = that.deptArr.filter(itt=>itt.id==value.parentId)
      //      if(dept.length>0){
      //        value.name =dept[0].name+' | '+ value.name
      //      }

      //   })
      // })
    },
    methods: {
      getCollectionData(){
        let that = this
        getPaymentInfoByIds({id:that.id}).then(res =>{
          that.form = {
            ...res.data,
            latestPayAt: this.parseTime(res.data.latestPayAt, '{y}-{m}-{d}'),
            applicationAt: this.parseTime(res.data.applicationAt, '{y}-{m}-{d}')
          }
        })
        getPaymentItem({ id: this.id }).then(res => {
          this.list = [...res.data]
        })
      },
      print(){
        lodop().then(LODOP => {
          LODOP.PRINT_INIT();
          LODOP.SET_PRINT_STYLE("FontSize",18);
          LODOP.SET_PRINT_STYLE("Bold",1);
          // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
          // var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
          var htmlContent = "<body>"+document.getElementById("print").innerHTML+"</body>"
          LODOP.ADD_PRINT_HTM("6mm", "6mm", "RightMargin:6mm", "BottomMargin:6mm", htmlContent);
          LODOP.PRINT();
          // this.$alert('已发起打印任务');
          // LODOP.PREVIEW(); // 预览
          /* LODOP.PRINTA(); // 选择打印机
            // 直接打印 */
          console.log('打印哦')
        }).catch(err => {
          console.error('lodop异常', err)
          alert('请检查LODOP打印控件是否安装并启动');
        })
      },
      findBank(val) {
        const t = this.bankData.find(v => v.id == val)
        return t || {}
      },
      totalMoney() {
        const t = this.list.map(v => v.total).reduce((prev, curr) => {
          return prev + curr;
        }, 0)
        return t
      },
      convertCurrency(money) {
        //汉字的数字
        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
        //基本单位
        var cnIntRadice = new Array('', '拾', '佰', '仟');
        //对应整数部分扩展单位
        var cnIntUnits = new Array('', '万', '亿', '兆');
        //对应小数部分单位
        var cnDecUnits = new Array('角', '分', '毫', '厘');
        //整数金额时后面跟的字符
        var cnInteger = '整';
        //整型完以后的单位
        var cnIntLast = '元';
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = '';
        //分离金额后用的数组，预定义
        var parts;
        // 传入的参数为空情况 
        if(money === '') {
          return '';
        }
        money = parseFloat(money)
        if(money >= maxNum){
          return ''
        }
        // 传入的参数为0情况 
        if (money === 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
          return chineseStr
        }
        // 转为字符串
        money = money.toString();
        // indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
        if (money.indexOf('.') == -1) {
          integerNum = money;
          decimalNum = ''
        }else{
          parts = money.split('.');
          integerNum = parts[0];
          decimalNum = parts[1].substr(0,4);
        }
        //转换整数部分
        if(parseInt(integerNum,10) > 0){
          let zeroCount  = 0;
          let IntLen = integerNum.length
          for(let i = 0; i < IntLen; i++){
            let n = integerNum.substr(i,1);
            let p = IntLen - i - 1;
            let q = p / 4;
            let m = p % 4;
            if( n == '0'){
              zeroCount ++ ;
            }else{
              if(zeroCount > 0){
                  chineseStr += cnNums[0]
              }
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if(m == 0 && zeroCount < 4){
              chineseStr += cnIntUnits[q]; 
            }
          }
          // 最后+ 元
          chineseStr += cnIntLast;
        }
        // 转换小数部分
        if(decimalNum != ''){
          let decLen = decimalNum.length;
          for(let i = 0; i <decLen; i++){
            let n = decimalNum.substr(i,1);
            if(n != '0'){
              chineseStr += cnNums[Number(n)] + cnDecUnits[i]
            }
          }
        }
        if(chineseStr == ''){
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        }else if(decimalNum == ''){
          chineseStr += cnInteger;
        }
        return chineseStr
      },
    },

  }
</script>

<style scoped id="printStyle">
  .card{
    margin-top: 20px;
  }
  .dialog-footer{
    padding: 40px;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
      text-align: center;
  }
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .lastRow{
    border-top:1px solid #dfe6ec;
    display: flex;
    width: 100%;
    height: 44px;
    text-align: center;
    align-items: center;
  }
  .lastRow div{
    height: 44px;
    line-height: 44px;
    border-right:1px solid #dfe6ec;
  }
</style>