<template>
  <SysDialog class="formula-modle" :title="getBindValue.title" :width="getBindValue.width" :height="getBindValue.height"
    :visible="dialog.visible" @onClose="hanleOnClose" @onConfirm="confirm">
    <template #content>
      <!-- 计算公式 -->
      <div class="formula-warp">
        <CalculationFormula :expense-type="calculatorData" :calculator-list="choiceList" @choice="choiceCalculator"
          :fee-item-text="feeItemText" />
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { ref, unref, computed } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import CalculationFormula from '@/components/CalculationFormula/baseIndex.vue';
import { useFormulaList } from '@/hooks/useFormulaList';
import { useCalculatorData } from '@/composables/business/calculator/useCalculatorData';
import { ListIitem } from '@/api/base/BaseDataModel';
import { useDropDownData } from '@/hooks/useDropDownData';

const { storeDropDownData, parametersList } = useDropDownData()
// 弹框一些配置
const getBindValue = ref<Recordable>({
  title: '费用计算公式',
  width: 880,
  height: 0
})
const feeItemEditData = ref<Recordable>({})
const feeItemEditRow = ref<Recordable>({})

// 获取费用类型名称
const feeItemText = computed(() => {
  const feeItem = storeDropDownData.getFeeItemList.find(item => item.id === feeItemEditData.value.feeItemId) as Recordable
  return feeItem ? feeItem.itemName : ''
})

// 基础数据
const { calculatorData } = useCalculatorData();

//弹框属性
const { dialog, onClose, onShow } = useDialog();

// 类似计算器
const { choice: choiceCalculator, dealFormulaStrCalculatorData, clearCalculator, choiceList } = useFormulaList();

//声明事件
const emit = defineEmits(['save']);

// 获取的数据
const confirm = () => {
  const choiceData = unref(choiceList)
  // 费用计算计算公式
  console.log(unref(feeItemEditData).countModel.countType, ":unref(feeItemEditData).countModel.countType", choiceData);
  const parametersData = unref(parametersList)
  const formulaExplain = choiceData.map(item => {
    const findItem = parametersData.find(fi => fi.label === item.value)
    return findItem ? `${findItem.label}:${findItem.value}` : item.value
  }).join("")
  // 公式参数
  feeItemEditRow.value.countModel = {
    countType: unref(feeItemEditData).countModel.countType,
    formula: choiceData.map(item => item.key).join(""),
    formulaExplain,
  }
  // 合并表格对应行数据
  Object.assign(feeItemEditData.value, feeItemEditRow.value)
  emit("save", unref(choiceList))//choiceList: 选择公式数组数据
  // 取消弹窗
  onClose()
  // 清除公式
  clearCalculator()
}

// 隐藏操作
const hanleOnClose = () => {
  // 取消弹窗
  onClose()
}

// 显示操作
const show = (unitTypes: ListIitem[], row: Recordable) => {
  console.log(row, ":row");
  feeItemEditData.value = row
  // 赋值操作
  calculatorData.EexpenseOne = unitTypes.map(item => {
    return { key: `{${item.value}}`, value: item.label, active: false }
  })
  // 编辑公式
  row.countModel && dealFormulaStrCalculatorData(row.countModel, calculatorData)
  onShow()
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
<style scoped>
.formula-warp {
  padding: 0 28px;
}
</style>