<template>
    <hc-card>
        <template #extra>
            <el-button hc-btn type="primary" @click="addRowClick"
                >新增</el-button
            >
            <el-button
                hc-btn
                type="danger"
                :disabled="tableCheckKeys.length <= 0"
                @click="batchDelClick"
                >删除</el-button
            >
            <el-button hc-btn type="warning" @click="impotClick"
                >导入</el-button
            >
        </template>

        <hc-table
            :loading="tableLoading"
            :column="tableColumn"
            :datas="tableData"
            isCheck
            @selection-change="tableSelectionChange"
        >
            <template #action="{ row, index }">
                <el-button
                    size="small"
                    type="primary"
                    @click="editRowClick(row)"
                    >编辑</el-button
                >
            </template>
        </hc-table>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
    </hc-card>
    <!-- 新增/修改 -->
    <hc-dialog
        v-model="isDataInfoShow"
        is-footer-center
        :title="isNullES(formModel.id) ? '新增' : '修改'"
        @close="dialogClose"
    >
        <el-form
            ref="formRef"
            :model="formModel"
            :rules="formRules"
            label-position="top"
            label-width="auto"
            size="large"
        >
            <el-form-item label="温度:" prop="temperature">
                <el-input
                    v-model="formModel.temperature"
                    clearable
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item label="密度：" prop="waterDensity">
                <el-input
                    v-model="formModel.waterDensity"
                    clearable
                    placeholder="请输入"
                />
            </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 v-model="fileModal" title="模板导入">
        <hc-card-item>
            <template #header>
                <div class="text-sm text-red">
                    提示：必须按照系统要求的模版格式上传，否则系统识别无效
                </div>
            </template>

            <el-button
                size="small"
                type="primary"
                @click="downLoadFile"
                :loading="downloadLoading"
                >下载导入模板</el-button
            >
            <el-button
                size="small"
                type="primary"
                @click="importModalClick"
                :loading="uploadsLoading"
                >本地上传</el-button
            >
            <el-form class="mt-4" :model="formLabelAlign">
                <el-form-item
                    label="数据覆盖:"
                    :rules="[
                        {
                            required: true,
                            message: '请选择数据是否覆盖',
                            trigger: 'blur',
                        },
                    ]"
                >
                    <el-switch
                        v-model="formLabelAlign.isCovered"
                        active-text="是"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text="否"
                        active-value="1"
                        inactive-value="0"
                    >
                    </el-switch>
                </el-form-item>
            </el-form>
        </hc-card-item>
    </hc-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { HcDelMsg, HcUploadFileApi } from "hc-vue3-ui";
import { arrToId, deepClone, getArrValue, isNullES } from "js-fast-way";
import mainApi from "~api/desk/temperture-density";

const props = defineProps({
    tabsKey: {
        type: String,
        default: "",
    },
});

const tabsKey = ref(props.tabsKey);
//监听数据
watch(
    () => [props.tabsKey],
    ([key]) => {
        tabsKey.value = key;
    },
    { deep: true }
);

//新增、编辑
const addRowClick = () => {
    isDataInfoShow.value = true;
    formModel.value = {};
};
//修改
const editRowClick = (row) => {
    formModel.value = deepClone(row);
    isDataInfoShow.value = true;
};
const isDataInfoShow = ref(false);
const formModel = ref({});
const formRules = {};
const dialogClose = () => {
    isDataInfoShow.value = false;
    formModel.value = {};
};
const submitLoading = ref(false);
const dialogSubmit = async () => {
    submitLoading.value = true;
    const { isRes } = await mainApi.submit(formModel.value);
    submitLoading.value = false;
    if (!isRes) return;
    window.$message.success("操作成功");
    dialogClose();
    getTableData().then();
};
const tableCheckKeys = ref([]);
const batchDelClick = () => {
    const rows = tableCheckKeys.value;
    if (rows.length <= 0) {
        window.$message.warning("请选择要删除的应用");
        return false;
    }
    rowRemoveApi(arrToId(rows));
};
//删除接口
const rowRemoveApi = (ids) => {
    HcDelMsg(async (resolve) => {
        const { isRes } = await mainApi.remove({ ids: ids });
        resolve(); //关闭弹窗的回调
        if (!isRes) return;
        window.$message.success("删除成功");
        getTableData();
    });
};
const impotClick = () => {
    fileModal.value = true;
};
const tableColumn = [
    { key: "temperature", name: "温度" },
    { key: "waterDensity", name: "密度" },

    { key: "action", name: "操作", width: 100 },
];
const searchForm = ref({ current: 1, size: 30, total: 0 });
const tableData = ref([]);
const tableLoading = ref(false);
const getTableData = async () => {
    tableLoading.value = true;
    const { code, msg, data } = await mainApi.getList({
        ...searchForm.value,
        total: null,
    });
    tableLoading.value = false;
    if (code === 200) {
        tableData.value = getArrValue(data?.records);
        searchForm.value.total = data?.total || 0;
    }
};
//监听显示
watch(
    tabsKey,
    (val) => {
        if (val === "2") {
            getTableData();
        }
    },
    { immediate: true }
);
//多选事件
const tableSelectionChange = (rows) => {
    tableCheckKeys.value = rows;
};
//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current;
    searchForm.value.size = size;
    getTableData();
};

//模板导入
const fileModal = ref(false);
const formLabelAlign = ref({ isCovered: 0 });

const downLoadFile = () => {
    window.open(
        "https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221206/0fe37d67c97e9a971b45a72584b7abf0.xlsx",
        "压实度评标参数模板"
    );
};
const downloadLoading = ref(false);

const importModalClick = () => {
    HcUploadFileApi({
        multiple: false,
        url: "/api/blade-manager/trial/param/temperature-density/import-excel",
        target: "/api/blade-manager/trial/param/temperature-density/import-excel",
        params: { isCovered: formLabelAlign.value.isCovered },
        progress: () => {
            uploadsLoading.value = true;
        },
        success: (file, res) => {
            getTableData();
        },
        error: (file) => {
            uploadsLoading.value = false;
            window.$message.error(`${file.name} 上传失败`);
        },
        finish: () => {
            uploadsLoading.value = false;
            window.$message.success("上传完成");
            fileModal.value = false;
            getTableData();
        },
    });
};
const uploadsLoading = ref(false);
</script>
<style lang="css" scoped></style>
