<template>
  <el-row class="vw-tooth-bit">
    <div class="title">咬合关系：</div>
    <div class="vw-tooth-bit-content">
      <div class="flex flex-wrap">
        <vw-tooth-bit-item
          v-model="value[item.prop]"
          :label="item.label"
          v-for="(item, index) in occlusalList"
          :key="index"
        ></vw-tooth-bit-item>
      </div>
    </div>
    <div class="title">其它：</div>
    <div class="vw-tooth-bit-content">
      <div class="flex flex-wrap">
        <vw-tooth-bit-item
          v-model="value[item.prop]"
          :label="item.label"
          v-for="(item, index) in otherList"
          :key="index"
        ></vw-tooth-bit-item>
      </div>
    </div>
  </el-row>
</template>
<script>
import VwToothBitItem from "./VwToothBitItem.vue"
import { isObject } from "@/utils/validate"
export default {
  name: "VwToothBit",
  components: { VwToothBitItem },
  props: {
    disabled: Boolean,
    value: Object,
  },
  data() {
    return {
      occlusalList: [
        {
          label: "深覆𬌗",
          prop: "deepoverhe",
        },
        {
          label: "深覆盖",
          prop: "deepcover",
        },
        {
          label: "错𬌗拥挤",
          prop: "crowded",
        },
        {
          label: "对刃𬌗",
          prop: "blade",
        },
        {
          label: "反𬌗",
          prop: "thehe",
        },
        {
          label: "开𬌗",
          prop: "andhe",
        },
        {
          label: "食物嵌塞/无接触点",
          prop: "plug",
        },
      ],
      otherList: [
        {
          label: "龋",
          prop: "caries",
        },
        {
          label: "楔状缺损",
          prop: "defect",
        },
        {
          label: "充填体悬突",
          prop: "suspended",
        },
        {
          label: "不良修复体",
          prop: "badRepair",
        },
      ],
    }
  },
  watch: {
    value() {
      this.init()
    },
  },
  methods: {
    init() {
      if (!isObject(this.value)) this.$emit("input", {})
      this.occlusalList.forEach((item) => {
        this.$set(this.value, item.prop, this.value[item.prop] || {})
      })
      this.otherList.forEach((item) => {
        this.$set(this.value, item.prop, this.value[item.prop] || {})
      })
    },
  },
  created() {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.vw-tooth-bit {
  padding: 20px 0;
  .title {
    float: left;
    width: 90px;
    margin-top: 25px;
    font-size: 16px;
    text-align: right;
    font-weight: bold;
    line-height: 1;
  }
  .vw-tooth-bit-content {
    overflow: hidden;
  }
}
</style>