<template>
  <div class="icon-picker-sfc">
    <el-tabs v-model="activeName" class="icon-picker__tabs">
      <el-tab-pane label="图标选择" name="icons">
        <div class="icons-box">
          <div class="icon-item-box" :class="{ active: !currentIcon }" @click="currentIcon = ''">
            <div class="cancel">取消<br />选择</div>
          </div>
          <div
            class="icon-item-box"
            v-for="item in aceIcons"
            :class="{ active: item['font_class'] === currentIcon }"
            @click="currentIcon = `acefont ace-icon-${item['font_class']}`"
            :key="item['icon_id']"
          >
            <i class="acefont" :class="'ace-icon-' + item['font_class']"> </i>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="enableCustomIcon" label="自定义图标" name="custom">
        <div class="custom-box">
          <div class="custom-switch">
            <span style="margin-right: 16px">启用自定义图标</span>
            <el-switch v-model="custom"> </el-switch>
            <el-tooltip class="item" effect="dark" content="开启此项后，需要上传分辨率为64*64（长宽比例1:1）的图片。" placement="bottom">
              <i class="el-icon-info" style="margin-left: 16px; font-size: 18px"> </i>
            </el-tooltip>
          </div>
          <div class="upload-box" v-if="custom">
            <div class="image-box">
              <el-image style="width: 148px; height: 148px" :src="iconUrl" v-if="showImg" placeholder="正在加载中..." />
              <div class="image-box__delete" @click="handleRemove">
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <!-- <el-image style="width: 148px; height: 148px"
                              :src="iconUrl"
                              v-if="!allowUpload"
                              placeholder="正在加载中..."
                              @load="loadImgSuccess"
                              @error="loadImgError" /> -->
            <el-upload
              style="display: inline-block"
              :action="iconUploadUrl"
              list-type="picture-card"
              :multiple="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :data="uploadParams"
              :headers="{ token: $cookie.get('token') }"
              auto-upload
              :show-file-list="false"
              with-credentials
            >
              <!-- :before-upload="beforeUpload" -->
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="iconUrl" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const aceFont = require("../base/AceFont.json");
const iconFont = require("../base/AceFont.json");
export default {
  name: "AceIconPicker",
  model: {
    event: "change",
    prop: "value",
  },
  props: {
    isCustom: {
      type: Boolean,
    },
    //开启自定义
    enableCustomIcon: {
      type: Boolean,
    },
    value: {
      type: String,
    },
    uploadParams: {
      type: Object,
      default() {
        return {};
      },
    },
    iconUploadUrl: {
      type: String,
      default: "",
    },
    iconUrl: {
      type: String,
      default: "",
    },
  },
  computed: {
    custom: {
      get() {
        return this.isCustom;
      },
      set(value) {
        this.$emit("update:isCustom", value);
      },
    },
    aceIcons() {
      return aceFont.glyphs;
    },
    icons() {
      return iconFont.glyphs;
    },
    currentIcon: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("change", value);
      },
    },
  },
  data() {
    return {
      allowUpload: false,
      activeName: "icons",
      disabled: false,
      showImg: false,
    };
  },
  mounted() {},
  methods: {
    init() {
      this.allowUpload = false;
      this.activeName = this.custom ? "custom" : "icons";
      this.reloadImage();
    },
    uploadSuccess(response, file, fileList) {
      if (response.code === 40000) {
        //上传成功
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
      } else {
        this.$notify.error({
          title: "上传失败",
          message: response.msg,
        });
      }
      this.reloadImage();
    },
    reloadImage() {
      this.showImg = false;
      this.$nextTick(() => {
        this.showImg = true;
      });
    },
    uploadError(err, file, fileList) {
      this.$notify.error({
        title: "上传失败",
        message: err,
      });
    },
    beforeUpload(file) {
      // console.log("参数", this.uploadParams);
      // console.log("文件", file);
    },
    handleRemove() {
      this.$emit("removeIconImage", this.reloadImage);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      //   console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-picker-sfc {
  height: 100%;
  .custom-box {
    height: 100%;
    overflow-y: auto;
    padding: 16px 0 0 0;

    .upload-box {
      padding-top: 16px;
      display: flex;
    }
    .custom-switch {
      display: flex;
      align-items: center;
    }
    .image-box {
      height: 148px;
      width: 148px;
      overflow: hidden;
      border-radius: 6px;
      position: relative;
      margin-right: 16px;
      &:hover {
        .image-box__delete {
          display: flex;
        }
      }

      .image-box__delete {
        transform: display 0.3;
        display: none;
        // display: none;
        z-index: 101;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        .el-icon-delete {
          cursor: pointer;
          color: #fff;
          font-size: 20px;
        }
      }
    }
  }
  .icons-box {
    height: 100%;
    overflow-y: auto;
    padding: 8px 0 0 0;
    .icon-item-box {
      padding: 8px;
      float: left;
      width: 10%;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
      .cancel {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
      &.active {
        background-color: rgba(0, 0, 0, 0.06);
        &:hover {
          background-color: rgba(0, 0, 0, 0.06);
        }
      }
      &:hover {
        background-color: aliceblue;
      }
      .acefont {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        color: #444d65;
      }
    }
  }
  ::v-deep .icon-picker__tabs {
    height: 100%;
    overflow: hidden;
    .el-tabs__header {
      margin-bottom: 0;
    }
    .el-tabs__content {
      height: calc(100% - 40px);
    }
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
