<script setup lang="ts">
import { httpPlatformUpdate } from "/@/api/serviceParam/grossProfit";
import { computed, ref, shallowRef } from "vue";
import { useVModel } from "@vueuse/core"
import { ElMessage, ElForm } from "element-plus";
import { rules } from "./../_options"

import { useCompany } from "/@/hooks/core/useCompany";
const { currentCompany } = useCompany()

const initialData = { pid: '', name: '', id: '', companyNo: '' }
const emit = defineEmits(['refresh'])


const props = withDefaults(
  defineProps<{ data: any; pid: string; visible: boolean, breadcrumb: any[], platform_id: string }>(),
  { data: {} }
)

const data = useVModel(props, 'data')
const visible = useVModel(props, 'visible')
const title = computed(() => data.value.id ? '编辑业务公司分类毛利' : '添加业务公司分类毛利')
const prefix = computed(() => { const { breadcrumb = [] } = props; return breadcrumb.slice(0).map(({ name }) => name).join('/') })

const loading = shallowRef(false)
const formRef = ref<any | null>(null)

function handleClose() {
  data.value = { ...initialData }
  visible.value = false
}

async function onSubmit() {
  try {
    await formRef.value.validate();
    loading.value = true

    const res = await httpPlatformUpdate({
      money_rate: 0,
      ...data.value,
      cat_id: data.value.id,
      platform_id: props.platform_id,
      companyNo: currentCompany.value.companyNo
    })

    loading.value = false
    if (res.code === 0) {
      visible.value = false
      ElMessage.success(`更新成功`)
      emit('refresh')
    } else {
      ElMessage.warning(`更新失败`)
    }
  } catch (err) {
    console.log(err);
  }
}
</script>


<template>
  <ElDialog v-model="visible" :title="title" center @close="handleClose">
    <ElForm :model="data" :rules="rules" size="small" ref="formRef" label-width="100px">
      <ElFormItem label="分类名称" prop="cat_name">
        <ElInput v-model="data.cat_name" placeholder="分类名称" :disabled="data.id" />
      </ElFormItem>

      <ElFormItem label="预算→成本" prop="order_rate">
        <div class="flex w-full">
          <ElInputNumber placeholder="预算→成本" style="width:100%" :min="0" :max="100" controls-position="right"
            v-model="data.order_rate" disbaled precision="2" />
          <p class="ml-[10px]">%</p>
        </div>
      </ElFormItem>

      <ElFormItem label="成本→售价" prop="sale_rate">
        <div class="flex w-full">
          <ElInputNumber placeholder="成本→售价" style="width:100%" :min="0" :max="100" controls-position="right"
            v-model="data.sale_rate" disbaled precision="2" />
          <p class="ml-[10px]">%</p>
        </div>
      </ElFormItem>

      <ElFormItem label="主管利率" prop="rate">
        <div class="flex w-full">
          <ElInputNumber placeholder="主管利率" style="width:100%" :min="0" :max="100" controls-position="right"
            v-model="data.rate" disbaled precision="2" />
          <p class="ml-[10px]">%</p>
        </div>
      </ElFormItem>

      <ElFormItem label="项目最低毛利" prop="low_rate">
        <div class="flex w-full">
          <ElInputNumber placeholder="项目最低毛利" style="width:100%" :min="0" :max="100" controls-position="right"
            v-model="data.low_rate" disbaled precision="2" />
          <p class="ml-[10px]">%</p>
        </div>
      </ElFormItem>

      <div class="w-full flex justify-end">
        <ElButton type="primary" :loading="loading" @click="onSubmit">保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
