<template>
  <a-row align="middle" style="margin: 16px; display: block">
    <a-col :span="24" class="!flex items-center">
      <span class="pr-10px">单位类型</span>
      <a-select
        :fieldNames="{ label: 'typeName', value: 'id' }"
        :options="typeOptions"
        mode="multiple"
        v-model:value="unitTypeIds"
        placeholder="请选择"
        style="width: 270px"
      />

      <span class="pr-10px pl-4">保留小数</span>
      <a-select
        :options="numberOptions"
        v-model:value="saveNumber"
        placeholder="请选择"
        style="width: 270px"
        allowClear
      />

      <a-button type="primary" class="w-74px !rounded ml-4" @click="handleSubmit">确认</a-button>
    </a-col>

    <div v-for="(item, index) in submitOptions" :key="index" class="mt-4">
      <div class="card-title"> {{ item.typeName }}换算 </div>
      <div class="card-ipt">
        <a-input-number
          placeholder="请输入"
          v-model:value="item.calc.number1"
          @change="handleChange(item)"
        />
        <a-select
          placeholder="请选择单位"
          :fieldNames="{ label: 'unitName', value: 'symbol' }"
          :options="item.unitVo"
          v-model:value="item.calc.unit1"
          @change="handleChange(item)"
        />
      </div>
      <div class="card-ipt">
        <a-input-number v-model:value="item.calc.number2" readonly :precision="precision" />
        <a-select
          placeholder="请选择单位"
          :fieldNames="{ label: 'unitName', value: 'symbol' }"
          :options="item.unitVo"
          v-model:value="item.calc.unit2"
          @change="handleChange(item)"
        />
      </div>
    </div>
  </a-row>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import type { SelectProps } from 'ant-design-vue';

  import { getConversionAll } from '/@/api/erp/unit/conversion';
  import { ConversionListAllModel } from '/@/api/erp/unit/conversion/model/index';

  import { isNumber } from 'lodash-es';

  const typeOptions = ref<ConversionListAllModel[]>([]);
  const unitTypeIds = ref<string>();
  const saveNumber = ref<string>();
  const precision = ref();

  const submitOptions = ref<any[]>([]);
  const numberOptions = ref<SelectProps['options']>([
    {
      value: 'all',
      label: '整数位',
    },
    {
      value: 2,
      label: '2位',
    },
    {
      value: 4,
      label: '4位',
    },
    {
      value: 6,
      label: '6位',
    },
  ]);

  onMounted(() => {
    getOptions();
  });

  const getOptions = async () => {
    typeOptions.value = await getConversionAll();
  };

  const handleSubmit = () => {
    submitOptions.value = typeOptions.value.filter((x) => unitTypeIds.value?.includes(x.id));
    submitOptions.value.forEach(
      (x) => (x.calc = { number1: null, unit1: null, number2: null, unit2: null }),
    );
    precision.value = !saveNumber.value
      ? undefined
      : saveNumber.value === 'all'
      ? 0
      : saveNumber.value;
  };

  const handleChange = (info) => {
    if (isNumber(info.calc.number1) && info.calc.unit1 && info.calc.unit2) {
      const unitObj = { unitNumber1: null, unitNumber2: null };
      info.unitVo.forEach((x) => {
        if (x.symbol === info.calc.unit1) unitObj.unitNumber1 = x.number;
        if (x.symbol === info.calc.unit2) unitObj.unitNumber2 = x.number;
      });
      if (isNumber(unitObj.unitNumber1) && isNumber(unitObj.unitNumber2)) {
        info.calc.number2 = (unitObj.unitNumber2 / unitObj.unitNumber1) * info.calc.number1;
      }
    }
  };
  defineExpose({ getOptions });
</script>
<style lang="less" scoped>
  :deep(.vben-page-wrapper-content) {
    margin: 0;
    padding: 10px;
    background: #fff;
  }

  .card-title {
    font-size: 14px;
    font-weight: bold;
    color: @primary-color;
    display: flex;
    margin-bottom: 16px;

    &::before {
      width: 4px;
      height: 16px;
      background: @primary-color;
      border-radius: 2px;
      content: '';
      margin-right: 8px;
      display: block;
      margin-top: 4px;
    }
  }

  .card-ipt {
    display: flex;
    margin: 10px 0;

    :deep(.ant-input-number) {
      width: 336px;
      margin-right: 8px;
    }

    :deep(.ant-select) {
      width: 110px;
    }
  }
</style>
