<script setup lang="ts">
import {  useVModel } from "@vueuse/core"
import { useTask } from "/@/hooks/core"
import { httpChannelCategoryUpdate } from "/@/api/serviceParam/paymentChannelGrossProfit";

const props = defineProps<{ data: any, visible: boolean }>()
const emit = defineEmits(['refresh'])


const data = useVModel(props, 'data')
const visible = useVModel(props, 'visible')

const updateCategoryTask = useTask({
  success:() => {
    visible.value = false
    emit('refresh')
  }
})

function handleUpdate(){
  const parameters = {
    cat_name: data.value.cat_name,
    cat_id: data.value.cat_id,
    channel_id: data.value.channel_id,
    channel_name: data.value.channel_name,
    rate: data.value.rate,
  }

  updateCategoryTask.run(httpChannelCategoryUpdate(parameters))
}
</script>

<template>
  <ElDialog title="设置支付渠道" v-model="visible" center>
    <ElForm v-loading="updateCategoryTask.loading" label-width="120px">
      <ElFormItem label="支付渠道">
        <ElInput v-model="data.channel_name" disabled />
      </ElFormItem>

      <ElFormItem label="一级分类">
        <ElInput v-model="data.cat_name" disabled />
      </ElFormItem>

      <ElFormItem label="支付渠道毛利率">
        <div class="flex items-center">
          <ElInputNumber class="mr-[10px]" v-model="data.rate" controls-position="right" precision="2" :min="0" :max="100" />
          %
        </div>
      </ElFormItem>

      <div class="flex justify-end">
        <ElButton type="primary" @click="handleUpdate">保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
