<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="table_add" v-auth="'srule.create'"></el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" hidePagination hideDo>
                <el-table-column label="#" type="index" width="50"></el-table-column>
                <el-table-column label="所属部门" prop="belong_dept_name" width="120"></el-table-column>
                <el-table-column label="循环列表" prop="rule_display"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="140">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                            <template #reference>
                                <el-button link size="small" v-auth="'srule.delete'" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-dialog title="排班规则" v-model="dialogVisible" :size="1000">
            <el-form ref="dialogForm" :model="form">
                <el-form-item label="所属部门" required>
                    <xtSelect v-model="form.belong_dept" :apiObj="apiObjP" @change="handlePChange">
                        <el-table-column prop="name"></el-table-column>
                    </xtSelect>
                </el-form-item>
                <div>
                    <el-button v-for="item in teamButtons" :key="item.id" type="primary" @click="addTeam(item)">
                        {{ item.name }}
                    </el-button>
                </div>
                <div style="margin-top: 6px" v-if="form.rule_display.length > 0">
                    <span v-for="(item, index) in form.rule_display" :key="index">
                        {{ item }} ->
                    </span>
                </div>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>


        </el-dialog>
    </el-container>

</template>
<script>
const dForm = {
    belong_dept: null,
    rule: [],
    rule_display: []
}
export default {
    name: 'srule',
    data() {
        return {
            apiObjP: this.$API.system.dept.list,
            apiObj: this.$API.mtm.srule.list,
            dialogVisible: false,
            form: Object.assign({}, dForm),
            teamButtons: [],
        }
    },
    methods: {
        table_add() {
            this.form = Object.assign({}, dForm);
            this.dialogVisible = true;
        },
        handlePChange() {
            this.teamButtons = []
            this.form.rule = []
            this.form.rule_display = []
            if (this.form.belong_dept != null) {
                this.$API.mtm.team.list.req({ belong_dept: this.form.belong_dept, page: 0 }).then(res => {
                    this.teamButtons = res;
                })
            }
        },
        addTeam(item) {
            this.form.rule.push(item.id);
            this.form.rule_display.push(item.name);
        },
        save() {
            this.$API.mtm.srule.create.req(this.form).then(res => {
                this.$refs.table.refresh();
                this.dialogVisible = false;
                that.$message.success("操作成功");
            })
        },
        table_del(row, index) {
            this.$API.mtm.srule.delete.req(row.id).then(res => {
                this.$refs.table.refresh();
                that.$message.success("操作成功");
            })
        }
    }
}
</script>