<template>
    <div>
        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetCameraIoList"
        >
          <span slot="status" slot-scope="text">
              {{text == false ? text ='连接异常':text ='没有PLC连接异常'}}
          </span>
            <span slot="action" slot-scope="text, record">
            <a @click="reconnection(record)">重新连接</a>
          </span>
        </a-table>
    </div>
</template>


<script>
    const columns = [
        {
            title: '序号',
            // dataIndex: 'id',
            customRender: (text, record, index) => {
                return (
                    (1 - 1) * 10 + index + 1
                )
            }
        },
        {
            title: 'PLCID',
            dataIndex: 'plcId',
        },
        {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: {customRender: 'status'}
        },
        {
            title: '异常时间',
            dataIndex: 'time',
        },
        {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
        },
    ];
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                data: [],
                pagination: {
                    total: 0,
                    current: 1,
                    defaultPageSize: 10, // 默认每页显示数量
                    showTotal: total => `共 ${total} 条数据`, // 显示总数
                    showSizeChanger: true, // 显示可改变每页数量
                    pageSizeOptions: ['10', '20', '30'],
                    onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
                },
                loading: false,
                columns,
                visible: false,
                modelType: '',
                modelData: [],
            };
        },
        computed: {},
        mounted() {
            this.handleGetCameraIoList()
        },
        methods: {
            handleGetCameraIoList(pagination) {
                console.log(pagination)
                if (pagination) {
                    this.pagination.current = pagination.current;
                    this.pagination.pageSize = pagination.pageSize;
                    this.pageNum = pagination.current;
                    this.pageSize = pagination.pageSize;
                }
                this.request();
            },
            request() {
                this.$api.httpApi.disPlcList({
                    data: {
                        page: this.pageNum,
                        size: this.pageSize,
                    }
                }).then(res => {
                    const pagination = {...this.pagination};
                    pagination.total = res.data.total;
                    this.data = res.data;
                    this.pagination = pagination;
                    res.data.list.forEach((value, index) => {
                        value.pageNumber = this.pagination.current
                    });
                }).catch(err => {

                });
            },
            reconnection(data) {
                console.log(data.streetId)
                var id = data.streetId
                this.$axios.get('/plc/tcp', {
                    params: {id: id}
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success('连接成功');
                        this.handleGetStreetList()
                    } else {
                        this.$message.error('连接失败');
                    }
                }).catch(err => {

                })
            }
        },
        components: {}
    };
</script>
<style lang="scss" scoped>
    .button-box {
        position: absolute;
        top: 0;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        .add {
            margin-right: 20px;
        }
    }
</style>
