{extend name="common/common2" /}
{block name="main"}

<style>
    a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus{
        background-color: #148d8f !important;
        border-color: #148d8f !important;
    }
</style>

<div id="feeapp">
    <div class="panel panel-default">
        <div class="panel-heading">
            收费科目
            <div class="btn-group pull-right">
                <a href="javascript:history.go(-1);">返回</a>
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12" style="padding-bottom: 20px;">
                    业主：{$owner['name']} &nbsp;&nbsp;
                    联系电话：{$owner['phone']} &nbsp;&nbsp;
                    类型：{if $owner['type'] == 1}住户{else}租户{/if}
                </div>
                <div class="col-xs-3" style="min-height: 200px">
                    <div class="list-group">
                        <a v-for="(item,index) in lists" :key="index" href="javascript:;" @click="selectData(item)" class="list-group-item" :class="curData&&curData.type == item.type&&curData.id == item.id?'active':''">
                            <span v-if="item.cate == 1">[住房] </span>
                            <span v-if="item.cate == 2">[商铺] </span>
                            <span v-if="item.cate == 3">[营业房] </span>
                            <span v-if="item.cate == 4">[储藏室] </span>
                            <span v-if="item.cate == 5">[停车位] </span>
                            {{item.title}}
                            <span v-if="item.c_type > 0">({{item.c_type_name}})</span>
                        </a>
                    </div>
                </div>
                <div class="col-xs-3" style="min-height: 200px">
                    <div class="list-group" v-if="curData && curData.fee.length > 0">
                        <a v-for="(item,index) in curData.fee" :key="index" href="javascript:;" @click="selectFee(item)" class="list-group-item"  :class="curFee&&curFee.id == item.id?'active':''">
                            [{{item.parent_title}}] {{item.title}}
                        </a>
                    </div>
                </div>
                <div class="col-xs-6" style="min-height: 200px">
                    <!--                <p><strong>收费详情</strong></p>-->
                    <table class="table" v-if="curData && curFee">
                        <tr v-if="curFee.area == 1">
                            <td style="width: 100px;">产权面积</td>
                            <td>{{curData.area}}</td>
                        </tr>
                        <tr>
                            <td>基本单价</td>
                            <td>{{curFee.price}}元</td>
                        </tr>
                        <tr v-if="curFee.area != 0 || curFee.cycle != 0">
                            <td>计算公式</td>
                            <td v-if="curFee.area == 1">基本单价*产权面积</td>
                            <td v-if="curFee.area == 0">基本单价</td>
                        </tr>
                        <tr v-if="curFee.cycle == 1 && curFee.end">
                            <td>最近缴费日期</td>
                            <td>
                                {{curFee.start}} ~ {{curFee.start}}
                            </td>
                        </tr>
                        <tr v-if="curFee.cycle == 1 && curFee.end">
                            <td>历史收费金额</td>
                            <td>
                                {{curFee.tmoney}}
                            </td>
                        </tr>
                        <tr v-if="curFee.cycle == 1">
                            <td>起止日期</td>
                            <td>
                                <input type="date" v-model="start" max="2100-01-01"> ~ <input type="date" v-model="end" max="2100-01-01">
                                <!--<el-date-picker
                                    v-model="date"
                                    type="daterange"
                                    size="small"
                                    value-format="yyyy-MM-dd"
                                    @change="changeDate"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>-->
                            </td>
                        </tr>
                        <tr>
                            <td>总金额</td>
                            <td>{{totalPrice}}元</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td>
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入"
                                        v-model="remark">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <button type="button" @click="saveBtn" class="btn btn-sm btn-primary">保存数据</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">收费明细</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12">
                    <table class="table">
                        <tr>
                            <th>资源名称</th>
                            <th>科目名称</th>
                            <th>应收金额</th>
                            <th>起止日期</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in selData" :key="index">
                            <td>
                                <span v-if="item.cate == 1">[住房] </span>
                                <span v-if="item.cate == 2">[商铺] </span>
                                <span v-if="item.cate == 3">[营业房] </span>
                                <span v-if="item.cate == 4">[储藏室] </span>
                                <span v-if="item.cate == 5">[停车位] </span>
                                {{item.title}}
                            </td>
                            <td>[{{item.fee_parent_title}}] {{item.fee_title}}</td>
                            <td>{{item.total_price}}</td>
                            <td v-if="item.start">{{item.start}} ~ {{item.end}}</td>
                            <td v-if="!item.start"></td>
                            <td>{{item.remark}}</td>
                            <td>
                                <button type="button" @click="delSelectData(index)" class="btn btn-xs btn-danger">删除</button>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <form class="form-inline">
                            <div class="form-group">
                                <label>最晚缴费日期 <span class="text-danger">*</span></label>
                                <el-date-picker
                                        v-model="lastDate"
                                        type="date"
                                        size="small"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <button type="button" @click="submitOrder" class="btn btn-sm btn-primary">生成缴费单</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="script"}

<script>
    var lists = {:json_encode($lists)};
    var houseId = "{$houseId}";
    var vm = new Vue({
        el: '#feeapp',
        data: {
            lists: lists,
            curData: null,
            curFee: null,
            curRet: null,
            date: '',
            remark: '',
            totalPrice: 0,
            selData: [],
            lastDate: '',
            flag: false,
            houseId: houseId,
            start: '',
            end: '',
        },
        computed: {

        },
        watch: {
            start(val,oldVal){
                this.calculationPrice();
            },
            end(val, oldVal){
                this.calculationPrice();
            }
        },
        created: function () {
            this.initDate();
        },
        methods: {
            initDate(){
                var nowDate = new Date();
                var fullYear = nowDate.getFullYear();
                var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
                var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
                var endDate = this.getFullDate(nowDate.setDate(endOfMonth));//当月最后一天
                var startDate = this.getFullDate(nowDate.setDate(1));//当月第一天
                this.date = [startDate,endDate];
                this.start = startDate;
                this.end = endDate;
            },
            calculationPrice(){ // 计算总金额
                this.date = [this.start,this.end];
                let price = Number(this.curFee.price);
                let tPrice = price;
                this.curFee.MONTHS = [];
                if(this.curFee.cycle == 1){ //按周期算
                    tPrice = 0;
                    if(this.date){
                        let months = this.getMonthBetween(this.date[0],this.date[1]);
                        console.log('months',months);
                        if(months.length == 1){ //不跨月
                            let day = this.getDaysBetween(this.date[0],this.date[1]);
                            tPrice = Number(tPrice) + (Number(price)/months[0].days) * day;
                            this.curFee.MONTHS.push({
                                year: months[0].year,
                                month: months[0].month,
                                money: (Number(price)/months[0].days) * day
                            });
                        }else{
                            for (let o in months){
                                let start = this.date[0];
                                let end = this.date[1];
                                let pri = 0;
                                if(start >= months[o].start){
                                    let sarr = start.split('-');
                                    let day = months[o].days - Number(sarr[2]) + 1;
                                    tPrice = Number(tPrice) + (Number(price)/months[o].days) * day;
                                    pri = (Number(price)/months[o].days) * day;
                                }
                                if(end <= months[o].end){
                                    let earr = end.split('-');
                                    let day = Number(earr[2]);
                                    tPrice = Number(tPrice) + (Number(price)/months[o].days) * day;
                                    pri = (Number(price)/months[o].days) * day;
                                }
                                if(start < months[o].start && end > months[o].end){
                                    tPrice = Number(tPrice) + Number(price);
                                    pri = Number(price);
                                }

                                this.curFee.MONTHS.push({
                                    year: months[o].year,
                                    month: months[o].month,
                                    money: pri.toFixed(2)
                                });
                            }
                        }
                    }else{
                        tPrice = 0;
                    }
                }
                if(this.curFee.area == 1){ //按面积算
                    tPrice = Number(tPrice) * Number(this.curData.area);
                    for(let o in this.curFee.MONTHS){
                        this.curFee.MONTHS[o].money = (Number(this.curFee.MONTHS[o].money) * Number(this.curData.area)).toFixed(2);
                    }
                }
                if(this.curFee.cycle == 0 && this.curFee.area == 0){
                    tPrice = price;
                }
                this.totalPrice = Number(tPrice).toFixed(2);
                console.log('change',this.totalPrice,this.curFee);
            },
            selectData(item){
                this.curData = item;
                this.curFee = null;
                this.curRet = null;
            },
            selectFee(item){
                this.curFee = item;
                this.curRet = null;
                this.remark = '';
                if(item.cycle == 1){
                    this.initDate();
                }else{
                    this.date = '';
                }

                this.calculationPrice();
            },
            changeDate(){
                this.calculationPrice();
            },
            saveBtn(){
                // 先检查是否有该科目的单子，有提示错误
                for(let o in this.selData){
                    if(this.curData.type == this.selData[o].type && this.curData.id == this.selData[o].id && this.curFee.id == this.selData[o].fee_id){
                        this.$message.error('该科目已存在记录');
                        return false;
                    }
                }

                this.selData.push({
                    type: this.curData.type,
                    cate: this.curData.cate,
                    id: this.curData.id,
                    title: this.curData.title,
                    area: this.curData.area,
                    fee_id: this.curFee.id,
                    fee_title: this.curFee.title,
                    fee_parent_title: this.curFee.parent_title,
                    price: this.curFee.price,
                    months: this.curFee.MONTHS,
                    total_price: this.totalPrice,
                    start: this.start,
                    end: this.end,
                    remark: this.remark
                });
            },
            delSelectData(index){
                let oldoptions = JSON.parse(JSON.stringify(this.selData));
                let newoptions = [];
                for(let o in oldoptions){
                    if(o != index){
                        newoptions.push(oldoptions[o]);
                    }
                }
                this.selData = JSON.parse(JSON.stringify(newoptions));
            },
            submitOrder(){ //生成欠费单
                if(this.selData.length == 0){
                    this.$message.error('请选择收费科目');
                    return false;
                }
                if(!this.lastDate){
                    this.$message.error('请选择最晚缴费日期');
                    return false;
                }
                if(this.flag){
                    return false;
                }
                this.flag = true;

                let that = this;

                $.ajax({
                    type: 'POST',
                    url: '{:url("feeSave")}',
                    dataType: 'json',
                    data:{
                        houseId: this.houseId,
                        lastDate: this.lastDate,
                        order: JSON.stringify(this.selData)
                    },
                    success: function(res){
                        if(res.code == 1){
                            window.location.href = '{:url("HousePay/detail",[],"")}/id/'+res.data.id;
                        }else{
                            that.$message.error(res.msg);
                            that.flag = false;
                        }
                    },
                    error: function(){
                        that.$message.error('操作失败');
                        that.flag = false;
                        return false;
                    }
                });

            },
            getFullDate(targetDate) { // 获取时间
                var D, y, m, d;
                if (targetDate) {
                    D = new Date(targetDate);
                    y = D.getFullYear();
                    m = D.getMonth() + 1;
                    d = D.getDate();
                } else {
                    y = fullYear;
                    m = month;
                    d = date;
                }
                m = m > 9 ? m : '0' + m;
                d = d > 9 ? d : '0' + d;
                return y + '-' + m + '-' + d;
            },
            getDaysBetween(dateString1,dateString2){ // 获取两个日期之间的天数
                var  startDate = Date.parse(dateString1);
                var  endDate = Date.parse(dateString2);
                if (startDate>endDate){
                    return 0;
                }
                if (startDate==endDate){
                    return 1;
                }
                var days=(endDate - startDate)/(1*24*60*60*1000);
                return  days + 1;
            },
            getMonthBetween (start, end) {
                var result = [];
                var s = start.split("-");
                var e = end.split("-");
                var min = new Date();
                var max = new Date();
                min.setFullYear(s[0], s[1] * 1 - 1, 1);//开始日期
                max.setFullYear(e[0], e[1] * 1 - 1, 1);//结束日期
                var curr = min;
                while (curr <= max) {

                    let month = curr.getMonth() + 1;
                    let year = curr.getFullYear();

                    let endOfMonth = new Date(year, month, 0).getDate(); // 获取本月最后一天
                    let endDate = this.getFullDate(curr.setDate(endOfMonth));//当月最后一天
                    let startDate = this.getFullDate(curr.setDate(1));//当月第一天

                    result.push({
                        year: year,
                        month: month,
                        days: this.getMonthDay(year,month),
                        start: startDate,
                        end: endDate
                    });
                    curr.setMonth(month);
                }
                return result;
            },
            getMonthDay(year, month){
                var d = new Date(year, month, 0);
                return d.getDate();
            },
        }
    });
</script>

{/block}