<template>
    <div class="home_wrapper">
        <div class="head_main">
            <div class="header_main">
                记账凭证
                <div class="return_btn" @click="onClickLeft"></div>
            </div>
            <div class="Account_sleeve">
                <div class="flex_block">
                    <div class="x_m"></div>
                    <div class="title">账套：</div>
                    <div class="desc">{{$store.state.user.bookName}}</div>
                </div>
                <div class="flex_block">
                    <div class="x_m"></div>
                    <div class="title">日期：</div>
                    <div class="desc">{{vaocherObj.bookDate}}</div>
                </div>
                <div class="flex_block">
                    <div class="x_m"></div>
                    <div class="title">凭证号：</div>
                    <div class="desc">{{voucherNum}}号</div>
                </div>
            </div>
        </div>
        <div class="vocher_mian">
            <div class="minimum_hd">{{vaocherObj.detailList.length}}条</div>
            <!--1-->
            <div class="vocher_block" v-for="(item,index) in vaocherObj.detailList" :key="index">
                <div class="flex_block">
                    <div class="m_title">
                        <div class="icon">1</div>
                        摘要
                    </div>
                    <div class="m_cont">{{item.voucherSummary}}</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">会计科目</div>
                    <div class="m_cont">{{ item.subjectNameAll }}</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">借方金额</div>
                    <div class="m_cont money" v-if="item.jieAmount">¥ {{item.jieAmount}} 元</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">贷方金额</div>
                    <div class="m_cont money" v-if="item.daiAmount">¥ {{item.daiAmount}} 元</div>
                </div>
            </div>
            <!--1-->
            <!-- <div class="vocher_block">
                <div class="flex_block">
                    <div class="m_title">
                        <div class="icon">1</div>
                        摘要
                    </div>
                    <div class="m_cont">购买设备</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">会计科目</div>
                    <div class="m_cont">财政资金-人居环境整治</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">借方金额</div>
                    <div class="m_cont money">¥ 10,000.00 元</div>
                </div>
                <div class="flex_block">
                    <div class="m_title">贷方金额</div>
                    <div class="m_cont money">¥ 10,000.00 元</div>
                </div>
            </div> -->
        </div>

        <div class="vocher_footer">
            <div class="total_wrap">合计：<span class="money">{{capitalAmount}}</span></div>
            <div class="personnel_wrap">
                <div class="f_block">制单员：{{ vaocherObj.preparedBy }}</div>
                <div class="f_block">审核员：{{ vaocherObj.checkedBy }}</div>
            </div>
        </div>
       
    </div>
</template>
<script>
import { voucherDetail } from "@/api/sunVillage_info/fixedAssets";
export default {
  name: "sunVillageInfoVoucher",
  data() {
    return {
        //凭证号
        voucherId:'',
        voucherNum:'',
        //凭证数据
        vaocherObj:{
            detailList:[]
        },
        //大写总金额
        capitalAmount:''
    }
  },
  mounted(){
    this.voucherId =  this.$route.query.vocherId;
    this.voucherNum = decodeURI(this.$route.query.num);
    this.initAxiox()
  },
  methods:{
    initAxiox(){
        voucherDetail({id:this.voucherId}).then((res)=>{
            if(res.code == 200){
                let content = res.data;
                this.vaocherObj = content;
                let totalAmount = 0;
                if(content.detailList.length && content.detailList.length>0){
                    content.detailList.forEach((v,i)=>{
                        totalAmount +=v.jieAmount
                    })
                }
                this.capitalAmount = this.convertCurrency(totalAmount);
            }
        })
    },
    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 "";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //转换为字符串
      money = money.toString();
      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) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var 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 != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var 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 lang="scss">
.home_wrapper{
   background: #e9e9e9;
   min-height: 100vh;
   width: 100vw;
   .head_main{
        height: 440px;
        background: url('../../assets/images/sunVillage_info/vocher_bg.png') no-repeat;
        background-size: 100% 100%;
        .header_main {
                height: 116px;
                // position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                font-size: 36px;
                line-height: 116px;
                text-align: center;
                color: #fff;
                position: relative;

                .return_btn {
                    width: 24px;
                    height: 43.2px;
                    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
                    background-size: 20px 36px;
                    position: absolute;
                    left: 38px;
                    top: 36px;
                }

        }
        .Account_sleeve{
            padding-left: 75px;
            margin-top: 20px;
            .flex_block{
                padding-left: 30px;
                display: flex;
                font-size: 30px;
                line-height: 30px;
                color: #fff;
                margin-bottom: 28px;
                position: relative;
                .x_m{
                    position: absolute;
                    width: 8px;
                    height: 30px;
                    left: 0;
                    top: 0;
                    background: #fff;
                    border-radius: 8px;
                }
                .title{
                    width: 125px;
                }
            }
        }







        // <div class="Account_sleeve">
        //         <div class="flex_block">
        //             <div class="title">账套：</div>
        //             <div class="desc">长山镇李四村经济合作社</div>
        //         </div>
        //         <div class="flex_block">
        //             <div class="title">日期：</div>
        //             <div class="desc">2022-02-03</div>
        //         </div>
        //         <div class="flex_block">
        //             <div class="title">凭证号：</div>
        //             <div class="desc">记-55号</div>
        //         </div>
        //     </div>
   }
   .vocher_mian{
        margin:-120px 28px 0;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        border-radius: 20px;
        padding:  40px 40px 60px;
        .minimum_hd{
            background: #2FACFE;
            padding:0 22px;
            height: 50px;
            color: #fff;
            line-height: 50px;
            border-radius: 50px;
            font-size: 30px;
            display: inline-block;

        }
        .vocher_block{
            padding-top: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #DCDCDC;
            .flex_block{
                display: flex;
                justify-content: space-between;
                height: 60px;
                font-size: 30px;
                .m_title{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #878787;
                
                    .icon{
                        height: 38px;
                        width: 38px;
                        background: #2FACFE;
                        border-radius: 50%;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 12px;

                    }
                }
                .money{
                    color: #E90000;
                }
            }
        }
   }
   .vocher_footer{
        margin:0 28px;
        padding: 38px 0;
        font-size: 30px;
        border-bottom: 1px dashed #dedede;
        .total_wrap{
            margin:0 45px;
            // height: 60px;
            padding:18px 0;
            // line-height: 60px;
            display: flex;
            align-items: center;
          
            .money{
                color: #f00;
            }
        }
        .personnel_wrap{
            margin:0 45px;
            height: 50px;
            line-height: 50px;
            color: #2FACFE;
            justify-content: space-between;
            display: flex;
        }

        // <div class="vocher_footer">
        //     <div class="total_wrap">合计：<span class="money">贰万元整</span></div>
        //     <div class="personnel_wrap">
        //         <div class="f_block">制单员：张三</div>
        //         <div class="f_block">审核员：王五</div>
        //     </div>
        // </div>
   }
}
</style>