<template>
    <el-dialog title="选择排班" :visible.sync="visible" v-if="visible" :before-close="handleClose"
        :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="60%">




        <el-card shadow="never">
            <scheduleSearch @search="reload"></scheduleSearch>
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" row-key="id" height="calc(100vh - 350px)"
                class="dict-table" @cell-click="cellClick">


                <template v-slot:status="{ row }">
                    {{ row.status == 1 ? '发布' : '草稿' }}
                </template>

                <!-- 表头工具栏 -->
                <template v-slot:action="{ row }">
                    <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
                </template>
            </ele-pro-table>
        </el-card>
        <div class="btns">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>

import {
    teamqueuepage,
} from '@/api/workforceManagement/schedule';
import scheduleSearch from './schedule-search.vue'
export default {
    components: {
        scheduleSearch
    },
    data() {
        return {
            visible: false,

            // 表格列配置
            columns: [
                {
                    columnKey: 'index',
                    type: 'index',
                    width: 45,
                    align: 'center',
                    reserveSelection: true
                },
                {
                    prop: 'name',
                    label: '排班组名称'
                },
                {
                    label: '总人数',
                    prop: 'totalPersonNumber'
                },
                {
                    label: '创建人',
                    prop: 'createUserName'
                },
                {
                    label: '状态',
                    prop: 'status',
                    slot: 'status',
                },

                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                }
            ],


            type: null,
            radio: null,
            idx: null,


        }
    },

    watch: {

    },

    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },

    methods: {
        /* 表格数据源 */
        datasource({ page, where, limit }) {
            let data = teamqueuepage({
                ...where,
                status: 1,
                pageNum: page,
                size: limit
            });

            return data;
        },

        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ pageNum: 1, where: where });
        },
        open(item, type, idx) {
            this.type = type
            this.idx = idx
            if (item) {
                this.current = {
                    id: item.classeId,
                    name: item.classeName,
                }

                this.radio = item.classeId
            }

            this.visible = true
        },






        // 单击获取id
        cellClick(row) {
            this.current = row
            this.radio = row.id
        },
        handleClose() {
            this.visible = false
            this.current = null
            this.radio = ''
        },
        selected() {
            if (!this.current) {
                return this.$message.warning('请选择排班组')
            }
            this.$emit('changeProduct', this.current, this.type, this.idx)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
}

.table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
        background: #f2f2f2;
    }
}

.pagination {
    text-align: right;
    padding: 10px 0;
}

.btns {
    text-align: center;
    padding: 10px 0;
}

.topsearch {
    margin-bottom: 15px;
}
</style>
  