<template>
    <div class="business-details-container">
        <el-row>
            <el-col :span="18">
                <div class="left-container">
                    <div class="pages-title">减免申请详情</div>
                    <TitleTip :title="`基本信息`" />

                    <el-form size="small" style="padding: 20px" disabled label-width="120px" :model="detailsInfo">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="租赁工程">
                                    <el-input v-model="detailsInfo.projectName" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="租赁单位">
                                    <el-input v-model="detailsInfo.unitName" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="减免开始日期">
                                    <el-input v-model="detailsInfo.reduceStartTime" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="减免结束日期">
                                    <el-input v-model="detailsInfo.reduceEndTime" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="减免原因">
                                    <el-input
                                        type="textarea"
                                        v-model="detailsInfo.remark"
                                        :autosize="{ minRows: 2, maxRows: 4 }"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <TitleTip :title="`明细信息`" />

                    <el-table style="margin: 20px 0" :data="detailsList">
                        <el-table-column prop="reduceNum" label="减免数量" align="center" show-overflow-tooltip />
                        <el-table-column prop="maName" label="机具名称" align="center" show-overflow-tooltip />
                        <el-table-column prop="maModel" label="规格型号" align="center" show-overflow-tooltip />
                        <el-table-column prop="num" label="领料数量" align="center" show-overflow-tooltip />
                        <el-table-column prop="startTime" label="领料日期" align="center" show-overflow-tooltip />
                        <el-table-column prop="endTime" label="退料日期" align="center" show-overflow-tooltip />
                        <el-table-column
                            prop="reduceStartTime"
                            label="减免开始时间"
                            align="center"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="reduceEndTime"
                            label="减免结束时间"
                            align="center"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="leasePrice"
                            label="租赁单价(元/天)"
                            align="center"
                            show-overflow-tooltip
                        />
                        <el-table-column prop="reduceDays" label="减免天数" align="center" show-overflow-tooltip />
                        <el-table-column
                            prop="reduceLeaseMoney"
                            label="减免费用(元)"
                            align="center"
                            show-overflow-tooltip
                        />
                    </el-table>
                    <div class="total-amount">
                        <span>合计:</span>
                        <span>{{ totalAmount.toFixed(2) }} / 元</span>
                    </div>
                    <TitleTip :title="`附件信息`" />

                    <div class="file-box">
                        <div v-for="(file, index) in fileList" :key="index">
                            <div v-if="file.type === 'pdf'" style="margin: 10px">
                                <a :href="file.url" target="_blank">
                                    <el-image
                                        :src="require('@/assets/file.png')"
                                        fit="file"
                                        style="width: 100px; height: 100px"
                                    />
                                </a>
                            </div>
                            <div v-else-if="file.type === 'image'" style="margin: 10px">
                                <el-image
                                    :src="file.url"
                                    fit="file"
                                    :preview-src-list="previewList"
                                    @click="handleImg(file)"
                                    style="width: 100px; height: 100px"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="right-container">
                    <div class="right-title">
                        <div></div>
                        <div></div>
                        <div>流程记录</div>
                    </div>

                    <div class="process-record">
                        <el-steps :active="active" :space="120" direction="vertical">
                            <el-step v-for="step in auditingList" :key="step.id" :title="step.nodeName">
                                <template slot="description">
                                    <div class="custom-description">
                                        <!-- {{ step.description }} -->
                                        审核结果:
                                        <el-tag size="mini" type="primary" v-if="step.isAccept === 0">待审批</el-tag>
                                        <el-tag size="mini" type="success" v-if="step.isAccept === 1">已通过</el-tag>
                                        <el-tag size="mini" type="danger" v-if="step.isAccept === 2">已驳回</el-tag>
                                    </div>

                                    <div class="node-info" v-if="step.auditBy">
                                        审核人:
                                        {{ step.auditBy }}
                                    </div>

                                    <div class="node-info" v-if="step.createTime">
                                        审核时间:
                                        {{ step.createTime }}
                                    </div>

                                    <div class="node-info" v-if="step.remark">
                                        审核意见:
                                        {{ step.remark }}
                                    </div>
                                </template>
                            </el-step>
                        </el-steps>
                    </div>

                    <div class="auditing-container" v-if="pagesType === 1">
                        <el-input
                            type="textarea"
                            v-model="auditingParams.remark"
                            placeholder="请输入审核意见"
                            :autosize="{ minRows: 2, maxRows: 6 }"
                        />

                        <el-row class="btn-container">
                            <el-button type="success" size="mini" @click="onHandleAuditing(1)">通过</el-button>
                            <el-button type="danger" size="mini" @click="onHandleAuditing(2)">驳回</el-button>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import TitleTip from './components/title-tip.vue'
import { submitAuditingApi, getAuditingDetailsApi } from '@/api/reduction-apply/index.js'
import { getDiscountViewList } from '@/api/cost/cost'
export default {
    components: {
        TitleTip
    },
    data() {
        return {
            detailsInfo: {},
            active: 1,
            detailsList: [],
            auditingList: [],
            fileList: [],
            totalAmount: 0,
            auditingParams: {
                nodeId: '', // 当前审核记录的id
                remark: '', // 审核意见
                typeId: '', // 当前审核记录中的 typeId
                taskId: '', // 外层列表的taskId
                isAccept: '', // 审批结果 1. 通过 2. 驳回
                recordId: '',
                nextNodeId: '' // 下个流程节点ID
            },
            pagesType: 1,
            userId: '',
            currentNodeId: '',
            previewList: [],
        }
    },
    created() {
        // 判断当前路由页面是否有查询参数
        if (this.$route.query) {
            const { id, taskId, type, nodeId } = this.$route.query
            this.auditingParams.taskId = taskId
            this.pagesType = type
            this.currentNodeId = nodeId
            this.getLeaseTaskDetailFun(id, taskId)
        }

        this.userId = sessionStorage.getItem('userId')
    },
    methods: {
        // 通过 或 驳回
        async onHandleAuditing(type) {
            // 组装参数
            const currentAuditing = this.auditingList.filter(e => e.nodeId === this.currentNodeId) // 获取当前审核的节点
            const currentIndex = this.auditingList.findIndex(e => e.nodeId === this.currentNodeId) // 获取当前的索引

            const { recordId, id, typeId, isAccept } = currentAuditing[0]

            // if (isAccept != 0) {
            //     this.$modal.msgError('当前已审核，不可重复审核')
            //     return
            // }
            Object.assign(this.auditingParams, {
                typeId,
                recordId,
                nodeId: id
            })
            this.auditingParams.isAccept = type
            if (currentIndex !== this.auditingList.length - 1) {
                this.auditingParams.nextNodeId = this.auditingList[currentIndex + 1].id
            }
            this.auditingParams.taskTypeId = 13
             const loading = this.$loading()
            const res = await submitAuditingApi(this.auditingParams)
            console.log(res, '提交结果')

            if (res.code === 200) {
                this.$modal.msgSuccess('审核成功')
                loading.close()
                setTimeout(() => {
                    // const obj = { path: '/business-examine/reduction-apply' }
                    // this.$tab.closeOpenPage(obj)
                    this.$tab.closePage()
                }, 500)
            } else {
              loading.close()
              this.$modal.msgError(res.message);
            }

            console.log(this.auditingParams, ' this.auditingParams组装好的参数')
        },

        handleImg(img) {
            console.log('🚀 ~ handleImg ~ img:', img)
            this.previewList = this.fileList.filter(file => file.type === 'image').map(file => file.url)
        },

        // 获取数据详情 和 审核记录详情
        async getLeaseTaskDetailFun(id, taskId) {
            const { data: res } = await getDiscountViewList(id)

            this.detailsInfo = res
            this.detailsList = res.detailList
            this.fileList = res.bmFileInfos
            if (this.fileList.length > 0) {
                this.fileList.forEach(item => {
                    // 如果url 是 .pdf 结尾 添加 type= pdf
                    if (item.url.includes('.pdf')) {
                        item.type = 'pdf'
                    } else {
                        item.type = 'image'
                    }
                })
            }
            this.detailsList.forEach(e => {
                this.totalAmount += e.reduceLeaseMoney * 1
            })

            const { rows: result } = await getAuditingDetailsApi({ taskId,taskType: 13 })
            this.auditingList = result
            console.log('result审核记录详情', result)
        }
    }
}
</script>

<style scoped lang="scss">
.business-details-container {
    padding: 20px;
}

.pages-title {
    padding: 10px 0 30px 0;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    color: #19a4a0;
}

.file-box {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    div {
        height: 80px;
        text-align: center;
    }

    & div:nth-child(12n) {
        margin-right: 0;
    }
}

.right-container {
    padding: 0 20px;
}

.right-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    & div:first-child {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #19a4a0;
        z-index: 9;
    }
    & div:nth-child(2) {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #b2e1e0;
        transform: translateX(-50%);
    }
}

.process-record {
    margin-top: 20px;
    //   height: 60vh;
}

.btn-container {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

::v-deep .el-step__icon.is-text {
    background-color: #19a4a0;
    color: #19a4a0;
    border: none;
    width: 16px;
    height: 16px;
}

::v-deep .el-step.is-vertical .el-step__line {
    width: 2px;
    top: 26px;
    bottom: 8px;
    left: 7px;
}

::v-deep .el-step__title.is-finish {
    font-weight: bold;
    color: #303133;
    font-size: 16px;
}

::v-deep .el-step__title.is-wait {
    font-weight: bold;
    color: #303133;
    font-size: 16px;
}

.total-amount {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    align-items: center;

    & span:last-child {
        margin: 0 6px;
        color: red;
        font-weight: bold;
    }
}

.custom-description {
    padding: 8px 0 8px 20px;
    color: #666;
}

.node-info {
    // padding: 2px 0;
    padding-left: 20px;
    color: #666;
    letter-spacing: 1px;
}
</style>
