<template>
  <div class="choose-chart-container">
    <el-dialog
      :visible.sync="isOpenChoose"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      custom-class="dialog"
      top="3vh"
      center
      width="86%"
			style="min-width:1200px;"
      v-dialogDrag
    >
      <div slot="title" style="display: flex; align-items: center">
        <img
          :src="$icons.choose_ico"
          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
        />
        <span style="font-size: 16px">选择图表</span>
      </div>
      <div class="dialog-top">
        <el-input
          placeholder="图表名称"
          v-model="search_txt"
          style="width: 100%"
          @input="searchHandle"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div style="margin-top: 10px">
          <el-radio-group v-model="chart_source" @change="searchHandle" style="margin-right:15px;">
						<el-radio :label="1">ETA图库</el-radio>
						<el-radio :label="2">商品价格曲线</el-radio>
						<el-radio :label="3">相关性图表</el-radio>
						<el-radio :label="6">拟合方程曲线</el-radio>
						<el-radio :label="7">统计特征</el-radio>
					</el-radio-group>
          <el-checkbox v-model="isShowMe"  @change="searchHandle">只看我的</el-checkbox>
        </div>
      </div>
      <div class="choose-dialog-min">
        <div
          v-if="haveData"
          class="chart-public-list"
          style="margin-bottom: 20px;padding-right: 20px;"
          :infinite-scroll-disabled="!haveMove"
          v-infinite-scroll="loadMove"
          ref="scrollCont"
        >
          <el-col
            :span="5"
            v-for="chart in chartPublicList"
            :key="chart.ChartInfoId"
            style="padding-right: 20px;margin-bottom:20px;"
          >
            <el-card shadow class="public-chart-item">
              <div slot="header" class="item-top">
                <span class="text_oneLine">{{ $parent.chart_lang==='en' ? (chart.ChartNameEn||chart.ChartName) : chart.ChartName }}</span>
              </div>
              <img :src="chart.ChartImage" alt="" class="chart-img" />
              <div class="item-bottom">
                <span class="last-time">最近更新：{{ chart.ModifyTime.substr(0,10) }}</span>
                <span class="join_txt" @click="addMychartHandle(chart)">
                  <img
                    :src="$icons.chart_join_ico"
                    alt=""
                    style="width: 13px; height: 12px; vertical-align: middle"
                  />
                  加入我的图库
                </span>
                <!-- <span style="color: #3BB737;" v-else>已加入</span> -->
              </div>
            </el-card>
          </el-col>
        </div>
        <div v-else class="nodata">
          <tableNoData text="暂无图表"/>
        </div>
      </div>
    </el-dialog>

    <!-- 加入我的图库弹窗 -->
    <addMyClassifyDia
      :isAddMyDialog="isAddMyChart"
      :add_id="add_chart_id"
      :add_ids="add_ids"
      @cancel="isAddMyChart = false"
      @addSuccess="addSuccess"
    />
  </div>
</template>

<script>
import { mychartInterface } from '@/api/api.js';
import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
import { fittingEquationInterface,statisticFeatureInterface } from '@/api/modules/chartRelevanceApi';
import futuresInterface from '@/api/modules/futuresBaseApi';
export default {
  components: {
    addMyClassifyDia,
  },
  props: {
    isOpenChoose: {
      type: Boolean,
    },
  },
  watch: {
    isOpenChoose(newval) {
      newval && this.getPublicChartList();
    },
  },
  data() {
    return {
      haveData: false,
      search_txt: '',
      page_no: 1,
      page_size: 15,
      haveMove: true,
      chartPublicList: [],
      /* 加入弹窗 */
      isAddMyChart: false,
      add_chart_id: 0, //要加入的图表
      add_ids: [], //已加入的分类id
      isHaveAdd: false,

      chart_source:1,
      isShowMe: false
    };
  },
  methods: {
    /* 获取图库列表 */
    async getPublicChartList() {
      let params = {
        PageSize: this.page_size,
        CurrentIndex: this.page_no,
        ChartClassifyId: 0,
        KeyWord: this.search_txt,
        IsShowMe: this.isShowMe
      };
      let res=null 
      if(this.chart_source===1){
        res=await mychartInterface.publicList(params)
      }else if(this.chart_source===2){
				res=await futuresInterface.searchChart(params)
			}else if(this.chart_source===3){
        res=await chartRelevanceApi.getChartList(params)
      }else if(this.chart_source===6) {
        res=await fittingEquationInterface.getChartList(params)
      }else if(this.chart_source===7) {
        res=await statisticFeatureInterface.getChartList(params)
      }
        if (res.Ret !== 200) return;
        this.haveMove = res.Data ? this.page_no < res.Data.Paging.Pages : false;
        this.chartPublicList = res.Data
          ? this.page_no === 1
            ? res.Data.List
            : [...this.chartPublicList, ...res.Data.List]
          : [];
        this.haveData = this.chartPublicList.length ? true : false;
      
    },

    /* 加入我的图库 */
    addMychartHandle(item) {
      this.add_chart_id = item.ChartInfoId;
      //已有的分类ids
      this.add_ids = item.MyChartClassifyId ? item.MyChartClassifyId.split(',').map(item => Number(item)) : [];
      this.isAddMyChart = true;
    },

    addSuccess(params) {
      this.isAddMyChart = false;
      this.isHaveAdd = true;
      this.chartPublicList.forEach(item => {
        if(item.ChartInfoId === this.add_chart_id) {
          item.IsAdd = true;
          item.MyChartClassifyId = params.MyChartClassifyId;
        }
      });
    },

    loadMove() {
      this.page_no++;
      this.getPublicChartList();
    },

    searchHandle() {
      this.page_no = 1;
      if(this.$refs.scrollCont) this.$refs.scrollCont.scrollTop = 0;
      this.getPublicChartList();
    },

    init() {
      this.page_no = 1;
      if(this.$refs.scrollCont) this.$refs.scrollCont.scrollTop = 0;
      this.search_txt = '';
    },
    cancelHandle() {
      this.init();
      this.isHaveAdd ?  this.$emit('addSuccess') : this.$emit('cancel');
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss">
.choose-chart-container {
  .el-col-5 {
    width: 20%;
  }
  .el-card .el-card__header,
  .el-card__body {
    padding: 10px;
  }
  .el-dialog--center .el-dialog__body {
    padding: 25px 0 10px;
  }
  .dialog-top {
    padding: 0 25px;
  }
  .choose-dialog-min {
    margin-top: 20px;
    .chart-public-list {
      display: flex;
      flex-wrap: wrap;
      height: 650px;
      padding: 0 0 0 20px;
      overflow: hidden;
      overflow-y: auto;
      .dragShdow {
        box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
        opacity: 0.5;
      }
      .public-chart-item {
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 15px;
          font-weight: 600;
        }
        .chart-img {
          width: 100%;
          height: 180px;
          object-fit: fill !important;
        }
        .item-bottom {
          margin-top: 10px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          color: #666;
          .join_txt {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
    .nodata {
      height: 500px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
