<script setup lang="ts">
import { watch, ref } from "vue"
import { httpRateEdit } from "/@/api/sellOut/project";
import { ElMessage } from "element-plus"

const props = defineProps<{ rate: number, id: string }>()
const emit = defineEmits(['refresh'])
const loading = ref(false)
const rate = ref(0)

watch(() => props.rate, () => {
  console.log()
  rate.value = Number(props.rate || 0)
}, {
  immediate: true
})

async function submit(){
  loading.value = true
  const { code } = await httpRateEdit({ projectNo: props.id, rate: rate.value })
  loading.value = false

  const isOk = Number(code) === 0
  ElMessage[isOk ? 'success' : 'danger'](`项目毛利率修改${isOk ? '成功' : '失败'}`)
}
</script>

<template>
  <div class="flex items-center justify-between" v-loading="loading">
    <div class="flex">
      <p class="mr-[5px]">
        <span class="text-red">*</span>
        项目毛利率:
      </p>

      <div class="flex">
        <ElInputNumber 
          :min="0" 
          :max="100" 
          v-model="rate"
          :precision="2"
          controls-position="right"
          class="mr-[5px]" 
          size="small"  
        /> 
        %
      </div>
    </div>

    <ElButton class="ml-[10px]" size="small" type="primary" @click="submit">保存</ElButton>
  </div>
</template>
