<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t('600036')}}：</label>
                <Select
                    v-model="toolname"
                    label-in-value
                    clearable
                    class="searchSelect"
                    style="margin-left:10px;"
                >
                    <Option v-for="item in toollist" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t('600062')}}：</label>
                <Select
                    v-model="brand"
                    label-in-value
                    clearable
                    class="searchSelect"
                    style="margin-left:10px;"
                >
                    <Option v-for="item in brandList" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t('600011')}}：</label>
                <Select
                    v-model="supplier"
                    label-in-value
                    clearable
                    class="searchSelect"
                    style="margin-left:10px;"
                >
                    <Option v-for="item in supplierlist" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>单价在</label>
                <Input class="searchInput" type="text" v-model="start" />
                <Input class="searchInput" type="text" v-model="end" />范围内
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="tosearch()"
                >{{$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>
                <Button
                    type="primary"
                    class="fourWord"
                    icon="md-download"
                    @click="loadexcel()"
                >{{$t('1005')}}</Button>
                <Upload
                    style="display:inline-block"
                    ref="upload"
                    :action="action"
                    name="excel-file"
                    :headers="headers"
                    :show-upload-list="false"
                    :on-format-error="handleFormatError"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :format="['xlsx']"
                >
                    <Button type="primary" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
                </Upload>
                <Button
                    type="primary"
                    class="fourWord"
                    icon="ios-cloud-download"
                    @click="downexcel()"
                >{{$t('1007')}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
                @on-selection-change="handleSelectRow"
            ></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>
            <Modal class="newModalClass" v-model="addmodal" :styles="{width:'700px'}">
                <p slot="header">
                    <span v-if="type===1">{{$t('1002')}}</span>
                    <span v-if="type===2">{{$t('1003')}}</span>
                </p>
                <div class="modal_body">
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t('600036')}}：
                        </label>
                        <Input class="searchInput" type="text" v-model="addobj.name" />
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t('100090')}}：
                        </label>
                        <Input class="searchInput" type="text" v-model="addobj.drawingcode" />
                    </div>
                    <div class="filter">
                        <label>{{$t('600065')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.spec" />
                    </div>
                    <div class="filter">
                        <label>{{$t(600066)}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.material" />
                    </div>
                    <div class="filter">
                        <label>{{$t('600067')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.hardness" />
                    </div>
                    <div class="filter">
                        <label>{{$t('600062')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.brand" />
                    </div>
                    <div class="filter">
                        <label>{{$t('600011')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.supplier" />
                    </div>
                    <div class="filter">
                        <label>{{$t('600295')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.suppliercode" />
                    </div>
                    <div class="filter">
                        <label>{{$t('300019')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.unitprice" />
                    </div>
                    <div class="filter">
                        <label>{{$t('1030')}}：</label>
                        <Input class="searchInput" type="text" v-model="addobj.description" />
                    </div>
                    <div style="display: flex;">
                        <label>供应商图片上传：</label>
                        <div class="uploadMax">
                            <img :src="loadimg" alt />
                            <input
                                type="file"
                                name
                                ref="fileIntimg"
                                id
                                @change="unloadimg"
                                accept="image/png, image/gif, image/jpeg"
                            />
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                    <Button
                        type="primary"
                        v-show="type==1"
                        size="large"
                        @click="adddata(1)"
                    >{{$t('1002')}}</Button>
                    <Button
                        type="primary"
                        v-show="type==2"
                        size="large"
                        @click="adddata(2)"
                    >{{$t('1003')}}</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import axios from '@/libs/api.request';
export default {
    name: 'route',
    data () {
        return {
            action:
                axios.publicPath + 'tools/upload/submit?templateName=ToolsInfo',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            toolname: '',
            toollist: [],
            brand: '',
            brandList: [],
            supplier: '',
            supplierlist: [],
            start: '',
            end: '',
            addsuppliertype1: [],
            addsuppliertype: '',
            checknodeid: '0',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            addobj: {},
            loadimg: '',
            detailobj: {},
            type: 0,
            selectids: [],
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70
                },
                {
                    title: '刀具名称',
                    key: 'name'
                },
                {
                    title: '刀具图纸号',
                    key: 'drawingcode'
                },
                {
                    title: '规格',
                    key: 'spec'
                },
                {
                    title: '品牌',
                    key: 'brand'
                },
                {
                    title: '材料',
                    key: 'material'
                },
                {
                    title: '硬度',
                    key: 'hardness'
                },
                {
                    title: '供应商',
                    key: 'supplier'
                },
                {
                    title: '供应商代码',
                    key: 'suppliercode'
                },
                {
                    title: '单价',
                    key: 'unitprice'
                },
                {
                    title: '备注',
                    key: 'description'
                },
                {
                    title: '图片',
                    key: 'supplierimg',
                    render: (h, params) => {
                        if (params.row.supplierimg) {
                            return h('div', [
                                h('img', {
                                    domProps: {
                                        src: params.row.supplierimg
                                    },
                                    style: {
                                        display: 'block',
                                        width: '50px',
                                        height: '50px'
                                    }
                                })
                            ]);
                        } else {
                            return h('div', '');
                        }
                    }
                }
            ]
        };
    },
    created () {
    // this.iniareas();
        this.search();
        this.getTool();
        // this.getBrand();
        // this.getSupplier();

        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        getTool () {
            axios
                .request({
                    url: '/tools/ToolSupplier/GetDropDownList',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        let arr = [],
                            arr1 = [];
                        this.toollist = res.data.data.names;
                        this.brandList = res.data.data.brands;
                        this.supplierlist = res.data.data.suppliers;
                        // arr = res.data.data.brands;
                        // this.brandList = arr.filter(
                        //     (ele) =>
                        //         ele != null && ele != undefined && ele != ""
                        // );
                        // arr1 = res.data.data.suppliers;
                        // this.supplierlist = arr1;
                    }
                });
        },
        getTool () {
            axios
                .request({
                    url: '/tools/ToolSupplier/GetDropDownList',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        let arr = [],
                            arr1 = [];
                        this.toollist = res.data.data.names;
                        this.brandList = res.data.data.brands;
                        this.supplierlist = res.data.data.suppliers;
                        // arr = res.data.data.brands;
                        // this.brandList = arr.filter(
                        //     (ele) =>
                        //         ele != null && ele != undefined && ele != ""
                        // );
                        // arr1 = res.data.data.suppliers;
                        // this.supplierlist = arr1;
                    }
                });
        },
        tosearch () {
            this.page = 1;
            // this.pagesize = 10
            this.search();
        },
        search () {
            var data = {
                name: this.toolname,
                brand: this.brand,
                supplier: this.supplier,
                start: this.start,
                end: this.end,
                toexcel: 0,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/tools/ToolSupplier/getList',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    this.total = res.data.total;
                    this.tableData1 = res.data.data;
                    // this.mockTableData1(res.data.data);
                });
        },
        mockTableData1 (tablelist) {
            let data = [];
            tablelist.forEach((item) => {
                if (item) {
                    data.push({
                        typeID: item.typeID,
                        typeName: item.typeName,
                        name: item.name,
                        serial_number: item.serial_number,
                        enterprise_name: item.enterprise_name,
                        id: item.id,
                        address: item.address,
                        linkman: item.linkman,
                        phone: item.phone,
                        mobile: item.mobile,
                        fax: item.fax,
                        email: item.email,
                        homepage: item.homepage,
                        description: item.description,
                        state: item.state,
                        statename:
                            item.state === 1
                                ? this.$t('1000021')
                                : this.$t('1000020'),
                        duns: item.duns
                    });
                }
            });
            this.tableData1 = data;
        },
        add () {
            this.addobj = {};
            this.loadimg = '';
            this.type = 1;
            this.addmodal = true;
        },
        closeadd () {
            this.addmodal = false;
        },
        unloadimg () {
            // 上传照片
            const file = this.$refs.fileIntimg.files[0];
            const data = new FormData();
            data.append('file', file);
            axios
                .request({
                    url: '/tools/upload/UploadImage',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(100378));
                        this.loadimg = axios.publicPath + res.data.data;
                        this.addobj.supplierimg =
                            axios.publicPath + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch((err) => {
                    alert(err.msg);
                });
        },
        adddata (type) {
            if (this.addobj.name == '' || this.addobj.drawingcode == '') {
                this.$Message.error(this.$t('700078'));
                return false;
            }
            var reg = /^[1-9]*[1-9][0-9]*$/;
            // if (
            //     this.addobj.unitprice != "" &&
            //     !reg.test(this.addobj.unitprice)
            // ) {
            //     this.$Message.error(this.$t("10000000"));
            //     return false;
            // }
            let data = {};
            data = this.addobj;
            console.log(data);
            // return
            if (type === 1) {
                axios
                    .request({
                        url: '/tools/ToolSupplier/AddToolsupplier',
                        data,
                        method: 'post'
                    })
                    .then((res) => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1055'));
                            this.addmodal = false;
                            this.search();
                        } else {
                            this.$Message.error(this.$t(res.data.msg));
                        }
                    });
            } else if (type === 2) {
                axios
                    .request({
                        url: '/tools/ToolSupplier/EditToolSupplier',
                        data,
                        method: 'post'
                    })
                    .then((res) => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1060'));
                            this.addmodal = false;
                            this.search();
                        } else {
                            this.$Message.error(this.$t(res.data.msg));
                        }
                    });
            }
        },
        edit () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(1043));
                return false;
            }
            this.addmodal = true;
            this.type = 2;
            this.addobj = this.detailobj;
            this.loadimg = this.detailobj.supplierimg;
        },
        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=ToolsInfo',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        downexcel () {
            var params = {
                name: this.toolname,
                brand: this.brand,
                supplier: this.supplier,
                start: this.start,
                end: this.end
                // toexcel: 0,
            };
            axios
                .request({
                    url: '/tools/ToolSupplier/Export',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        handleFormatError (file) {
            this.$Message.error(
                this.$t('950396') + file.name + this.$t('950397')
            );
        },
        handleSuccess (res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t('950398'));
                this.search();
            } else {
                if (typeof res.msg !== 'number') {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t('' + res.msg));
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!');
        },
        handleSelectRow: function (data) {
            this.selectids = [];
            for (var i in data) {
                this.selectids.push(data[i].id);
            }
        },
        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: () => {
                        axios
                            .request({
                                url:
                                    '/tools/ToolSupplier/DeleteToolSupplier?id=' +
                                    this.detailobj.id,
                                method: '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.tableData1 = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search();
        }
    }
};
</script>
<style lang="less" scoped>
</style>
