<template>
    <el-row>
        <el-card  style="background-color: #F5F7FA">
            <!--            搜索区域-->
            <el-row :gutter="5" class="toolbar">
                <el-col :span="7">
                    <el-input v-model="queryInfo.areano" prefix-icon="el-icon-search" size="small" style="width: 280px"
                              placeholder="场站编号" clearable>
                        <template slot="prepend">库区编号</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="queryInfo.houseid" prefix-icon="el-icon-search" size="small" style="width: 280px"
                              placeholder="仓库编号" clearable>
                        <template slot="prepend">仓库编号</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
                        查询
                    </el-button>
                    <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>
                </el-col>
            </el-row>
            <!--            列表区域-->
            <el-row>
                <template>
                    <el-table
                            :data="tableData"
                            border
                            :cell-style="{textAlign:'center'}"
                            style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                            @row-dblclick="tableRowClick"
                    >
                        <el-table-column
                                fixed
                                prop="areano"
                                label="库区编号"
                                width="140">
                        </el-table-column>
                        <el-table-column
                                prop="areaname"
                                label="库区名称"
                                width="140">
                        </el-table-column>
                        <el-table-column
                                prop="houseid"
                                label="所属仓库"
                                width="120">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="length"-->
<!--                                label="库区长度"-->
<!--                                width="80">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="width"-->
<!--                                label="库区宽度"-->
<!--                                width="80">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="areanum"
                                label="库区面积"
                                width="80">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="areavol"-->
<!--                                label="库区体积"-->
<!--                                width="80">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop=" owner"
                                label="分配货主"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="surpluslocation"
                                label="剩余库位"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="totallocation"
                                label="占用库位">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="xstart"-->
<!--                                label="库区X起始位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="xend"-->
<!--                                label="库区X结束位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="ystart"-->
<!--                                label="库区Y起始位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="yend"-->
<!--                                label="库区Y结束位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="zstart"-->
<!--                                label="库区Z起始位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="zend"-->
<!--                                label="库区Z结束位"-->
<!--                                width="90">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <el-row style="margin-top: 10px" class="toolbar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pageNum"
                        :page-size="queryInfo.pageSize"
                        :page-sizes="[10, 50, 100, 500]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>
            <el-row>
                <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog.addDialog" width="80%" >
                    <el-form  :model="addForm"  :rules="rules" ref="addForm" style="margin-top: 40px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="houseid">
                                    <div class="my-text-area">
                                        <div class="el-input-group__prepend prepand">所属仓库</div>
                                        <el-select v-model="addForm.houseid" v-if="this.dis === 'create'"
                                                   filterable
                                                   allow-create
                                                   default-first-option
                                                   remote  size="small"
                                                   :remote-method="getHouseid"
                                                   :loading="loading" placeholder="请输入所属仓库" style="width: 210px">
                                            <el-option
                                                    v-for="item in houseids"
                                                    :key="item.houseid"
                                                    :label="item.housename"
                                                    :value="item.houseid">
                                                <span style="float: left">{{ item.housename }}</span>
                                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.houseid }}</span>
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="addForm.houseid" v-else disabled
                                                   filterable
                                                   allow-create
                                                   default-first-option
                                                   remote  size="small"
                                                   :remote-method="getHouseid"
                                                   :loading="loading" placeholder="请输入所属仓库" style="width: 210px">
                                            <el-option
                                                    v-for="item in houseids"
                                                    :key="item.houseid"
                                                    :label="item.housename"
                                                    :value="item.houseid">
                                                <span style="float: left">{{ item.housename }}</span>
                                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.houseid }}</span>
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="areano">
                                    <el-input v-if="this.dis === 'create'" v-model="addForm.areano" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区编号</template>
                                    </el-input>
                                    <el-input v-else disabled v-model="addForm.areano" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区编号</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="areaname">
                                    <el-input v-model="addForm.areaname" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区名称</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="totallocation">
                                    <el-input v-model="addForm.totallocation" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">占用库位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="length">
                                    <el-input v-model="addForm.length" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区长度</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="width">
                                    <el-input v-model="addForm.width" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区宽度</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="areanum">
                                    <el-input v-model="addForm.areanum" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区面积</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="areavol">
                                    <el-input v-model="addForm.areavol" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区体积</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="owner">
                                    <el-input v-model="addForm.owner" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">分配货主</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="surpluslocation">
                                    <el-input v-model="addForm.surpluslocation" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">剩余库位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="xstart">
                                    <el-input v-model="addForm.xstart" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区X起始位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="xend">
                                    <el-input v-model="addForm.xend" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区X结束位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="ystart">
                                    <el-input v-model="addForm.ystart" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区Y起始位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="yend">
                                    <el-input v-model="addForm.yend" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区Y结束位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="zstart">
                                    <el-input v-model="addForm.zstart" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区Z起始位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" :label-width="formLabelWidth"  prop="zend">
                                    <el-input v-model="addForm.zend" autocomplete="off" size="small" style="width: 300px">
                                        <template slot="prepend">库区Z结束位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="apply_dialog.addDialog = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
                    </div>
                </el-dialog>
            </el-row>
        </el-card>
        <el-dialog title="库位" :visible.sync="dialogVisible" fullscreen >
            <LOCATIONS :parent-area-id="selectedAreaId" />
            <span slot="footer" class="dialog-footer">
                <el-button type="info" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>

<script>
    import {
        selectAreas,
        delArea,
        addArea,
        ediArea,
        selectByHouseid
    } from '../../api/consigner/station';
    import jsutil from "@/common/js/util";
    import LOCATIONS from "./locations"

    export default {
        // name: "area",
        props:['parentHouseId'],
        components:{LOCATIONS},
        data() {
            return {
                queryInfo: {
                    houseid:'',
                    areano:'',
                    // areaName:'',
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 10,
                },
                total: 0,
                tableData:[],
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogApply: 'create',
                dis: undefined,
                apply_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false
                },
                addForm: {
                    areaname: '',
                    areano: '',
                    areanum: '',
                    areavol: '',
                    houseid: '',
                    length: '',
                    owner: '',
                    surpluslocation: '',
                    totallocation: '',
                    width: '',
                    xend: '',
                    xstart: '',
                    yend: '',
                    ystart: '',
                    zend: '',
                    zstart: '',
                    remark:'',
                    remark1:'',
                    remark2:'',
                    remark3:'',
                    remark4:'',
                },
                houseids:[],
                houseid: '',
                loading:false,
                formLabelWidth: '120px',
                rules: {
                    userName: [
                        //     { required: true, message: '请输入申请人', trigger: 'blur' },
                        //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        // ],
                        // applyTime: [
                        //     {  required: true, message: '请选择时间', trigger: 'change' }
                        // ],
                        // needCount: [
                        //     { required: true, message: '请输入需要车辆数量', trigger: 'blur' },
                        // ],
                        // orginStation: [
                        //     { required: true, message: '请输入起始场站', trigger: 'blur' },
                        // ],
                        // endStation: [
                        //     { required: true, message: '请输入目的场站', trigger: 'blur' },
                        // ],
                    ],
                },
                dialogVisible:false,
                selectedAreaId:""
            }
        },
        methods: {
            //获取所属仓库
            getHouseid:function(query){
                this.houseids=[];
                this.loading = true;
                selectByHouseid({houseid:query}).then(res =>{
                    if (res !== '') {
                        setTimeout(() => {
                            this.houseids=res.data.data;
                        }, 200);
                    } else {
                        this.houseids = [];
                    }

                }).finally(() =>{
                    this.loading = false;
                });
            },
            handleSizeChange(val) {
                this.queryInfo.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryInfo.pageNum = val
                this.getList()
            },
            getList() {
                const _this = this
                selectAreas(_this.queryInfo).then((response) => {
                    console.log("查询参数：",this.queryInfo)
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data.list
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            // 添加对话框，打开事件
            applyAdd() {
                this.addForm = {
                    areaname: '',
                    areano: '',
                    areanum: '',
                    areavol: '',
                    houseid: '',
                    length: '',
                    owner: '',
                    surpluslocation: '',
                    totallocation: '',
                    width: '',
                    xend: '',
                    xstart: '',
                    yend: '',
                    ystart: '',
                    zend: '',
                    zstart: '',
                    remark:'',
                    remark1:'',
                    remark2:'',
                    remark3:'',
                    remark4:'',
                };
                this.dialogApply= 'create';
                this.dis= 'create';
                this.apply_dialog.addDialog = true;
            },
            // 添加功能
            add() {
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    addArea(this.addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.apply_dialog.addDialog = false;
                        // 刷新列表
                        this.getList();
                    }).catch(error => {
                        this.$message.error(error.toString());
                    });
                })
            },
// 打开编辑
            applyEdit(row) {
                this.apply_dialog.addDialog = true;
                this.dialogApply = 'update';
                this.dis= 'update';
                this.addForm=row;
            },
            // 编辑功能
            edit() {
                // 进行表单的预验证
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    ediArea(this.addForm).then((response) => {
                        // console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.apply_dialog.addDialog = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 删除
            applyDel(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // console.log(row);
                    delArea({areano:row.areano}).then((response) => {
                        // console.log(row)
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(res.msg)
                    })
                }).catch(() => {
                })
            },
            //行点击事件
            tableRowClick(row, column, event) {
                this.dialogVisible = true
                this.selectedAreaId = row.areano
                // console.log(row+column,event);
            }
        },
        mounted() {
            if (jsutil.checkNull(this.parentHouseId)){
                this.queryInfo.houseid = this.parentHouseId;
            }
            this.getList();
        },

        watch: {
            parentHouseId(value) {
                if (jsutil.checkNull(value)){
                    this.queryInfo.houseid = value;
                }
                this.getList();
            }
        }
    }
</script>

<style scoped>
    .toolbar{
        height: 60px;
        background-color: white;
        /*line-height: 60px;*/
        vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        padding: 15px 0 0 20px;
        box-shadow: 0px 5px 5px #e5e8eb;
    }
    .my-text-area .prepand{
        float: left;
        width:89px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
    }
</style>
<style>
    .my-text-area .el-textarea__inner{
        min-height: 28px;
        height: 28px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
</style>