<template>
  <div class="form-item-text">
    <template v-if="String(form[item.prop])">
      <span v-if="item.prepend">{{ item.prepend }}</span>
      <span>
        <span
          v-if="item.prop == 'risk_rank'"
          :style="{
            color:
              form[item.prop] == 'medium'
                ? '#FF9F33'
                : form[item.prop] == 'low'
                ? 'green'
                : form[item.prop] == 'high'
                ? 'red'
                : '',
          }"
        >
          {{ riskRank[form[item.prop]] }}
        </span>
        <span
          v-else-if="item.prop == 'screening_advise'"
          style="color: #4e68ff"
        >
          {{ screeningAdvise[form[item.prop]] }}
        </span>
        <span v-else-if="item.prop == 'union_id'">
          {{ unionName }}
        </span>
        <span v-else style="margin: 0 5px">{{
          form[item.prop] | getItemText(item.dicData, item.type)
        }}</span>
      </span>
      <span v-if="item.append && !item.toothBit" class="append">{{
        item.append
      }}</span>
    </template>
    <template v-else> -- </template>
  </div>
</template>

<script>
import { formatDicList } from "@/utils/index"
export default {
  name: "FormItemText",
  props: {
    item: Object,
    form: Object | Array,
    unionList: Array,
  },
  data() {
    return {
      riskRank: {
        low: "低危",
        medium: "中危",
        high: "高危",
      },
      unionName: "",
      screeningAdvise: {
        1: "可定期随访",
        2: "推荐胶囊内镜或胃镜检查",
        3: "强烈推荐胶囊内镜或胃镜检查",
      },
    }
  },
  filters: {
    getItemText(val, list, type) {
      if (!val) return ""
      if (["radio", "select", "checkbox", "cascader"].includes(type)) {
        return formatDicList(list, val, type === "cascader" ? "/" : ",")
      }
      if (Array.isArray(val) && type.includes("range")) {
        return val.join("-")
      }
      return val
    },
  },
  watch: {
    unionList(v) {
      if (v.length > 0 && this.form[this.item.prop]) {
        // console.log("获取到了医联体列表", this.form[this.item.prop])
        this.unionName = v.filter(
          (e) => e.id == this.form[this.item.prop]
        )[0].unionName
      }
    },
  },
}
</script>
<style scoped>
.append {
  background-color: #f5f7fa;
  padding: 2px 5px;
  color: #909399;
}
.form-item-text {
  word-break: break-all;
  line-height: 1.2;
}
</style>