<template>
    <div>
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="图片"
        width="180"> 
        <template slot-scope="scope">
                        <el-image v-if="scope.row.license_original_img" :src="scope.row.license_original_img "
                            style="width: 80px; height: 60px;border: 1px solid #ccc;border-radius: 6px;"
                            :preview-src-list="[scope.row.license_original_img]"
                            fit="cover" :initial-index="0" preview-teleported :z-index="3000">
                        </el-image>
                        <span v-else>/</span>
                    </template>
      </el-table-column>
      <el-table-column
        prop="contact_name"
        label="联系人"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="mobile_phone"
        label="联系电话"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="公共电话"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="audit_status"
        label="审核状态"
        min-width="180">
        <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.audit_status)">
                {{ getStatusText(scope.row.audit_status) }}
            </el-tag>
        </template>
      </el-table-column>


      <el-table-column
        prop="address"
        label="操作"
        fixed="right"
        width="180">
        <template slot-scope="scope">
            <el-button type="text" @click="handleAudit(scope.row)" size="small">审核</el-button>

        </template>
      </el-table-column>
    </el-table>

            <!-- 预览对话框 -->
            <el-dialog title="审批信息预览" :visible.sync="previewVisible" top="3vh" width="60%"
            :before-close="handlePreviewClose">
            <div class="preview-content">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="账号类型">
                        {{ getAccountTypeText(approveForm.account_type) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="公司名称">
                        {{ approveForm.company_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="执照号码">
                        {{ approveForm.license_number }}
                    </el-descriptions-item>
                    <!-- <el-descriptions-item label="审核状态1">
                        <el-tag :type="getStatusType(approveForm.audit_status)">
                            {{ getStatusText(approveForm.audit_status) }}
                        </el-tag>
                    </el-descriptions-item> -->
                    <el-descriptions-item label="办公地址">
                        {{ approveForm.office_address }}
                    </el-descriptions-item>
                    <el-descriptions-item label="注册地址">
                        {{ approveForm.registered_address }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系人">
                        {{ approveForm.contact_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                        {{ approveForm.mobile_phone }}
                    </el-descriptions-item>
                    <el-descriptions-item label="邮箱地址">
                        {{ approveForm.email }}
                    </el-descriptions-item>
                </el-descriptions>

                <div class="preview-images">
                    <div class="preview-image" >
                        <h4>营业执照正本</h4>
                        <el-image  :src="approveForm.license_original_img "
                        class="preview-license-img"
                      
                            :preview-src-list="[approveForm.license_original_img]"
                            fit="cover" :initial-index="0" preview-teleported :z-index="3000">
                        </el-image>
            
                    </div>
        
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini"  @click="previewVisible = false">关 闭</el-button>
                <el-button size="mini" type="danger" @click="handleReject">审核不通过</el-button>
                <el-button size="mini" type="success" @click="handleApprove">审核通过</el-button>
        
       
            </span>
        </el-dialog>

        <!-- 驳回理由输入弹窗 -->
        <el-dialog title="审核退回" :visible.sync="rejectDialogVisible" width="40%" @close="handleRejectDialogClose">
            <el-form :model="rejectForm" :rules="rejectRules" ref="rejectForm">
                <el-form-item label="驳回原因" prop="reject_reason" :label-width="formLabelWidth">
                    <el-input 
                        v-model="rejectForm.reject_reason" 
                        type="textarea" 
                        :rows="4"
                        placeholder="请输入驳回原因"
                        maxlength="500"
                        show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rejectDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmReject" :loading="rejectLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { reqEnterpriseUpdate,reqApproveUserSearch } from '@/api/ncmatch';
export default {
    name: 'qualificationBox',
    data() {
        return {
            current_page:1,
            page_size:10,
            total:0,
            approveForm:{},
            previewVisible: false,
            rejectDialogVisible: false,
            rejectLoading: false,
            formLabelWidth: '120px',
            rejectForm: {
                reject_reason: ''
            },
            rejectRules: {
                reject_reason: [
                    { required: true, message: '请输入驳回原因', trigger: 'blur' },
                    { min: 5, max: 500, message: '驳回原因长度在 5 到 500 个字符', trigger: 'blur' }
                ]
            },
            tableData: []
        }
    },
    props:{
        approveInfo:{
            type:Object,
            default:()=>{}
        }
    },
    created(){
        this.initData()
    },
    methods: {
        initData(){
            let ploay = {
                current_page:this.current_page,
                page_size:this.page_size,
                audit_status:this.approveInfo.audit_status,
                url_link:window.location.href,
            }
            reqApproveUserSearch(ploay).then(res=>{
                if(res.status){
                    this.tableData = res.data
                    this.total = res.data.total_count
                    this.tableData = res.data.data
                }else{
                    this.$message.error(res.msg || '加载失败，请重试');
                }
            })

        },
        handleAudit(row) {
            console.log(row)
            this.previewVisible = true
            this.approveForm =    row
        },
        // 审核通过
        handleApprove() {
            this.$confirm('确认审核通过该资格申请吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.approveQualification();
            }).catch(() => {
                this.$message.info('已取消操作');
            });
        },
        // 审核不通过
        handleReject() {
            this.rejectDialogVisible = true;
            // 回显已有的驳回理由，如果没有则显示空字符串
            this.rejectForm.reject_reason = this.approveForm.reject_reason || '';
            // 重置表单验证
            this.$nextTick(() => {
                if (this.$refs.rejectForm) {
                    this.$refs.rejectForm.clearValidate();
                }
            });
        },
        // 确认驳回
        confirmReject() {
            this.$refs.rejectForm.validate((valid) => {
                if (valid) {
                    this.rejectQualification();
                }
            });
        },
        // 执行审核通过
        approveQualification() {
            // 这里调用审核通过的API
            const params = {
                id: this.approveForm.id,
                audit_status: 'approved'
            };
            console.log("审核通过",params)
            reqEnterpriseUpdate(params).then(res=>{
                if(res.status){
                    this.$message.success('审核通过成功');
            this.initData()
            this.previewVisible = false;
            this.refreshTable();
                this.initData();
                }else{
                    this.$message.error(res.msg || '审核失败，请重试');
                }
            }).catch(err=>{
                this.$message.error('审核失败，请重试');
            })
            // 模拟API调用，实际使用时替换为真实的API
       
            
            // 实际API调用示例：
            // this.$api.qualification.approve(params).then(res => {
            //     if (res.status) {
            //         this.$message.success('审核通过成功');
            //         this.previewVisible = false;
            //         this.refreshTable();
            //     } else {
            //         this.$message.error(res.msg || '审核失败，请重试');
            //     }
            // }).catch(err => {
            //     this.$message.error('审核失败，请重试');
            // });
        },
        // 执行审核驳回
        rejectQualification() {
            this.rejectLoading = true;
            
            const params = {
                id: this.approveForm.id,
                audit_status: 'rejected',
                reject_reason: this.rejectForm.reject_reason
            };
            console.log("审核驳回",params)
            reqEnterpriseUpdate(params).then(res=>{
                if(res.status){
                    this.rejectLoading = false;
                this.$message.success('审核驳回成功');
                this.rejectDialogVisible = false;
                this.previewVisible = false;
                this.initData();
                }else{
                    this.$message.error(res.msg || '审核失败，请重试');
                }
            }).catch(err=>{
                this.$message.error('审核失败，请重试');
            })

            // 实际API调用示例：
            // this.$api.qualification.reject(params).then(res => {
            //     this.rejectLoading = false;
            //     if (res.status) {
            //         this.$message.success('审核驳回成功');
            //         this.rejectDialogVisible = false;
            //         this.previewVisible = false;
            //         this.refreshTable();
            //     } else {
            //         this.$message.error(res.msg || '审核失败，请重试');
            //     }
            // }).catch(err => {
            //     this.rejectLoading = false;
            //     this.$message.error('审核失败，请重试');
            // });
        },
        // 刷新表格数据
        refreshTable() {
            // 这里添加刷新表格的逻辑
            console.log('刷新表格数据');
        },
        // 驳回弹窗关闭处理
        handleRejectDialogClose() {
            this.rejectDialogVisible = false;
            this.rejectForm.reject_reason = '';
            // 重置表单验证
            this.$nextTick(() => {
                if (this.$refs.rejectForm) {
                    this.$refs.rejectForm.clearValidate();
                }
            });
        },
        // 关闭预览弹窗
        handlePreviewClose() {
            this.previewVisible = false;
        },
                // 获取账号类型文本
                getAccountTypeText(type) {
            const typeMap = {
                'enterprise': '企业账号',
                'personal': '个人账号',
                'government': '政府机构'
            };
            return typeMap[type] || '未知';
        },

        // 获取状态类型
        getStatusType(status) {
            const statusMap = {
                'pending': 'warning',
                'approved': 'success',
                'rejected': 'danger',
                'processing': 'info'
            };
            return statusMap[status] || 'info';
        },

        // 获取状态文本
        getStatusText(status) {
            const statusMap = {
                'pending': '待审核',
                'approved': '已通过',
                'rejected': '已拒绝',
                'processing': '审核中'
            };
            return statusMap[status] || '未知';
        },

    }
}
</script>
<style scoped lang="less">
.preview-license-img{
    width: 300px;
    height: 200px;
    border-radius: 16px;
    border: 1px solid #ccc;
    transition: transform 0.3s ease;
    &:hover{
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
        transition: transform 0.3s ease;
    }
}
</style>