<template>
  <div class="dental-tab">
    <div class="header">
      <el-form>
        <span style="margin-right: 10px" v-if="item.label">{{
          item.label || ""
        }}</span>
      </el-form>
    </div>
    <div class="dental-tab-content" v-if="list.length > 0">
      <el-form ref="form" :model="formUp" :disabled="dentalDisabled">
        <div
          class="flex dental-box"
          v-for="(row, rowIndex) in list"
          :key="rowIndex"
        >
          <div :class="row.twoCell ? 'dental-title2' : 'dental-title1'">
            <span>{{ row.title }}</span>
          </div>
          <div
            v-for="(t, index) in 16"
            class="flex"
            :key="index"
            :style="{
              marginLeft: index === 8 ? '20px' : '',
              width: '60px',
              flexWrap: 'wrap',
            }"
          >
            <div
              :style="{ width: row.width || '60px' }"
              v-for="(cell, cellIndex) in row.cellNo || 1"
              :class="(cellIndex + 1) % 3 === 0 ? 'pieces' : ''"
              :key="cellIndex"
            >
              <form-item-self
                :form="formUp"
                :item="{ ...row.item, prop: index + row.item.prop + cellIndex }"
                style="margin: 0"
                hidden-label
              ></form-item-self>
            </div>
          </div>
        </div>
      </el-form>
      <div class="line flex dental-box">
        <div class="dental-title1"></div>
        <div
          v-for="(t, index) in 8"
          :key="index"
          :style="{
            width: '60px',
            textAlign: 'center',
            lineHeight: '32px',
          }"
        >
          {{ 8 - index }}
        </div>
        <div style="margin-left: 20px" class="flex">
          <div
            v-for="(t, index) in 8"
            :key="index"
            :style="{
              width: '60px',
              textAlign: 'center',
              lineHeight: '32px',
            }"
          >
            {{ index + 1 }}
          </div>
        </div>
      </div>
      <el-form ref="form" :model="formDown" :disabled="dentalDisabled">
        <div
          class="flex dental-box"
          v-for="(row, rowIndex) in deepClone(list).reverse()"
          :key="rowIndex"
        >
          <div :class="row.twoCell ? 'dental-title2' : 'dental-title1'">
            <span>{{ row.title }}</span>
          </div>
          <div
            v-for="(t, index) in 16"
            class="flex"
            :key="index"
            :style="{
              marginLeft: index === 8 ? '20px' : '',
              width: '60px',
              flexWrap: 'wrap',
            }"
          >
            <div
              :style="{ width: row.width || '60px' }"
              v-for="(cell, cellIndex) in row.cellNo || 1"
              :class="(cellIndex + 1) % 3 === 0 ? 'pieces' : ''"
              :key="cellIndex"
            >
              <form-item-self
                :form="formDown"
                :item="{ ...row.item, prop: index + row.item.prop + cellIndex }"
                style="margin: 0"
                hidden-label
              ></form-item-self>
            </div>
          </div>
        </div>
      </el-form>
      <div style="margin-top: 20px; font-size: 16px">
        <strong>菌斑阳性占比：</strong>
        <span> {{ pliPositiveProportion }}</span>
        <strong style="margin-left: 30px">BOP阳性占比：</strong>
        <span> {{ bopPositiveProportion }}</span>
      </div>
      <vw-tooth-bit v-model="toothBit"></vw-tooth-bit>
    </div>
  </div>
</template>
<script>
/**
 * @description 同济牙周病大表格
 */

import FormItemSelf from "./FormItemSelf.vue"
import VwToothBit from "./VwToothBit"
import { isObject } from "@/utils/validate"
const field = ["formDown", "formUp", "toothBit"]
export default {
  components: { FormItemSelf, VwToothBit },
  inject: {
    vwForm: {
      default: "",
    },
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
  },
  data() {
    return {
      show: true,
      formDown: {},
      formUp: {},
      toothBit: {},
      list: [
        {
          title: "FI",
          twoCell: true,
          cellNo: 2,
          item: {
            type: "input",
            notClearable: true,
            prop: "FI",
          },
        },
        {
          title: "角化龈宽",
          item: {
            type: "input",
            notClearable: true,
            prop: "GWA",
          },
        },
        {
          title: "溢脓",
          double: false,
          item: {
            type: "input",
            notClearable: true,
            prop: "TOP",
          },
        },
        {
          title: "动度",
          double: false,
          item: {
            type: "input",
            notClearable: true,
            prop: "mobility",
          },
        },
        {
          title: "菌斑",
          cellNo: 6,
          width: "20px",
          twoCell: true,
          item: {
            type: "switch-bgc",
            prop: "PLI",
          },
        },
        {
          title: "龈缘-CEJ",
          twoCell: true,
          cellNo: 2,
          item: {
            type: "input",
            notClearable: true,
            prop: "CEJ",
          },
        },
        {
          title: "探诊出血BOP",
          twoCell: true,
          cellNo: 6,
          width: "20px",
          item: {
            type: "switch-bgc",
            prop: "BOP",
          },
        },
        {
          title: "PD-B",
          width: "20px",
          cellNo: 3,
          item: {
            type: "number",
            prop: "B",
          },
        },
        {
          title: "PD-L",
          cellNo: 3,
          width: "20px",
          item: {
            type: "number",
            prop: "L",
          },
        },
      ],
      nativeValue: null,
    }
  },
  computed: {
    // 菌斑阳性占比
    pliPositiveProportion() {
      return this.getItemProportion("PLI")
    },
    // BOP阳性占比
    bopPositiveProportion() {
      return this.getItemProportion("BOP")
    },
    dentalDisabled() {
      return this.disabled || (this.vwForm || {}).disabled
    },
  },
  methods: {
    getItemProportion(prop) {
      let count = 0
      const formDown = this.formDown
      const formUp = this.formUp
      for (let key in formDown) {
        if (key.includes(prop)) {
          count += formDown[key]
        }
      }
      for (let key in formUp) {
        if (key.includes(prop)) {
          count += formUp[key]
        }
      }
      let value = Math.round((count / 192) * 10000) / 100
      return value === 0 ? "" : value + "%"
    },

    resetDentalForm() {
      // this.formDown = {}
      // this.formUp = {}
      // this.$set(this.value, "formDown", this.formDown)
      // this.$set(this.value, "formUp", this.formUp)
    },
    setValue() {
      // 清空数据逻辑
      if (!isObject(this.value) || this.nativeValue === this.value) {
        this.$emit("input", {})
        return
      }
      field.forEach((k) => {
        if (!this.value.hasOwnProperty(k)) {
          this[k] = {}
          this.value[k] = this[k]
        } else {
          this[k] = this.value[k]
        }
      })
      for (let key in this.value) {
        if (!field.find((_) => _ === key)) {
          delete this.$delete(this.value, key)
        }
      }
    },
    init() {
      const value = {
        formDown: this.formDown,
        formUp: this.formUp,
        toothBit: this.toothBit,
      }
      this.$emit("input", value)
      this.$nextTick(() => {
        this.$watch("value", () => {
          this.setValue()
        })
      })
    },
  },
  created() {
    this.nativeValue = this.value // 记录初始值
  },
  mounted() {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.dental-tab {
  overflow: auto;
  background-color: #fff;
  .header {
    font-size: 16px;
  }
  .dental-tab-content {
    width: 1080px;
    margin: 15px auto;
    ::v-deep .el-form-item {
      padding: 0 !important;
    }
  }
  .dental-box {
    .dental-title1,
    .dental-title2 {
      width: 100px;
      height: 33px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #ebeef5;
      border-right-color: transparent;
      // &:first-child {
      //   border-color: #ebeef5;
      // }
    }
    .pieces ::v-deep{
       .vw-switch-bgc, .el-input .el-input__inner {
        border-right-color: rgb(117, 114, 114);
      }
    }
    .dental-title2 {
      line-height: 66px;
      height: 66px;
    }
  }
}
::v-deep {
  .el-input__inner {
    border-radius: 0;
    // border-left-color: transparent;
    // border-right-color: transparent;
  }
}
</style>