<template>
    <div v-if="isShow">
        <a-modal
            v-model="isShow"
            title="复核调整"
            :closable="closable"
            @ok="handleOk"
            @cancel="handleCancel"
            ok-text="确认"
            cancel-text="取消"
            class="p-model"
        >
            <a-form
                :form="form"
                :wrapper-col="formItemAcrossLayout.wrapperCol"
            >
                <a-form-item label="品规"
                             :label-col="formItemAcrossLayout.labelCol"
                >
                    <a-input
                        @input="onInput"
                        v-decorator="['category', {rules: [{ required: true, message: '请输入品规名称!' }] }]"
                    />

                    <happy-scroll class="search-list" v-if="searchListShow">
                        <div v-for="(item,index) in searchList" :key="index" class="search-item"
                             @click="select(item.name)">
                            {{item.name}}
                        </div>
                    </happy-scroll>
                </a-form-item>

                <a-form-item label="数量"
                             :label-col="formItemAcrossLayout.labelCol"
                >
                    <a-input
                        v-decorator="['count', {rules: [{ required: true, message: '请输入数量!' }] }]"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
    labelCol: {span: 8},    //lable长度
    wrapperCol: {span: 14},  //input长度
};
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
    labelCol: {span: 4},
    wrapperCol: {span: 8, offset: 4},
};
export default {
    props: ['visible', 'modelData', 'index'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function (newVal) {
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelData: function (newVal) {
            console.log(newVal)
            this.mData = newVal
            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                    category: newVal.category,
                    count: newVal.count
                })
            })

        },
        index: function (newVal) {
            this.i = newVal;
        },
    },
    data() {
        return {
            isShow: false,
            title: '',
            closable: false,//取消model模态框右上角的X号
            confirmLoading: false,
            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
            formItemAcrossLayout,
            formItemVerticalLayout,
            category: '',
            searchList: [],
            searchListShow: false,
            mData: {},
            i: 0
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    methods: {
        handleOk() {
            if (JSON.stringify(this.mData) !== '{}') {
                this.confirmLoading = true;
                setTimeout(() => {
                    this.form.validateFields((err, values) => {
                        console.log(values)
                        if (!err) {
                            this.$api.httpApi.stockCheckByMan({
                                data: {
                                    ...values,
                                    column: this.mData.column,
                                    row: this.mData.row,
                                    shelveId: this.mData.shelveId,
                                }
                            }).then(res => {
                                if (res.code == 200) {
                                    this.$emit('sure', false, this.i)
                                    this.$message.success('复核成功');
                                }
                            }).catch(err => {

                            });
                        }
                    });
                    this.confirmLoading = false;
                }, 500);
            } else {
                this.$message.error('该货位暂时没有记录');
            }
        },
        handleCancel() {
            console.log('Clicked cancel button');
            this.$emit('close', false, {})
        },
        onInput(value) {
            console.log(this.form.getFieldValue('category'))
            //获取具体输入框的值
            var name = this.form.getFieldValue('category')
            this.$api.httpApi.getCategoryList({
                params: {
                    name: name,
                }
            }).then(res => {
                if (res.code == 200) {
                    this.searchList = res.data
                    if (res.data.length > 0) {
                        this.searchListShow = true
                    }
                }
            }).catch(err => {

            });
        },
        select(name) {
            this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                category: name,
            })
            this.searchListShow = false
        }
    },
};
</script>
<style lang="scss" scoped>
    .p-model {
        .across-layout {
            display: flex;
        }

        .ant-divider-horizontal {
            margin: 6px 0;
        }

        .search-list {
            background: #ffffff;
            width: 100%;
            height: 200px;
            box-shadow: 0 5px 10px #efefef;
            position: absolute;
            z-index: 999;

            .search-item {
                padding: 0 10px;
                border-top: #fafafa solid 1px;
                border-bottom: #fafafa solid 1px;

                &:hover {
                    background: #fafafa;
                }

            }
        }
    }

    .video-mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        #video-test {

        }

        .video-close {
            position: absolute;
            right: 20px;
            top: 20px;
            color: #ffffff;
            font-size: 24px;
            width: 32px;
            height: 32px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .operation-list {
            position: absolute;
            right: 200px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            z-index: 10;

            .operation-item {
                img {
                    width: 42px;
                }

                span {
                    padding: 5px 10px;
                    background: rgba(0, 0, 0, 0.5);
                    font-size: 18px;
                    color: #ffffff;
                }
            }
        }

        .direction-list {
            position: absolute;
            right: 30px;
            bottom: 20px;
            width: 150px;
            z-index: 10;
            /*border: solid 1px blue;*/
            .direction-item {
                display: flex;
                align-items: center;
                justify-content: space-between;

                img {
                    width: 42px;
                }
            }
        }

        img {
            cursor: pointer;
        }
    }
</style>
