<template>
    <div class="random">
        <select-option @query="handleQuery" @changeDialogFormVisible="changeDialogFormVisible"/>
        <data-table ref="table" @bindDe="bindDe"
                    @unBind="unBind"
                    @showVideo="showVideo"
        />
        <el-dialog :visible.sync="bindVisible" v-if="bindVisible" title="绑定人员" :width="'275px'">

            <el-row>
                <el-row>
                    <el-select v-model="userId" clearable filterable placeholder="选择检查人员">
                        <el-option value="" label="全部"/>
                        <el-option v-for="item in orgUsers" :key="item.userId" :value="item.userId"
                                   :label="item.userName"/>
                    </el-select>
                </el-row>
                <el-row>
                    <el-col :offset="8">
                        <div style="padding-top: 30px">
                            <el-button size="medium" @click="this.bindVisible=false">取消</el-button>
                            <el-button type="success" size="medium" @click="bindDeviceClick">确认</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-row>

        </el-dialog>
        <el-dialog :visible.sync="showVideoVisible" v-if="showVideoVisible" title="查看视频">
            <device-show-video
                    :cameraIndexCode="cameraIndexCode"
            >

            </device-show-video>
        </el-dialog>

    </div>
</template>

<script>
    import SelectOption from './component/SelectOption.vue'
    import DataTable from './component/DataTable.vue'
    import {removeOneJob} from '@/api/job'
    import {unBindDevice, bindDevices} from '@/api/device'
    import {getUserByOrg} from '@/api/base'
    import DeviceShowVideo from '@/component/DeviceShowVideo'

    export default {
        components: {
            SelectOption,
            DataTable,
            DeviceShowVideo
        },
        data() {
            return {
                dialogFormVisible: false,
                showVideoVisible: false,
                editObject: null,
                bindVisible: false,
                title: '新增',
                dispatchVisible: false,
                approveId: null,
                jobId: null,
                device: {},//设备信息
                userId: '',
                orgUsers: [],
                cameraIndexCode: '',
            }
        },
        methods: {
            changeDispatchVisible() {
                this.dispatchVisible = !this.dispatchVisible;
            },
            //分配人员
            dispatchUser(id) {
                this.jobId = id;
                this.changeDispatchVisible();
            },
            changeApproveVisible() {
                this.approveVisible = !this.approveVisible;
                this.approveId = null;
                this.resetForm();
            },
            resetForm() {
                if (this.$refs.table) {
                    this.$refs.table.resetForm()
                }
            },
            handleQuery(data) {
                if (this.$refs.table) {
                    this.$refs.table.resetForm(data)
                }
            },
            changeDialogFormVisible() {
                // this.$message.info("id:" + id)
                this.dialogFormVisible = !this.dialogFormVisible;
                this.editObject = null
                this.title = '新增'
            },
            bindDe(device) {
                this.device = device;
                this.getOrgUsers();
                this.bindVisible=true;
            },
            getOrgUsers() {
                if (this.device.enforce_org_id) {
                    getUserByOrg(1, 10000, this.device.enforce_org_id).then(res => {
                        if (res && res.status === 200 && res.data) {
                            this.orgUsers = res.data;
                            this.bindVisible = true;
                        }
                    })
                }
            },
            bindDeviceClick() {
                let data = {
                    user_id: this.userId
                }
                // let query = "user_id==" + this.userId;
                bindDevices(this.device.id, this.userId).then(res => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.bindVisible = false;
                    this.resetForm();
                })
            },

            showVideo(id) {
                this.cameraIndexCode = id;
                this.showVideoVisible = true;
            },
            editData(data) {
                this.editObject = data;
                this.title = '编辑';
                this.dialogFormVisible = !this.dialogFormVisible;
            },
            unBind(id) {
                // 把写的提示信心需要换行的地方分成数组 confirmText
                const confirmText = ['是否确定解绑设备？', '解绑设备后录入的视频将不会自动关联任务和人员。']
                const newDatas = []
                const h = this.$createElement
                for (const i in confirmText) {
                    newDatas.push(h('p', null, confirmText[i]))
                }
                this.$confirm(
                    '确认提示',
                    {
                        title: '确认提示',
                        message: h('div', null, newDatas),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    unBindDevice(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.bindVisible = false;
                        this.resetForm();
                    })
                })
            },
            deleteData(id) {
                this.$confirm('删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeOneJob(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            }
        }
    }
</script>