<template>
    <hc-card>
        <template #header>
            <div class="w-40">
                <el-select
                    v-model="searchForm.fileStorageType"
                    filterable
                    block
                    placeholder="文件存储类型"
                    @change="changeFileType"
                >
                    <el-option
                        v-for="item in fileStorageTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="ml-14px">
                <el-button hc-btn type="warning" @click="configClick"
                    >配置</el-button
                >
            </div>
        </template>

        <hc-table
            :column="tableColumn"
            :datas="tableData"
            :loading="tableLoading"
            :index-style="{ width: 60 }"
            :is-current-row="false"
        >
            <template #fieldType="{ row }">
                {{ getFieldType(row.fieldType) }}
            </template>
            <template #containerType="{ row }">
                {{ getContainerType(row.containerType) }}
            </template>
            <template #captureMode="{ row }">
                {{ getCaptureMode(row.captureMode) }}
            </template>
            <template #mandatoryType="{ row }">
                {{ getMandatoryType(row.mandatoryType) }}
            </template>
            <template #action="{ row }">
                <el-link
                    v-if="searchForm.fileStorageType !== ''"
                    :lading="cancleLoading"
                    type="primary"
                    @click="cancleCapClick(row)"
                >
                    取消捕获
                </el-link>
                <template v-else>
                    <el-link type="warning" @click="editRowClick(row)">
                        修改
                    </el-link>
                    <el-link type="danger" v-del-com:[delRowClick]="row">
                        删除
                    </el-link>
                </template>
            </template>
        </hc-table>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
        <!-- 新增/修改 -->
        <hc-dialog
            v-model="isDialogShow"
            widths="400px"
            is-footer-center
            title="编辑"
            @close="dialogClose"
        >
            <el-form
                ref="formRef"
                :model="formModel"
                :rules="formRules"
                label-position="top"
                label-width="auto"
            >
                <el-form-item label="元数据项:" prop="containerName">
                    <el-input v-model="formModel.containerName" clearable />
                </el-form-item>
                <el-form-item label="编号:" prop="code">
                    <el-input v-model="formModel.code" clearable />
                </el-form-item>
                <el-form-item label="数据类型:" prop="fieldType">
                    <el-select
                        v-model="formModel.fieldType"
                        filterable
                        clearable
                        block
                        placeholder="请选择数据类型"
                    >
                        <el-option
                            v-for="item in fieldTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属容器分类:" prop="containerType">
                    <el-select
                        v-model="formModel.containerType"
                        filterable
                        clearable
                        block
                        placeholder="请选择所属容器分类"
                    >
                        <el-option
                            v-for="item in containerTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="捕获方式:" prop="captureMode">
                    <el-select
                        v-model="formModel.captureMode"
                        filterable
                        clearable
                        block
                        placeholder="请选择捕获方式"
                    >
                        <el-option
                            v-for="item in captureModeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否必选:" prop="mandatoryType">
                    <el-select
                        v-model="formModel.mandatoryType"
                        filterable
                        clearable
                        block
                        placeholder="请选择是否必选"
                    >
                        <el-option
                            v-for="item in mandatoryTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button hc-btn @click="dialogClose">取消</el-button>
                <el-button
                    hc-btn
                    type="primary"
                    :loading="submitLoading"
                    @click="dialogSubmit"
                >
                    提交
                </el-button>
            </template>
        </hc-dialog>
        <!-- 设置分类元数据 -->
        <hc-dialog
            widths="700px"
            isTable
            v-model="congfigShow"
            title="设置分类元数据"
            @save="saveConfig"
            :loading="saveConfigLoad"
        >
            <hc-card>
                <template #header>
                    <div class="w-40">
                        <el-select
                            v-model="fileStorageType"
                            filterable
                            block
                            placeholder="文件存储类型"
                            @change="changeType"
                        >
                            <el-option
                                v-for="item in fileStorageTypeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </template>

                <hc-table
                    :column="congfigTableColumn"
                    :datas="configTableData"
                    :is-current-row="false"
                    isCheck
                    :isIndex="false"
                    ref="configTableRef"
                    :loading="configTableLoading"
                >
                    <template #captureMode="{ row }">
                        {{ getCaptureMode(row.captureMode) }}
                    </template>
                    <template #mandatoryType="{ row }">
                        {{ getMandatoryType(row.mandatoryType) }}
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange1" />
                </template>
            </hc-card>
        </hc-dialog>
    </hc-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from "vue";
import { deepClone, formValidate, getArrValue } from "js-fast-way";
import { HcDelMsg } from "hc-vue3-ui";
import mainApi from "~api/desk/meta";

//激活
onActivated(() => {
    searchClick();
});

//搜索表单
const searchForm = ref({ fileStorageType: "", current: 1, size: 30, total: 0 });
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData();
};

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current;
    searchForm.value.size = size;
    getTableData();
};

//表格数据
const tableColumn = ref([
    { key: "containerName", name: "元数据项" },
    { key: "code", name: "编号", align: "center" },
    { key: "fieldType", name: "数据类型", align: "center" },
    { key: "containerType", name: "所属容器分类", align: "center" },
    { key: "captureMode", name: "捕获方式", align: "center" },
    { key: "mandatoryType", name: "是否必选", align: "center" },
    { key: "action", name: "操作", width: 110, align: "center" },
]);
const tableData = ref([{}]);

//获取表格数据
const tableLoading = ref(true);
const getTableData = async () => {
    tableData.value = [];
    tableLoading.value = true;
    const { data } = await mainApi.page({
        ...searchForm.value,
        total: null,
    });
    tableLoading.value = false;
    tableData.value = getArrValue(data?.records);
    searchForm.value.total = data?.total || 0;
};
const changeFileType = () => {
    searchForm.value.current = 1;
    searchForm.value.size = 20;
    getTableData();
};

//文件存储类型
const fileStorageTypeData = [
    { value: "", label: "元数据表" },
    { value: "a", label: "普通" },
    { value: "b", label: "竣工图" },
    { value: "c", label: "计量" },
    { value: "d", label: "质检" },
    { value: "e", label: "声像" },
    { value: "f", label: "隐蔽" },
    { value: "g", label: "试验" },
    { value: "h", label: "管理文件" },
    { value: "i", label: "变更令" },
];

//数据类型
const fieldTypeData = [
    { label: "字符串", value: "1" },
    { label: "日期", value: "4" },
];
const getFieldType = (val) => {
    return fieldTypeData.find(({ value }) => value == val)?.label || "";
};

//所属容器分类
const containerTypeData = [
    { label: "无", value: 100 },
    { label: "来源", value: 0 },
    { label: "文件联", value: 1 },
    { label: "内容描述", value: 2 },
    { label: "文件标识码", value: 3 },
    { label: "照片文件", value: 4 },
    { label: "电子属性", value: 5 },
    { label: "数字化属性", value: 6 },
    { label: "电子签名", value: 7 },
    { label: "竣工图", value: 8 },
    { label: "业务层级", value: 9 },
];
const getContainerType = (val) => {
    return containerTypeData.find(({ value }) => value == val)?.label || "";
};

//捕获方式
const captureModeData = [
    { label: "手动", value: 0 },
    { label: "自动", value: 1 },
    { label: "手动/自动", value: 2 },
];
const getCaptureMode = (val) => {
    return captureModeData.find(({ value }) => value == val)?.label || "";
};

//是否必选
const mandatoryTypeData = [
    { label: "可选", value: 0 },
    { label: "必选", value: 1 },
    { label: "条件选", value: 2 },
];
const getMandatoryType = (val) => {
    return mandatoryTypeData.find(({ value }) => value == val)?.label || "";
};
//取消捕获
const cancleLoading = ref(false);
const cancleCapClick = async (row) => {
    cancleLoading.value = true;
    const { error, code, msg } = await mainApi.cancelAllocation({
        ids: row.id,
        type: searchForm.value.fileStorageType,
    });
    cancleLoading.value = false;
    //判断状态
    if (!error && code === 200) {
        window.$message.success(msg);

        getTableData();
    }
};

//修改
const isDialogShow = ref(false);
const formModel = ref({});
const formRef = ref(null);

const formRules = {
    containerName: {
        required: true,
        trigger: "blur",
        message: "请输入元数据项",
    },
    code: {
        required: true,
        trigger: "blur",
        message: "请输入code",
    },
    fieldType: {
        required: true,
        trigger: "blur",
        message: "请选择数据类型",
    },
    containerType: {
        required: true,
        trigger: "blur",
        message: "请选择所属容器分类",
    },
    captureMode: {
        required: true,
        trigger: "blur",
        message: "请选择捕获方式",
    },
    mandatoryType: {
        required: true,
        trigger: "blur",
        message: "请选择是否必选",
    },
};
const editRowClick = async (row) => {
    formModel.value = deepClone(row);
    await nextTick();
    isDialogShow.value = true;
};
const dialogClose = () => {
    isDialogShow.value = false;
};

const submitLoading = ref(false);
const dialogSubmit = async () => {
    const formRes = await formValidate(formRef.value);
    if (!formRes) return false;
    submitLoading.value = true;
    //处理数据
    const form = formModel.value;

    //发起请求
    const { isRes } = await mainApi.metadataUpdate(form);
    submitLoading.value = false;
    if (!isRes) return;
    dialogClose();
    window?.$message?.success("操作成功");
    getTableData();
};

//删除
const delRowClick = async ({ item }, resolve) => {
    const { isRes } = await mainApi.remove(item.id);
    resolve(); //关闭弹窗
    if (!isRes) return;
    window.$message.success("删除成功");
    getTableData().then();
};
//配置
const congfigShow = ref(false);
const configClick = () => {
    congfigShow.value = true;
    getConfigTableData();
};
const fileStorageType = ref("");
const configTableLoading = ref(false);
const changeType = (val) => {
    searchForm.value.fileStorageType = "";
    configTableRef.value.clearSelection();
    searchForm.value.current = 1;
    getConfigTableData();
};
const pageChange1 = ({ current, size }) => {
    searchForm.value.current = current;
    searchForm.value.size = size;
    getConfigTableData();
};
const configTableRef = ref(null);
//表格数据
const congfigTableColumn = ref([
    { key: "containerName", name: "元数据项" },
    { key: "captureMode", name: "捕获方式", align: "center" },
    { key: "mandatoryType", name: "是否必选", align: "center" },
]);
const configTableData = ref([]);
const getConfigTableData = async () => {
    configTableData.value = [];
    fileStorageType.value = searchForm.value.fileStorageType;
    configTableLoading.value = true;
    const { data } = await mainApi.page({
        ...searchForm.value,
        fileStorageType: "",
        total: null,
    });
    configTableLoading.value = false;
    configTableData.value = getArrValue(data?.records);
    searchForm.value.total = data?.total || 0;

    //设置选中
    let checkarr = [];
    if (fileStorageType.value) {
        checkarr = configTableData.value.filter((item) => {
            if (item.fileStorageType.indexOf(fileStorageType.value) !== -1) {
                return item;
            }
        });
    }
    await nextTick();
    checkarr.forEach((ele) => {
        configTableRef.value.toggleRowSelection(ele, true);
    });
};
const saveConfigLoad = ref(false);
const saveConfig = async () => {
    let list = [];
    list = configTableRef.value.tableRef.getSelectionRows();
    let ids = [];
    list.forEach((item) => {
        ids.push(item.id);
    });
    if (!fileStorageType.value) {
        window.$message.warning("请选择文件存储类型");
        return false;
    }
    saveConfigLoad.value = true;
    const { error, code, msg } = await mainApi.allocation({
        ids: ids.join(","),
        type: fileStorageType.value,
    });
    saveConfigLoad.value = false;
    //判断状态
    if (!error && code === 200) {
        window.$message.success(msg);
        congfigShow.value = false;
        getTableData();
    }

    fileStorageType.value = "";
};
</script>

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