<template>
  <div>
    <template>
      <div class="student-select-group" :class="groupClass">
        <div ref="elSelectBox" class="student-select-box" :class="sizeClass">
          <div class="student-select-box-content">
            <!--无选项 -->
            <div
              class="student-select-box-content-placeholder"
              v-if="selectValue.length == 0"
            >{{ placeholder }}</div>
            <!-- 有选项 -->
            <template v-if="selectValue.length > 0">
              <!-- 多选 -->
              <div class="student-select-box-content-tags">
                <el-tag
                  v-for="tag in selectValue"
                  :key="`${tag.Type}_${tag.Id}`"
                  type="info"
                  :size="size"
                  :closable="!disabled"
                  @close="handleClose(tag)"
                >
                  <i v-if="tag.Type == 'student'" class="el-icon-student"></i>
                  <i v-if="tag.Type == 'org'" class="el-icon-folder"></i>
                  <i v-if="tag.Type == 'role'" class="el-icon-s-custom"></i>
                  {{ tag.Label }}
                </el-tag>
              </div>
            </template>
          </div>
          <span class="student-select-box-suffix" @click="openDialog">
            <span class="student-select-box-suffix-inner">
              <i class="student-select-caret el-input__icon el-icon-more"></i>
            </span>
          </span>
        </div>
      </div>
    </template>
    <select-dialog
      v-model="selectValue"
      :visible.sync="dialogVisible"
      :multiple="multiple"
      :mixed="mixed"
      :tabs="tabs"
      :academicYearData="academicYearData"
      :classData="classData"
      :studentData="studentData"
      :tags="tags"
      :tagDict="tagDict"
    />
  </div>
</template>

<script>
import SelectDialog from "./selectdialog.vue";
import Request from "../../../lib/utils/request";

export default {
  name: "CsStudent",
  components: {
    SelectDialog,
  },
  props: {
    value: { required: true },
    tenantId: { default: 0 },
    multiple: Boolean, //是否多选
    disabled: Boolean, //是否禁用
    mixed: Boolean, //混合选择
    placeholder: {
      type: String,
      default: function () {
        return this.$t("Student.index.520pn4ayzcs0");
      },
    },
    size: { type: String, default: "" }, //medium / small / mini
    academicYearData: {
      default: function () {
        return [];
      },
    },
    classData: {
      default: function () {
        return [];
      },
    },
    studentData: {
      default: function () {
        return [];
      },
    },
    rootNode: { default: null },
    excludedStudnetIds: null,
    tabs: {
      default: () => {
        return ["inschool", "potential", "prepare", "alumnus"];
      },
    },
  },
  data() {
    return {
      selectValue: [],
      dialogVisible: false,
      tags: null,
      tagDict: null,
    };
  },
  computed: {
    sizeClass() {
      if (this.size == "medium") {
        return "student-select-medium";
      }
      if (this.size == "small") {
        return "student-select-small";
      }
      if (this.size == "mini") {
        return "student-select-mini";
      }
      return "";
    },
    groupClass() {
      if (this.disabled) {
        return "group-disabled";
      } else {
        return "";
      }
    },
  },
  methods: {
    deepClone(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
      return objClone;
    },
    handleClose(tag) {
      let index = this.selectValue.findIndex((select) => {
        return select.Id == tag.Id && select.Type == tag.Type;
      });
      this.selectValue.splice(index, 1);
      this.setValue();
    },
    openDialog() {
      if (!this.disabled) {
        this.dialogVisible = true;
      }
    },
    refreshYearData() {
      this.academicYearData.splice(0, this.academicYearData.length);
      Request({
        url: "/api/componentsdata/academicyeardata",
        method: "get",
      }).then((res) => {
        this.academicYearData.push(...res);
      });
    },
    refreshClassData() {
      this.classData.splice(0, this.classData.length);
      Request({
        url: "/api/componentsdata/classdata",
        method: "get",
      }).then((res) => {
        this.classData.push(...res);
      });
    },
    refreshStudentData() {
      this.studentData.splice(0, this.studentData.length);
      Request({
        url: "/api/componentsdata/studentdata",
        method: "get",
      }).then((res) => {
        this.studentData.push(...res);
      });
    },
    getTags() {
      if (this.tenantId > 0) {
        Request({
          url: "/api/Tag/{0}/GetTags?objectTypeName=students".format(
            this.tenantId
          ),
          method: "get",
        }).then((res) => {
          this.tags = res;
        });

        Request({
          url: "/api/Tag/{0}/GetRefObjectDict?objectTypeName=students".format(
            this.tenantId
          ),
          method: "get",
        }).then((res) => {
          this.tagDict = res;
        });
      }
    },
    setValue() {
      if (this.multiple) {
        this.$emit("input", this.selectValue);
      } else {
        if (this.selectValue.length > 0) {
          this.$emit("input", this.selectValue[0]);
        } else {
          this.$emit("input", null);
        }
      }
    },
  },
  created() {
    if (!this.academicYearData || this.academicYearData.length == 0) {
      this.refreshYearData();
    }
    if (!this.classData || this.classData.length == 0) {
      this.refreshClassData();
    }
    if (!this.studentData || this.studentData.length == 0) {
      this.refreshStudentData();
    }
    if (this.tenantId > 0) {
      this.getTags();
    }
  },
  mounted() {},
  watch: {
    value: {
      handler(val) {
        if (val) {
          if (this.multiple) {
            this.selectValue = this.deepClone(val);
          } else {
            this.selectValue = [this.deepClone(val)];
          }
        } else {
          this.selectValue = [];
        }
      },
      immediate: true,
      deep: true,
    },
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.setValue();
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.student-select-group {
  position: relative;

  .student-select-box {
    // display: -webkit-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      border-color: #c0c4cc;
    }
    .student-select-box-content {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      // height: 40px;
      min-height: 38px;
      line-height: 38px;
      outline: none;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
      padding-right: 50px;

      .student-select-box-content-placeholder {
        padding-left: 15px;
        color: #c0c4cc;
        font-size: 14px;
      }
      .student-select-box-content-text {
        padding-left: 15px;
        color: #606266;
        font-size: 14px;
      }
      .student-select-box-content-tags {
        padding: 0px 0 2px 5px;
        // padding-left: 5px;
        line-height: 36px;
        .el-tag {
          margin-right: 5px;
        }
      }
    }

    .student-select-box-suffix {
      position: absolute;
      height: 100%;
      width: 50px;
      right: 0px;
      top: 0;
      text-align: center;
      color: #c0c4cc;
      transition: all 0.3s;
      pointer-events: none;
      border-left: 1px solid #dcdfe6;
      cursor: pointer;

      .student-select-box-suffix-inner {
        pointer-events: all;

        .student-select-caret {
          color: #c0c4cc;
          font-size: 14px;
          transition: transform 0.3s;
          transform: rotate(180deg);
        }
      }
    }
  }

  .student-select-medium {
    .student-select-box-content {
      min-height: 34px;
      line-height: 34px;
      .student-select-box-content-tags {
        padding: 0px 0 2px 3px;
        // padding-left: 5px;
        line-height: 32px;
        .el-tag {
          margin-right: 3px;
        }
      }
    }
    .student-select-box-suffix {
      .student-select-box-suffix-inner {
        .student-select-caret {
          line-height: 34px;
        }
      }
    }
  }

  .student-select-small {
    .student-select-box-content {
      min-height: 30px;
      line-height: 30px;
      .student-select-box-content-tags {
        padding: 0px 0 2px 3px;
        // padding-left: 5px;
        line-height: 28px;
        .el-tag {
          margin-right: 3px;
        }
      }
    }
    .student-select-box-suffix {
      .student-select-box-suffix-inner {
        .student-select-caret {
          line-height: 30px;
        }
      }
    }
  }

  .student-select-mini {
    .student-select-box-content {
      min-height: 26px;
      line-height: 26px;
      .student-select-box-content-tags {
        padding: 0px 0 2px 3px;
        // padding-left: 5px;
        line-height: 24px;
        .el-tag {
          margin-right: 4px;
        }
      }
    }
    .student-select-box-suffix {
      .student-select-box-suffix-inner {
        .student-select-caret {
          line-height: 26px;
        }
      }
    }
  }

  .el-select-buttom {
    float: right;
    border-left: 0px;
    border-radius: 0px 4px 4px 0px;
  }
}
.group-disabled {
  cursor: not-allowed;
  .student-select-box {
    &:hover {
      border-color: #dcdfe6;
    }
    .student-select-box-content {
      background-color: #f5f7fa;
    }

    .student-select-box-suffix {
      cursor: not-allowed;
    }
  }
}
</style>
