<script setup lang="tsx">
import { ref } from 'vue';
import { NDynamicInput, NInput, NInputNumber } from 'naive-ui';
import { fetchGetAllChannelList } from '@/service/api/goods/store-goods';
import { useTabStore } from '@/store/modules/tab';
import { useForm } from '@/components/zt/Form/hooks/useForm';
import { ApiSelect } from '@/components/zt/ApiSelect';
const tabStore = useTabStore();
interface Options {
  value: any;
  index: number;
}
const ChannelOptions = ref<Api.goods.Channel[]>([]);
const [registerForm, { getFieldsValue, validate }] = useForm({
  schemas: [
    {
      field: '1',
      component: 'NInput',
      label: '配送距离',
      required: true,
      render({ model, field }) {
        return (
          <div class={'w200px xl:w700px'}>
            <NInput
              placeholder={'请输入配送距离'}
              value={model[field]}
              onUpdate:value={val => (model[field] = val)}
              v-slots={{ prefix: () => '大于', suffix: () => 'km' }}
            ></NInput>
          </div>
        );
      }
    },
    {
      field: 'name',
      component: 'NDynamicInput',
      label: '配送费/运费',
      render({ model, field }) {
        return (
          <div class={'flex flex-wrap items-center'}>
            <div class={'h38px flex items-center'}>
              <div class={'w-200px text-center'}> 企业 </div>
              <div class={'ml-3 w-200px text-center'}> 费用(元) </div>
              <div class={'ml-3 w-200px text-center'}> 重量(kg) </div>
            </div>
            <NDynamicInput
              value={model[field]}
              onUpdate:value={value => (model[field] = value)}
              v-slots={(row: Options) => handleCreatInput(model, field, row)}
              onCreate={() => handleAdd()}
              max={ChannelOptions.value.length}
            ></NDynamicInput>
          </div>
        );
      },
      required: true,
      defaultValue: [{ Enterprise: null, Cost: 1 }]
    }
  ],
  labelWidth: 120,
  layout: 'horizontal',
  collapsedRows: 1,
  showActionButtonGroup: false,
  gridProps: {
    cols: '1',
    itemResponsive: true
  }
});
function handleCreatInput(model: any, field: any, row: Options) {
  return (
    <div class={'flex items-center'}>
      <div class={'w-200px'}>
        <ApiSelect
          value={model[field][row.index].Enterprise}
          api={fetchGetAllChannelList}
          labelFeild="channelName"
          valueFeild="id"
          getOptions={handleGetOptions}
          onUpdate:value={vlaue => {
            model[field][row.index].Enterprise = vlaue;
          }}
        ></ApiSelect>
      </div>
      <div class={'ml-3 w-200px'}>
        <NInputNumber
          value={model[field][row.index].Cost}
          min={1}
          onUpdate:value={value => {
            model[field][row.index].Cost = value;
          }}
        ></NInputNumber>
      </div>
      <div class={'ml-3 w-200px'}>
        <NInputNumber
          value={model[field][row.index].Cost}
          min={1}
          onUpdate:value={value => {
            model[field][row.index].Cost = value;
          }}
          v-slots={{ prefix: () => '每', suffix: () => 'Kg' }}
        ></NInputNumber>
      </div>
    </div>
  );
}
function close() {
  tabStore.removeTab(tabStore.activeTabId);
}

function handleAdd() {
  return {
    Enterprise: null,
    Cost: 1
  };
}
function handleGetOptions(options: Api.goods.Channel[]) {
  ChannelOptions.value = options;
}
async function save() {
  await validate();
  const form = getFieldsValue();
  console.log(form);
}
</script>

<template>
  <LayoutTable>
    <NCard title="配送费&运费配置" :bordered="false" size="small" segmented class="card-wrapper">
      <NScrollbar x-scrollable>
        <BasicForm @register-form="registerForm"></BasicForm>
      </NScrollbar>
      <template #footer>
        <NSpace justify="end">
          <NButton size="small" @click="close">关闭</NButton>
          <NButton type="primary" size="small" @click="save">保存</NButton>
        </NSpace>
      </template>
    </NCard>
  </LayoutTable>
</template>

<style scoped></style>
