<template>
    <!-- 装备出库页面 -->
    <div class="app-container">
        <div class="page-header">
            <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
            <span class="page-title">装备出库</span>
        </div>

        <el-form ref="outFormRef" :model="outForm" :rules="outFormRules" label-width="auto" size="small">
            <el-row :gutter="20" type="flex">
                <el-col>
                    <el-form-item label="变更状态为">
                        <el-radio-group v-model="outForm.outStatus">
                            <el-radio label="self">自用</el-radio>
                            <el-radio label="share">共享</el-radio>
                        </el-radio-group>

                        <el-button style="margin-left: 80px">确定变更</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" type="flex">
                <el-col>
                    <el-form-item label="使用项目：" prop="projectName">
                        <el-input v-model="outForm.projectName" placeholder="请输入使用项目名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="项目类型：" prop="outReason">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            v-model="outForm.outReason"
                        >
                            <el-option label="工程项目" value="1" />
                            <el-option label="非工程项目" value="2" />
                            <el-option label="调拨项目" value="3" />
                            <el-option label="其他" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="电压等级：" prop="outReason">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            v-model="outForm.outReason"
                        >
                            <el-option label="工程项目" value="1" />
                            <el-option label="非工程项目" value="2" />
                            <el-option label="调拨项目" value="3" />
                            <el-option label="其他" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="项目所在省：" prop="outReason">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            v-model="outForm.outReason"
                        >
                            <el-option label="工程项目" value="1" />
                            <el-option label="非工程项目" value="2" />
                            <el-option label="调拨项目" value="3" />
                            <el-option label="其他" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="项目所在市：" prop="outReason">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            v-model="outForm.outReason"
                        >
                            <el-option label="工程项目" value="1" />
                            <el-option label="非工程项目" value="2" />
                            <el-option label="调拨项目" value="3" />
                            <el-option label="其他" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" type="flex">
                <el-col>
                    <el-form-item label="项目所在区/县：" prop="outReason">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            v-model="outForm.outReason"
                        >
                            <el-option label="工程项目" value="1" />
                            <el-option label="非工程项目" value="2" />
                            <el-option label="调拨项目" value="3" />
                            <el-option label="其他" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="详细地址：" prop="receiver">
                        <el-input type="textarea" v-model="outForm.receiver" placeholder="请输入详细地址" clearable />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="需求单位：" prop="phone">
                        <el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="联系人：" prop="phone">
                        <el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="联系方式：" prop="phone">
                        <el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col>
                    <el-button type="primary" @click="onHandleAddEquipment">添加变更装备</el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-table>
            <el-table-column label="序号" type="index" align="center" width="55" />
            <el-table-column prop="equipmentCode" label="装备名称" align="center" />
            <el-table-column prop="equipmentCode" label="装备系列" align="center" />
            <el-table-column prop="equipmentCode" label="规格型号" align="center" />
            <el-table-column prop="equipmentCode" label="装备编码" align="center" />
            <el-table-column prop="equipmentCode" label="装备状态" align="center" />
            <el-table-column prop="equipmentCode" label="使用日期" align="center" />
            <el-table-column prop="equipmentCode" label="操作" />
        </el-table>

        <el-dialog title="添加变更装备" :visible.sync="addEquipmentVisible" width="80%">
            <el-form :inline="true" label-width="auto">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="装备名称" prop="equipmentName">
                            <el-input
                                v-model="addEquipmentForm.equipmentName"
                                placeholder="请输入装备名称"
                                clearable
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="装备状态" prop="equipmentName">
                            <el-input v-model="addEquipmentForm.equipmentName" placeholder="请输入装备名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button>查询</el-button>
                            <el-button>重置</el-button>
                            <el-button @click="onHandleAddEquipmentConfirm">确定添加</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table>
                <el-table-column label="序号" type="index" align="center" width="55" />
                <el-table-column
                    width="55"
                    align="center"
                    type="selection"
                    @selection-change="handleSelectionAddEquipment"
                />
                <el-table-column prop="equipmentCode" label="公司名称" align="center" />
                <el-table-column prop="equipmentCode" label="装备名称" align="center" />
                <el-table-column prop="equipmentCode" label="装备系列" align="center" />
                <el-table-column prop="equipmentCode" label="装备型号" align="center" />
                <el-table-column prop="equipmentCode" label="装备编号" align="center" />
                <el-table-column prop="equipmentCode" label="计数单位" align="center" />
                <el-table-column prop="equipmentCode" label="产权单位" align="center" />
                <el-table-column prop="equipmentCode" label="资产原值(元)" align="center" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addEquipmentVisible: false,
            outForm: {
                outDate: '',
                outReason: '',
                outNumber: '',
                receiveDept: '',
                receiver: '',
                phone: '',
                projectName: '',
                returnDate: '',
                outStatus: 'normal',
                remark: '',
            },
            outFormRules: {
                outDate: [{ required: true, message: '请选择出库日期', trigger: 'change' }],
                outReason: [{ required: true, message: '请选择出库原因', trigger: 'change' }],
                outNumber: [
                    { required: true, message: '请输入出库单号', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
                ],
                receiveDept: [{ required: true, message: '请选择领用部门', trigger: 'change' }],
                receiver: [
                    { required: true, message: '请输入领用人姓名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
                ],
                projectName: [
                    { required: true, message: '请输入使用项目名称', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' },
                ],
                returnDate: [{ required: true, message: '请选择预计归还日期', trigger: 'change' }],
                outStatus: [{ required: true, message: '请选择出库状态', trigger: 'change' }],
            },
            equipmentList: [
                {
                    equipmentCode: 'EQ001',
                    equipmentName: '挖掘机',
                    equipmentType: '工程机械',
                    model: 'CAT320D',
                    quantity: 1,
                    maxQuantity: 5,
                    unit: '台',
                    status: 'available',
                    location: 'A区-01',
                },
                {
                    equipmentCode: 'EQ002',
                    equipmentName: '起重机',
                    equipmentType: '起重设备',
                    model: 'QY25K5',
                    quantity: 1,
                    maxQuantity: 3,
                    unit: '台',
                    status: 'available',
                    location: 'B区-02',
                },
            ],
            addEquipmentForm: {
                equipmentName: '',
                equipmentStatus: '',
            },
            selectedEquipment: [],
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.go(-1)
        },

        // 表单重置
        resetForm() {
            this.$refs.outFormRef.resetFields()
            this.equipmentList = []
            this.selectedEquipment = []
        },

        // 提交表单
        submitForm() {
            this.$refs.outFormRef.validate((valid) => {
                if (valid) {
                    if (this.equipmentList.length === 0) {
                        this.$modal.msgError('请至少添加一个装备')
                        return
                    }

                    // 这里可以调用出库API
                    console.log('出库表单数据:', this.outForm)
                    console.log('装备清单:', this.equipmentList)

                    this.$modal.msgSuccess('出库申请提交成功')
                    this.resetForm()
                }
            })
        },

        // 添加装备
        onHandleAddEquipment() {
            // 这里可以打开装备选择弹窗
            this.addEquipmentVisible = true
        },

        // 移除装备
        removeEquipment(index) {
            this.equipmentList.splice(index, 1)
        },

        // 批量移除装备
        removeSelectedEquipment() {
            if (this.selectedEquipment.length === 0) {
                this.$modal.msgWarning('请选择要移除的装备')
                return
            }

            this.$modal.confirm('确认移除选中的装备吗？').then(() => {
                this.selectedEquipment.forEach((item) => {
                    const index = this.equipmentList.findIndex((eq) => eq.equipmentCode === item.equipmentCode)
                    if (index > -1) {
                        this.equipmentList.splice(index, 1)
                    }
                })
                this.selectedEquipment = []
            })
        },

        // 选择变化
        handleSelectionAddEquipment(selection) {
            this.selectedEquipment = selection
        },

        // 确定添加
        onHandleAddEquipmentConfirm() {
            if (this.selectedEquipment.length === 0) {
                this.$modal.msgWarning('请选择要添加的装备')
                return
            }

            this.addEquipmentVisible = false
        },
    },
}
</script>

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

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;

    .page-title {
        font-size: 18px;
        font-weight: 600;
        margin-left: 10px;
        color: #303133;
    }
}

.equipment-actions {
    margin: 15px 0;
    text-align: left;
}

.form-actions {
    margin-top: 30px;
    text-align: right;

    ::v-deep .el-form-item__content {
        text-align: right;
    }
}

::v-deep .el-table {
    margin-top: 15px;
}

::v-deep .el-form-item {
    margin-bottom: 18px;
}

::v-deep .el-input-number {
    width: 100%;
}
</style>
