<template>
    <div>
        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>扫码单据类型&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 40%"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.name"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>单据类型代码&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 40%"
                        :disabled="true"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.action"
                    ></el-input>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>出入库类型&nbsp;</span>
                    </div>
                    <el-select v-model="inputQuery.mainAction" placeholder="出入库类型" @change="getOrderType">
                        <el-option label="入库" value="WareHouseIn"></el-option>
                        <el-option label="出库" value="WareHouseOut"></el-option>
                    </el-select>

                </div>
            </el-col>

            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>往来信息类型&nbsp;</span>
                    </div>
                    <el-select v-model="inputQuery.corpType" placeholder="往来信息" @change="corpTypeChange">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>内部进出平衡补单&nbsp;</span>
                    </div>
                    <el-select :disabled="inputQuery.corpType !=1"
                               v-model="inputQuery.supplementOrderType"
                               clearable
                               placeholder="单据类型">
                        <el-option
                            v-for="item in orderTypeList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.action">
                            <span style="float: left">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                </div>
            </el-col>

            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>特殊单据往来&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 40%"
                        size="small"
                        v-model="inputQuery.defaultUnit"
                        :disabled="editDefaultUnit"
                    ></el-input>
                </div>
            </el-col>


        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">

            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>单据前缀&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 40%"
                        size="small"
                        v-model="inputQuery.prefix"
                    ></el-input>
                </div>
            </el-col>

            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>备注&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 40%"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.remark"
                    ></el-input>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="12" class="el-col">
                <div class="text item" style="margin-top: 6px">
                    <el-checkbox v-model="inputQuery.enable">启用单据类型</el-checkbox>
                    <el-checkbox v-model="inputQuery.genUnit" :disabled="inputQuery.corpType !=2">允许手动输入客户信息
                    </el-checkbox>
                    <el-checkbox v-model="inputQuery.secCheckEnable">单据是否审核出库</el-checkbox>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import {filterAll} from "@/api/basic/invWarehouse";
import {getCandidateBussinessType} from "../../api/receipts/bussinessType";

export default {
    name: "inputQuery",
    props: {
        inputQuery: {
            type: Object,
            required: true
        }
    },

    data() {
        return {
            filterQuery: {
                enabled: true,
                isBuType: true,
                isFilterBind: true
            },
            storageList: [],
            orderTypeList: [],
            thirdSys: [],
            localTypes: [],
            options: [{
                value: "0",
                label: "供应商信息"
                }, {
                    value: "1",
                    label: "仓库信息"
                },
                {
                    value: "2",
                    label: "客户信息"
                }, {
                    value: "3",
                    label: "特殊往来"
                }],
            twoCheck: false,
            editDefaultUnit: true

        };
    },
    methods: {
        getList() {
            let query = {
                curAction: this.inputQuery.localAction
            };
        },
        getStorage() {
            this.storageList = [];
            filterAll()
                .then((response) => {
                    this.storageList = response.data || [];
                })
                .catch(() => {
                });
        },
        oneCheck(type) {
            if (!type) {
                this.twoCheck = true;
                this.inputQuery.secCheckEnable = false;
            } else
                this.twoCheck = false;
        },
        corpTypeChange(type) {
            if (type != 2) {
                this.inputQuery.genUnit = false;
            }
        },
        //获取单据类型
        getOrderType() {
            this.orderTypeList = [];
            let query = {
                customerId: this.$store.getters.customerId,
                mainAction: this.inputQuery.mainAction,
                curAction: this.inputQuery.supplementOrderType
            };
            getCandidateBussinessType(query).then((response) => {
                this.orderTypeList = response.data || [];
            }).catch(() => {

            });
        }
    },
    computed: {
        corpType() {
            return this.inputQuery.corpType;
        }
    },
    watch: {
        corpType: function (val) {
            if (val != 1) {
                this.inputQuery.orderTypeEnable = true;
                this.inputQuery.supplementOrderType = null;
            } else {
                this.inputQuery.orderTypeEnable = false;
            }

            //当选择的挂往来单位类型为仓库信息时，清空 特殊单据往来 的值并且禁用输入框
            if (val == 1) {
                this.inputQuery.defaultUnit = null;
                this.editDefaultUnit = true;
            } else if (val == 3) {
                this.editDefaultUnit = false;
            } else {
                this.editDefaultUnit = true;
            }
        }
    },

    created() {
        if (this.inputQuery.mainAction != null && this.inputQuery.mainAction != "") {
            this.getOrderType();
        }
        this.getList();
        this.getStorage();

    }
};
</script>

<style scoped>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 100px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}

.el-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>
