<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="searchBtn">
                <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" icon="md-close-circle" @click="del()">{{$t('1004')}}</Button>
            </div>
        </div>
        <!-- table开始 -->
        <div class="divborder newTableDiv">
            <Table class="tableClass" @on-selection-change="handleSelectRow"  @on-current-change="handleRowChange"
                highlight-row :data="tableData1" :columns="tableColumns1"></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>
        <!-- table结束 -->
        <!-- 添加模态框 -->
        <Modal class="newModalClass" :title="$t('1002')" v-model="add_modal"   :styles="{width:'500px'}" >
            <div class="modal_body" style="height:200px;">
               <div>
                    <div class="filter">
                    <label><span >{{$t('90000022')}}</span>：</label>
                    <Input v-model="addObj.explain" type="text"  class="searchInput" />
                    </div>
                </div>
                <div>
                    <div class="filter">
                    <label><span >{{$t('90000023')}}</span>：</label>
                     <div id="add_qrcode" style="padding-left:120px;">
                    </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="add_modal=false" v-text="$t('1033')">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="add_data()" v-text="$t('900306')">{{$t('900306')}}</Button>
            </div>
        </Modal>
        <!-- 添加模态框结束 -->
        <!-- 修改模态框 -->
        <Modal class="newModalClass" :title="$t('1003')" v-model="edit_modal"   :styles="{width:'500px'}" >
            <div class="modal_body">
                <div>
                    <div class="filter">
                    <label><span >{{$t('90000024')}}</span>：</label>
                    <span >{{editobj.name?editobj.name:''}}</span>
                    </div>
                </div>
                <div>
                    <div class="filter">
                    <label><span >{{$t('90000025')}}</span>：</label>
                    <span >{{editobj.ip?editobj.ip:''}}</span>
                    </div>
                </div>
                <div>
                    <div class="filter">
                    <label><span >{{$t('90000023')}}</span>：</label>
                    <span >{{editobj.code?editobj.code:''}}</span>
                    </div>
                </div>
                <div>
                    <div class="filter">
                    <label><span >{{$t('90000022')}}</span>：</label>
                    <Input v-model="editobj.explain" type="text"  class="searchInput" />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="edit_modal=false" v-text="$t('1033')">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="edit_data()" v-text="$t('900306')">{{$t('900306')}}</Button>
            </div>
        </Modal>
        <!-- 修改模态框结束 -->

    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    data () {
        return {
            base_stationlist: [], // 基站下拉框列表
            base_station: '', // 基站下拉框value
            total: 0, // 数据总条数
            page: 1, // 当前页码
            pagesize: 10, // 当前页面数据条数
            obj: {}, // 选中的数据
            clone_obj: {}, // 选中的深拷贝的数据
            ids: [], // 选中的数据ids的集合
            add_modal: false, // 添加模态框
            addObj: {}, // 添加模态框的对象
            edit_modal: false, // 添加模态框
            editobj: {}, // 修改模态框的对象
            tableData1: [], // table数据
            selectids: [],
            tableColumns1: [ // table表头
                {
                    title: '全选',
                    align: 'center',
                    width: 50,
                    type: 'selection'
                },
                { // 列表字段属性集合
                    type: 'index2',
                    align: 'center',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 60
                },
                {
                    title: this.$t('90000024'),
                    align: 'center',
                    key: 'name'
                },
                {
                    title: this.$t('90000025'),
                    align: 'center',
                    key: 'ip'
                },
                {
                    title: this.$t('90000023'),
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('90000022'),
                    align: 'center',
                    key: 'explain'
                },
                {
                    title: this.$t('600641'),
                    align: 'center',
                    key: 'time'
                }
            ]
        }
    },
    created () {
        this.search(this.page, this.pagesize)
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        initstation () { // 获取基站下拉框数据
            this.axios.request({
                url: '', //
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {

                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        search (page, pagesize) { // 查询
            var params = {
                page: page,
                pagesize: pagesize
            }
            this.axios.request({ // 查询接口
                url: '/qms/barcode/GetSetList', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.mockTableData1(res.data.data)
                    this.total = res.data.total
                    this.page = res.data.page
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        mockTableData1 (tablelist) { // 转换数据，并赋值给列表数据容器tableData1
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        name: item.station_name,
                        ip: item.station_ip,
                        code: item.number,
                        explain: item.comment,
                        time: item.create_time
                    })
                }
            })
            this.tableData1 = data
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                this.selectids.push(data[i].id)
            }
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击某一行时触发函数
            this.obj = currentRow
            this.clone_obj = this.$time.deepClone(currentRow) // 深拷贝
        },
        handlePageSize (value) { // 改变pagesize时触发
            this.pagesize = value
            this.tableData1 = this.search(1, this.pagesize)
        },
        changePage (value) { // 改变页码时触发
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        add () { // 点击添加按钮
            this.addObj = {} // 点击添加按钮清空添加对象
            this.add_modal = true
            this.getQrcode('add_qrcode')
        },
        getQrcode (elid) {
            this.$nextTick(() => {
                this.qrcode(elid)
            })
        },
        qrcode (elid) {
            document.getElementById(elid).innerHTML = ''
            let qrcode = new QRCode(elid, {
                width: 120,
                height: 120,
                text: 'SCANNERCONFIG' // 二维码传递的信息
            })
        },
        add_data () { // 添加数据
            var data = {
                comment: this.addObj.explain
            }
            this.axios.request({
                url: '/qms/Barcode/Update',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1')) // 添加成功
                    this.add_modal = false
                    this.search(1, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        edit () { // 修改
            if (!this.obj.id) {
                this.$Message.error(this.$t('1043'))
                return false
            }
            this.editobj = this.$time.deepClone(this.clone_obj)
            this.edit_modal = true
        },
        edit_data () {
            var data = {
                id: this.obj.id,
                comment: this.editobj.explain
            }
            this.axios.request({ // 查询接口
                url: '/qms/barcode/UpdateById', //
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1')) // 添加成功
                    this.edit_modal = false
                    this.search(1, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        del () { // 删除
            if (this.selectids === undefined || this.selectids === []) {
                this.$Message.error(this.$t('1950469'))
                return false
            }
            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: () => {
                    this.axios.request({
                        url: '/qms/barcode/delete',
                        data: data,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1058'))
                            this.search(1, this.pagesize)
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
