<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"><span style="width: 120px;text-align: right;">部门：</span><span>{{form?form.departmentName:'无'}}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><span style="width: 120px;text-align: right;">收款单号：</span><span>{{form?form.receiptNo:'无'}}</span></div>
            <div style="flex:1"><span style="width: 120px;text-align: right;">收款日期：</span><span>{{form?form.payedAt:'无'}}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><span style="width: 120px;text-align: right;">客户名称：</span><span>{{form?form.customerName:'无'}}</span></div>
            <div style="flex:1"><span style="width: 120px;text-align: right;">收款户名：</span><span>{{form?form.platformAccount:'无'}}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><span style="width: 120px;text-align: right;">银行名称：</span><span>{{form?form.accountBank:'无'}}</span></div>
            <div style="flex:1"><span style="width: 120px;text-align: right;">银行账号：</span><span>{{form?form.accountBank:'无'}}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><span style="width: 120px;text-align: right;">水单号：</span><span>{{form?form.accountBank:'无'}}</span></div>
            <div style="flex:1"><span style="width: 120px;text-align: right;">手续费：</span><span>{{form?form.accountBank:'无'}}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;">
            <div style="flex:1"><span style="width: 120px;text-align: right;">备注：</span><span>{{form?form.accountBank:'无'}}</span></div>
          </div>
      </div>
      <table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse; ">
          <tr>
            <th style="width: 8%;">序号</th>
            <th style="width: 12%;">订单号</th>
            <th style="width: 18%;">收入类型</th>
            <th style="width: 22%;">品名</th>
            <th style="width: 8%;">汇率</th>
            <th style="width: 12%;">总金额</th>
            <th style="width: 20%;">实收金额</th>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td colspan="2">合计(大写)</td>
            <td colspan="2">$80</td>
            <td colspan="2">价税合计</td>
            <td>$80</td>
          </tr>
        </table>
  <!--      <el-table-column label="序号" align="center" min-width="80">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
          <el-table-column min-width="120" label="订单号" align="center" prop="orderNo" />
          <el-table-column label="收入类型" align="center" min-width="180">
            <template slot-scope="scope">
               <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="scope.row.paymentType"></dict-tag>
            </template>
          </el-table-column>
            <el-table-column label="品名" align="center" prop="orderNo" min-width="220" />
            <el-table-column label="汇率" align="center" prop="totalAmount" min-width="80" />
          <el-table-column label="总金额" align="center" prop="toDepartureId" min-width="120" />
          <el-table-column label="实收金额" align="center" prop="toDepartureId"  min-width="200"/>
          <div  slot="append" class="lastRow">
               <div style="min-width: 200px;width: 20%;">合计(大写)</div>
               <div style="min-width: 400px;width: 40%;">111</div>
               <div style="min-width: 200px;width: 20%;">价税合计</div>
               <div style="min-width: 200px;width: 20%;">444</div>
           </div>
        </el-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 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
        getReceipt({id:that.id}).then(res =>{
          that.form = 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打印控件是否安装并启动');
          })
      }
    },

  }
</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>
