<template>
  <div class="form-item-text">
    <template v-if="form[item.prop]">
      <span v-if="item.prepend">{{ item.prepend }}</span>
      <span style="margin: 0 5px">{{
        form[item.prop] | getItemText(item.dicData, item.type)
      }}</span>
      <span v-if="item.append && !item.toothBit" class="append">{{
        item.append
      }}</span>
    </template>
  </div>
</template>

<script>
import { formatDicList } from "@/utils/index"
export default {
  name: "FormItemText",
  props: {
    item: Object,
    form: Object | Array,
  },
  data() {
    return {}
  },
  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
    },
  },
}
</script>
<style scoped>
.append {
  background-color: #f5f7fa;
  padding: 2px 5px;
  color: #909399;
}
.form-item-text {
  word-break: break-all;
  line-height: 1.2;
}
</style>