<template>
    <!-- 视频选择弹层 -->
    <SuperTableSelectorDialog
        v-on="$listeners"
        v-bind="$attrs"
        title="视频选择"
        select-title-name="已选视频"
        :treeTabList="['行政维度']"
        :isShow.sync="isShowDialog"
        hintLanguage="提示：请在列表中选择视频后，点击确认。"
        :search-option="optionList"
        :treeData="orgData"
        :tree-item="treeItem"
        selectLabel="name"
        :defaultTreeExpandLevel="1"
        :table-data="tableData"
        :table-options="tableOptions"
        :table-loading="tableLoading"
        :tableParams="params"
        @open="open"
        @closed="closed"
        @tableRefresh="getTableData"
        @treeChange="treeChange"
        ref="superTableSelectorDialog"
    />
</template>

<script>
import {queryVideoPointData, queryVideoAreaData} from '@/api/systemInterface'
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'

export default {
    name: 'VideoSiteSelectorDialog',
    components: {SuperTableSelectorDialog},
    props: {
        isShow: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            orgData: [], // 组织树
            optionList: [
                {title: '名称', prop: 'name', type: 'input', default: true},
                {
                    title: '在线状态',
                    prop: 'status',
                    type: 'select',
                    option: [
                        {
                            name: '在线',
                            value: 1,
                        },
                        {
                            name: '离线',
                            value: 0,
                        },
                    ],
                },
                {title: '监控点编号', prop: 'cameraIndexCode', type: 'input'},
            ],
            tableOptions: [
                {label: '名称', minWidth: '120', prop: 'name'},
                {
                    label: '在线状态',
                    minWidth: '80',
                    prop: 'status',
                    formatter: ({status}) =>
                        status === 1 ? '在线' : status === 0 ? '离线' : '-',
                },
                {label: '监控点编号', minWidth: '100', prop: 'cameraIndexCode'},
            ],
            params: {
                pageBean: {pageSize: 20, page: 1, total: 0},
                querys: [
                    {
                        group: 'orgTree',
                        operation: 'EQUAL',
                        property: 'unitIndexCode',
                        value: '',
                    },
                    {
                        group: 'quick',
                        operation: 'LIKE',
                        property: 'name',
                        relation: 'AND',
                        value: '',
                    },
                    {
                        group: 'quick',
                        operation: 'LIKE',
                        property: 'cameraIndexCode',
                        relation: 'AND',
                        value: '',
                    },
                    {
                        group: 'quick',
                        operation: 'IN',
                        property: 'status',
                        relation: 'AND',
                        value: '',
                    },
                ],
            },
            tableData: [], // 岗位数据
            treeItem: {}, // 树选中
            tableLoading: false, // 表格loading
        }
    },
    computed: {
        isShowDialog: {
            get() {
                return this.isShow
            },
            set(val) {
                this.$emit('update:isShow', val)
            },
        },
    },
    created() {
        this.getOrgTreeData()
        this.open()
    },
    methods: {
        // 打开弹层时触发
        open() {
            this.getTableData()
        },

        // 关闭弹层触发
        closed() {
            const {orgData} = this
            // 重置data中的数据
            Object.assign(this.$data, this.$options.data.call(this), {orgData})
            this.treeItem = this.orgData[0] || {}
            setQueryValue(this.params, 'unitIndexCode', '')
        },

        // 获取公司树
        async getOrgTreeData() {
            this.orgData = await queryVideoAreaData()
            this.treeItem = this.orgData[0] || {}
            setQueryValue(this.params, 'unitIndexCode', '')
        },

        //获取岗位列表数据
        async getTableData() {
            this.tableData = []
            this.tableLoading = true
            const {total = 0, rows = []} = await queryVideoPointData(
                refineRequestBody(this.params)
            )
            this.params.pageBean.total = total
            this.tableData = rows
            this.tableLoading = false
        },

        // 树改变
        treeChange(treeItem) {
            // 修改对应的字段值
            setQueryValue(this.params, 'unitIndexCode', treeItem.id || '')
            this.getTableData()
        },
    },
}
</script>

<style lang="scss" scoped>

</style>
