<template>
  <div class="import-mychart-wrap">
    <div class="search-box">
      <el-select
        v-model="selectMyChartClassify"
        filterable
        placeholder="图分类名称"
        @change="handleChange"
      >
        <el-option
          v-for="item in myChartClassifyList"
          :key="item.MyChartClassifyId"
          :label="item.MyChartClassifyName"
          :value="item.MyChartClassifyId"
        >
        </el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="handleImport">一键导入</el-button>
      <el-tooltip
        class="search-hint"
        effect="dark"
        content="该操作将批量导入所选图分类下所有图表"
        placement="top-start"
      >
        <i style="font-size: 24px; color: #666" class="el-icon-question"></i>
      </el-tooltip>
    </div>
    <div class="chart-list" v-infinite-scroll="load" v-if="list.length > 0">
      <div
        class="chart-item"
        v-for="item in list"
        :key="item.UniqueCode"
        @click="handleClickItem(item)"
      >
        <div
          class="chartEn-mark"
          v-show="item.IsEnChart && showEnMark"
          style="top: 0; left: 0"
        >
          En
        </div>
        <p>{{ item.ChartName }}</p>
        <img :src="item.ChartImage" alt="" />
      </div>
    </div>
    <div v-if="list.length == 0" class="empty-box">无数据</div>
  </div>
</template>

<script>
import { mychartInterface } from "@/api/api.js";
export default {
  data() {
    return {
      myChartClassifyList: [],
      selectMyChartClassify: "",
      pageSize: 10000,
      CurrentIndex: 1,
      list: [],
      loading: false,
      finished: false,
    };
  },
  props: {
    showEnMark: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.getMyChartClassify();
  },
  methods: {
    //获取我的图库中分类
    getMyChartClassify() {
      mychartInterface.classifyList().then((res) => {
        if (res.Ret !== 200) return;
        this.myChartClassifyList = res.Data ? res.Data.List : [];
      });
    },
    handleChange() {
      this.CurrentIndex = 1;
      this.list = [];
      this.finished = false;
      this.loading = false;
      this.handleGetMyChartList();
    },
    async handleGetMyChartList() {
      if (!this.selectMyChartClassify) return;
      this.loading = true;
      const res = await mychartInterface.myList({
        PageSize: this.pageSize,
        CurrentIndex: this.CurrentIndex,
        MyChartClassifyId: this.selectMyChartClassify || 0,
      });
      this.loading = false;
      const arr = res.Data ? res.Data.List.filter(_=>!_.Disabled) : [];
      this.list = [...this.list, ...arr];
      if (!res.Data) {
        this.finished = true;
      }
      if (res.Data && res.Data.Paging.IsEnd) {
        this.finished = true;
      }
    },

    load() {
      if (this.finished) return;
      this.CurrentIndex++;
      this.handleGetMyChartList();
    },

    handleImport: _.throttle(function () {
      if (!this.selectMyChartClassify) {
        this.$message.warning("请选择分类");
        return;
      }
      if (this.list.length == 0) {
        this.$message.warning("该分类无图表");
        return;
      }
      this.$emit("handleImportMyChart", this.list);
    }, 1000),

    handleClickItem(item) {
      this.$parent.chooseChart(item,'chart')
    },
  },
};
</script>

<style lang="scss" scoped>
.import-mychart-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .el-select{
      margin-right:10px;
    }
    .el-button--mini{
      padding:7px;
    }
    .search-hint{
      align-self: center;
    }
  }
  .chart-list {
    flex:1;
    border:2px solid #EBEBEB;
    border-radius: 4px;
    overflow-y: scroll;
    text-align: center;
    &::-webkit-scrollbar-track {
      display: none;
    }
    .chart-item {
      border-top: 1px solid #EBEBEB;
      cursor: pointer;
      text-align: center;
      color: #74818d;
      font-size: 18px;
      margin-bottom: 10px;
      padding:10px;
      position:relative;
      img {
          width: 100%;
      }
      p{
        color: #74818d;
      }
      .chartEn-mark{
        position:absolute;
      }
    }
  }
  .empty-box {
    text-align: center;
    color: #999;
    padding-top: 100px;
  }
}
</style>