<template>
    <div class="home_wrapper">
        <div class="header_main">
            明细账
            <div class="return_btn" @click="onClickLeft"></div>
        </div>
        <!---期间-->
        <div class="period_main">
            <div class="bt_title">
                <div class="icon"></div>
                <div class="title">期间</div>
            </div>
            <div class="calendar_block" @click="startDateClick">{{queryParams.startDate.replace('-','年')}}月</div>
            <div class="to">至</div>
            <div class="calendar_block" @click="endDateClick">{{queryParams.endDate.replace('-','年')}}月</div>
        </div>
        <!--科目-->
        <div class="subject_main">
            <div class="bt_title">
                <div class="icon"></div>
                <div class="title">科目</div>
            </div>
            <div class="subject_block" @click="subjectClick">
                <div class="title">{{subjectText}}</div>
                <div class="xs_icon"></div>
            </div>
        </div>
        <!--内容-->
        <div class="center_box">
            <div class="vocher_name">
                <van-row class="head_m">
                    <van-col :span="14" class="year_m">
                        <div class="year_text">2022</div>
                        <div class="unit_m">
                            <div class="ubs">月</div>
                            <div class="ubs">日</div>
                        </div>
                    </van-col>
                    <van-col :span="10" class="credential_m">凭证字</van-col>
                </van-row>
                <van-row class="vocher_mTitle" v-for="(item,index) in tableList" :key="index">
                    <van-col :span="7">{{item.month}}</van-col>
                    <van-col :span="7">{{item.day}}</van-col>
                    <van-col :span="10">
                        <div class="pz_tx" @click="subjectNameFun(item.voucherWordNum)">{{item.voucherWordNum}}</div>
                    </van-col>
                </van-row>
                <!-- <van-row class="vocher_mTitle">
                    <van-col :span="7">09</van-col>
                    <van-col :span="7">09</van-col>
                    <van-col :span="10">
                        <div class="pz_tx">记-06</div>
                    </van-col>
                </van-row> -->
           
            </div>
            <div class="vocher_content">
                <div class="vocher_cmain">
                    <van-row class="head_m">
                        <van-col :span="9">摘要</van-col>
                        <van-col :span="4">借方</van-col>
                        <van-col :span="4">贷方</van-col>
                        <van-col :span="3">方向</van-col>
                        <van-col :span="4">余额</van-col>
                    </van-row>
                    
                    <div class="content_m">
                        <van-row  v-for="(item,index) in tableList" :key="index">
                            <van-col :span="9" class="zy">
                                <span>{{item.voucherSummary}}</span>
                            </van-col>
                            <van-col :span="4" class="je">{{item.jieAmount}}</van-col>
                            <van-col :span="4" class="je">{{item.daiAmount}}</van-col>
                            <van-col :span="3" class="km">{{item.balanceDirection}}</van-col>
                            <van-col :span="4" class="je">{{item.balance}}</van-col>
                        </van-row>
                        <!-- <van-row >
                            <van-col :span="9" class="zy">摘要</van-col>
                            <van-col :span="4" class="je">200.00</van-col>
                            <van-col :span="4" class="je">20000.00</van-col>
                            <van-col :span="3" class="km">借</van-col>
                            <van-col :span="4" class="je">200.00</van-col>
                        </van-row> -->
                   

                    </div>
                </div>
            </div>
        </div>
 
        <!--开始日期-->
        <van-action-sheet v-model="dateObj.startVisbile" duration="0.2" >
            <van-datetime-picker
                v-model="dateObj.startDate"
                title="选择日期"
                :min-date="dateObj.minDate"
                :max-date="dateObj.maxDate"
                @confirm="startConfirm"
                @cancel	="startCancel"
                type="year-month"
            />
        </van-action-sheet>
        <!--结束日期-->
        <van-action-sheet v-model="dateObj.endVisbile" duration="0.2" >
            <van-datetime-picker
                v-model="dateObj.endDate"
                title="选择日期"
                :min-date="dateObj.minDate"
                :max-date="dateObj.maxDate"
                @confirm="endConfirm"
                @cancel	="startCancel"
                type="year-month"
            />
        </van-action-sheet>
        <!--科目选择-->
        <van-action-sheet v-model="dateObj.subjectVisbile"  duration="0.2">
            <van-cascader
                v-model="cascaderValue"
                title="请选择所在科目"
                :options="subjectsTree"
                @close="dateObj.subjectVisbile = false"
                @finish="onFinish"
                :field-names="fieldNames"
    
                @change="onChangeAcidentArea"
            />
        </van-action-sheet>



    </div>
</template>
<script>
import { subjectData ,getLoginBook,listNormalDetails} from "@/api/sunVillage_info/fixedAssets";
export default {
  name: "detailedLedger",
  data() {
    return{
        //数据
        tableList:[],
        // 查询参数
        queryParams: {
            startDate:'', //开始日期
            endDate:'',   //结束日期
            startSubjectId:'', //开始科目
            endSubjectId:'', //结束科目

            startSubjectLevel: 1,
            endSubjectLevel: 4,
            filterZero: true,
            includeNonVoucher: false,
            groupBySubject: true
        },
        //日期相关
        dateObj:{
            //开始日期-弹窗显隐
            startVisbile:false,
            startDate: new Date(),
            minDate:new Date(2018, 0, 1),
            maxDate:new Date(2028, 5, 1),
            //结束日期-弹窗显隐
            endVisbile:false,
            endDate:new Date(),
            //科目选择
            subjectVisbile:false
        },
        subjectText:'', //科目页面显示
        SubjectsList:[], //科目选项
        subjectsTree: [], //会计科目显示列表(树)
        cascaderValue:"", //科目选择
        fieldNames: {
            text: 'label',
            value: 'subjectId',
            children: 'children',
        },
        subjectYear:''
    }
  },
  mounted(){
    //初始化账套
    this.initLoginBook();

    this.initAxios()
  },
  methods:{
    initLoginBook(){
        getLoginBook().then((res) => {
            if (res.code == 200) {
                let currentDays = res.data.currentDay;
                if (currentDays == null) {
                    this.$notify({
                        message:'当前账套未开启!',
                        type: 'error'
                    });
                    return false;
                }
                this.$set(this.queryParams, "startDate", currentDays);
                this.$set(this.queryParams, "endDate", currentDays);

                let dataArr = currentDays.split('-')
                this.$set(this.dateObj, "startDate", new Date(dataArr[0], dataArr[1]-1), 1);
                this.$set(this.dateObj, "endDate", new Date(dataArr[0], dataArr[1]-1), 1);

                this.subjectYear = (currentDays.substr(0, 4));
            }
        })
    },
    initAxios(){
        //获取会计科目列表数据
      this.getDicts("subject_type").then((resp) => {
        subjectData({year:this.subjectYear}).then((res) => {
          res.rows.forEach((x) => {
            x.label = x.subjectId + ' ' + x.subjectName
          });
          this.SubjectsList = res.rows;

          let curObj = res.rows[0];
          if(res.rows.length>0){
            this.subjectText = curObj.label; 
            this.queryParams.startSubjectId = curObj.subjectId; 
            this.queryParams.endSubjectId = curObj.subjectId; 
            this.cascaderValue =  curObj.subjectId; 
            
            this.initPage()
            this.makeSubjectsTree(res.rows, resp.data);
            }else{
                this.subjectText = '暂无数据'; 
            }
        });
      });
    },
    subjectClick(){
        this.dateObj.subjectVisbile = true
    },
    makeSubjectsTree(SubjectsList, subjectTypes) {
      let func = (pid) => {
        let arr = null;
        for(let v of SubjectsList)
        {
          let parentId = v.parentId || v.subjectId.substr(0, v.subjectId.length - 3) || null;
          if(parentId == pid)
          {
            if(!arr) arr = [];
            let a = func(v.subjectId);
            if(a)
              v.children = a;
            v.label = v.subjectId + ' ' + v.subjectNameAll;
            v.is_last = 'Y';
            v.disabled = false;
          
            arr.push(v);
          }
        }
        return arr;
      };
      let res = func(null);
      let r = [];
      res.forEach((x) => {
        let subjectIdStart = x.subjectId[0];
        let item = r.find((y) => y.subjectId == subjectIdStart);
        if(!item)
        {
          let type = subjectTypes.find((y) => y.dictValue == subjectIdStart);
          if(!type)
            return;
          item = {
            subjectId: type.dictValue,
            label: type.dictLabel,
            sortFlag: type.dictSort,
            is_last: 'N',
            subjectNameAll: '',
            children: [],
            disabled: true
          };
          r.push(item);
        }
        item.children.push(x);
      });
      r.sort((a, b) => a.dictSort - b.dictSort);
    //   console.log(r)
      this.subjectsTree = r;
     
    },
    initPage(){
        listNormalDetails(this.queryParams).then((res)=>{
            if(res.code == 200){
                let content = res.rows;
                if(content.length>0){
                    this.tableList = content[0].list;
                }else{
                    this.tableList = []
                }
            }
        })
    },
    subjectNameFun(num){
        let endNum = num.split("-");
        this.$router.push({
            path: "/yinnong/detailedVoucher",
            query: {
                vocherId: endNum[1],
                num:encodeURI(num)
            },
        });
    },
    onFinish({ selectedOptions }){
        let lastArr = selectedOptions[selectedOptions.length-1];
        this.queryParams.startSubjectId = lastArr.subjectId
        this.queryParams.endSubjectId = lastArr.subjectId
        this.subjectText = lastArr.label;
        this.initPage();
        this.dateObj.subjectVisbile = false
    },
    onChangeAcidentArea(aaa){
        // console.log(aaa)
    },
    //点击开始日期--显示弹窗
    startDateClick(){
        this.dateObj.startVisbile = true;
    },
    //弹窗-开始日期-确定
    startConfirm(value){
        let years = this.format(value,'yyyy');
        let months = this.format(value,'MM');
        this.queryParams.startDate = years+'-'+months;


        this.dateObj.startVisbile = false;
        this.initPage();
    },
    //弹窗-开始日期-取消
    startCancel(){
        this.dateObj.startVisbile = false;
        this.dateObj.endVisbile = false;
    },
    //点击结束日期-显示弹窗
    endDateClick(){
        this.dateObj.endVisbile = true;
    },
    //弹窗--结束日期-确定
    endConfirm(value){
        let years = this.format(value,'yyyy');
        let months = this.format(value,'MM');
        this.queryParams.endDate = years+'-'+months;


        this.dateObj.endVisbile = false;
        this.initPage();
    }
 
  }
}
</script>
<style scoped lang="scss">
.home_wrapper{
   background: #e9e9e9;
   min-height: 100vh;
   width: 100vw;
   .header_main {
       height: 116px;
       background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
       background-size: 100% 100%;
       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;
       }

   }
   .period_main{
        padding:28px 22px 0;
        display: flex;
        align-items: center;
        .bt_title{
            display: flex;
            align-items: center;
            margin-right: 15px;
            .icon{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 4px 0px 7px rgba(63, 68, 75, 0.1);
                background:#2facfe url('../../assets/images/sunVillage_info/list_icon_13.png') center center no-repeat;
                background-size: 29px 25px;
                margin-right: 12px;
            }
            .title{
                font-size: 30px;
                color: #2facfe;
            }
        }
        .calendar_block{
            flex: 1;
            border-radius: 8px;
            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
            background: #fff;
            height: 64px;
            font-size: 30px;
            display: flex;
            align-items: center;
            letter-spacing: 2px;
            justify-content: center;
        }
        .to{
            width: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #868686;
        }
   }
   .subject_main{
        padding:20px 22px 0;
        display: flex;
        align-items: center;
        .bt_title{
            display: flex;
            align-items: center;
            margin-right: 15px;
            .icon{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 4px 0px 7px rgba(63, 68, 75, 0.1);
                background:#2facfe url('../../assets/images/sunVillage_info/list_icon_13.png') center center no-repeat;
                background-size: 29px 25px;
                margin-right: 12px;
            }
            .title{
                font-size: 30px;
                color: #2facfe;
            }
        }
        .subject_block{
            flex: 1;
            border-radius: 8px;
            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
            background: #fff;
            height: 64px;
            display: flex;
            padding:0 26px 0 22px;
            align-items: center;
            justify-content: space-between;
            .title{
                width: 475px;
                height: 64px;
                line-height: 64px;
                font-size: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #2b2b2b;
            }
            .xs_icon{
                width: 11px;
                height: 23px;
                background: url('../../assets/images/sunVillage_info/list_icon_12.png') center center no-repeat;
                background-size: 100% 100%;
            }
        }
   }
   .center_box{
    margin-left: 22px;
    display: flex;
    margin-top: 22px;
    background: #fff;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    .vocher_name{
        width: 405px;
        .head_m{
            height: 110px;
            background: #2facfe;
            border-radius: 8px;
            .year_m{
                border-right: 1px solid #fff;
                .year_text{
                    height: 56px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: 30px;
                }
                .unit_m{
                    height: 54px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-bottom: 10px;
                    .ubs{
                        width: 94px;
                        height: 43px;
                        background: #cbeaff;
                        font-size: 30px;
                        color: #1a84c9;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        &:nth-child(1){
                            margin-right: 12px;
                        }
                    }
                }
            }
            .credential_m{
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 30px;
                height: 110px;
            }
        }
        .vocher_mTitle{
            background: #d7e8f3;
            .van-col{
                height: 84px;
                font-size: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-right: 1px solid #fff;
                .pz_tx{
                    color: #278dff;
                    padding-bottom: 8px;
                    border-bottom: 1px solid #278dff;
                }
            }
            &:nth-child(2n-1){
                background: #e3f4ff;
            }
        }

    }
    .vocher_content{
        flex: 1;
        overflow:hidden;
        overflow-x: scroll;
        // white-space:nowrap;
        display: -webkit-box;
        -webkit-overflow-scrolling: touch;
        .vocher_cmain{
            width: 1200px;
            .head_m{
                .van-col{
                    height: 110px;
                    font-size: 30px;
                    color: #2facfe;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #bfbfbf;
                    &:last-child{
                        border-right: 0;
                    }
                }

            }
            .content_m{
                
                .van-row{
               
                    &:nth-child(2n-1){
                        background: #e9e9e9;
                    }
                }
                .van-col{
                    height: 84px;
                    font-size: 30px;
                    padding:0 22px;
                    display: flex;
                    align-items: center;
                    border-right: 1px solid #bfbfbf;
                    &:last-child{
                        border-right: 0 none;
                    }
                    &.zy{
                        display: flex;
                        align-items: center;
                        span{
                            position: relative;
                            overflow: hidden;
                            text-overflow: -o-ellipsis-lastline;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                    &.je{
                        justify-content: flex-end;
                    }
                    &.km{
                        justify-content: center;
                    }
                }
                
            }
        }

    }
   }
}
</style>