<template>
    <div class="home">
        <el-button
            type="primary"
            class="create-btn"
            @click="onClickCreateOne"
        >
            新 建
        </el-button>
        <el-table
            v-loading="loading"
            :data="tableList"
            style="width: 100%"
        >
            <el-table-column
                label="序号"
                width="90"
                type="index"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="第三方URL"
                align="center"
                prop="url"
            ></el-table-column>
            <el-table-column
                label="keyId"
                align="center"
                prop="keyid"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="创建人"
                align="center"
                prop="createBy"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="操作"
                width="60"
                align="center"
            >
                <template #default="scope">
                    <el-button
                        link
                        type="primary"
                        icon="Delete"
                        @click="onClickDel(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="refreshList()"
        />
    </div>
    <el-dialog
        v-model="isVisible"
        title="新建URL"
        width="500px"
        @close="onCloseDialog(ruleFormRef)"
        :close-on-click-modal="false"
    >
        <el-form
            ref="ruleFormRef"
            :model="createOneForm"
            :rules="createOneRule"
            label-width="50px"
            label-position="left"
        >
            <el-form-item label="url" prop="url">
                <el-input
                    v-model="createOneForm.url"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
                <el-button @click="onCloseDialog(ruleFormRef)">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
/* eslint-disable camelcase */
import { onMounted, reactive, ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {
    getThirdPartyUrl,
    ThirdPartyUrlInstance,
    deleteOne,
    createOne,
} from '@/api/system/thirdParty';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const tableList = ref<Array<ThirdPartyUrlInstance>>([]);
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
})
const total = ref(0);

const refreshList = () => {
    loading.value = true;
    getThirdPartyUrl(
        queryParams.pageNum,
        queryParams.pageSize,
    ).then((res: any) => {
        tableList.value = res.rows;
        total.value = res.total;
        loading.value = false;
    })
};
const onClickCreateOne = () => {
    isVisible.value = true;
};
const onClickDel = (row: ThirdPartyUrlInstance) => {
    proxy!.$modal
        .confirm('确认删除此条url吗？')
        .then(function () {
            return deleteOne(row.urlId)
        })
        .then(() => {
            proxy!.$modal.msgSuccess('删除成功');
            refreshList();
        })
};

const initialCteateForm = {
    url: ''
};
const createOneForm = reactive({...initialCteateForm});
const isVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const onCloseDialog = (ruleFormRef?: FormInstance) => {
    if (!ruleFormRef) return;
    ruleFormRef.resetFields();
    isVisible.value = false;
};
const submitForm = async (ruleFormRef?: FormInstance) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate();
    createOne(createOneForm).then((res: any) => {
        proxy!.$modal.msgSuccess('创建成功');
        isVisible.value = false;
        refreshList();
    });
};
const createOneRule = ref<FormRules>({
    url: [
        { required: true, message: '请输入url', trigger: 'blur' },
    ],
});

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

<style scoped lang="scss">
.home {
    background-color: #fff;
    margin: 20px;
}
.create-btn {
    margin: 20px 0;
}
</style>
