<template>
  <view class="comp_form_input_progress">
    <view class="progress_contrainer">
      <view class="progress_title">{{ numerator+'/'+denominator }}</view>
      <view class="progress_content" >
        <view class="work" :style="`width:${progressWidth}`"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { translate } from '@/common/utils/language/index'
import { getCarryData, clearCarryData } from '../js/index'

const props = <any>defineProps({
  KEY: { type: String, required: true, }, // 组件字段
  data: { type: String, default: '', }, // 组件数据 v-modal
  controls: { type: Object, default: () => {}, }, // 组件配置
})
const Value:any = computed({ //v-modal:data
  get: () => props.data[props.KEY], 
  set: v => emit('update:data', v)
})
const emit = defineEmits(['update:data','change:data','focus','blur', 'clear'])


const numerator = ref(3)
const denominator = ref(4)

const change = (e:any) => {
  emit('change:data', e.detail.value)
}
const getPlaceholder = () => {
  let text:any = translate('please input')
  if(props.controls[props.KEY].placeholder){
    text = props.controls[props.KEY].placeholder
  }
  if(props.controls[props.KEY].disabled){
    text = ''
  }
  return text
}
onBeforeMount(async() => {
})
onMounted(()=>{
})
onUnmounted(() => {
})

watch(
  ()=>Value.value,
  ()=>{
    if(Value.value && Value.value.indexOf('/')>=1){
      let arr = Value.value.split('/')
      numerator.value = arr[0]
      denominator.value = arr[1]
    }else{
      numerator.value = 0
      denominator.value = 1
    }
  },
  { 
    immediate: true,
  }
) 

const progressWidth = computed(()=>{
  return numerator.value/denominator.value*100+'%'
})


</script>

<style lang="scss">
.comp_form_input_progress{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  >.progress_contrainer{
    width: 60%;
    position: relative;
    .progress_title{
      position: absolute;
      right: 100%;
    }
    .progress_content{
      width: 100%;
      height: 40rpx;
      background: #eee;
      border-radius: 30rpx;
      border: 2rpx solid #ddd;
      margin: 18rpx 10rpx;
      padding: 4rpx;
      box-sizing: border-box;
      >.work{
        background: $primary-color;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
