<template>
  <div>
    <el-table
      :data="tableData"
      border>
    >
      <el-table-column
        v-for="item in tableColums"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{row[item.key]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="{row}">
          <el-button type="text" @click="copyData(row)" v-if="row.Button.Copy">复制数据</el-button>
          <el-button type="text" @click="goToDatabase(row)" v-if="row.Button.Show">查看数据</el-button>
          <el-button type="text" @click="joinDataBase(row)" v-if="row.Button.Add">添加指标库</el-button>
          <el-button type="text" @click="createChartHandle(row.VarietyEdbId)">一键成图</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 一键成图弹窗 -->
    <createChart
      :isCreateChart="isCreateChart"
      :edbid="selected_edbid"
      ref="createChart"
      @close="isCreateChart = false"
    />
  </div>
</template>

<script>
import * as supplyApi from '@/api/modules/supplyApi.js';
import createChart from '@/views/dataEntry_manage/databaseComponents/createChart.vue'
export default {
  props: {
    data: Array
  },
  components: { createChart },
  watch: {
    data(nval) {
      this.tableData = nval;
    }
  },
  data() {
    return {
      tableData: this.data,
      tableColums: [
        {
          label: '指标名称',
          key: 'EdbName'
        },
        {
          label: '指标ID',
          key: 'EdbCode'
        },
        {
          label: '指标分类',
          key: 'ClassifyName'
        },
        {
          label: '更新频度',
          key: 'Frequency'
        },
        {
          label: '起始时间',
          key: 'StartDate'
        },
        {
          label: '最新日期',
          key: 'EndDate'
        },
        {
          label: '最新值',
          key: 'LatestValue'
        },
      ],

      // 一键成图弹窗
      isCreateChart: false,
      selected_edbid: 0,
    }
  },
  methods: {
    async copyData({VarietyEdbId}) {
      const res = await supplyApi.getEdbData({VarietyEdbId})
      if (res.Ret !== 200) return

      let arr = res.Data || [];

      let str = '日期\t 值\n';
      arr.forEach((item) => (str += `${item.DataTime}\t${item.Value}\n`));
      this.$copyText(str).then(
        (res) => {
          this.$message.success('已成功复制!');
        },
        (err) => {
          this.$message.error('复制失败!');
        }
      );
    },

    goToDatabase({UniqueCode,EdbInfoId,ClassifyId}) {
      let {href} = this.$router.resolve({path:'/database', query: {
        code: UniqueCode,
        id: EdbInfoId,
        classifyId:ClassifyId
      }});
			window.open(href,'_blank');
    },

    /* 添加指标库 */
    joinDataBase(row) {
      this.$emit('createTarget',row)
    },

    /* 一键成图 */
    createChartHandle(id) {
      this.selected_edbid = id;
      this.isCreateChart = true;
    }
  }
}
</script>

<style>

</style>