<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>
                    <span>刀具柜名称</span>：
                </label>
                <Input class="searchInput" type="text" v-model="name" />
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search()"
                >{{$t('1001')}}</Button>
                <Button
                    type="success"
                    class="twoWord"
                    icon="md-add-circle"
                    @click="add()"
                >{{$t('1002')}}</Button>
                <Button
                    type="warning"
                    class="twoWord"
                    icon="ios-create-outline"
                    @click="edit()"
                >{{$t('1003')}}</Button>
                <Button
                    type="error"
                    class="twoWord intervalRight"
                    icon="md-close-circle"
                    @click="dele()"
                >{{$t('1004')}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData"
                :columns="tableColumns"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal :title="$t(1002)" v-model="addmodal" :styles="{width:'500px'}" class="newModalClass">
            <div class="modal_body">
                <div class="filter">
                    <label>
                        <i>*</i>
                        刀具柜名称：
                    </label>
                    <Input class="searchInput" type="text" v-model="name1" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>刀具柜编号：
                    </label>
                    <Input class="searchInput" type="text" v-model="code" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{$t('600011')}}：
                    </label>
                    <Select
                        v-model="supplier"
                        clearable
                        label-in-value
                        class="searchSelect"
                        @on-change="changeName"
                    >
                        <Option
                            v-for="(item,index) in supplierList"
                            :value="item.id"
                            :key="index"
                        >{{ item.text }}</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>库存接口地址:
                    </label>
                    <Input class="searchInput" type="text" v-model="stockUrl" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>领料单新建地址:
                    </label>
                    <Input class="searchInput" type="text" v-model="orderUrl" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal=false" v-text="$t(1033)">取消</Button>
                <Button type="primary" size="large" v-text="$t(1011)" @click="submit()">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    data () {
        return {
            name: '',
            page: 1,
            pagesize: 10,
            total: 0,
            tableData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '供应商编号',
                    key: 'suppliercode'
                },
                {
                    title: '供应商名称',
                    key: 'suppliername'
                },
                {
                    title: '柜体编号',
                    key: 'cabinetcode'
                },
                {
                    title: '领料单接口地址',
                    key: 'pickapi'
                },
                {
                    title: '库存查询地址',
                    key: 'inventoryapi'
                }
            ],
            addmodal: false,
            name1: '',
            code: '',
            supplier: '',
            supplierName: '',
            supplierList: [],
            stockUrl: '',
            orderUrl: '',
            type: 0,
            detailobj: {}
        };
    },
    created () {
        this.getSupplers();
        this.search();
    },
    methods: {
        search () {
            var data = {
                name: this.name,
                page: this.page,
                pagesize: this.pagesize
            };
            this.request(
                '/tlm/ToolCabinet/GetCabinetConfiguration',
                data,
                'post'
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
        getSupplers () {
            this.request('/tlm/ToolCabinet/GetSuppliers', '', 'get').then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.supplierList = res.data.data;
                    }
                }
            );
        },
        changeName (val) {
            if (val) {
                this.supplier = val.value;
                this.supplierName = val.label;
                console.log(this.supplierName);
            }
        },
        add () {
            this.name1 = '';
            this.code = '';
            this.supplier = '';
            this.stockUrl = '';
            this.orderUrl = '';
            this.addmodal = true;
            this.type = 1;
        },
        edit () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(1043));
                return false;
            } else {
                this.name1 = this.detailobj.name;
                this.code = this.detailobj.cabinetcode;
                this.supplier = this.detailobj.suppliercode;
                this.supplierName = this.detailobj.suppliername;
                this.orderUrl = this.detailobj.pickapi;
                this.stockUrl = this.detailobj.inventoryapi;
                this.addmodal = true;
                this.type = 2;
            }
        },
        submit () {
            let data = {},
                url = '';
            if (
                this.name1 == '' ||
                this.code == '' ||
                this.supplier == '' ||
                this.stockUrl == '' ||
                this.orderUrl == ''
            ) {
                this.$Message.error(this.$t(700078));
                return false;
            }
            if (this.type == 1) {
                data = {
                    Name: this.name1,
                    CabinetCode: this.code,
                    SupplierName: this.supplierName,
                    SupplierCode: this.supplier,
                    Pickapi: this.orderUrl,
                    Inventoryapi: this.stockUrl
                };
                url = '/tlm/ToolCabinet/InsertCabinetConfiguration';
            }
            if (this.type == 2) {
                data = {
                    id: this.detailobj.id,
                    Name: this.name1,
                    CabinetCode: this.code,
                    SupplierName: this.supplierName,
                    SupplierCode: this.supplier,
                    Pickapi: this.orderUrl,
                    Inventoryapi: this.stockUrl
                };
                url = '/tlm/ToolCabinet/ModifyCabinetConfiguration';
            }
            this.request(url, data, 'post').then((res) => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(res.data.msg));
                    this.detailobj = {};
                    this.search();
                    this.addmodal = false;
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        dele () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(1043));
                return false;
            } else {
                this.$Modal.confirm({
                    title: this.$t('1004'),
                    content: this.$t('1018'),
                    width: '300px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        let data = {
                            id: this.detailobj.id
                        };
                        this.request(
                            '/tlm/ToolCabinet/RemoveCabinetConfiguration',
                            data,
                            'post'
                        ).then((res) => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'));
                                this.page = 1;
                                this.pagesize = 10;
                                this.search();
                                this.detailobj = {};
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                    }
                });
            }
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.search();
        },
        changePage (value) {
            this.page = value;
            this.search();
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        }
    }
};
</script>

<style>
</style>
