<template>
  <q-card class="q-pa-md">
    <div class="text-subtitle2 text-weight-bold flex row">
        <span class="q-mr-md">当前进度：{{obj.Progress}}%</span>
        <span style="padding-top:2px;">
            <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/Code/Warning-1-circle.svg"
                width="16px"
                height="16px"
            ></inline-svg>
            <q-tooltip content-class="bg-black text-white">
              根据 Key Result 的进度和权重计算得出
            </q-tooltip>
        </span>
    </div>
    <q-separator class="q-my-md"></q-separator>
    <div class="text-subtitle2 text-weight-bold q-mb-md">默认状态</div>
    <div class="q-mb-md">
      <q-radio
        keep-color
        v-model="status"
        size="xs"
        val="0"
        label="风险最高的 Key Result 状态"
        color="black"
      />
    </div>
    <div class="text-subtitle2 text-weight-bold q-mb-md">自定义状态</div>
    <div>
      <q-radio
        keep-color
        v-model="status"
        size="xs"
        val="1"
        label="正常"
        color="primary"
      />
    </div>
    <div>
      <q-radio
        keep-color
        v-model="status"
        size="xs"
        val="2"
        label="有风险"
        color="warning"
      />
    </div>
    <div>
      <q-radio
        keep-color
        v-model="status"
        size="xs"
        val="3"
        label="已延期"
        color="negative"
      />
    </div>
  </q-card>
</template>

<script>
export default {
    props:["obj"],
    data() {
        return {
            status:0
        }
    },
    mounted() {
        if(this.obj.IsDefaultState==1){
            this.status='0'
        }else{
            this.status=this.obj.ProgressState.toString()
        }
    },
    beforeDestroy() {
        this.$emit("close",this.status)
    },
}
</script>

<style>

</style>