<template>
    <div>
        <el-card style="background-color: #F5F7FA">
            <!-- 搜素区域 -->
            <div>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-input v-model="warehouse_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
                                  placeholder="场站名称" clearable></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="warehouse_queryInfo.name" prefix-icon="el-icon-search" size="small"
                                  placeholder="仓库名称" clearable></el-input>
                    </el-col>

                    <el-col :span="8">
                        <el-button type="success" style="width:120px" size="small" @click="warehouse_getList">
                            查询
                        </el-button>
                        <el-button type="primary" style="width:120px" size="small" @click="warehouse_toAddDialog">
                            仓库添加
                        </el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 列表区域 -->
            <div style="margin-top: 20px;">
                <el-table :data="warehouse_page.warehouseList" border size="mini"
                          v-loading="warehouse_loading.listLoading" element-loading-text="获取仓库列表，拼命加载中">
                    <el-table-column type="index" align="center"></el-table-column>
                    <el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
                    <el-table-column label="仓库名称" prop="name" align="center" width="130"></el-table-column>
                    <el-table-column label="仓库类型" prop="warehouseType" align="center" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.warehouseType ==='001'">进港仓库</span>
                            <span v-if="scope.row.warehouseType ==='002'">出港仓库</span>
                            <span v-if="scope.row.warehouseType ==='003'">查验仓库</span>
                            <span v-if="scope.row.warehouseType ==='004'">危险品仓库</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="仓库长度（米）" prop="warehouseLength" align="center" width="120"></el-table-column>
                    <el-table-column label="仓库宽度（米）" prop="warehouseWidth" align="center" width="120"></el-table-column>
                    <el-table-column label="仓库高度（米）" prop="warehouseHeight" align="center" width="120"></el-table-column>
                    <el-table-column label="仓库面积（平方米）" prop="warehouseArea" align="center" width="140"></el-table-column>
                    <el-table-column label="仓库体积（立方米）" prop="warehouseVolume" align="center" width="140"></el-table-column>
                    <el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
                    <el-table-column label="操作" width="160px" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                <el-button type="text" icon="el-icon-edit" size="mini"
                                           @click="warehouse_toEditDialog(scope.$index,scope.row)">编辑
                                </el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                <el-button type="text" icon="el-icon-delete" size="mini"
                                           :loading="warehouse_loading.delLoading"
                                           @click="warehouse_delete(scope.$index,scope.row)">删除
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页区域 -->
            <div style="margin-top: 10px">
                <el-row :gutter="24">
                    <el-col :span="10" style="margin-top: 5px">
                        <el-pagination
                                @size-change="warehouse_handleSizeChange"
                                @current-change="warehouse_handleCurrentChange"
                                :current-page="warehouse_queryInfo.pageNum"
                                :page-sizes="[10,30,50,100]"
                                :page-size="warehouse_queryInfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="warehouse_page.total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 仓库添加 -->
        <div>
            <el-dialog title="仓库添加："
                       :visible.sync="warehouse_dialog.addDialog"
                       style="margin-top: -100px" text-align="center" width="60%"
                       @close="warehouse_addDialogClosed">
                <el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
                         :model="warehouse_addForm" :rules="warehouse_addFormRules" ref="warehouse_addFormRef">
                    <el-form-item label="场站名称：" prop="yardId">
                        <el-select v-model="warehouse_addForm.yardId" style="width: 300px" clearable size="mini"
                                   placeholder="请选择场站名称">
                            <el-option
                                    v-for="item in stationNameList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库名称：" prop="name">
                        <el-input v-model="warehouse_addForm.name" style="width:300px" size="mini" clearable
                                  placeholder="请输入仓库名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="仓库类型：" prop="warehouseType">
                        <el-select v-model="warehouse_addForm.warehouseType" style="width: 300px" clearable size="mini"
                                   placeholder="请选择仓库类型">
                            <el-option
                                    v-for="item in warehouseTypeList"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="仓库长度（米）：" prop="warehouseLength">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="calculationAreaAndVolume"
                                         v-model="warehouse_addForm.warehouseLength" placeholder="请输入仓库长度">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="calculationAreaAndVolume"
                                         v-model="warehouse_addForm.warehouseWidth" placeholder="请输入仓库宽度">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库高度（米）：" prop="warehouseHeight">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="calculationAreaAndVolume"
                                         v-model="warehouse_addForm.warehouseHeight" placeholder="请输入仓库宽度">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         :disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined"
                                         v-model="warehouse_addForm.warehouseArea" placeholder="请输入仓库面积">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         :disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined
                                          || warehouse_addForm.warehouseHeight === undefined"
                                         v-model="warehouse_addForm.warehouseVolume" placeholder="请输入仓库体积">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="备注信息：" prop="remarks">
                        <el-input v-model="warehouse_addForm.remarks" style="width:300px" clearable size="mini"
                                  type="textarea" :rows="2">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
                    <el-button type="info" @click="warehouse_dialog.addDialog = false" size="medium"
                               style="width: 100px">取消
                    </el-button>
                    <el-button type="primary" @click="warehouse_add" :loading="warehouse_loading.addLoading"
                               size="medium" style="width: 100px">保存
                    </el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 仓库修改 -->
        <div>
            <el-dialog title="仓库修改："
                       :visible.sync="warehouse_dialog.editDialog"
                       style="margin-top: -100px" text-align="center" width="60%"
                       @close="warehouse_editDialogClosed">
                <el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
                         :model="warehouse_editForm" :rules="warehouse_editFormRules" ref="warehouse_editFormRef">
                    <el-form-item label="场站名称：" prop="yardId">
                        <el-select v-model="warehouse_editForm.yardId" style="width: 300px" clearable size="small"
                                   placeholder="请选择场站名称">
                            <el-option
                                    v-for="item in stationNameList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库名称：" prop="name">
                        <el-input v-model="warehouse_editForm.name" style="width:300px" size="mini" clearable
                                  placeholder="请输入仓库名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="仓库类型：" prop="warehouseType">
                        <el-select v-model="warehouse_editForm.warehouseType" style="width: 300px" clearable size="small"
                                   placeholder="请选择仓库类型">
                            <el-option
                                    v-for="item in warehouseTypeList"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库长度（米）：" prop="warehouseLength">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="edit_calculationAreaAndVolume"
                                         v-model="warehouse_editForm.warehouseLength" placeholder="请输入仓库长度">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="edit_calculationAreaAndVolume"
                                         v-model="warehouse_editForm.warehouseWidth" placeholder="请输入仓库宽度">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="仓库高度（米）：" prop="warehouseHeight">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         @blur="edit_calculationAreaAndVolume"
                                         v-model="warehouse_editForm.warehouseHeight" placeholder="请输入仓库宽度">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         v-model="warehouse_editForm.warehouseArea" placeholder="请输入面积">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
                        <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
                                         v-model="warehouse_editForm.warehouseVolume" placeholder="请输入体积">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="备注信息：" prop="remarks">
                        <el-input v-model="warehouse_editForm.remarks" style="width:300px" clearable size="mini"
                                  type="textarea" :rows="2">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
                    <el-button type="info" @click="warehouse_dialog.editDialog = false" size="medium"
                               style="width: 100px">取消
                    </el-button>
                    <el-button type="primary" @click="warehouse_edit" :loading="warehouse_loading.editLoading"
                               size="medium" style="width: 100px">保存
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {selectWarehouseList, insertWarehouse, updateWarehouse, deleteWarehouse, getYardList} from "../../api/station_dispatch";

    export default {
        name: "Warehouse",
        data() {
            return {
                /**
                 * 搜索参数
                 */
                warehouse_queryInfo: {
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 10,
                },

                /**
                 * 分页
                 */
                warehouse_page: {
                    yardList: [],
                    total: 0,
                    selectList: [],
                },

                /**
                 * 加载
                 */
                warehouse_loading: {
                    listLoading: false,
                    addLoading: false,
                    editLoading: false,
                    delLoading: false,
                    batchDelLoading: false,
                },

                /**
                 * 对话框
                 */
                warehouse_dialog: {
                    addDialog: false,
                    editDialog: false,
                },

                /**
                 * 备案添加，表单
                 */
                warehouse_addForm: {
                    // 对应场站的ID
                    yardId: '',
                    // 仓库名称
                    name: '',
                    // 仓库类型
                    warehouseType: '',
                    // 仓库长度
                    warehouseLength: undefined,
                    // 仓库宽度
                    warehouseWidth: undefined,
                    // 仓库高度
                    warehouseHeight: undefined,
                    // 仓库面积
                    warehouseArea: undefined,
                    // 仓库体积
                    warehouseVolume: undefined,
                    // 备注
                    remarks: '',
                },

                /**
                 * 仓库类型
                 */
                warehouseTypeList: [
                    {
                        value: '001',
                        label: '进港仓库'
                    },
                    {
                        value: '002',
                        label: '出港仓库'
                    },
                    {
                        value: '003',
                        label: '查验仓库'
                    },
                    {
                        value: '004',
                        label: '危险品仓库'
                    },
                ],
                /**
                 * 场站名称
                 */
                stationNameList: [],

                /**
                 * 备案添加，表单验证规则
                 */
                warehouse_addFormRules: {
                    yardId: [
                        {required: true, message: '请选择场站', trigger: ['blur', 'change']},
                    ],
                    // 仓库名称
                    name: [
                        {required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
                    ],
                    // 仓库类型
                    warehouseType: [
                        {required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
                    ],
                    // 仓库长度
                    warehouseLength: [
                        {required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
                    ],
                    // 仓库宽度
                    warehouseWidth: [
                        {required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
                    ],
                    warehouseArea: [
                        {required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
                    ],
                },

                /**
                 * 备案修改，表单
                 */
                warehouse_editForm: {},

                /**
                 * 备案修改，表单验证规则
                 */
                warehouse_editFormRules: {
                    yardId: [
                        {required: true, message: '请选择场站', trigger: ['blur', 'change']},
                    ],
                    // 仓库名称
                    name: [
                        {required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
                    ],
                    // 仓库类型
                    warehouseType: [
                        {required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
                    ],
                    // 仓库长度
                    warehouseLength: [
                        {required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
                    ],
                    // 仓库宽度
                    warehouseWidth: [
                        {required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
                    ],
                    warehouseArea: [
                        {required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
                    ],
                },
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             * 刷新列表
             */
            warehouse_handleSizeChange(newSize) {
                this.warehouse_queryInfo.pageSize = newSize;
                this.warehouse_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             * 刷新列表
             */
            warehouse_handleCurrentChange(newPage) {
                this.warehouse_queryInfo.pageNum = newPage;
                this.warehouse_getList();
            },

            /**
             * 列表查询
             */
            warehouse_getList() {
                this.warehouse_loading.listLoading = true;
                selectWarehouseList(this.warehouse_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        this.warehouse_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    this.warehouse_page.warehouseList = res.data.list;
                    this.warehouse_page.total = res.data.total;
                    this.warehouse_loading.listLoading = false;
                }).catch(error => {
                    this.warehouse_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },

            /**
             * 对话框，备案添加，打开事件
             */
            warehouse_toAddDialog() {
                this.getYards();
                this.warehouse_dialog.addDialog = true;
            },

            /**
             * 对话框，备案添加，关闭事件
             */
            warehouse_addDialogClosed() {
                this.$refs.warehouse_addFormRef.resetFields();
            },

            /**
             * 添加表单，失去焦点时，计算面积和体积
             */
            calculationAreaAndVolume() {
                this.warehouse_addForm.warehouseArea = this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth;
                this.warehouse_addForm.warehouseVolume =
                    this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth * this.warehouse_addForm.warehouseHeight;
            },
            /**
             * 备案添加
             */
            warehouse_add() {
                this.$refs.warehouse_addFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;

                    this.warehouse_loading.addLoading = true;
                    insertWarehouse(this.warehouse_addForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            this.warehouse_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.$message.success(res.msg);
                        this.warehouse_loading.addLoading = false;
                        this.warehouse_dialog.addDialog = false;
                        this.warehouse_getList();
                    }).catch(error => {
                        this.warehouse_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * 备案修改，对话框，打开事件
             */
            warehouse_toEditDialog(index, row) {
                this.getYards();
                this.warehouse_editForm = Object.assign({}, row);
                this.warehouse_dialog.editDialog = true;
            },

            /**
             * 备案修改，对话框，关闭事件
             */
            warehouse_editDialogClosed() {
                this.$refs.warehouse_editFormRef.resetFields();
            },
            /**
             * 添加表单，失去焦点时，计算面积和体积
             */
            edit_calculationAreaAndVolume() {
                this.warehouse_editForm.warehouseArea = this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth;
                this.warehouse_editForm.warehouseVolume =
                    this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth * this.warehouse_editForm.warehouseHeight;
            },
            /**
             * 备案修改
             */
            warehouse_edit() {
                this.$refs.warehouse_editFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;

                    this.warehouse_loading.editLoading = true;
                    updateWarehouse(this.warehouse_editForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            this.warehouse_loading.editLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.$message.success(res.msg);
                        this.warehouse_loading.editLoading = false;
                        this.warehouse_dialog.editDialog = false;
                        this.warehouse_getList();
                    }).catch(error => {
                        this.warehouse_loading.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * 删除功能
             */
            warehouse_delete(index, row) {
                this.$confirm('此操作永久删除该仓库信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    this.warehouse_loading.delLoading = true;
                    deleteWarehouse(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            this.warehouse_loading.delLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.warehouse_loading.delLoading = false;
                        this.$message.success(res.msg);
                        this.warehouse_getList();
                    }).catch(error => {
                        this.warehouse_loading.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 获取所有场站列表
             */
            getYards() {
                getYardList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    this.stationNameList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
        },
    }
</script>

<style scoped>

</style>