<template>
  <el-dialog :visible.sync="iconSelectVisible" :title="$t('label.select_pic')" v-if="iconSelectVisible" custom-class="icon_select dialogPaddingTop0" :append-to-body="innerDialog">
    <el-container>
      <div class="custonIcon">
        <el-tabs v-model="activeTab">
          <el-tab-pane :label="$t('label.pic_icon')" name="imgIcon" style="height:300px;overflow-y:scroll">
            <div class="custonImgCon">
              <el-col v-for="(item, index) in imgIcons" :key="index" style="margin-bottom:10px;display:inline;width:auto">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top">
                  <div v-bind:class="{ divRelative: true, imgIconCheck: index == imgIconCurrent }" @click="checkedImgIcon(item, index)">
                    <!-- @click.native="checkedIcon(item,index)" -->
                    <img id="_iconImg" class="iconImg" alt :src="getUrl(item.path)" />
                  </div>
                </el-tooltip>
              </el-col>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('label.define_icon')" name="customIcon" style="height:300px;overflow-y:scroll">
            <div class="customIconCon">
              <el-button @click="onUpload" type="primary" plain size="small">{{$t('btns.upload_icon')}}</el-button>
            </div>
            <div class="customIconList">
              <el-col v-for="(item, index) in upIcons" :key="index" style="margin-top:10px;display:inline;width:auto">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top">
                  <div v-bind:class="{ divRelative: true, upIconCheck: index == upIconCurrent }" @click="checkedupIcon(item, index)">
                    <img class="iconImg" id="_iconImg" alt :src="getUrl(item.path)" />
                  </div>
                </el-tooltip>
              </el-col>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-container>

    <fileUpload 
    :visible.sync="fileUploadVisible" 
    v-if="fileUploadVisible" 
    @checkUpload="onCheckUpload" 
    @del="onDelete" />
    <!--  -->
    <div class=" dialog-footer" slot="footer">
      <el-row>
        <el-col style="text-align:right;margin-top:10px;width:100%;">
          <span class="toolbar-buttons">
            <el-button @click="onCancel" size="small" type="primary" plain>{{$t('btns.cancel')}}</el-button>
            <el-button type="primary" @click="onOk" size="small">{{$t('btns.confirm')}}</el-button>
          </span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import fileUpload from "@/components/Common/fileUpload.vue";
import { getAllIcon, getLogoUrl, deleteIcon } from "@/service/CommontoolsAPI.js";

export default {
  data() {
    return {
      imgIcons: [],
      activeTab: "imgIcon",
      fileUploadVisible: false,
      imgIconCurrent: -1,
      selectIcon: [],
      iconToolTipVisible: false,
      upIcons: [],
      upIconCurrent: -1,
      checkDelete: true,
      haveDelete: false,
      noDelete: true,
      emptyValue: "",
      checkAll: false,
      isIndeterminate: true,
    };
  },
  watch: {
    selectIcon: function(newval) {
      this.selectIcon = newval;
    },
  },
  components: {
    fileUpload,
  },
  created() {
    this.getIcon();
    this.getUpIcons();
  },
  computed: {
    iconSelectVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  // props: ["visible", "logoUrl"],
  props: {
    visible: Boolean,
    logoUrl: String,
    innerDialog: {
      // 是否为内嵌弹框
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onCancel() {
      this.iconSelectVisible = false;
    },
    onDelete(delIcon) {
      if (delIcon) {
        this.selectIcon = delIcon;
      }
      if (this.selectIcon.length == 0) {
        this.$message({
          showClose: true,
          message: this.$t('msg.select_icon'),
          type: "error",
        });
        return false;
      }
      this.checkDelete = true;
      this.noDelete = true;
      this.haveDelete = false;

      deleteIcon(
        { data: this.selectIcon },
        {
          onSucess: (resp) => {
            if (resp.data.errcode == 0) {
              this.getUpIcons();
              this.selectIcon = [];
            }
          },
        }
      );
    },
    onOk() {
      this.iconSelectVisible = false;
      if (this.imgIconCurrent != -1) {
        this.$emit("select-ok", this.imgIcons[this.imgIconCurrent],0);
      } else if (this.upIconCurrent != -1) {
        this.$emit("select-ok", this.upIcons[this.upIconCurrent],1);
      }
    },
    onUpload() {
      this.fileUploadVisible = true;
    },
    onBack() {
      this.getIcon();
    },
    getIcon() {
      let that = this;
      getAllIcon("", {
        onSucess: (resp) => {
          // this.imgIcons = resp.data.data;
          resp.data.data.forEach((el) => {
            if (el.path.indexOf(".png") != -1 || el.path.indexOf(".jpg") != -1 || el.path.indexOf(".gif") != -1) {
              that.imgIcons.push(el);
            }
          });
          if (that.logoUrl) {
            that.imgIcons.forEach((elm, index) => {
              if (elm.path.indexOf(that.logoUrl) != -1) {
                that.imgIconCurrent = index;
              }
              elm.name = elm.name.replace(/p[0-9]{2,}_/, "");
            });
          }
        },
      });
    },
    getUpIcons() {
      getAllIcon("/uploads/lib/icon/upload", {
        onSucess: (resp) => {
          this.upIcons = resp.data.data;
        },
      });
    },
    onCheckUpload() {
      this.getUpIcons();
    },
    checkedImgIcon(item, index) {
      this.imgIconCurrent = index;
      this.upIconCurrent = -1;
      this.checkIcon = item;
    },
    checkedupIcon(item, index) {
      this.upIconCurrent = index;
      this.imgIconCurrent = -1;
      // this.fontIconCurrent=-1;
      this.checkIcon = item;
    },
    getUrl(url) {
      return getLogoUrl(url);
    },
  },
};
</script>
<style scoped></style>
<style lang="scss">
.el-dialog__footer {
  background-color: #fff;
}
</style>
