<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('9800002')}}：</label>
        <Cascader
          :data="suppliertypes"
          :value="suppliertype"
          trigger="click"
          change-on-select
          class="searchInput"
          @on-change="getsuppliertype"
        ></Cascader>
      </div>
      <div class="filter">
        <label>{{$t('9800001')}}：</label>
        <Input class="searchInput" type="text" v-model="suppliername" />
      </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('9800002')}}：
            </label>
            <Cascader
              class="searchInput"
              :data="suppliertypes"
              v-model="addsuppliertype1"
              :value="suppliertype"
              trigger="click"
              change-on-select
              @on-change="getsuppliertype"
            ></Cascader>
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('9800001')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.suppliername" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('600295')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.serial_number" />
          </div>
          <div class="filter">
            <label>{{$t('9800006')}}：</label>
            <Input class="searchInput" type="text" v-model="addobj.duns" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('9800003')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.companyname" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('9800004')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.companyaddress" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('600573')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.contact" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('600574')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.telephone" />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{$t('100005')}}：
            </label>
            <Input class="searchInput" type="text" v-model="addobj.mobile" />
          </div>
          <div class="filter">
            <label>{{this.$t('9800005')}}：</label>
            <Input class="searchInput" type="text" v-model="addobj.fax" />
          </div>
          <div class="filter">
            <label>{{this.$t('100007')}}：</label>
            <Input class="searchInput" type="text" v-model="addobj.email" />
          </div>
          <div class="filter">
            <label>{{this.$t('600578')}}：</label>
            <Input class="searchInput" type="text" v-model="addobj.website" />
          </div>
          <div class="filter">
            <label>{{this.$t('920152')}}：</label>
            <Checkbox v-model="addobj.isinvalid"></Checkbox>
          </div>
          <div class="filter" style="display:flex;margin-bottom:30px;">
            <label>{{this.$t('1030')}}：</label>
            <Input
              type="textarea"
              v-model="addobj.remark"
              class="searchInput MaxWidth"
              :autosize="{minRows: 2,maxRows: 2}"
            />
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
          <Button type="primary" v-if="type===1" size="large" @click="adddata(1)">{{$t('1002')}}</Button>
          <Button type="primary" v-if="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 + 'config/Upload/Submit?templateName=wmsbusinessinfo',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            suppliername: '',
            suppliertype: [],
            suppliertypes: [],
            suppliertypelist: [],
            supplierlist: [],
            addsuppliertype1: [],
            addsuppliertype: '',
            checknodeid: '0',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            addobj: {},
            detailobj: {},
            type: 0,
            selectids: [],
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    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: this.$t('9800002'),
                    key: 'typeName',
                    width: 220
                },
                {
                    title: this.$t('9800001'),
                    key: 'name'
                },
                {
                    title: this.$t('600295'),
                    key: 'serial_number'
                },
                {
                    title: 'Duns',
                    key: 'duns'
                },
                {
                    title: this.$t('9800003'),
                    key: 'enterprise_name'
                },
                {
                    title: this.$t('9800004'),
                    key: 'address'
                },
                {
                    title: this.$t('600573'),
                    key: 'linkman'
                },
                {
                    title: this.$t('600574'),
                    key: 'phone',
                    width: '220'
                },
                {
                    title: this.$t('100005'),
                    key: 'mobile'
                },
                {
                    title: this.$t('920152'),
                    key: 'statename'
                }
            ]
        };
    },
    created () {
        this.iniareas();
        this.search();

        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        rulePhone () {
            if (!this.addobj.telephone) {
                this.$Message.error(this.$t(200221));
            } else if (!/^1[345678]\d{9}$/.test(this.addobj.telephone)) {
                this.$Message.error(this.$t(100266));
            }
        },
        iniareas () {
            this.axios
                .request({
                    url: '/config/Business/GetAreaType?type=1',
                    method: 'get'
                })
                .then((res) => {
                    const arr = [];
                    if (res.data.ret === 1) {
                        var data = res.data.data.children;
                        data.forEach((item) => {
                            let data = {};
                            data.value = item.id;
                            data.label = item.name;
                            data.expand = true;
                            data.children = this.getchildren(item);
                            this.suppliertypes.push(data);
                        });
                        arr.push(this.suppliertypes[0].value);
                        this.suppliertype = arr;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        getchildren (item) {
            let arry = [];
            if (
                item.children !== undefined &&
        item.children !== null &&
        item.children !== [] &&
        item.children.length > 0
            ) {
                item.children.forEach((child) => {
                    let data = {};
                    data.value = child.id;
                    data.label = child.name;
                    data.expand = true;
                    data.children = this.getchildren(child);
                    arry.push(data);
                });
            }
            return arry;
        },
        getsuppliertype: function (data) {
            this.checknodeid = data[data.length - 1];
        },
        tosearch () {
            this.page = 1;
            // this.pagesize = 10
            this.search();
        },
        search () {
            var params = {
                name: this.suppliername,
                type: 1,
                typenameid: this.checknodeid,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/config/Business/GetBusinessList',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    this.total = res.data.total;
                    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;
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search();
        },
        add () {
            this.addobj = {};
            this.inilasttypes();
            this.type = 1;
            this.addsuppliertype = '';
            this.addmodal = true;
        },
        closeadd () {
            this.addmodal = false;
        },
        inilasttypes () {
            axios
                .request({
                    url: '/config/Business/GetLastAreaType',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.suppliertypelist = res.data.data;
                    }
                });
        },
        getparenttypes (typeid) {
            var parenttypeids = [];
            axios
                .request({
                    url: '/config/Business/GetParentAreas?typeid=' + typeid,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        res.data.data.forEach((ele) => {
                            parenttypeids.push(ele);
                        });
                    }
                });
            return parenttypeids;
        },
        adddata (type) {
            if (this.addsuppliertype1 === [] || this.addsuppliertype1 === undefined) {
                this.$Message.error(this.$t('9000178'));
                return false;
            }
            this.addsuppliertype = this.addsuppliertype1[2];
            // console.log(this.addsuppliertype);
            if (
                this.addobj.suppliername === '' ||
        this.addobj.suppliername === undefined
            ) {
                this.$Message.error(this.$t('9000179'));
                return false;
            }
            if (
                this.addobj.serial_number === '' ||
        this.addobj.serial_number === undefined
            ) {
                this.$Message.error(this.$t('9100032'));
                return false;
            }
            if (
                this.addobj.companyname === '' ||
        this.addobj.companyname === undefined
            ) {
                this.$Message.error(this.$t('9000180'));
                return false;
            }
            if (
                this.addobj.companyaddress === '' ||
        this.addobj.companyaddress === undefined
            ) {
                this.$Message.error(this.$t('9000181'));
                return false;
            }
            if (this.addobj.contact === '' || this.addobj.contact === undefined) {
                this.$Message.error(this.$t('9000182'));
                return false;
            }
            if (this.addobj.telephone === '' || this.addobj.telephone === undefined) {
                this.$Message.error(this.$t('9000183'));
                return false;
            }
            if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(this.addobj.telephone)) {
                this.$Message.error(this.$t(200222));
                return false;
            }
            if (this.addobj.mobile === '' || this.addobj.mobile === undefined) {
                this.$Message.error(this.$t('9000184'));
                return false;
            }
            if (!/^1[345678]\d{9}$/.test(this.addobj.mobile)) {
                this.$Message.error(this.$t(100266));
                return false;
            }
            if (type === 1) {
                let data = {
                    typeNameID: this.addsuppliertype,
                    name: this.addobj.suppliername,
                    enterprise_name: this.addobj.companyname,
                    address: this.addobj.companyaddress,
                    linkman: this.addobj.contact,
                    phone: this.addobj.telephone,
                    mobile: this.addobj.mobile,
                    fax: this.addobj.fax,
                    email: this.addobj.email,
                    homepage: this.addobj.website,
                    description: this.addobj.remark,
                    statu: this.addobj.isinvalid,
                    serial_number: this.addobj.serial_number,
                    duns: this.addobj.duns,
                    type: 1
                };
                axios
                    .request({
                        url: '/config/Business/AddBusiness',
                        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) {
                let data = {
                    id: this.addobj.id,
                    typeNameID: this.addsuppliertype,
                    name: this.addobj.suppliername,
                    enterprise_name: this.addobj.companyname,
                    address: this.addobj.companyaddress,
                    linkman: this.addobj.contact,
                    phone: this.addobj.telephone,
                    mobile: this.addobj.mobile,
                    fax: this.addobj.fax,
                    email: this.addobj.email,
                    homepage: this.addobj.website,
                    description: this.addobj.remark,
                    statu: !this.addobj.isinvalid,
                    type: 1,
                    serial_number: this.addobj.serial_number,
                    duns: this.addobj.duns
                };
                axios
                    .request({
                        url: '/config/Business/UpdateBusiness',
                        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 () {
            this.addmodal = true;
            this.inilasttypes();
            this.type = 2;
            this.addsuppliertype1 = this.getparenttypes(this.detailobj.typeID);
            this.addobj.suppliername = this.detailobj.name;
            this.addobj.companyname = this.detailobj.enterprise_name;
            this.addobj.companyaddress = this.detailobj.address;
            this.addobj.contact = this.detailobj.linkman;
            this.addobj.telephone = this.detailobj.phone;
            this.addobj.mobile = this.detailobj.mobile;
            this.addobj.fax = this.detailobj.fax;
            this.addobj.email = this.detailobj.email;
            this.addobj.website = this.detailobj.homepage;
            this.addobj.remark = this.detailobj.description;
            this.addobj.isinvalid = this.detailobj.state !== 1;
            this.addobj.id = this.detailobj.id;
            this.addobj.serial_number = this.detailobj.serial_number;
            this.addobj.duns = this.detailobj.duns;
        },

        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=wmsbusinessinfo',
                    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.suppliername,
                type: 1,
                typenameid: this.checknodeid
            };
            axios
                .request({
                    url: '/config/Business/ExportBusiness',
                    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.selectids === undefined ||
        this.selectids === '' ||
        this.selectids === [] ||
        this.selectids.length == 0
            ) {
                this.$Message.error(this.$t('1017'));
                return false;
            } else {
                var ids = [];
                this.selectids.forEach((ele) => {
                    ids.push(ele);
                });
                var data = {
                    ids: ids
                };
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios
                            .request({
                                url: '/config/Business/DeleteBusiness',
                                data: data,
                                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));
                                }
                            });
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
</style>
