<template>
    <hc-page-split :options="splitOptions">
        <template #left>
            <hc-card title="系统中期支付列表">
                <template #extra>
                    <el-button hc-btn type="primary" @click="addClick"
                        >添加中期支付项</el-button
                    >
                </template>
                <hc-table
                    :column="tableColumn"
                    :datas="tableData"
                    :loading="tableLoading"
                    :index-style="{ width: 60 }"
                    :is-current-row="true"
                    @row-click="viewRowClick"
                >
                    <template #payType="{ row }">
                        <span>{{
                            getDictionaryName(mpTypeData, row.payType)
                        }}</span>
                    </template>
                    <template #isDeduct="{ row }">
                        <span>{{ row.isDeduct == 1 ? "是" : "否" }}</span>
                    </template>
                    <template #payApplicableType="{ row }">
                        <span>{{
                            getDictionaryName(
                                palTypeData,
                                row.payApplicableType
                            )
                        }}</span></template
                    >
                    <template #action="{ row }">
                        <el-link type="warning" @click="editRowClick(row)"
                            >修改</el-link
                        >

                        <el-link type="danger" @click="delRowClick(row)"
                            >删除</el-link
                        >
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-card>
        </template>

        <hc-card scrollbar title="详情信息">
            <infoTable :ids="rowViewId" />

            <hc-card-item itle="汇总项">
                <template #extra>
                    <el-link type="primary" @click="addColloect"
                        >添加汇总项</el-link
                    >
                </template>

                <hc-table
                    :column="tableColumn1"
                    :datas="tableData1"
                    is-new
                    :index-style="{ width: 60 }"
                >
                    <template #isDeduct="{ row }">
                        <span>{{ row?.isDeduct === 1 ? "是" : "否" }}</span>
                    </template>
                    <template #action="{ row }">
                        <el-link type="danger" @click="delCollectRow(row)"
                            >删除</el-link
                        >
                    </template>
                </hc-table>
            </hc-card-item>
        </hc-card>

        <!-- 新增/修改 -->
        <hc-dialog
            v-model="isDialogShow"
            is-footer-center
            :title="formModel.id ? '新增' : '修改'"
            @close="dialogClose"
        >
            <el-form
                ref="formRef"
                :model="formModel"
                :rules="formRules"
                size="large"
                label-width="auto"
            >
                <el-form-item label="支付项编号">
                    <el-input
                        v-model="formModel.payNumber"
                        clearable
                        placeholder="请输入支付项编号"
                    />
                </el-form-item>
                <el-form-item label="支付项名称：" prop="payName">
                    <el-input
                        v-model="formModel.payName"
                        clearable
                        placeholder="请输入支付项名称"
                    />
                </el-form-item>
                <el-form-item label="支付项类型：" prop="payType">
                    <el-select
                        v-model="formModel.payType"
                        filterable
                        clearable
                        block
                    >
                        <el-option
                            v-for="item in mpTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同计算公式名称:" prop="key11">
                    <el-input
                        v-model="formModel.key11"
                        clearable
                        placeholder="请输入合同计算公式名称"
                    />
                </el-form-item>
                <el-form-item label="变更计算公式名称:" prop="key12">
                    <el-input
                        v-model="formModel.key11"
                        clearable
                        placeholder="请输入变更计算公式名称"
                    />
                </el-form-item>
                <el-form-item label="本期计算公式名称:" prop="key13">
                    <el-input
                        v-model="formModel.key11"
                        clearable
                        placeholder="请输入本期计算公式名称"
                    />
                </el-form-item>
                <el-form-item label="是否为扣款项:" prop="isDeduct">
                    <el-select
                        v-model="formModel.status"
                        block
                        placeholder="是否否为扣款项"
                    >
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否加粗:" prop="isBoldText">
                    <el-select
                        v-model="formModel.isBoldText"
                        block
                        placeholder="是否加粗"
                    >
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否手动输入:" prop="isManualInput">
                    <el-select
                        v-model="formModel.isManualInput"
                        block
                        placeholder="是否手动输入"
                    >
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示百分比:" prop="isShowPercent">
                    <el-select
                        v-model="formModel.isShowPercent"
                        block
                        placeholder="是否显示百分比"
                    >
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否合计项:" prop="isTotalTerms">
                    <el-select
                        v-model="formModel.isTotalTerms"
                        block
                        placeholder="是否合计项"
                    >
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付适用类型：" prop="payApplicableType">
                    <el-select
                        v-model="formModel.payApplicableType"
                        filterable
                        clearable
                        block
                    >
                        <el-option
                            v-for="item in palTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="排序号：" prop="sort">
                    <el-input
                        v-model="formModel.sort"
                        clearable
                        placeholder="请输入排序号："
                    />
                </el-form-item>
                <el-form-item label="排序号：" prop="remarks">
                    <el-input
                        v-model="formModel.remarks"
                        clearable
                        placeholder="请输入备注"
                        type="textarea"
                    />
                </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="isCollectShow"
            is-table
            widths="1200px"
            title="添加汇总项"
            @save="collectModalSave"
        >
            <div class="hc-flex-column">
                <div class="hc-flex-shrink hc-alert-primary">
                    <span class="mr-1">当前表格已选择</span>
                    <span class="text-4">{{ selectArr.length }}</span>
                    <span class="ml-1">项</span>
                </div>
                <div class="hc-flex-content">
                    <hc-body padding="0px">
                        <hc-table
                            :column="tableCollectColumn"
                            :datas="tableCollectData"
                            :loading="tableCollectLoading"
                            is-new
                            :check-style="{ width: 29 }"
                            :index-style="{ width: 60 }"
                            is-check
                            @selection-change="tableCollectCheckChange"
                        >
                            <template #isDeduct="{ row }">
                                <span>{{
                                    row?.isDeduct === 1 ? "是" : "否"
                                }}</span>
                            </template>
                            <template #isTotalTerms="{ row }">
                                <span>{{
                                    row?.isTotalTerms === 1 ? "是" : "否"
                                }}</span>
                            </template>
                        </hc-table>
                    </hc-body>
                </div>
            </div>
        </hc-dialog>
    </hc-page-split>
</template>

<script setup>
import { nextTick, onActivated, onDeactivated, onUnmounted, ref } from "vue";
import { deepClone, formValidate, getArrValue, getObjValue } from "js-fast-way";
import infoTable from "./info-table.vue";
import { HcDelMsg } from "hc-vue3-ui";
import mainApi from "~api/desk/interim-pay";
import { getDictionaryData, getDictionaryName } from "~uti/tools";
import { arrToId } from "js-fast-way";
//页面分割
const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };

//激活
onActivated(() => {
    searchForm.value.current = 1;
    getTableData();
    getMpTypeData();
    getPalTypeData();
});

//搜索表单
const searchForm = ref({ current: 1, size: 30, total: 0 });

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

//表格数据
const tableColumn = ref([
    { key: "payNumber", name: "支付项编号" },
    { key: "payName", name: "支付项名称" },
    { key: "payType", name: "支付项类型" },
    { key: "isDeduct", name: "是否为扣款项" },
    { key: "payApplicableType", name: "支付适用类型" },
    { key: "action", name: "操作", width: 100, align: "center" },
]);

//获取表格数据
const tableLoading = ref(true);
const tableData = ref([{}]);
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;
    if (tableData.value.length > 0) {
        getDetail(tableData.value[0].id);
        rowViewId.value = tableData.value[0].id;
        getDetail(rowViewId.value);
    }
};
//支付项类型
const mpTypeData = ref([]);
const getMpTypeData = async () => {
    mpTypeData.value = await getDictionaryData("meter_pay_type", false);
};
//支付适用类型

const palTypeData = ref([]);
const getPalTypeData = async () => {
    palTypeData.value = await getDictionaryData(
        "meter_pay_applicable_type",
        false
    );
};
const rowViewId = ref("");
const viewRowClick = ({ row }) => {
    rowViewId.value = row.id;
    getDetail(row.id);
};
const tableData1 = ref([]);
//汇总项
const tableColumn1 = ref([
    { key: "payNumber", name: "支付项编号" },
    { key: "payName", name: "支付项名称" },
    { key: "payTypeName", name: "支付项类型" },
    { key: "contractFormulaIds", name: "合同计算公式" },
    { key: "updateFormulaIds", name: "变更计算公式" },
    { key: "currentFormulaIds", name: "本期计算公式" },
    { key: "isDeduct", name: "是否为扣款项" },
    { key: "action", name: "操作", width: 50 },
]);
//获取节点详情
const getDetail = async (id) => {
    const { error, code, data } = await mainApi.getProDetail({
        id,
    });
    if (!error && code === 200) {
        tableData1.value = getObjValue(data)["summaryItemList"];
    } else {
        tableData1.value = [];
    }
};
//新增/修改 弹窗
const isDialogShow = ref(false);
const formRef = ref(null);
const formModel = ref({});
const formRules = {
    payName: { required: true, trigger: "blur", message: "请输入支付项名称" },
    payType: { required: true, trigger: "blur", message: "请选择支付项编号" },
};

//新增
const addClick = async () => {
    formModel.value = {};
    await nextTick();
    isDialogShow.value = true;
};

//修改
const editRowClick = async (row) => {
    formModel.value = deepClone(row);
    await nextTick();
    isDialogShow.value = true;
};

//提交表单
const submitLoading = ref(false);
const dialogSubmit = async () => {
    const isForm = await formValidate(formRef.value);
    if (!isForm) return false;
    submitLoading.value = true;
    const { error, code } = await mainApi.submit(formModel.value);
    submitLoading.value = false;
    if (!error && code === 200) {
        window?.$message?.success("操作成功");
        dialogClose();
        getTableData().then();
    }
};

//删除
const delRowClick = (row) => {
    HcDelMsg(async (resolve) => {
        const { code } = await mainApi.del(row.id);
        resolve(); //关闭弹窗的回调
        if (code !== 200) return;
        window.$message.success("删除成功");
        getTableData().then();
        rowViewId.value = "";
    });
};

//关闭弹窗
const dialogClose = () => {
    isDialogShow.value = false;
    formModel.value = {};
};

//添加汇总项
const isCollectShow = ref(false);
const collectSaveLoading = ref(false);
const collectModalSave = async () => {
    collectSaveLoading.value = true;
    const { error, code, msg } = await mainApi.addCollect({
        bindIds: selectTableCollectIds.value,
        id: rowViewId.value,
    });
    //判断状态
    collectSaveLoading.value = false;
    if (!error && code === 200) {
        window?.$message?.success(msg);
    } else {
        window.$message.error(msg);
    }
    getDetail(rowViewId.value);
    isCollectShow.value = false;
};
const addColloect = () => {
    isCollectShow.value = true;
    getTableCollectData();
    selectArr.value = [];
};
//删除汇总项
const delCollectRow = async (row) => {
    HcDelMsg(async (resolve) => {
        await removeCollectPay(row.id);
        resolve(); //关闭弹窗的回调
    });
};
const removeCollectPay = async (id) => {
    const { error, code, msg } = await mainApi.removeCollect({
        id: rowViewId.value,
        bindId: id,
    });
    if (!error && code === 200) {
        window?.$message?.success("删除成功");
        getDetail(rowViewId.value);
    } else {
        window.$message.error(msg);
    }
};
//添加汇总项
const tableCollectColumn = ref([
    { key: "payNumber", name: "支付项编号" },
    { key: "payName", name: "支付项名称" },
    { key: "payTypeName", name: "支付项类型" },
    { key: "isDeduct", name: "是否为扣款项" },
    { key: "isTotalTerms", name: "是否合计项" },
    { key: "payApplicableTypeName", name: "支付项适用类型" },
]);
const tableCollectData = ref([]);
const tableCollectLoading = ref(false);
const getTableCollectData = async () => {
    tableCollectLoading.value = true;
    const { error, code, data } = await mainApi.getProListPage({
        projectId: 1,
        recordId: rowViewId.value,
    });
    tableCollectLoading.value = false;
    if (!error && code === 200) {
        tableCollectData.value = getArrValue(data);
    } else {
        tableCollectData.value = [];
    }
};
const selectTableCollectIds = ref("");
const selectArr = ref([]);
const tableCollectCheckChange = (list) => {
    selectArr.value = list;
    selectTableCollectIds.value = arrToId(list);
};
</script>

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