<template>
  <el-dialog
    center
    :title="title"
    :visible.sync="visible"
    :width="width"
    @close="close"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeModal"
  >
    <div class="main">
      <div class="bit_item">
        <el-checkbox-group v-model="checkData[0]">
          <el-checkbox
            :label="label"
            v-for="(label, idx) in checkList[0]"
            :key="idx"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="bit_item">
        <el-checkbox-group v-model="checkData[1]">
          <el-checkbox
            :label="label"
            v-for="(label, idx) in checkList[1]"
            :key="idx"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="bit_item">
        <el-checkbox-group v-model="checkData[3]">
          <el-checkbox
            :label="label"
            v-for="(label, idx) in checkList[3]"
            :key="idx"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="bit_item">
        <el-checkbox-group v-model="checkData[2]">
          <el-checkbox
            :label="label"
            v-for="(label, idx) in checkList[2]"
            :key="idx"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div slot="footer">
      <el-button size="mini" v-if="btnCancel" @click="visible = false"
        >取消</el-button
      >
      <el-button
        size="mini"
        type="primary"
        :loading="loading"
        @click="handleConfirm"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
// 牙位选择组件
export default {
  name: "DialogToothBit",
  data() {
    return {
      loading: false,
      visible: false,
      checkList: [
        ["18", "17", "16", "15", "14", "13", "12", "11"],
        ["21", "22", "23", "24", "25", "26", "27", "28"],
        ["31", "32", "33", "34", "35", "36", "37", "38"],
        ["48", "47", "46", "45", "44", "43", "42", "41"],
      ],
      checkData: [[], [], [], []],
      defaultProps: {
        children: "children",
        label: "name",
      },
    }
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: false,
    },
    closeModal: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "系统提示",
    },
    width: {
      type: String,
      default: "960px",
    },

    btnCancel: {
      type: Boolean,
      default: true,
    },
    value: {},
  },
  methods: {
    open() {
      this.visible = true
    },

    close() {
      this.loading = false
      this.visible = false
    },

    handleConfirm() {
      const val = this.checkData
        .flat()
        .sort((a, b) => {
          return a - b
        })
        .join(",")
      this.$emit("input", val)
      this.visible = false
    },

    init() {
      const val = this.value || ""
      const data = [[], [], [], []]
      val.split(",").forEach((item) => {
        this.checkList.forEach((c, index) => {
          if (
            c.find((_) => _ === item) &&
            !data[index].find((_) => _ === item)
          ) {
            data[index].push(item)
          }
        })
      })
      this.checkData = data
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.init()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  .bit_item {
    width: 50%;
    min-height: 30px;
    padding: 5px;
    .el-checkbox-group {
      ::v-deep .el-checkbox {
        margin-right: 15px !important;
      }
    }
    &:first-child {
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    &:nth-child(2) {
      border-bottom: 1px solid #000;
    }
    &:nth-child(3) {
      border-right: 1px solid #000;
    }
  }
}
</style>