<template>
    <div class="app-container" id="receiveApplyAdd">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :rules="queryRules"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
        >
            <el-row>
                <el-form-item label="领料单位" prop="unitId">
                    <el-select
                        v-model="queryParams.unitId"
                        filterable
                        clearable
                        @change="GetProData"
                        style="width: 240px"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in unitList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领料工程" prop="proId">
                    <el-select
                        v-model="queryParams.proId"
                        filterable
                        clearable
                        @change="GetUnitData"
                        style="width: 240px"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in proList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="协议号" prop="agreementCode">
                    <el-input
                        maxlength="50"
                        v-model="queryParams.agreementCode"
                        disabled
                        style="width: 240px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="物品类型" prop="status">
                    <el-cascader
                        placeholder="请输入物品类型"
                        :options="deviceTypeTree"
                        :props="deviceTypeTreeProps"
                        v-model="deviceType"
                        @change="deviceTypeChange"
                        ref="deviceTypeCascader"
                        filterable
                        style="width: 240px"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="领料人" prop="leasePerson">
                    <el-input
                        maxlength="50"
                        v-model="queryParams.leaseApplyInfo.leasePerson"
                        placeholder="请输入领料人"
                        clearable
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="领料人电话" prop="phone">
                    <el-input
                        maxlength="11"
                        v-model="queryParams.leaseApplyInfo.phone"
                        placeholder="请输入领料人电话"
                        clearable
                        onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="备注" prop="roleName">
                    <el-input
                        maxlength="100"
                        v-model="queryParams.leaseApplyInfo.remark"
                        placeholder="请输入备注"
                        clearable
                        rows="1"
                        type="textarea"
                        style="width: 240px"
                    />
                </el-form-item>
            </el-row>
            <el-row></el-row>
        </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-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    v-if="isEdit == 'true'"
                    @click="handleAdd"
                >
                    保存
                </el-button>
            </el-col>

            <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
        </el-row>

        <el-table
            v-loading="loading"
            :data="leaseApplyDetails"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column
                label="类型名称"
                prop="typeCn"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="规格型号"
                prop="guigeCn"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="计量单位" prop="unitCn" />
            <el-table-column label="库存数量" prop="num" />
            <el-table-column label="预领数量" align="center">
                <template slot-scope="scope">
                    <el-input
                        v-model.number="scope.row.preNum"
                        placeholder="请输入预领数量"
                        type="number"
                        min="1"
                        @input="checkNum(scope.row)"
                        clearable
                        style="width: 100%"
                    />
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center">
                <template slot-scope="scope">
                    <el-input
                        maxlength="100"
                        v-model="scope.row.remark"
                        placeholder="请输入备注"
                        clearable
                        style="width: 100%"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                class-name="small-padding fixed-width"
                v-if="isEdit == 'true'"
            >
                <template slot-scope="scope">
                    <!--          <el-button-->
                    <!--            size="mini"-->
                    <!--            type="text"-->
                    <!--            icon="el-icon-edit"-->
                    <!--            @click="handleBack(scope.row)"-->
                    <!--            v-hasPermi="['system:role:edit']"-->
                    <!--          >修改</el-button>-->
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="
                            handleDelete({ ...scope.row, index: scope.$index })
                        "
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {
    getRole,
    delRole,
    addRole,
    updateRole,
    dataScope,
    changeRoleStatus,
    deptTreeSelect,
} from '@/api/system/role'
import {
    treeselect as menuTreeselect,
    roleMenuTreeselect,
} from '@/api/system/menu'
import {
    getProData,
    getUnitData,
    getDeviceTypeTree,
    getAgreementInfoById,
    submitLeaseApply,
    getLeaseListAll,
    editLeaseApply,
    getLeaseApplyListAll,
    getLeaseApplyAuditListAll,
} from '@/api/claimAndRefund/receive'
import { getInfo } from '@/api/login'
export default {
    name: 'ReceiveApplyAdd',
    data() {
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error('退料人电话不能为空'))
                // this.$message.error("手机号不为空");
            } else if (value.length < 11) {
                callback(new Error('电话号码格式不正确'))
                // this.$message.error("手机号格式不正确");
            } else {
                callback()
            }
        }
        return {
            user: null, // 用户信息
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 角色表格数据
            roleList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            isEdit: 'true',
            // 日期范围
            dateRange: [],
            // 数据范围选项
            dataScopeOptions: [
                {
                    value: '1',
                    label: '全部数据权限',
                },
                {
                    value: '2',
                    label: '自定数据权限',
                },
                {
                    value: '3',
                    label: '本部门数据权限',
                },
                {
                    value: '4',
                    label: '本部门及以下数据权限',
                },
                {
                    value: '5',
                    label: '仅本人数据权限',
                },
            ],
            // 菜单列表
            menuOptions: [],
            // 部门列表
            deptOptions: [],
            // 查询参数
            queryParams: {
                types: 2,

                unitId: null,
                proId: null,
                agreementId: null, //协议id
                agreementCode: null, //协议code
                companyId: '', //登录信息中取
                createBy: '', //用户名
                taskType: 29,
                taskStatus: 30,
                //领料人信息
                leaseApplyInfo: {
                    leasePerson: '',
                    phone: '',
                    remark: '',
                },
                //领料详情集合
                leaseApplyDetails: [],
            },
            leaseApplyDetails: [],

            leaseApplyInfoList: [],

            //领料详情单条模板
            leaseApplyDetailsItem: {
                parenntId: null,
                createBy: null,
                companyId: null,
                status: 0,
                typeId: null, //  树结构第4级   规格id
                typeCn: '', //显示的设备类型
                guigeCn: '', //显示的设备规格
                unitCn: '', //显示的设备 单位
                remark: '', //单条备注
                preNum: 1, //预领数量
            },
            //
            queryRules: {
                unitId: [
                    {
                        required: true,
                        message: '请选择领料单位',
                        trigger: 'change',
                        type: 'number',
                    },
                ],
                proId: [
                    {
                        required: true,
                        message: '请选择工程',
                        trigger: 'change',
                        type: 'number',
                    },
                ],
                // leasePerson: [
                //   {
                //     required: true, message: '请输入领料人', trigger: 'blur',
                //   }
                // ],
                // phone: [
                //     {required: true, message: '请输入领料人手机号', trigger: 'change'},
                //     { validator: validatePhone, trigger: "blur" },
                //     { min: 11, message: "手机号不足11位", trigger: "blur" },
                // ],
            },
            unitList: [], //单位 集合
            proList: [], // 工程 集合
            deviceTypeTree: [], // 设备 树结构数据

            taskId: null, // 是否编辑

            // 设备 树显示 配置
            deviceTypeTreeProps: {
                multiple: false,
                value: 'id',
            },
            // 选中的设备类型
            deviceType: null,

            // 表单参数
            form: {},
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            // 表单校验
            rules: {
                roleName: [
                    {
                        required: true,
                        message: '角色名称不能为空',
                        trigger: 'blur',
                    },
                ],
                roleKey: [
                    {
                        required: true,
                        message: '权限字符不能为空',
                        trigger: 'blur',
                    },
                ],
                roleSort: [
                    {
                        required: true,
                        message: '角色顺序不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    mounted() {
        this.GetUserInfo()

        this.GetUnitData()

        this.GetProData()

        this.GetDeviceTypeTree()
        // this.getList();
        if (this.$route.query.taskId && !this.$route.query.isBack) {
            this.GetTaskDetail(this.$route.query.taskId)
        }
        if (this.$route.query.taskId && this.$route.query.isBack) {
            this.GetTaskDetail2(this.$route.query.taskId)
        }
        this.taskId = this.$route.query.taskId
        this.isEdit = this.$route.query.isEdit
        // console.log(typeof(this.isEdit))
        // this.$set('isEdit',this.$route.query.isEdit)
    },

    methods: {
        // 获取用户信息
        async GetUserInfo() {
            const res = await getInfo()
            this.user = res.user
        },

        // 获取 来往单位 列表数据
        async GetUnitData() {
            const params = {
                id: this.queryParams.proId,
            }
            const res = await getUnitData(params)
            this.unitList = res.data

            this.GetAgreementInfoById()
        },
        // 获取 工程名称 列表数据
        async GetProData() {
            const params = {
                id: this.queryParams.unitId,
            }
            const res = await getProData(params)
            this.proList = res.data

            this.GetAgreementInfoById()
        },

        // 获取 设备树结构数据
        async GetDeviceTypeTree() {
            const params = {
                level: 4,
            }
            const res = await getDeviceTypeTree(params)
            this.deviceTypeTree = res.data
        },
        // 获取 协议id
        async GetAgreementInfoById() {
            if (this.queryParams.unitId && this.queryParams.proId) {
                const params = {
                    unitId: this.queryParams.unitId,
                    projectId: this.queryParams.proId,
                }
                const res = await getAgreementInfoById(params)
                if (!(res.data && res.data.agreementId)) {
                    this.$message.error('当前单位和工程未上传')

                    this.queryParams.unitId = null
                    this.queryParams.proId = null
                    this.GetUnitData()
                    this.GetProData()
                } else {
                    this.queryParams.agreementId = res.data.agreementId
                    this.queryParams.agreementCode = res.data.agreementCode
                }
            }
        },

        // 获取 任务详情数据
        async GetTaskDetail(taskId) {
            const res = await getLeaseApplyListAll({ taskId })

            const data = res.rows[0]

            // unitId:null,
            // proId:null,
            // agreementId:null, //协议id
            // agreementCode: null,
            if (data.taskStatus == 100) {
                this.queryParams.taskStatus = 32
                this.queryParams.examineStatusId = '32'
            }
            this.queryParams.unitId = data.unitId
            this.queryParams.proId = data.proId
            this.queryParams.leaseApplyInfo.phone =
                data.leaseApplyInfoList[0].phone
            this.queryParams.leaseApplyInfo.leasePerson =
                data.leaseApplyInfoList[0].leasePerson
            this.queryParams.agreementCode = data.agreementCode
            this.queryParams.agreementId = data.agreementId
            this.queryParams.leaseApplyInfo.remark =
                data.leaseApplyInfoList[0].remark
            this.leaseApplyInfoList = data.leaseApplyInfoList
            this.leaseApplyDetails = data.leaseApplyDetails.map((item) => {
                return this.handelEchoData(item)
            })
        },
        // 驳回提交 任务详情数据
        async GetTaskDetail2(taskId) {
            const res = await getLeaseApplyAuditListAll({ taskId })

            const data = res.rows[0]

            // unitId:null,
            // proId:null,
            // agreementId:null, //协议id
            // agreementCode: null,
            if (data.taskStatus == 100) {
                this.queryParams.taskStatus = 32
                this.queryParams.examineStatusId = '32'
            }
            this.queryParams.unitId = data.unitId
            this.queryParams.proId = data.proId
            this.queryParams.leaseApplyInfo.phone =
                data.leaseApplyInfoList[0].phone
            this.queryParams.leaseApplyInfo.leasePerson =
                data.leaseApplyInfoList[0].leasePerson
            this.queryParams.agreementCode = data.agreementCode
            this.queryParams.agreementId = data.agreementId
            this.queryParams.leaseApplyInfo.remark =
                data.leaseApplyInfoList[0].remark
            this.leaseApplyInfoList = data.leaseApplyInfoList
            this.leaseApplyDetails = data.leaseApplyDetails.map((item) => {
                return this.handelEchoData(item)
            })
        },
        //生成回显数据
        handelEchoData(item) {
            const template = JSON.parse(
                JSON.stringify(this.leaseApplyDetailsItem),
            )
            template.createBy = item.createBy
            template.companyId = item.companyId
            template.typeId = item.typeId
            template.unitCn = item.unitName
            template.typeCn = item.typeName
            template.guigeCn = item.typeModelName
            template.remark = item.remark
            template.preNum = item.preNum
            template.status = item.status
            template.parenntId = item.parenntId
            template.num = item.num
            return template
        },

        // 表单重置
        reset() {
            if (this.$refs.menu != undefined) {
                this.$refs.menu.setCheckedKeys([])
            }
            ;(this.menuExpand = false),
                (this.menuNodeAll = false),
                (this.deptExpand = true),
                (this.deptNodeAll = false),
                (this.form = {
                    roleId: undefined,
                    roleName: undefined,
                    roleKey: undefined,
                    roleSort: 0,
                    status: '0',
                    menuIds: [],
                    deptIds: [],
                    menuCheckStrictly: true,
                    deptCheckStrictly: true,
                    remark: undefined,
                })
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            // this.queryParams.leaseApplyDetails = selection
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case 'handleDataScope':
                    this.handleDataScope(row)
                    break
                case 'handleAuthUser':
                    this.handleAuthUser(row)
                    break
                default:
                    break
            }
        },

        /** 保存按钮操作 */
        handleAdd() {
            this.$refs.queryForm.validate(async (valid) => {
                if (!valid) {
                    return false
                } else {
                    this.queryParams.leaseApplyDetails = this.leaseApplyDetails
                    if (this.queryParams.leaseApplyDetails.length == 0) {
                        this.$message.error('请添加数据')
                        return
                    }
                    try {
                        this.queryParams.leaseApplyDetails.forEach((item) => {
                            if (item.num == 0) {
                                this.$message.error(
                                    '机具类型库存量为零无法领料',
                                )
                                throw new Error()
                            }
                            if (item.preNum == '') {
                                this.$message.error('请填写预领数量')
                                throw new Error()
                            }
                        })
                    } catch (e) {
                        throw e
                    }
                    this.queryParams.createBy = this.user.userName
                    this.queryParams.companyId = this.user.companyId
                    let res

                    if (this.taskId) {
                        this.leaseApplyInfoList.forEach((v) => {
                            v = Object.assign(
                                v,
                                this.queryParams.leaseApplyInfo,
                            )
                            this.$set(
                                v,
                                'leaseApplyDetails',
                                this.queryParams.leaseApplyDetails,
                            )
                        })

                        const params = {
                            ...this.queryParams,
                            taskId: this.taskId,
                            leaseApplyInfoList: this.leaseApplyInfoList,
                        }

                        res = await editLeaseApply(params)
                    } else {
                        // console.log(this.queryParams)
                        let isNum = this.queryParams.leaseApplyDetails.every(
                            (e) => e.num != 0,
                        )

                        if (!isNum) {
                            this.$message.error('机具类型库存量为零无法领料')
                            return
                        }
                        res = await submitLeaseApply(this.queryParams)
                    }
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                        })
                        this.$tab.closeOpenPage({
                            path: '/claimAndRefund/receive/receiveApply',
                        })
                    }
                }
            })
        },
        /** 修改按钮操作 */
        handleBack(row) {
            this.$tab.closeOpenPage({
                path: '/claimAndRefund/receive/receiveApply',
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.leaseApplyDetails.splice(row.index, 1)
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download('system/role/export', {
            //   ...this.queryParams
            // }, `role_${new Date().getTime()}.xlsx`)
        },

        checkNum(row) {
            let maxNum = row.num
            if (row.preNum <= 1) {
                row.preNum = 1
            } else if (row.preNum >= maxNum) {
                row.preNum = maxNum
            }
        },
        /////// 设备类型树  切换
        deviceTypeChange(val) {
            console.log(val)
            let nodes = null
            nodes =
                this.$refs.deviceTypeCascader.getCheckedNodes().length > 0
                    ? this.$refs.deviceTypeCascader.getCheckedNodes()
                    : [this.$refs.deviceTypeCascader.panel.getNodeByValue(val)]
            if (nodes[0].level != 4) {
                return
            }
            // console.log(this.leaseApplyDetails)
            // console.log(nodes[0].data.id)
            for (let i = 0; i < this.leaseApplyDetails.length; i++) {
                if (this.leaseApplyDetails[i].typeId == nodes[0].data.id) {
                    this.leaseApplyDetails.splice(i, 1)
                    break
                }
            }
            this.leaseApplyDetails.push(this.handelTableItemData(nodes[0]))
            this.deviceType = {}
        },
        //// 将数据处理成 表格中需要的数据
        handelTableItemData(node) {
            const template = JSON.parse(
                JSON.stringify(this.leaseApplyDetailsItem),
            )
            template.createBy = this.user.name
            console.log(node.data)
            template.num = node.data.num
            template.companyId = node.data.companyId
            template.typeId = node.data.id
            template.unitCn = node.data.unitName
            template.typeCn = node.pathLabels[2]
            template.guigeCn = node.pathLabels[3]

            if (this.taskId) {
                const index = this.leaseApplyInfoList.find(
                    (key) => key.companyId == node.data.companyId,
                )
                template.parenntId = index ? index.id : ''
            }

            return template
        },
    },
}
</script>
