<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" label-width="100px">
                    <el-row :gutter="15">
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="企业名称" prop="cpyName">
                                <el-input v-model="queryParams.cpyName" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="电话" prop="tel">
                                <el-input v-model="queryParams.tel" placeholder="请输入电话" clearable @keyup.enter="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="信用代码" prop="creditCode">
                                <el-input v-model="queryParams.creditCode" placeholder="请输入信用代码" clearable @keyup.enter="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="所在行政区" prop="adcdCode">
                                <AreaCascader :zlevel="2" v-model="queryParams.adcdCode" checkStrictly></AreaCascader>
                            </el-form-item>
                        </el-col>
                        <!-- 企业类型查询 -->
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="企业类型" prop="cpyType">
                                <el-select v-model="queryParams.cpyType" placeholder="请选择企业类型" clearable>
                                    <el-option v-for="item in cpy_type" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="监管类型" prop="supervisionType">
                                <el-select v-model="queryParams.supervisionType" placeholder="请选择监管类型" clearable>
                                    <el-option v-for="item in supervision_type" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="监管区域" prop="supervisionArea">
                                <AreaCascader :zlevel="2" v-model="queryParams.supervisionArea" checkStrictly></AreaCascader>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <el-table v-loading="loading" :data="recordCompanyList" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="企业类型" align="center">
                    <template #default="{ row }">
                        <span>{{ selectDictLabel(cpy_type, row.cpyType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="企业名称" align="center" prop="cpyName" />
                <el-table-column label="企业logo" align="center" prop="license" width="100">
                    <template #default="scope">
                        <template v-if="scope.row.storePhoto && typeof scope.row.storePhoto === 'string'">
                            <image-preview :src="scope.row.storePhoto" :width="50" :height="50" />
                        </template>
                        <template v-else>
                            <span>暂无图片</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="信用代码" align="center" prop="creditCode" />
                <el-table-column label="合作伙伴" align="center" prop="partnerName" />
                <el-table-column label="营业执照" align="center" prop="license" width="100">
                    <template #default="scope">
                        <template v-if="scope.row.license && scope.row.license.url">
                            <image-preview :src="scope.row.license.url" :width="50" :height="50" />
                        </template>
                    </template>
                </el-table-column>
                <!-- 监管区域 -->
                <el-table-column label="监管类型" align="center">
                    <template #default="{ row }">
                        <span>{{ selectDictLabel(supervision_type, row.supervisionType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="监管区域" align="center" prop="supervisionAreaName" />
                <el-table-column label="所在行政区" align="center" prop="adcdCode">
                    <template #default="{ row }">
                        <AreaView :value="row.adcdCode"></AreaView>
                    </template>
                </el-table-column>
                <el-table-column label="具体地址" align="center" prop="address" />
                <el-table-column label="联系人姓名" align="center" prop="contactPerson" />
                <el-table-column label="电话" align="center" prop="tel" />
                <el-table-column label="入驻时间" align="center" prop="createTime" show-overflow-tooltip width="110">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="280" fixed="right" class-name="small-padding fixed-width">
                    <template #default="{ row }">
                        <el-button @click="handleUser(row)" type="primary">
                            <el-icon><User /></el-icon>
                            维护成员
                        </el-button>
                        <el-button @click="$router.push({ path: '/enterprise/cpy-detail', query: { cpyid: row.id } })" type="primary">
                            <el-icon><View /></el-icon>
                            查看企业信息
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
    </div>
    <Staff :info="formItem" v-model:show="showUser"></Staff>
</template>

<script setup name="Control" lang="ts">
import { listRecordCompany } from '@/api/enterprise/recordCompany';
import { RecordCompanyVO, RecordCompanyQuery, RecordCompanyForm } from '@/api/enterprise/recordCompany/types';
import { AreaView, AreaCascader } from '@/views/components';
import { Staff } from '@/views/settled';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, cpy_type, supervision_type, supervision_area } = toRefs<any>(proxy?.useDict('cpy_res_status', 'cpy_type', 'supervision_type', 'supervision_area'));
const recordCompanyList = ref<RecordCompanyVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const showUser = ref(false);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const recordCompanyFormRef = ref<ElFormInstance>();
const formItem = ref<any>(null);
const initFormData: RecordCompanyForm = {
    storePhoto: undefined,
    cpyName: undefined,
    creditCode: undefined,
    license: undefined,
    cpyType: undefined,
    adcdCode: undefined,
    address: undefined,
    contactPerson: undefined,
    tel: undefined,
    supervisionType: undefined,
    supervisionArea: undefined
};
const data = reactive<PageData<RecordCompanyForm, RecordCompanyQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        cpyName: undefined,
        tel: undefined,
        creditCode: undefined,
        status: '1',
        cpyType: undefined,
        adcdCode: undefined,
        supervisionArea: undefined,
        supervisionType: undefined
    },
    rules: {
        storePhoto: [{ required: true, trigger: 'blur', message: '请上传企业logo' }],
        cpyName: [{ required: true, trigger: 'blur', message: '请填写企业名称' }],
        creditCode: [{ required: true, trigger: 'blur', message: '请填写18位统一社会信用代码' }],
        license: [{ required: true, trigger: 'blur', message: '请上传营业执照' }],
        cpyType: [{ required: true, trigger: 'blur', message: '请选择结构类型' }],
        adcdCode: [{ required: true, trigger: 'blur', message: '请选择所在行政区' }],
        address: [{ required: true, trigger: 'blur', message: '请填写具体地址' }],
        contactPerson: [{ required: true, trigger: 'blur', message: '请填写企业联系人姓名' }],
        tel: [{ required: true, trigger: 'blur', message: '请填写企业联系电话' }]
    }
});

const { queryParams, form, rules } = toRefs(data);
// 审批办理
/** 查询企业备案信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listRecordCompany(queryParams.value);
    recordCompanyList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    recordCompanyFormRef.value?.resetFields();
};
// 打开用户信息页面
const handleUser = (item: any) => {
    formItem.value = item;
    showUser.value = true;
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: RecordCompanyVO[]) => {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
};

onMounted(() => {
    getList();
});
</script>
