<template>
  <div class="radio">
    <t-radio-group
      v-model="valueData"
      allow-uncheck
      :disabled="!config.writable"
      style="min-height: 32px; width: 100%"
      @change="emitChange"
    >
      <t-radio v-for="item in options" :key="item.value" :value="item.value"
        >{{ item.label }}
        <span v-if="item.remark && item.remark?.length">
          <span>{{ '(' }}</span>
          <span
            v-for="(v, i) in item.remark"
            :key="i"
            :style="{ color: v.color }"
            >{{ (i > 0 ? '、' : '') + v.content }}</span
          >
          <span>{{ ')' }}</span>
        </span>
      </t-radio>
      <div
        v-if="needDefineBtnFormNames.includes(config?.formName)"
        class="define-btn flex items-center"
        @click="showDefine = !showDefine"
      >
        <span class="label">查看定义</span>
        <ChevronDownIcon color="#165dff" v-if="!showDefine" />
        <ChevronUpIcon color="#165dff" v-else />
      </div>
    </t-radio-group>
    <template v-if="showDefine">
      <div class="define-content" v-if="config?.formName === 'problem_type_2'">
        <p>1.修正类：未执行SOP或未按要求正确操作，需要修正的问题；</p>
        <p>2.优化类：SOP未定义或无明确要求和流程的，需要进行流程优化的问题；</p>
        <p>3.不是问题：不是质量问题。</p>
      </div>
      <div
        class="define-content"
        v-if="config?.formName === 'problem_reason_radio_2'"
      >
        <p
          >1.执行类：在项目关键信息明确的前提下，人员疏忽、失误、处理不当、项目风险预估不足、预估到风险却未及时采取合理措施，或未按流程严格执行到位等；</p
        >
        <p
          >2.管理协调类：项目管理未处理好内外项目关键信息沟通协调、计划延期完成等；</p
        >
        <p>3.产品缺陷类：产品设计缺陷、BUG，新应用场景需求等；</p>
        <p>4.产品运维类：例如服务器高并发崩溃、网络阻塞等；</p>
        <p>5.流程制度类：流程制度本身缺失、设计不合理导致的问题。</p>
      </div>
      <div
        class="define-content"
        v-if="config?.formName === 'problem_degree_radio_2'"
      >
        <p
          >1.A级：问题已然导致项目事故发生，造成不可挽回的严重后果，严重后果包括以下情况：</p
        >
        <p class="text-indent">1）严重影响项目结果数据； </p>
        <p class="text-indent">2）致使项目实施计划中断；</p>
        <p class="text-indent">3）项目赔偿或不回款；</p>
        <p class="text-indent">4）学校合作取消；</p>
        <p class="text-indent">5）客户领导或员工岗位变动、撤职；</p>
        <p class="text-indent">6）社会影响恶劣，公司信誉和形象受损。</p>
        <p
          >2.B级：问题已然出现，有客户反馈问题，其影响结果必然导致A级事故发生，但责任人接到问题反馈后，能及时成功解决问题、挽回影响，阻止事故发生；</p
        >
        <p
          >3.C级：问题已然出现，由公司内部除责任人外的第三方反馈问题，其影响结果必然导致A级事故发生，但责任人接到问题反括后，能及时解决问题、挽回影响，阻止事故发生；</p
        >
        <p>4.D级：项目结果数据无误，问题仅对客户体验有所影响。</p>
      </div>
    </template>
  </div>
</template>

<script setup name="RADIO">
import { ref, computed, watch } from 'vue';
import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
const needDefineBtnFormNames = ref([
  'problem_type_2',
  'problem_reason_radio_2',
  'problem_degree_radio_2',
]);
const props = defineProps({
  config: { type: Object },
  modelValue: { type: String },
});
const emit = defineEmits(['update:modelValue', 'change']);
const showDefine = ref(false);
const valueData = ref(null);
const options = computed(() => {
  const config = props.config || {};

  return !config.options
    ? []
    : typeof config.options === 'string'
    ? JSON.parse(config.options)
    : config.options;
});

const emitChange = () => {
  emit('update:modelValue', valueData.value);
  emit('change', valueData.value);
};

watch(
  () => props.modelValue,
  (val, oldval) => {
    if (val === oldval) return;
    valueData.value = val || null;
  },
  {
    immediate: true,
  }
);
</script>
<style lang="less" scoped>
.define-content {
  background: #f2f3f5;
  border-radius: 3px;
  padding: 10px;
  p {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 20px;
  }
}
.define-btn {
  border-radius: 3px;
  padding: 2px 6px 2px 8px;
  cursor: pointer;
  transition: 0.3s;
  &:hover {
    background: #e8f3ff;
  }
  .label {
    color: #165dff;
    margin-right: 4px;
    font-size: 12px;
  }
}
</style>
