<template>
    <div class="modal">
        <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="modalConfig.dialogWidth || '40%'" center
            @close="handleExcel(ruleFormRef)" :close-on-click-modal="false">
            <div class="form">
                <el-form ref="ruleFormRef" :rules="modalConfig.formRules" :model="formData"
                    :label-width="modalConfig.labelWidth || '100px'" size="large">
                    <template v-for="item in modalConfig.formItems" :key="item.prop">
                        <el-form-item :label="item.label" :prop="item.prop">
                            <template v-if="item.type === 'input'">
                                <el-input :disabled="item.disabled" v-model="formData[item.prop]"
                                    :placeholder="item.placeholder" />
                            </template>
                            <template v-if="item.type === 'number'">
                                <el-input v-model="formData[item.prop]" type="number" :min="0" :max="999999999999"
                                    :disabled="item.disabled" :placeholder="item.placeholder"
                                    @blur="onBlur(formData[item.prop], item.prop, item.numberType)" />
                            </template>
                            <template v-if="item.type === 'select'">
                                <el-select v-model="formData[item.prop]" :placeholder="item.placeholder"
                                    style="width: 100%" :disabled="item.disabled">
                                    <template v-for="(val, index) in item.options" :key="index">
                                        <el-option :value="val.value" :label="val.label" />
                                    </template>
                                </el-select>
                            </template>
                            <template v-if="item.type === 'date-picker'">
                                <el-date-picker :type="item.dateType || 'daterange'" range-separator="-"
                                    start-placeholder="开始时间" end-placeholder="结束时间" v-model="formData[item.prop]"
                                    :disabled="item.disabled" />
                            </template>
                            <!-- 关联部门 -->
                            <template v-if="item.type === 'deptId'">
                                <el-tree-select v-model="formData.deptId" :data="deptOptions"
                                    @change="dapartTreeChange(formData.deptId)"
                                    :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                                    value-key="deptId" placeholder="选择上级部门" style="width: 100%" check-strictly
                                    clearable />
                            </template>
                            <!-- 能源单价标志 -->
                            <template v-if="item.type === 'unitPriceSign'">
                                <el-radio-group v-model="formData.unitPriceSign"
                                    @change="unitPriceChange(formData.unitPriceSign)">
                                    <el-radio v-for="item in unitPriceOptions" :value="item.value"
                                        :label="item.value">{{ item.label }}</el-radio>
                                </el-radio-group>
                            </template>
                            <!-- 能源列表 -->
                            <template v-if="item.type === 'energyList'">
                                <!-- 能源单价标志为否的时候 -->
                                <el-tabs v-if="formData.unitPriceSign === '2'" v-model="customEnergy" type="card"
                                    class="demo-tabs">
                                    <el-tab-pane v-for="item in formData.energyList" :key="item.energyUnitPriceId"
                                        :label="item.energyName" :name="item.energyUnitPriceId">
                                        <!-- <el-input
                                            v-model="item.valleyValueUnitPrice"
                                            placeholder="请输入谷值单价"
                                            type="number"
                                            :min="0"
                                            :max="999999999999"
                                        >
                                            <template #prepend>谷值单价(元)</template>
</el-input>
<el-input v-model="item.peakUnitPrice" placeholder="请输入峰值单价" type="number" :min="0" :max="999999999999">
    <template #prepend>峰值单价(元)</template>
</el-input> -->
                                        <el-input v-model="item.averageUnitPrice" placeholder="请输入平均单价" type="number"
                                            :min="0" :max="999999999999">
                                            <template #prepend>平段单价(元)</template>
                                        </el-input>
                                    </el-tab-pane>
                                </el-tabs>

                                <!-- 能源单价标志为是的时候 -->
                                <el-tabs v-else v-model="initEnergy" type="card" class="demo-tabs">
                                    <el-tab-pane v-for="item in initEnergyList" :key="item.energyUnitPriceId"
                                        :label="item.energyName" :name="item.energyUnitPriceId">
                                        <!-- <el-input
                                            v-model="item.valleyValueUnitPrice"
                                            placeholder="请输入谷值单价"
                                            :disabled="true"
                                        >
                                            <template #prepend>谷值单价(元)</template>
                                        </el-input>
                                        <el-input v-model="item.peakUnitPrice" placeholder="请输入峰值单价" :disabled="true">
                                            <template #prepend>峰值单价(元)</template>
                                        </el-input> -->
                                        <el-input v-model="item.averageUnitPrice" placeholder="请输入平均单价"
                                            :disabled="true">
                                            <template #prepend>平段单价(元)</template>
                                        </el-input>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <!-- 计算公式 -->
                            <template v-if="item.type === 'calculationFormulaName'">
                                <Formula :dictType="dictType" @getValue="getValue"></Formula>
                            </template>
                            <!-- 电能耗系统ID(加) -->
                            <template v-if="item.type === 'energyElectricIds'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in elecEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <!-- 电能耗系统ID(减) -->
                            <template v-if="item.type === 'energyElectricIdsMin'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in elecEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <!-- 气能耗系统ID(加) -->
                            <template v-if="item.type === 'energyGasIds'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in gasEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <!-- 气能耗系统ID(减) -->
                            <template v-if="item.type === 'energyGasIdsMin'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in gasEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <!-- 水能耗系统ID(加) -->
                            <template v-if="item.type === 'energyWaterIds'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in waterEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                            <!-- 水能耗系统ID(减) -->
                            <template v-if="item.type === 'energyWaterIdsMin'">
                                <el-select v-model="formData[item.prop]" multiple filterable remote reserve-keyword
                                    :disabled="item.disabled" style="width: 100%">
                                    <el-option v-for="item in waterEnerty" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-form-item>
                    </template>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleExcel(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="handleConfirmClick(ruleFormRef)">确定</el-button>
                    <slot name="button"></slot>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="modal">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import useSystemStore from '@/store/main';
import { listDept } from '@/api/system/dept';
import { ComponentInternalInstance } from 'vue';
import cache from '@/plugins/cache';
import Formula from '@/components/Formula/index.vue';
import { outTypeList } from '@/libs/commonMeth';
const elecEnerty = outTypeList('dh_ec_electricity');
const gasEnerty = outTypeList('dh_ec_gas');
const waterEnerty = outTypeList('dh_ec_water');
// 定义props
interface IProps {
    modalConfig: {
        pageName: string;
        addTitle: string;
        editTitle: string;
        detailTitle: string;
        dialogWidth: string;
        labelWidth: string;
        formItems: any[];
        formRules: object;
        pageListParams?: object; //新增一个对象，用来传给特殊的列表接口刷新页面（非必传）
    };
    otherInfo?: any;
}

const props = defineProps<IProps>();

const dialogVisible = ref(false);
const isEdit = ref(false);

const ruleFormRef = ref<FormInstance>();

const systemStore = useSystemStore();

const { pageDetailInfo, pageOperateType } = storeToRefs(systemStore);
import { energyUnitPrice } from '@/api/leasingCompany';
import { matchStringAndFormat } from '@/utils/commonMeth';

// 获取字段
const dictType = 'dh_company_independent_energy_costs_calculation_formula_value';
// 组合两个字典数组
let fieldNameList = ref([] as any);
// 获取费用计算公式组件的数据
const getValue = (calculationFormulaName, dictList, globalList) => {
    formData.value.calculationFormulaName = calculationFormulaName;
    fieldNameList.value = [...dictList.value, ...globalList.value];
};
// 父组件的值
const formulaValue = ref('初始值') as any;
provide('calculationFormulaName', formulaValue);

// 重置数据
const handleClearDate = () => {
    // 重置父组件的值
    formData.value.calculationFormulaName = '';
    // 重置子组件的值
    formulaValue.value = +new Date();
};
// ---------------------费用总计 结束----------------------

onMounted(async () => {
    await getListDept();
    await getEnergyUnitPrice();
});

// 获取能源单价
const getEnergyUnitPrice = () => {
    energyUnitPrice().then((res: any) => {
        initEnergyList.value = res.rows;
        initEnergy.value = res.rows[0].energyUnitPriceId;
    });
};

// 部门树形数据
const deptOptions = ref<any[]>([]);
const departTree = ref([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const getListDept = async () => {
    // 获取关联部门列表
    await listDept().then(response => {
        departTree.value = response.data;
        deptOptions.value = proxy!.handleTree(response.data, 'deptId');
    });
};
// 部门树形的chang事件
const dapartTreeChange = id => {
    departTree.value.forEach((item: any) => {
        if (item.deptId === id) {
            formData.value.numberOfPersonnel = item.numberOfPersonnel;
        }
    });
    console.log(formData.value.numberOfPersonnel);
};
// 能源单价标志
const unitPriceOptions = [
    {
        label: '是',
        value: '0',
    },
    {
        label: '否',
        value: '2',
    },
];
// 水电燃气单价
const customEnergy = ref('1');
const initEnergyList = ref([] as any);
const initEnergy = ref('1');
// 能源单价标志的change事件
const unitPriceChange = async (e: string) => {
    customEnergy.value = '1';
    initEnergy.value = '1';
    console.log(formData.value.energyList);

    await getEnergyUnitPrice();
};
// ----------------------------------------------------------------
// 定义数据绑定
const initialForm: any = {};
for (const item of props.modalConfig.formItems) {
    initialForm[item.prop] = item.initialValue ?? '';
}

let formData = ref(JSON.parse(JSON.stringify(initialForm)));

const dialogTitle = ref();
const initData = ref({});
// 新建或者编辑
async function setDialogVisible(isNew: boolean = true, check: boolean = false) {
    await getEnergyUnitPrice();
    dialogVisible.value = true;
    ruleFormRef.value?.resetFields();
    // 清空数据
    handleClearDate();
    await nextTick();
    if (!isNew) {
        watch(pageDetailInfo, newVal => {
            formData.value = pageDetailInfo.value;
            console.log(formData.value);
            // 赋值
            formulaValue.value = formData.value.calculationFormulaName;
        });

        customEnergy.value = '1';
        initEnergy.value = '1';

        // 判断如果不是新增的话就获取store中的详情
        if (check) {
            dialogTitle.value = props.modalConfig.detailTitle;
            systemStore.getDetailType('detail');
        } else {
            dialogTitle.value = props.modalConfig.editTitle;
            systemStore.getDetailType('edit');
        }
    } else {
        props.modalConfig.formItems.map((m: any) => {
            if (m.numberType === '2') {
                if (m.porp === initialForm[m.porp]) {
                    initialForm[m.prop] = (0.0).toFixed(2);
                }
            } else if (m.numberType === '1') {
                if (m.porp === initialForm[m.porp]) {
                    initialForm[m.prop] = Math.trunc(0);
                }
            }
        });
        formData.value = JSON.parse(JSON.stringify(initialForm));
        await nextTick();
        setTimeout(() => {
            formData.value.energyList = initEnergyList.value;
        }, 500);
        customEnergy.value = '1';
        initEnergy.value = '1';
        dialogTitle.value = props.modalConfig.addTitle;
        systemStore.detailPageEval(initialForm);
        systemStore.getDetailType('add');
    }
    isEdit.value = !isNew;
}
// 点击确定
function handleConfirmClick(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid, fields) => {
        if (valid) {
            // 费用计算公式数据处理
            // formData.value.calculationFormula = formData.value.calculationFormulaName
            formData.value.calculationFormula = matchStringAndFormat(
                formData.value.calculationFormulaName,
                fieldNameList.value
            );
            dialogVisible.value = false;
            let data = { ...formData.value };
            data.energyList.forEach((item, index) => {
                initEnergyList.value.forEach((row, d) => {
                    if (index === d) {
                        item.energyUnitPriceId = row.energyUnitPriceId;
                    }
                });
            });
            if (props.otherInfo) {
                data = { ...data, ...props.otherInfo };
            }
            if (!isEdit.value) {
                systemStore.newPageDataAction(
                    props.modalConfig.pageName,
                    data,
                    props.modalConfig.pageListParams
                );
            } else {
                if (pageOperateType.value === 'edit') {
                    systemStore.editPageDataAction(
                        props.modalConfig.pageName,
                        data,
                        props.modalConfig.pageListParams
                    );
                }
            }
        } else {
            console.log('error submit!', fields);
        }
    });
}
// 取消
function handleExcel(formEl: FormInstance | undefined) {
    dialogVisible.value = false;
    if (!formEl) return;
    formEl.resetFields();
}

// 获取详情
function onPageDetail(urlId: number | [] | string) {
    systemStore.detailPageDataAction(props.modalConfig.pageName, urlId);
}

function onBlur(e: any, prop: any, type: any) {
    let a = 0;
    if (type === '1') {
        if (e < 0) {
            e = 0;
        } else if (e > 999999999999999) {
            e = 999999999999999;
        }
        a = Math.trunc(e);
        for (const item of props.modalConfig.formItems) {
            if (item.type === 'number') {
                if (prop === item.prop) {
                    formData.value[item.prop] = a;
                }
            }
        }
    } else if (type === '2') {
        if (e < 0) {
            e = 0.0;
        } else if (e > 999999999999999) {
            e = 999999999999999.0;
        }
        a = Number(Number(e).toFixed(2));
        for (const item of props.modalConfig.formItems) {
            if (item.type === 'number') {
                if (prop === item.prop) {
                    formData.value[item.prop] = a;
                }
            }
        }
    }
}
defineExpose({
    setDialogVisible,
    onPageDetail,
});
</script>

<style scoped lang="scss">
.form {
    padding: 10px 30px;
}
</style>
