<template>
    <div class="app-container">
        <el-row style="width: 100%">
            <el-col :span="18">
                <el-button type="primary" size="mini" @click="handleExport1"
                    >租赁明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport3"
                    >维修明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport4"
                    >报废明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport2"
                    >丢失明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport5"
                    >减免明细导出</el-button>
                <el-button type="warning" size="mini" @click="handleExportAll"
                    >全部明细导出</el-button>
            </el-col>
            <!-- <el-col :span="4">
                <el-button type="danger" size="mini" style="float: right" @click="handleBack"
                    >返回</el-button>
            </el-col> -->
        </el-row>

        <!-- <div style="color: rgb(217, 0, 27); font-weight: 700; padding: 20px 0">
            结算费用合计：¥{{ costAll }}，租赁费用¥{{ leaseCost }}，维修费用¥{{
                repairCost
            }}，报废费用¥{{ scrapCost }}，丢失费用{{ loseCost }}
        </div> -->

        <div style="margin-top:20px">
            <div class="tabelAllTop">
                <div class="costTop">结算费用</div>
            </div>
            <div class="tabelAllTop">
                <div class="costTopTwo">本工程清算项目及金额（元）</div>
            </div>
            <div class="tabelAllTopUnit">
                <div class="costTopUnit">一、施工机具有偿使用费：</div>
                <div class="costRightUnit">
                {{ leaseCost }}
                </div>
            </div>
            <div class="tabelAllTopUnit">
                <div class="costTopUnit">二、施工机具维修费：</div>
                <div class="costRightUnit">
                {{ repairCost  }}
                </div>
            </div>
            <div class="tabelAllTopUnit">
                <div class="costTopUnit">三、施工机具丢失费：</div>
                <div class="costRightUnit">
                {{ loseCost }}
                </div>
            </div>
            <div class="tabelAllTopUnit">
                <div class="costTopUnit">四、施工机具损坏赔偿费：</div>
                <div class="costRightUnit">
                {{ scrapCost  }}
                </div>
            </div>
            <div class="tabelAllTopThree">
                <div class="costLeft">
                    <div class="costOne">费用合计金额(大写) :</div>
                     <div class="costTwo">{{finishCostName}}</div>
                </div>
                <div class="costRight">
                {{ costAll.toFixed(2) }}
                </div>
            </div>
            <div class="tabelAllTopFour">
                <div class="costTopOne">说明</div>
                <div class="costRightTwo">
                {{ '本协议一式三份，甲方一份，乙方一份，经双方签字后生效。' }}
                </div>
            </div>
            <div class="tabelAllTopFour">
                <div class="costTopOne">备注</div>
                <div class="costRightTwo">
                {{ '此费用仅为在机具设备分公司发生费用，未计从项目部领用机具费用。' }}
                </div>
            </div>
            <el-table :data="leaseList">
                <el-table-column label="租赁费用明细" align="center">
                    <el-table-column label="序号" align="center" type="index" width="60"/>
                    <!-- <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/> -->
                    <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                    <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.num">
                            {{ scope.row.leasePrice.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.num.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
                    <!-- <el-table-column label="归还数量" align="center" prop="" :show-overflow-tooltip="true" /> -->
                    <el-table-column label="归还日期 " align="center" prop="endTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.num">
                            {{ Number(scope.row.leaseDays).toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.costs">
                            {{ scope.row.costs.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            
            <div class="tabelAll">
                <div class="columnAllNum">费用小计：</div>
                <div class="columnAll">
                {{ leaseCost }}
                </div>
            </div>
        </div>

        <div>
            <el-table :data="repairList">
                <el-table-column label="维修费用明细" align="center">
                    <el-table-column label="序号" align="center" type="index" width="60"/>
                    <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                    <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="维修数量" align="center" prop="num" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.num" >
                            {{ scope.row.num.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
                    <el-table-column label="维修费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.costs" >
                            {{ scope.row.costs.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="tabelAll">
                <div class="columnAllNum">费用小计：</div>
                <div class="columnAll">
                {{ repairCost }}
                </div>
            </div>
        </div>

        <div>
            <el-table :data="scrapList"> 
                <el-table-column label="报废费用明细" align="center">
                    <el-table-column label="序号" align="center" type="index" width="60"/>
                    <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                    <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="报废数量" align="center" prop="num" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.num">
                            {{ scope.row.num.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
                    <el-table-column label="报废费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.costs">
                            {{ scope.row.costs.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="tabelAll">
                <div class="columnAllNum">费用小计：</div>
                <div class="columnAll">
                {{ scrapCost }}
                </div>
            </div>
        </div>

        <div>
            <el-table :data="loseList"> 
                <el-table-column label="丢失费用明细" align="center">
                    <el-table-column label="序号" align="center" type="index" width="60"/>
                    <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                    <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="丢失数量" align="center" prop="num" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.num">
                            {{ scope.row.num.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="丢失费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.costs">
                            {{ scope.row.costs.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="tabelAll">
                <div class="columnAllNum">费用小计：</div>
                <div class="columnAll">
                {{ loseCost }}
                </div>
            </div>
        </div>

        <div>
            <el-table :data="reducList"> 
                <el-table-column label="减免费用明细" align="center">
                    <el-table-column label="序号" align="center" type="index" width="60"/>
                    <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="规格型号" align="center" prop="modeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
                    <el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true"/>
                    <el-table-column label="减免数量" align="center" prop="reduceNum" :show-overflow-tooltip="true"/>
                    <el-table-column label="减免开始日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="减免结束日期" align="center" prop="endTime" :show-overflow-tooltip="true"/>
                    <el-table-column label="减免天数" align="center" prop="days" :show-overflow-tooltip="true"/>
                    <el-table-column label="减免原因" align="center" prop="remark" :show-overflow-tooltip="true"/>                   
                    <el-table-column label="减免费用（元）" align="center" prop="leaseMoney" :show-overflow-tooltip="true">
                        <template slot-scope="scope" v-if="scope.row.leaseMoney">
                            {{ scope.row.leaseMoney.toFixed(2) }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="tabelAllBottom">
                <div class="columnAllNum">费用小计：</div>
                <div class="columnAll">
                {{ reducCost }}
                </div>
            </div>
            <div class="tabelAllBottom">
                <div class="columnAllNum">合计：</div>
                <div class="columnAll">
                {{ costAll.toFixed(2) }}
                </div>
            </div>
        </div>

    </div>
</template>

<script> 
import { getSltRecordInfo, submitFee,submitCosts } from '@/api/business/index'

export default {
    name: '',
    dicts: [],
    props: {
        row: {
            type: [String],
        }
    },
    data() {
        return { 
            // 往来单位数据
            unitList: [],
            // 工程数据
            projectList: [],   
            leaseList: [], //租赁费用列表
            leaseCost: 0,
            repairList: [], //维修费用列表
            repairCost: 0,
            scrapList: [], //报废费用列表
            scrapCost: 0,
            loseList: [], //丢失费用列表
            loseCost: 0,
            reducList: [], //减免费用列表
            reducCost: 0,
            costAll: 0,
            deptName: undefined,
            applyList: [],
            projectName: undefined, //结算工程
            unitName: undefined, //结算单位

            finishCost: 343242.23,
            finishCostName: '',
        }
    },
    mounted() {
        let arr = JSON.parse(this.row)
        this.rowData = arr
        this.getDataAll()
        //   this.getUnitList();
        //   this.getProjectList();
    },
    methods: {
        // 将数字转换为中文大写金额
        numberToChinese(num) {
            const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            const cnIntRadice = ['', '拾', '佰', '仟'];
            const cnIntUnits = ['', '万', '亿', '兆'];
            const cnDecUnits = ['角', '分', '毫', '厘'];
            const cnInteger = '整';
            const cnIntLast = '元';
            let integerNum;
            let decimalNum;
            let chineseStr = '';
            let parts;
            if (num === 0) {
                return cnNums[0] + cnIntLast + cnInteger;
            }
            num = parseFloat(num).toFixed(4);
            parts = num.split('.');
            integerNum = parts[0];
            decimalNum = parts[1];
            if (parseInt(integerNum, 10) > 0) {
                let zeroCount = 0;
                const IntLen = integerNum.length;
                for (let i = 0; i < IntLen; i++) {
                    const n = integerNum.substr(i, 1);
                    const p = IntLen - i - 1;
                    const q = p / 4;
                    const 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 !== '') {
                const decLen = decimalNum.length;
                for (let i = 0; i < decLen; i++) {
                    const n = decimalNum.substr(i, 1);
                    if (n !== '0') {
                        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                    }
                }
            }
            if (chineseStr === '') {
                chineseStr += cnNums[0] + cnIntLast + cnInteger;
            } else if (decimalNum === '00' || decimalNum === '0000') {
                chineseStr += cnInteger;
            }
            return chineseStr;
        },



        //获取单位类型 ,getUnitList, getProjectList
        getUnitList() {
            getUnitList().then((response) => {
                this.unitList = response.data
            })
        },
        getProjectList() {
            getProjectList().then((response) => {
                this.projectList = response.data
            })
        }, 
        /** 查询列表 */
        getDataAll() {
            getSltRecordInfo(this.rowData).then((response) => { 
                this.leaseList = response.data.leaseList //租赁费用列表
                this.projectName = response.data.projectName
                this.unitName = response.data.unitName
                this.leaseCost = this.countCost(this.leaseList)

                this.repairList = response.data.repairList //维修费用列表
                this.repairCost = response.data.repairCost.toFixed(2)
                // this.repairCost = this.countCost(this.repairList)

                this.scrapList = response.data.scrapList //报废费用列表
                this.scrapCost = response.data.scrapCost.toFixed(2)
                // this.scrapCost = this.countCost(this.scrapList)

                this.loseList = response.data.loseList //丢失费用列表
                this.loseCost = this.countCost(this.loseList)
                this.reducList = response.data.reductionList //减免费用列表
                console.log('111111111111111111',this.reducList)
                this.reducList.forEach((item) => {
                    this.reducCost = Number(this.reducCost) + Number(item.leaseMoney) 
                })
                console.log('2222222222222222',this.reducCost)
                this.applyList = response.data.relations
                this.applyList.forEach((item) => {
                    item.leaseCost = Number(item.leaseCost)
                    item.repairCost = Number(item.repairCost)
                    item.scrapCost = Number(item.scrapCost)
                    item.loseCost = Number(item.loseCost)
                    item.reductionCost = Number(item.reductionCost)
                    item.cost =
                        Number(item.leaseCost) +
                        Number(item.repairCost) +
                        Number(item.scrapCost) +
                        Number(item.loseCost) +
                        Number(item.reductionCost) +
                        Number(item.addCost) -
                        Number(item.subCost)
                })

                let costSum =
                    Number(this.leaseCost) +
                    Number(this.repairCost) +
                    Number(this.scrapCost) +
                    Number(this.loseCost) -
                    Number(this.reducCost) 
                this.costAll = costSum
                this.finishCostName = this.numberToChinese(this.costAll.toFixed(2));
                this.subCostFlag = costSum
            })
        },
        //计算金额1
        countCost(list) {
            let arrCost = 0
            list.forEach((item) => {
                // arrCost += parseInt(item.costs)

                console.log(item)
                if (item.partType != 0 && item.scrapType != 0) {
                    arrCost = arrCost + Number(item.costs)
                }
            })

            return arrCost.toFixed(2)
        },
        //el-table-合计总费用
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 9) {
                    sums[index] = '最终费用'
                    return
                }
                const values = data.map((item) => Number(item[column.property]))
                // 只对amount这一列进行总计核算。
                if (column.property === 'cost') {
                    if (!values.every((value) => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr)
                            if (!isNaN(value)) {
                                return prev + curr
                            } else {
                                return prev
                            }
                        }, 0)
                        // sums[index] += ' 元';
                    } else {
                        sums[index] = '---'
                    }
                }
            })
            return sums
        }, 
        countNum(row) {
            row.cost =
                Number(row.leaseCost) +
                Number(row.repairCost) +
                Number(row.scrapCost) +
                Number(row.loseCost) +
                Number(row.reduceLeaseMoney) +
                Number(row.addCost || 0) -
                Number(row.subCost || 0)
        }, 

        //返回
        handleBack() {
            this.$emit('goBackPage')
            // this.$tab.closeOpenPage({
            //     path: '/cost/costApplyList',
            //     query: {
            //         isEdit: true,
            //     },
            // })
        }, 
        /** 导出按钮操作 */
        //租赁
        handleExport1() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportLease',
                {...params,},
                `租赁费用明细_${new Date().getTime()}.xlsx`,
            )
        },
        //丢失
        handleExport2() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportLose',
                {...params,},
                `丢失费用明细_${new Date().getTime()}.xlsx`,
            )
        },
        // 维修
        handleExport3() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportRepair',
                {...params,},
                `维修费用明细_${new Date().getTime()}.xlsx`,
            )
        },
        //报废
        handleExport4() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportScrap',
                {...params,},
                `报废费用明细_${new Date().getTime()}.xlsx`,
            )
            // this.downloadJson(
            //     'material/slt_agreement_info/exportScrap',
            //     JSON.stringify(this.rowData),
            //     `报废费用明细_${new Date().getTime()}.xlsx`,
            // )
        },
        //减免
        handleExport2() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportLose',
                {...params,},
                `减免费用明细_${new Date().getTime()}.xlsx`,
            )
        },
        handleExport5() {
            const params = this.rowData
            this.download(
               'material/slt_agreement_info/exportReduction',
                {...params,},
                `减免费用明细_${new Date().getTime()}.xlsx`,
            ) 
        },
        
        handleExportAll() {
            const params = this.rowData
            this.download(
                'material/slt_agreement_info/exportAlls',
                {...params,},
                `全部费用明细_${new Date().getTime()}.xlsx`,
            )
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
}
.tabelAllTop {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-left: none;
  border-bottom: none;
  .costTop {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    width:100%;
    font-weight: bold; /* 添加字体加粗样式 */
  }
  .costTopTwo {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    width:100%;

  }
}
.tabelAllTopUnit {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-bottom: none;
 .costTopUnit {
    display: flex;
    padding: 5px;
    width:60%;
    border-left: none;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    }
 .costRightUnit {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    text-align: center;
    align-items: center;
    width:40%;
    justify-content: center; /* 将内容对齐到中间 */
    // padding-left: 20px; /* 添加左内边距 */
    }
}

.tabelAllTopThree {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-bottom: none;
 .costLeft {
    display: flex;
    padding: 5px;
    width:60%;
    border-left: none;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    .costOne {
        display: flex;
        padding: 5px;
        width:50%;
        border-left: none;
        align-items: center;
        text-align: center;
        justify-content: center; /* 将内容对齐到中间 */  
    }
    .costTwo {
        display: flex;
        padding: 5px;
        width:50%;
        border-left: 1px solid #dfe6ec;
        align-items: center;
        text-align: center;
        justify-content: center; /* 将内容对齐到中间 */  
    }
    }
 .costRight {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    text-align: center;
    align-items: center;
    width:40%;
    justify-content: center; /* 将内容对齐到中间 */
    // padding-left: 20px; /* 添加左内边距 */
    }
}

.tabelAllTopFour {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-bottom: none;
 .costTopOne {
    display: flex;
    padding: 5px;
    width:30%;
    border-left: none;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    }
 .costRightTwo {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    text-align: center;
    align-items: center;
    width:70%;
    justify-content: center; /* 将内容对齐到中间 */
    // padding-left: 20px; /* 添加左内边距 */
    }
}


.tabelAll {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
  margin-bottom: 15px;
}
.tabelAllBottom {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
}
.columnAll {
  display: flex ;
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  text-align: center;
  align-items: center;
  width:100%;
  justify-content: flex-end; /* 将内容对齐到右侧 */
  margin-right: 60px; /* 添加右边距 */
}
.columnAllNum {
  padding: 5px;
  text-align: center;
  width:21.4%;
  border-left: none;
}
/* 最后一列无右边框 */
.tabelAll .column:last-child {
  border-right: none;
}
</style>
