<template>
    <div class="custom-table">
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80"/>

            <el-table-column prop="serial_no" show-overflow-tooltip label="设备编码" align="center">
                <template slot-scope="scope">{{scope.row.serial_no }}</template>
            </el-table-column>
            <el-table-column prop="register_time" show-overflow-tooltip label="录入时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.register_time, true) }}</template>
            </el-table-column>
            <el-table-column prop="device_index_code" show-overflow-tooltip label="唯一标识" align="center">
                <template slot-scope="scope">{{scope.row.device_index_code }}</template>
            </el-table-column>
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="执法机构" align="center">
                <template slot-scope="scope">{{scope.row.enforce_org_name }}</template>
            </el-table-column>
            <el-table-column prop="use_person_name" show-overflow-tooltip label="使用人员" align="center">
                <template slot-scope="scope">{{scope.row.use_person_name }}</template>
            </el-table-column>

            <el-table-column prop="device_status" show-overflow-tooltip label="设备状态" align="center">
                <template slot-scope="scope">
                     <span v-if="scope.row.device_status=='ONLINE'">
                        <i class="el-icon-s-opportunity success"></i>
                        在线
                    </span>
                    <span v-else>
                         <i class="el-icon-s-opportunity"></i>
                        离线
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="bind_status" show-overflow-tooltip label="绑定状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.bind_status=='ACTIVE'">
                        <i class="el-icon-s-opportunity success"></i>
                        已激活
                    </span>
                    <span v-else>
                        <i class="el-icon-s-opportunity"></i>
                        未激活
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="update_time" show-overflow-tooltip label="更新时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.update_time, true) }}</template>
            </el-table-column>

            <el-table-column prop="action" label="操作" align="center">
                <template slot-scope="scope">

                    <el-button v-if="scope.row.bind_status==='ACTIVE'" type="text" size="small"
                               @click="unBind(scope.row.id)">解绑
                    </el-button>

                    <el-button v-if="scope.row.bind_status==='UN_ACTIVE'" type="text" size="small"
                               @click="bindDe(scope.row)">绑定
                    </el-button>
                    <el-button v-if="scope.row.device_status==='ONLINE'" type="text"
                               size="small" @click="showVideo(scope.row.camera_index_code)">在线视频</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
                <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
            </div>
            <el-pagination
                    background
                    class="custom-page"
                    layout="prev, pager, next, sizes"
                    :page-sizes="[10, 20, 50, 100]"
                    :current-page="query.page"
                    :page-size="query.size"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getDevices} from '@/api/device'
    import {jobMixin} from '@/mixin/job'
    import {resourceMixin} from '@/mixin/resource'
    import {formatDate} from '@/utils/tool'
    export default {
        computed: {
            pageTotal() {
                const page = Math.ceil(this.total / this.query.size)
                return page > 0 ? page : 1
            }
        },
        mixins: [jobMixin, resourceMixin],
        data() {
            return {
                loading: false,
                formData: {
                    job_status: '',
                    org: '',
                    account: '',
                    checkDate: '',
                    company: '',
                    limit: '',
                    createDate: '',
                    result: '',
                },
                query: {
                    page: 1,
                    size: 10
                },
                total: 0,
                tableData: []
            }
        },
        mounted() {
            this.handleQuery()
            // this.creatTestData();
        },
        methods: {
            formatDate,
            creatTestData() {
                let one = {
                    id: 1,

                    device_name: "test1",

                    device_number: "sdsac",

                    register_time: "2021-08-02",

                    hik_device_id: "hksq",

                    org_id: '666',

                    org_name: "测试组织",

                    use_person_id: 995,
                    use_person_name: "ac",

                    device_status: 'ONLINE',//设备状态 ONLINE - 在线 OFFLINE-离线
                    bind_status: "ACTIVE",
                    update_time: '2021-08-02'
                }
                let two = {
                    id: 1,

                    device_name: "test1",

                    device_number: "sdsac",

                    register_time: "2021-08-02",

                    hik_device_id: "hksq",

                    org_id: '666',

                    org_name: "测试组织",

                    use_person_id: 995,
                    use_person_name: "ac",

                    device_status: 'OFFLINE',//设备状态 ONLINE - 在线 OFFLINE-离线
                    bind_status: "UN_ACTIVE",
                    update_time: '2021-08-02'
                }
                this.tableData.push(one)
                this.tableData.push(two)
            },
            edite(data) {
                this.$emit("editData", data)
            },
            dispatchUser(id) {
                this.$emit("dispatchUser", id)
            },
            deleteData(id) {
                this.$emit("deleteData", id)
            },
            bindDe(device) {
                this.$emit("bindDe", device)
            },

            unBind(id){
                this.$emit("unBind", id)
            },
            resetForm(data) {
                this.query.page=1;
                this.query.query = data
                this.handleQuery()
            },
            handleSizeChange(val) {
                this.query.size = val
                this.handleQuery()
            },
            handleCurrentChange(val) {
                this.query.page = val
                this.handleQuery()
            },
            handleQuery() {
                this.loading = true
                this.loading = true
                if (!this.query.query) {
                    this.query.query = ""
                }
                getDevices(this.query).then(res => {
                    if (res) {
                        this.total = res.total || 0
                        const list = res.data || []
                        list.map(item => {
                            item.start_time = formatDate(item.start_time, true)
                        })
                        this.tableData = list
                    }
                    this.loading = false
                })
            },
            showVideo(id){
                this.$emit("showVideo",id)
            },
            // handleDetail(id) {
            //     this.$router.push({
            //         path: '/monitor/limitApproval/detail',
            //         query: {
            //             id
            //         }
            //     })
            // }
        }
    }
</script>