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

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

export default {
  name: "CsOrg",
  components: {
    SelectDialog
  },
  props: {
    value: { required: true },
    multiple: Boolean, //是否多选
    disabled: Boolean, //是否禁用
    placeholder: { type: String, default: "请选择" },
    size: { type: String, default: "" }, //medium / small / mini

    rootNode: { dafault: null },
    excludedUserIds: { default: null },
    showInvalid: Boolean //显示禁用用户
  },
  data() {
    return {
      selectValue: [],
      dialogVisible: false,
      orgData: []
    };
  },
  computed: {
    sizeClass() {
      if (this.size == "medium") {
        return "user-select-medium";
      }
      if (this.size == "small") {
        return "user-select-small";
      }
      if (this.size == "mini") {
        return "user-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;
      }
    },
    setValue() {
      if (this.multiple) {
        let ids = this.selectValue.map(x => x.Id);
        console.log(ids);
        this.$emit("input", ids);
      } else {
        if (this.selectValue.length > 0) {
          this.$emit("input", this.selectValue[0].Id);
        } else {
          this.$emit("input", 0);
        }
      }
    },
    refreshOrgData() {
      this.orgData.splice(0, this.orgData.length);
      Request({
        url: "/api/componentsdata/orgdata",
        method: "get"
      }).then(res => {
        this.orgData.push(...res);
      });
    }
  },
  created() {
    if (!this.orgData || this.orgData.length == 0) {
      this.refreshOrgData();
    }
  },
  mounted() {},
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.selectValue = [];
          if (this.multiple) {
            this.value.forEach(id => {
              if (id == 0) {
                if (this.rootNode) {
                  let rootNodeLabel = this.rootNode.label
                    ? this.rootNode.label
                    : this.rootNode.name;
                  this.selectValue.push({
                    Id: 0,
                    Label: rootNodeLabel,
                    Type: "org"
                  });
                }
              }
              let item = this.orgData.find(org => org.Id == id || org.id == id);
              if (item) {
                const orgId = item.id ? item.id : item.Id;
                const orgLabel = item.label ? item.label : item.Label;
                this.selectValue.push({
                  Id: orgId,
                  Label: orgLabel,
                  Type: "org"
                });
              }
            });
          } else {
            if (this.value == 0) {
              if (this.rootNode) {
                let rootNodeLabel = this.rootNode.label
                  ? this.rootNode.label
                  : this.rootNode.name;
                this.selectValue.push({
                  Id: 0,
                  Label: rootNodeLabel,
                  Type: "org"
                });
              }
            } else {
              let item = this.orgData.find(
                org => org.Id == this.value || org.id == this.value
              );
              if (item) {
                const orgId = item.id ? item.id : item.Id;
                const orgLabel = item.label ? item.label : item.Label;
                this.selectValue.push({
                  Id: orgId,
                  Label: orgLabel,
                  Type: "org"
                });
              }
            }
          }
        } else {
          this.selectValue = [];
        }
      },
      immediate: true,
      deep: true
    },
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.setValue();
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss">
.el-form-item.is-error {
  .user-select-group {
    .user-select-box {
      border-color: #f56c6c;
    }
  }
}
.user-select-group {
  position: relative;

  .user-select-box {
    // display: -webkit-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      border-color: #c0c4cc;
    }
    .user-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;

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

    .user-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;

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

        .user-select-caret {
          color: #c0c4cc;
          font-size: 14px;
          transition: transform 0.3s;
          transform: rotate(180deg);
          width: 50px;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }

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

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

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

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

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