<template>
  <SysDialog
    class="formula"
    :top="getBindValue.top"
    :title="getBindValue.title"
    :width="getBindValue.width"
    :height="getBindValue.height"
    :visible="dialog.visible"
    @onClose="clear"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 表单 -->
      <div class="title">
        基本设置
      </div>
      <el-form
        ref="validateFieldRef"
        :inline="true"
        :model="calculatorParams"
        class="base-calculator-form"
      >
        <el-form-item
          label="重量计算方式："
          label-width="110px"
        >
          <el-select
            v-model="calculatorParams.mpsWeightCountType"
            class="item-form"
          >
            <el-option
              v-for="item in weightArithmeticList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单件取整：">
          <el-input
            v-model="calculatorParams.mpsWeightRound"
            type="number"
            class="item-form-2"
          />
        </el-form-item>
        <el-form-item label="总重取整：">
          <el-input
            v-model="calculatorParams.mpsTotalWeightRound"
            type="number"
            class="item-form-2"
          />
        </el-form-item>
        <el-form-item label="保底重(Kg)：">
          <el-input
            v-model="calculatorParams.guaranteeWeight"
            type="number"
            class="item-form-2"
          />
        </el-form-item>
        <el-form-item label="单件最大重：">
          <el-input
            v-model="calculatorParams.mpsMaxWeight"
            type="number"
            class="item-form-2"
          />
        </el-form-item>
        <el-form-item label="取整类型：">
          <el-select
            v-model="calculatorParams.pickValueType"
            class="item-form"
          >
            <el-option
              v-for="item in pickValueTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="calculatorParams.isNotCountVolume"
          >
            计抛
          </el-checkbox>
        </el-form-item>
        <el-form-item
          label="单位类型："
          label-width="110px"
          prop="unitType"
          :rules="ruleForm.unitType"
        >
          <el-select
            v-model="calculatorParams.unitType"
            class="item-form"
          >
            <el-option
              v-for="item in unitTypeIntegerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="序号："
          prop="orderNumber"
          :rules="ruleForm.orderNumber"
        >
          <el-input
            v-model="calculatorParams.orderNumber"
            type="number"
            class="item-form-2"
          />
        </el-form-item>
        <!-- <el-form-item label="排它单位类型：">
          <BaseSelect
            v-model:modelValue="calculatorParams.unitTypeList"
            class="item-form-3"
            :options="unitTypeIntegerList"
            :multiple="true"
            :filterable="false"
            :collapse-tags="true"
            :clearable="true"
          />
        </el-form-item> -->
        <el-form-item label="计费方式：">
          <BaseSelect
            v-model:modelValue="calculatorParams.mpsCountFeeType"
            class="item-form"
            :options="mpsCountFeeTypeList"
            :filterable="false"
          />
        </el-form-item>
      </el-form>
      <!-- 计算符 -->
      <BaseFormulaList
        :expense-type="calculatorData"
        :mps-parameters-list="mpsParametersList"
        @choice="choice"
      />
      <!-- 表格 -->
      <div class="title">
        计算公式
      </div>
      <div class="flex justify-lr p-4 font-size-mx">
        <div>
          公式：<span
            v-for="item in choiceList"
            :key="item.key"
          >{{ item.value }}</span>
        </div>
        <div>
          <el-button
            type="primary"
            @click="hanleGenerate"
          >
            {{ generatStr }}
          </el-button>
        </div>
      </div>
      <BaseTable
        style="width: 100%;"
        @register="registerTable"
      >
        <template #unitType="scope">
          <div v-if="scope.$index >= 0">
            {{ dealUnitType(scope.row.unitType) }}
          </div>
        </template>
        <template #unitTypeList="scope">
          <div
            v-if="scope.$index >= 0"
            class="single-line"
          >
            {{ changeUnitTypeList(scope.row.unitTypeList, unitTypeIntegerList) }}
          </div>
        </template>
        <template #action="scope">
          <el-button
            size="small"
            type="primary"
            @click="hanleFormula(scope.row, calculatorData)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="hanleDelete(scope)"
          >
            刪除
          </el-button>
        </template>
      </BaseTable>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { BaseTable, useTable } from '@/components/Table';
import { BaseFormulaList } from '@/components/FormulaList';
import { useFormulaList } from '@/hooks/useFormulaList';
import useBusinessFeesetModel from '@/composables/business/useBusinessFeesetModel';
import useBusinessFeesetRote from '@/composables/business/useBusinessFeesetMpsdataRote';
import { useCalculatorData } from '@/composables/business/calculator/useCalculatorData';
import { useDropDownData } from '@/hooks/useDropDownData';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';

// 基础数据
const { tableDataFeeset, ruleForm } = useBusinessFeesetModel();
const { calculatorData } = useCalculatorData()
const { weightArithmeticList, unitTypeIntegerList, pickValueTypeList, mpsCountFeeTypeList, mpsParametersList } = useDropDownData()

// 弹框一些配置
const getBindValue = reactive({
  top: "5vh",
  title: '费用计算公式',
  width: 1150,
  height: 0
})

const emit = defineEmits(['saveMpsData']);

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

// 注册表格 
const [registerTable, methodsTable] = useTable(tableDataFeeset)

// 类似计算器
const { choice, generatingFormula, choiceList } = useFormulaList()

// 业务数据
const {
  hanleGenerate,
  hanleFormula,
  hanleDelete,
  dealUnitType,
  changeUnitTypeList,
  show,
  clear,
  confirm,
  generatStr,
  calculatorParams,
  validateFieldRef
} = useBusinessFeesetRote(onClose, onShow, emit, tableDataFeeset, choiceList, generatingFormula, methodsTable, calculatorData)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
<style lang="scss" scoped>
.formula {
  .base-calculator-form {
    margin-top: 10px;

    :deep(.el-form-item) {
      margin-right: 10px;
    }
    :deep(.el-form-item__label) {
      padding-right: 3px;
    }
    .item-form {
      width: 110px;
    }
    .item-form-2 {
      width: 70px;
    }
    .item-form-3 {
      width: 150px;
    }
  }
  .flex {
    display: flex;
  }
  .flex-1 {
    flex: 1;
  }
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px;
    font-weight: bold;
  }
  .result {
    margin-bottom: 30px;
  }
  .mpsdata-form {
    :deep(.el-form-item__label) {
      padding: 0;
    }

    :deep(.el-form-item) {
      margin-right: 12px;
    }
  }
}
</style>