<template>
    <div>
        <!-- 班组弹框 -->
        <el-dialog
            title=""
            style="margin-top: 5vh"
            :visible.sync="tableVisible"
            width="80%"
            append-to-body
            :close-on-click-modal="false"
        >
            <!-- 表单 -->
            <el-form inline :model="formData" class="demo-form-inline">
                <el-form-item label="班组名称" prop="teamName" size="small">
                    <el-input
                        v-model="formData.teamName"
                        placeholder="请输入班组名称"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="班组长" prop="masterName">
                    <el-input
                        v-model="formData.masterName"
                        placeholder="请输入班组长"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="handleQuery"
                        icon="el-icon-search"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>

            <!-- 列表 -->
            <el-table
                :data="tableData"
                style="width: 100%"
                height="500"
                border
                stripe
            >
                <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                    align="center"
                    :index="
                        indexContinuation(formData.pageNum, formData.pageSize)
                    "
                ></el-table-column>
                <el-table-column
                    prop="teamName"
                    label="班组名称"
                ></el-table-column>
                <el-table-column
                    prop="masterName"
                    label="班组长"
                ></el-table-column>
                <el-table-column
                    prop="masterPhone"
                    label="班组长电话"
                ></el-table-column>
                <el-table-column
                    prop="peopleCount"
                    label="班组人数"
                ></el-table-column>
            </el-table>

            <pagination
                v-if="total > 0"
                :total="total"
                :page.sync="formData.pageNum"
                :limit.sync="formData.pageSize"
                @pagination="getTableList"
            />
        </el-dialog>
    </div>
</template>

<script>
import { getTeamDetails } from '@/api/home/home'

export default {
    props: {
        proId: {
            type: Number,
            default: undefined,
        },
    },
    name: 'pieDialog',
    data() {
        return {
            tableVisible: false,
            formData: {
                pageNum: 1,
                pageSize: 10,
                teamName: '',
                masterName: '',
            },
            total: 0,
            tableData: [],
            // 岗位下拉
            postTypeOptions: [],
        }
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
        openDialog(proId) {
            // 清空表单
            this.formData = {
                pageNum: 1,
                pageSize: 10,
                teamName: '',
                postCode: '',
            }
            console.log('🚀 ~ openDialog ~ proId:', proId)
            this.tableVisible = true
            this.getTableList()
        },
        handleQuery() {
            console.log('🚀 ~ handleQuery ~ ', this.formData)
            this.getTableList()
        },
        // 获取表格数据
        async getTableList() {
            const params = {
                ...this.formData,
                proId: this.proId,
            }
            console.log('🚀 ~ getTableList ~ ', params)
            const res = await getTeamDetails(params)
            this.tableData = res.rows
            this.total = res.total
            console.log('🚀 ~ 列表 ~ res:', res)
        },
    },
}
</script>

<style lang="scss" scoped></style>
