<template>
  <q-card class="q-pa-md">
    <div v-if="kr.IsEasyMode == 1">
      <div class="text-subtitle2 text-weight-bold">当前进度</div>
      <q-input
        dense
        autofocus
        v-model="kr.progressTemp"
        @keyup="validateInput2"
      >
        <template v-slot:append>
          <inline-svg
            class="svg-icon svg-icon-primary"
            src="icons/svg/Shopping/Sale1.svg"
          ></inline-svg>
        </template>
      </q-input>
    </div>
    <div
      v-if="kr.IsEasyMode == 2"
      class="flex row items-center"
      style="width:240px;"
    >
      <div class="col">
        <q-tooltip content-class="bg-dark" v-if="kr.RuleId>0">已使用系统模板，无法手动更新进度，如需更新请删除关联模板</q-tooltip>
        <div class="text-subtitle2 text-weight-bold">起始值</div>
        <q-input
          dense
          style="height:30px"
          v-model="kr.StartValue"
          @keyup="validateInput('StartValue')"
          :disable="kr.RuleId>0"
        >
        </q-input>
      </div>
      <div class="col q-mx-md">
        <div class="text-subtitle2 text-weight-bold">当前值</div>
        <q-input
          dense
          style="height:30px"
          v-model="kr.CurrentValue"
          @keyup="validateInput('CurrentValue')"
          :disable="kr.RuleId>0"
        >
        </q-input>
      </div>
      <div class="col">
        <div class="text-subtitle2 text-weight-bold">目标值</div>
        <q-input
          dense
          style="height:30px"
          v-model="kr.EndValue"
          @keyup="validateInput('EndValue')"
          :disable="kr.RuleId>0"
        >
        </q-input>
      </div>
    </div>
    <div class="q-mt-lg text-subtitle2 text-weight-bold">状态</div>
    <div>
      <q-radio
        keep-color
        v-model="kr.ProgressState"
        size="xs"
        val="1"
        label="正常"
        color="primary"
      />
    </div>
    <div>
      <q-radio
        keep-color
        v-model="kr.ProgressState"
        size="xs"
        val="2"
        label="有风险"
        color="warning"
      />
    </div>
    <div>
      <q-radio
        keep-color
        v-model="kr.ProgressState"
        size="xs"
        val="3"
        label="已延期"
        color="negative"
      />
    </div>
    <div
      class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
      v-if="kr.IsEasyMode == 1"
      @click="changeMode(2)"
    >
      切换为高级模式
    </div>
    <div
      class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
      v-if="kr.IsEasyMode == 2"
      @click="changeMode(1)"
    >
      切换为简单模式
    </div>
  </q-card>
</template>

<script>
export default {
  props: ["kr"],
  data() {
    return {
      processStatus: "0",
      modeType: 0
    };
  },
  mounted() {
    this.kr.ProgressState = this.kr.ProgressState.toString();
    this.kr.progressTemp = this.kr.Progress;
  },
  methods: {
    changeMode(t) {
      this.kr.IsEasyMode = t;
    },
    validateInput(key) {
      let obj = this.kr[key];
      if (obj.length == 1) {
        obj = obj.replace(/[^1-9]/g, "");
      } else if (obj && obj != "") {
        obj = obj.replace(/\D/g, "");
      }
      this.kr[key] = !obj || obj == "" ? "0" : obj;
      this.calcProcess();
    },
    validateInput2() {
      let obj = this.kr.progressTemp;
      if (obj.length == 1) {
        obj = obj.replace(/[^1-9]/g, "");
      } else if (obj && obj != "") {
        obj = obj.replace(/\D/g, "");
      }
      obj = !obj || obj == "" ? "0" : obj;
      obj = obj > 100 ? 100 : obj;
      this.kr.progressTemp = Number.parseInt(obj);
      this.kr.Progress = this.kr.progressTemp;
    },
    calcProcess() {
      let crt = this.kr.CurrentValue - this.kr.StartValue;
      if (crt > 0) {
        this.kr.Progress = ((crt * 100) / (this.kr.EndValue-this.kr.StartValue)).toFixed(2);
      } else {
        this.kr.Progress = 0;
      }
    }
  }
};
</script>

<style></style>
