<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
                        :model="maForm"
                        ref="maForm"
                        size="small"
                        label-width="100px"
                        disabled
                        style="margin-top: 20px"
                    >
                        <el-row :gutter="20" class="cont-center" style="margin-bottom: 20px">
                            <el-col :span="10" :offset="0">
                                <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px">
                                    <!-- card body -->
                                    <el-form-item label="转出单位" prop="backUnitId">
                                        <el-input
                                            v-model="maForm.backUnitName"
                                            placeholder="请输入转出单位"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="转出工程" prop="backProId">
                                        <el-input
                                            v-model="maForm.backProName"
                                            placeholder="请输入转出工程"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="转出人" prop="backMan">
                                        <el-input
                                            v-model="maForm.backMan"
                                            placeholder="请输入转出人"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="backPhone">
                                        <el-input
                                            v-model="maForm.backPhone"
                                            placeholder="请输入联系电话"
                                            clearable
                                            maxlength="11"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                </el-card>
                            </el-col>
                            <el-col :span="3" :offset="0">
                                <div class="cont-center">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="require('@/assets/img/transform.png')"
                                        fit="fit"
                                    ></el-image>
                                </div>
                            </el-col>
                            <el-col :span="10" :offset="0">
                                <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px">
                                    <!-- card body -->
                                    <el-form-item label="转入单位" prop="leaseUnitId">
                                        <el-input
                                            v-model="maForm.leaseUnitName"
                                            placeholder="请输入转入单位"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="转入工程" prop="leaseProId">
                                        <el-input
                                            v-model="maForm.leaseProName"
                                            placeholder="请输入转入工程"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="转入人" prop="leaseMan">
                                        <el-input
                                            v-model="maForm.leaseMan"
                                            placeholder="请输入转入人"
                                            clearable
                                            maxlength="50"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="leasePhone">
                                        <el-input
                                            v-model="maForm.leasePhone"
                                            placeholder="请输入联系电话"
                                            clearable
                                            maxlength="11"
                                            style="width: 240px"
                                        />
                                    </el-form-item>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form>
                    <TitleTip :title="`明细信息`" />

                    <el-table ref="equipmentList" :data="equipmentList">
                        <el-table-column align="center" label="序号" type="index" width="55" />
                        <el-table-column
                            v-for="(column, index) in tableColumns"
                            :key="column.prop"
                            :label="column.label"
                            :prop="column.prop"
                            align="center"
                            show-overflow-tooltip
                        ></el-table-column>
                    </el-table>
                    <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 :space="120" direction="vertical">
                            <el-step v-for="(step, index) in auditingList" :key="index" :title="step.nodeName">
                                <!-- <template slot="description">
                                    <div class="custom-description">
                                        {{ step.nodeName }}

                                        <el-tag
                                            size="mini"
                                            type="primary"
                                            v-if="step.isAccept == 0 || step.isAccept == null"
                                        >
                                            待审批
                                        </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>{{ step.creator }}</div>
                                        <div>{{ step.createTime }}</div>
                                        <div>{{ step.remark }}</div>
                                    </div>
                                </template> -->

                                <template slot="description">
                                    <div class="custom-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="isEdit">
                        <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="onSubmitPass">通过</el-button>
                            <el-button type="danger" size="mini" @click="onSubmitReject">驳回</el-button>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import TitleTip from './components/title-tip.vue'
import { getLeaseTaskDetail, receiveDetail, getInfoById, getAuditInfo, auditDir } from '@/api/business/index'

import { getAuditingDetailsApi, submitAuditingDirectApi } from '@/api/receive-apply/index.js'

export default {
    components: {
        TitleTip
    },
    name: 'directRotationApply',
    data() {
        return {
            id: '',
            flowId: '',
            isEdit: false, // 是否编辑
            isDetail: false, // 是否查看
            isAccept: '',
            remark: '',
            maForm: {},
            auditingList: [], // 流程记录
            equipmentList: [], // 设备列表
            // 表头
            tableColumns: [
                { label: '直转数量', prop: 'directNum' },
                { label: '类型名称', prop: 'typeName' },
                { label: '规格型号', prop: 'typeModelName' },
                { label: '机具编号', prop: 'maCode' },
                { label: '计量单位', prop: 'unitName' },
                { label: '在用数量', prop: 'useNum' },
                { label: '领料人', prop: 'leasePerson' },
                { label: '领料日期', prop: 'startTime' }
            ],
            fileList: [
                { name: '文件1', url: 'https://s5.aconvert.com/convert/p3r68-cdx67/vqm2g-dwr99.pdf', type: 'pdf' },
                {
                    name: '文件2',
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    type: 'image'
                }
            ],
            previewList: [],
            auditingParams: {
                nodeId: '', // 当前审核记录的id
                remark: '', // 审核意见
                typeId: '', // 当前审核记录中的 typeId
                taskId: '', // 外层列表的taskId
                isAccept: '', // 审批结果 1. 通过 2. 驳回
                recordId: '',
                nextNodeId: '', // 下个流程节点ID
                remarkType:1 // 1.：PC端，2：APP端
            }
        }
    },
    created() {
        // 判断当前路由页面是否有查询参数
        // if (this.$route.query) {
        //   const { id, taskId } = this.$route.query
        //   this.getLeaseTaskDetailFun(id, taskId)
        // }
        if (this.$route.query.type == 'edit') {
            this.isEdit = true
            this.isDetail = false
            this.id = this.$route.query.id
            this.flowId = this.$route.query.flowId
            const obj = Object.assign({}, this.$route, { title: '直转申请审核' })
            this.$tab.updatePage(obj)
        } else if (this.$route.query.type == 'detail') {
            this.isEdit = false
            this.isDetail = true
            this.id = this.$route.query.id
            this.flowId = this.$route.query.flowId
            const obj = Object.assign({}, this.$route, { title: '直转申请详情' })
            this.$tab.updatePage(obj)
        }

        this.getTaskInfo()
        // this.getAuditInfo()
        if (this.$route.query) {
            const { nodeId, flowId, taskId } = this.$route.query
            this.auditingParams.taskId = flowId
            this.currentNodeId = nodeId
            this.getLeaseTaskDetailFun(flowId || taskId)
        }
    },
    methods: {
        // 通过
        onSubmitPass() {
            // 弹框提示
            this.$confirm('是否确认通过审核？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // this.isAccept = 1
                    this.auditingParams.isAccept = 1
                    this.submitAuditing()
                })
                .catch(() => {
                    this.$message.info('已取消')
                })
        },
        // 驳回
        onSubmitReject() {
            // 弹框提示
            this.$confirm('是否确认驳回审核？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.auditingParams.isAccept = 2
                    this.submitAuditing()
                })
                .catch(() => {
                    this.$message.info('已取消')
                })
        },
        // 提交审核
        async submitAuditing() {
            // 组装参数

            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
            })
            if (currentIndex !== this.auditingList.length - 1) {
                this.auditingParams.nextNodeId = this.auditingList[currentIndex + 1].id
            }

            this.auditingParams.taskTypeId = 16
            this.auditingParams.remarkType = 1
            const loading = this.$loading()
            const res = await submitAuditingDirectApi(this.auditingParams)

            if (res.code === 200) {
                this.$modal.msgSuccess('审核成功')
                loading.close()
                setTimeout(() => {
                    // const obj = { path: '/business-examine/direct-rotation-apply' }
                    // this.$tab.closeOpenPage(obj)
                    this.$tab.closePage()
                }, 500)
            } else {
              this.$modal.msgError(res.message);
              loading.close()
            }
            // const params = {
            //     flowId: this.flowId,
            //     nodeId: this.auditingList[this.auditingList.length - 1].nodeId,
            //     isAccept: this.isAccept,
            //     remark: this.remark
            // }
            // try {
            //     const res = await auditDir(params)
            //     console.log('🚀 ~ submitAuditing ~ res:', res)
            //     this.$message.success('审核成功')
            //     this.$tab.closePage()
            // } catch (error) {
            //     console.log('🚀 ~ submitAuditing ~ error:', error)
            // }
        },
        // 获取详情
        async getTaskInfo() {
            const loading = this.$loading()
            try {
                const res = await receiveDetail({ id: this.id })
                console.log('🚀 ~ getTaskInfo ~ res:', res)
                this.maForm = res.data
                this.equipmentList = res.data.directApplyDetails
                this.fileList = res.data.dirUrls
                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'
                        }
                    })
                }
                console.log('🚀 ~ getTaskInfo ~ fileList:', this.fileList)
                console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
                loading.close()
            } catch (error) {
                console.log('🚀 ~ error:', error)
                loading.close()
            }
        },
        // 获取审批流程
        async getAuditInfo() {
            try {
                const params = {
                    id: this.id,
                    flowId: this.flowId
                }

                const res = await getAuditInfo(params)
                console.log('🚀 ~ getAuditInfo ~ res:', res)
                this.auditingList = res.data
                console.log('🚀 ~ getAuditInfo ~ this.auditingList:', this.auditingList)
            } catch (error) {
                console.log('🚀 ~ getAuditInfo ~ error:', error)
            }
        },
        handleImg(img) {
            console.log('🚀 ~ handleImg ~ img:', img)
            this.previewList = this.fileList.filter(file => file.type === 'image').map(file => file.url)
        },
        // 获取数据详情 和 审核记录详情
        async getLeaseTaskDetailFun(taskId) {
            const taskType = 16
            const result = await getAuditingDetailsApi({ taskId, taskType })
            console.log('result', result)
            this.auditingList = result.rows
        }
    }
}
</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: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    /* div {
    width: calc((100% - 110px) / 12);
    height: 60px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
    line-height: 60px;
    background-color: #19a4a0;
  }

  & 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;
}
// 居中
.cont-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
