<template>
    <div class="app-container" id="ReceiveExamine">
        <el-row :gutter="10" class="mb8">
            <h3>{{ queryParams.applyFor }}提交的领料申请</h3>
            <div>领料单号：{{ queryParams.code }}</div>
        </el-row>
        <el-row :gutter="24" class="mb8">
            <el-col :span="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    v-show="showSearch"
                    label-width="80px"
                >
                    <el-form-item label="领料工程" prop="dictName">
                        <el-input
                            v-model="queryParams.proName"
                            placeholder="请输入领料工程"
                            disabled
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="领料人" prop="dictName">
                        <el-input
                            v-model="queryParams.leaseApplyInfo.leasePerson"
                            placeholder="请输入领料人"
                            disabled
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="dictName">
                        <el-input
                            v-model="queryParams.leaseApplyInfo.phone"
                            placeholder="请输入联系电话"
                            disabled
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            type="success"
                            plain
                            icon="el-icon-back"
                            size="mini"
                            @click="handleBack"
                            >领料管理</el-button
                        >
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="24" class="mb8">
            <el-col :span="18">
                <el-table
                    v-loading="loading"
                    :data="queryParams.leaseApplyDetails"
                    @selection-change="handleSelectionChange"
                >
                    <!--          <el-table-column type="selection" width="55" align="center" />-->
                    <el-table-column label="序号" align="center" width="80" type="index" />
                    <el-table-column
                        label="类型名称"
                        align="center"
                        prop="typeName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="规格型号"
                        align="center"
                        prop="typeModelName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="当前库存"
                        align="center"
                        prop="num"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="预领数量"
                        align="center"
                        prop="preNum"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="申请人"
                        align="center"
                        prop="applyFor"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="申请时间"
                        align="center"
                        prop="updateTimes"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="任务状态"
                        align="center"
                        prop="taskName"
                        :show-overflow-tooltip="true"
                    />
                    <!--      <el-table-column label="审批结果 " align="center" prop="dictName" :show-overflow-tooltip="true" />-->
                    <el-table-column
                        label="备注"
                        align="center"
                        prop="remark"
                        :show-overflow-tooltip="true"
                    />
                    <!--          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
                    <!--            <template slot-scope="scope">-->
                    <!--              <el-button-->
                    <!--                size="mini"-->
                    <!--                type="text"-->
                    <!--                icon="el-icon-edit"-->
                    <!--                @click="handleUpdate(scope.row)"-->
                    <!--                v-hasPermi="['store:labelType:edit']"-->
                    <!--              >编辑</el-button>-->
                    <!--              <el-button-->
                    <!--                size="mini"-->
                    <!--                type="text"-->
                    <!--                icon="el-icon-delete"-->
                    <!--                @click="handleDelete(scope.row)"-->
                    <!--                v-hasPermi="['store:labelType:remove']"-->
                    <!--              >删除</el-button>-->
                    <!--            </template>-->
                    <!--          </el-table-column>-->
                </el-table>
            </el-col>

            <el-col :span="6">
                <el-timeline>
                    <el-timeline-item
                        color="#0bbd87"
                        icon="el-icon-check"
                        placement="top"
                    >
                        <el-card>
                            <p class="title">提交审批</p>
                            <p class="author"
                                >申请人：{{ queryParams.applyFor }}</p
                            >
                            <p class="time"
                                >申请时间：{{ queryParams.updateTimes }}</p
                            >
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item
                        v-for="(v, i) in flowPath"
                        :type="v.type"
                        :color="v.color"
                        :icon="v.icon"
                        :key="i"
                        placement="top"
                    >
                        <el-card>
                            <p class="title">{{ v.name }}</p>
                            <p class="author" v-if="queryParams[v.authorKey]"
                                >审核人：{{ queryParams[v.authorKey] }}</p
                            >
                            <p class="time" v-if="queryParams[v.timeKey]"
                                >审核时间：{{ queryParams[v.timeKey] }}</p
                            >
                            <p class="remark" v-if="queryParams[v.remarkKey]"
                                >审核意见：{{ queryParams[v.remarkKey] }}</p
                            >
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-col>
        </el-row>

        <div
            slot="footer"
            class="dialog-footer"
            style="text-align: right; margin-right: 200px"
            v-if="queryParams.taskStatus < 33 && !this.isView"
        >
            <el-button type="primary" @click="agree">同意</el-button>
            <el-button @click="refuse">驳回</el-button>
        </div>

        <!-- 同意 -->
        <el-dialog
            title="审核意见"
            :visible.sync="examineVisible"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-input
                placeholder="请输入审核意见"
                type="textarea"
                maxlength="64"
                :autosize="{ minRows: 4, maxRows: 6 }"
                v-model="queryParams.companyAuditRemarks"
            ></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="examineVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="subAuditLeaseByCompany(9)"
                    v-if="queryParams.taskStatus == 30"
                    v-hasPermi="['receive:examine:fgs']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="subAuditLeaseByCompany(5)"
                    v-if="queryParams.taskStatus == 31"
                    v-hasPermi="['receive:examine:sgb']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="subAuditLeaseByCompany(7)"
                    v-if="queryParams.taskStatus == 31"
                    v-hasPermi="['receive:examine:ajb']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="subAuditLeaseByCompany(1)"
                    v-if="queryParams.taskStatus == 32"
                    v-hasPermi="['receive:examine:nbry-jjfgs']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="subAuditLeaseByCompany(3)"
                    v-if="queryParams.taskStatus == 32"
                    v-hasPermi="['receive:examine:nbry-sbfgs']"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        <!-- 驳回 -->
        <el-dialog
            title="审核意见"
            :visible.sync="refuseVisible"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-input
                placeholder="请输入审核意见"
                type="textarea"
                maxlength="64"
                :autosize="{ minRows: 4, maxRows: 6 }"
                v-model="queryParams.companyAuditRemarks"
            ></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="refuseVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="refuseAuditLeaseByCompany(10)"
                    v-if="queryParams.taskStatus == 30"
                    v-hasPermi="['receive:examine:fgs']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="refuseAuditLeaseByCompany(6)"
                    v-if="queryParams.taskStatus == 31"
                    v-hasPermi="['receive:examine:sgb']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="refuseAuditLeaseByCompany(8)"
                    v-if="queryParams.taskStatus == 31"
                    v-hasPermi="['receive:examine:ajb']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="refuseAuditLeaseByCompany(2)"
                    v-if="queryParams.taskStatus == 32"
                    v-hasPermi="['receive:examine:nbry-jjfgs']"
                    >确 定</el-button
                >
                <el-button
                    type="primary"
                    @click="refuseAuditLeaseByCompany(4)"
                    v-if="queryParams.taskStatus == 32"
                    v-hasPermi="['receive:examine:nbry-sbfgs']"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listType,
        getType,
        delType,
        addType,
        updateType,
        refreshCache,
    } from '@/api/system/dict/type'
    import {
        auditLeaseByCompany,
        getLeaseListAll,
        rejectLeaseByCompany,
    } from '@/api/claimAndRefund/receive'
    import { mapState } from 'vuex'
    export default {
        name: 'receiveExamine',
        data() {
            return {
                flowPath: [
                    {
                        id: 30,
                        name: '待分公司审核',
                        remarkKey: 'companyAuditRemark',
                        authorKey: 'companyAuditBy',
                        timeKey: 'companyAuditTime',
                    },
                    {
                        id: 31,
                        name: '待分管部门审核',
                        remarkKey: 'deptAuditRemark',
                        authorKey: 'deptAuditBy',
                        timeKey: 'deptAuditTime',
                    },
                    {
                        id: 32,
                        name: '待内部审核',
                        remarkKey: 'directAuditRemark',
                        authorKey: 'directAuditBy',
                        timeKey: 'directAuditTime',
                    },
                ],
                isView: false,
                examineVisible: false,
                refuseVisible: false,
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 字典表格数据
                typeList: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                // 日期范围
                dateRange: [],
                // 查询参数
                queryParams: {
                    leaseApplyInfo: {},
                    leaseApplyDetails: [],
                    companyAuditRemarks: '',
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    dictName: [
                        {
                            required: true,
                            message: '字典名称不能为空',
                            trigger: 'blur',
                        },
                    ],
                    dictType: [
                        {
                            required: true,
                            message: '字典类型不能为空',
                            trigger: 'blur',
                        },
                    ],
                },
                peopleOpen: false,
                noticeOpen: false,
                nform: {
                    notice: '',
                },
                nrules: {
                    notice: [
                        {
                            required: true,
                            message: '通知内容不能为空',
                            trigger: 'blur',
                        },
                    ],
                },
                deptName: undefined,
                activities: [
                    {
                        content: '小洁发起申请',
                        timestamp: '2018-04-15',
                    },
                    {
                        content: '分公司审批',
                        timestamp: '2018-04-13',
                    },
                    {
                        content: '部门审批',
                        timestamp: '2018-04-11',
                    },
                ],
            }
        },
        computed: {
            ...mapState(['user']),
        },
        mounted() {
            let taskId = this.$route.query.taskId
            let isView = this.$route.query.isView
            this.isView = false
            if (isView) {
                this.isView = true
            }
            console.log(isView)
            if (taskId) {
                this.getData(taskId)
            }
        },
        methods: {
            agree() {
                this.examineVisible = true
                this.queryParams.companyAuditRemarks = '同意'
            },
            // handelExamine(type){
            //   if(type){
            //     this.subAuditLeaseByCompany()
            //   }else {
            //     this.queryParams.companyAuditRemarks = ''
            //   }
            //   this.examineVisible = type
            // },
            //审核  同意
            async subAuditLeaseByCompany(type) {
                console.log(type)
                const params = JSON.parse(JSON.stringify(this.queryParams))
                params.taskStatus = params.taskStatus + 1

                params.leaseApplyInfoList.forEach((v) => {
                    console.log(v)
                    this.$set(
                        v,
                        'companyAuditRemark',
                        params.companyAuditRemarks,
                    )
                    this.$set(v, 'companyAuditBy', this.user.id)
                    this.$set(
                        v,
                        'examineStatusId',
                        Number(params.examineStatusId),
                    )
                    this.$set(v, 'status', type)
                })
                params.updateTime = params.updateTimes
                params.createTime = params.createTimes
                console.log(params)
                const res = await auditLeaseByCompany(params)
                if (res.code == 200) {
                    this.examineVisible = false
                    this.$tab.closeOpenPage({
                        path: '/claimAndRefund/receive/receiveManage',
                    })
                }
                console.log('subAuditLeaseByCompany ==================', res)
            },

            //审核  驳回
            refuse() {
                this.refuseVisible = true
                this.queryParams.companyAuditRemarks = '驳回'
            },
            // handelRefuse(type){
            //   if (this.queryParams.companyAuditRemarks=='') {
            //     this.$message.error('驳回时审核意见不能为空！');
            //     return;
            //   }
            //   if(type){
            //     this.refuseAuditLeaseByCompany()
            //   }else {
            //     this.queryParams.companyAuditRemarks = ''
            //   }
            //   this.refuseVisible = type
            // },
            //审核  驳回
            async refuseAuditLeaseByCompany(type) {
                const params = JSON.parse(JSON.stringify(this.queryParams))
                if (params.taskStatus == 30) {
                    params.taskStatus = 98
                    params.examineStatusId = 98
                }
                if (params.taskStatus == 31) {
                    params.taskStatus = 99
                    params.examineStatusId = 99
                }
                if (params.taskStatus == 32) {
                    params.taskStatus = 100
                    params.examineStatusId = 100
                }
                params.updateTime = params.updateTimes
                params.createTime = params.createTimes
                params.leaseApplyInfoList.forEach((v) => {
                    this.$set(
                        v,
                        'companyAuditRemark',
                        params.companyAuditRemarks,
                    )
                    this.$set(v, 'companyAuditBy', this.user.id)
                    this.$set(
                        v,
                        'examineStatusId',
                        Number(params.examineStatusId),
                    )
                    this.$set(v, 'status', type)
                })
                console.log(params)
                const res = await rejectLeaseByCompany(params)
                if (res.code == 200) {
                    this.examineVisible = false
                    this.$tab.closeOpenPage({
                        path: '/claimAndRefund/receive/receiveManage',
                    })
                }
                console.log('subAuditLeaseByCompany ==================', res)
            },
            /** 修改按钮操作 */
            handleBack(row) {
                this.$tab.closeOpenPage({
                    path: '/claimAndRefund/receive/receiveManage',
                })
            },
            /** 查询 */
            async getData(taskId) {
                const res = await getLeaseListAll({
                    taskId,
                })
                this.queryParams = { ...this.queryParams, ...res.rows[0] }
                this.$set(
                    this.queryParams,
                    'leaseApplyInfo',
                    this.queryParams.leaseApplyInfoList[0],
                )
                this.queryParams.leaseApplyDetails.forEach((v) => {
                    this.$set(v, 'applyFor', this.queryParams.applyFor)
                    this.$set(v, 'updateTimes', this.queryParams.updateTimes)
                    this.$set(v, 'taskName', this.queryParams.taskName)
                    this.$set(v, 'createTime', this.queryParams.createTimes)
                    this.$set(v, 'updateTime', this.queryParams.updateTimes)
                })
                console.log(this.queryParams.examineStatusId)
                for (let i = 0; i < this.flowPath.length; i++) {
                    if (
                        this.flowPath[i].id < this.queryParams.examineStatusId
                    ) {
                        this.flowPath[i].color = '#0bbd87'
                        this.flowPath[i].icon = 'el-icon-check'
                    } else {
                        this.flowPath[i].remarkKey = ''
                    }
                    if (
                        this.flowPath[i].id == this.queryParams.examineStatusId
                    ) {
                        this.flowPath[i].type = 'primary'
                        this.flowPath[i].color = '#1890ff'
                        this.flowPath[i].icon = 'el-icon-more'
                        break
                    }
                }
                console.log(this.flowPath)
                if (this.queryParams.examineStatusId == 98) {
                    this.flowPath[0].color = 'red'
                    this.flowPath[0].icon = 'el-icon-close'
                    this.flowPath[1].color = ''
                    this.flowPath[1].icon = ''

                    this.flowPath[2].color = ''
                    this.flowPath[2].icon = ''
                }
                if (this.queryParams.examineStatusId == 99) {
                    this.flowPath[1].color = 'red'
                    this.flowPath[1].icon = 'el-icon-close'
                    this.flowPath[2].color = ''
                    this.flowPath[2].icon = ''
                }
                if (this.queryParams.examineStatusId == 100) {
                    this.flowPath[2].color = 'red'
                    this.flowPath[2].icon = 'el-icon-close'
                }
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.reset()
            },
            // 表单重置
            reset() {
                this.form = {
                    dictId: undefined,
                    dictName: undefined,
                    dictType: undefined,
                    status: '0',
                    remark: undefined,
                }
                this.resetForm('form')
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = []
                this.resetForm('queryForm')
                this.handleQuery()
            },
            handleNotice() {
                this.noticeOpen = true
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset()
                this.open = true
                this.title = '添加字典类型'
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map((item) => item.dictId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset()
                const dictId = row.dictId || this.ids
                getType(dictId).then((response) => {
                    this.form = response.data
                    this.open = true
                    this.title = '验收'
                })
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.dictId != undefined) {
                            updateType(this.form).then((response) => {
                                this.$modal.msgSuccess('修改成功')
                                this.open = false
                                this.getList()
                            })
                        } else {
                            addType(this.form).then((response) => {
                                this.$modal.msgSuccess('新增成功')
                                this.open = false
                                this.getList()
                            })
                        }
                    }
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const dictIds = row.dictId || this.ids
                this.$modal
                    .confirm('是否确认删除所选择的数据项？')
                    .then(function () {
                        return delType(dictIds)
                    })
                    .then(() => {
                        this.getList()
                        this.$modal.msgSuccess('删除成功')
                    })
                    .catch(() => {})
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download(
                    'system/dict/type/export',
                    {
                        ...this.queryParams,
                    },
                    `type_${new Date().getTime()}.xlsx`,
                )
            },
            /** 刷新缓存按钮操作 */
            handleRefreshCache() {
                refreshCache().then(() => {
                    this.$modal.msgSuccess('刷新成功')
                    this.$store.dispatch('dict/cleanDict')
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-card__body {
        padding: 10px !important;
        p {
            margin: 0 !important;
        }
        .title {
            color: #848484;
            font-weight: 700;
        }
        .author {
            font-size: 13px;
            margin-top: 5px;
        }
        .time {
            font-size: 12px;
        }
        .remark {
            margin-top: 10px;
            word-break: break-all;
            font-size: 13px;
        }
    }
</style>
