<template>
    <div class="cloudUser">
        <el-table v-loading="loading" :data="cloudUserList">
            <el-table-column label="用户编号" align="center" prop="userId" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="身份证号" align="center" prop="idNumber" />
            <el-table-column label="状态" align="center" prop="status" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" style="color: #e6a23c">未审核</span>
                    <span v-if="scope.row.status == 1" style="color: #0952c8">待审核</span>
                    <span v-if="scope.row.status == 2" style="color: #67c23a">审核通过</span>
                    <el-tooltip class="item" effect="dark" :content="scope.row.auditOpinion" placement="top-start">
                        <span v-if="scope.row.status == 3" style="color: #f56c6c; cursor: pointer">审核未通过</span>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="applyFn(scope.row)">审核</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="delFn(scope.row)">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view" @click="detailFn(scope.row)"
                        >查看详情</el-button
                    > -->
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <!-- 审核弹层 -->
        <el-dialog title="认证审核" :visible.sync="applyOpen" width="500px" append-to-body @close="companyApplyCancel">
            <el-form :rules="rules" ref="form" label-width="80px" :model="form">
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择审核结果">
                        <el-option label="通过" value="2"></el-option>
                        <el-option label="不通过" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="意见" prop="auditOpinion">
                    <el-input v-model="form.auditOpinion" placeholder="请输入咨询内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="companyApplySubmit">确 定</el-button>
                <el-button size="mini" @click="companyApplyCancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 审核弹层 -->
        <el-dialog title="详情" :visible.sync="detailOpen" width="500px" append-to-body> </el-dialog>
    </div>
</template>

<script>
import { getApplyList, getApplyById, applyPost } from '@/api/cloudUser'
export default {
    data() {
        return {
            loading: false,
            cloudUserList: [],
            detailOpen: false,
            applyOpen: false,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            form: {},
            rules: {
                status: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true
            getApplyList(this.queryParams).then((res) => {
                this.total = res.total
                this.cloudUserList = res.rows
                this.loading = false
            }).catch(error => {
                this.loading = false
            })
        },
        applyFn(row) {
            this.applyOpen = true
            this.form.userId = row.userId
        },
        delFn() {
            this.$confirm('此操作将永久云员工, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    })
                })
                .catch(() => {})
        },
        detailFn(row) {
            this.detailOpen = true
        },
        companyApplySubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    applyPost(this.form.userId, this.form).then((res) => {
                        this.$message.success('审核成功')
                        this.getList()
                        this.companyApplyCancel()
                    })
                }
            })
        },
        companyApplyCancel() {
            this.form = {}
            this.applyOpen = false
        },
    },
}
</script>

<style lang="scss" scoped>
.cloudUser {
    padding: 20px;
}
</style>