<template>
  <div
    class="fm-uplaod-container"
    :id="ctableId"
  >
    <draggable
      class="drag-img-list"
      v-bind="{group: ctableId, ghostClass: 'ghost', animation: 200}"
      :no-transition-on-drag="true"
    >
      <div>
        <el-table
          :data="exData.tableData"
          style="width: 100%"
          :empty-text="emptyText"
          v-if="exData"
        >
          <el-table-column
            :prop="item.labelKey"
            :label="item.label"
            v-for="(item,i) in exData.column"
            :key="i"
          >
          </el-table-column>
        </el-table>
      </div>
    </draggable>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { debounce } from '../../util/index'
// import jsonp from '../../util/jsonp'
//示例数据
const exData = {
  column: [
    {
      label: '日期(示例)',
      labelKey: 'date'
    },
    {
      label: '名称(示例)',
      labelKey: 'name'
    },
    {
      label: '地址(示例)',
      labelKey: 'address'
    },
  ],
  tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }]
}
export default {
  components: {
    Draggable
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    token: {
      type: String,
      default: ''
    },
    action: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      ctableId: 'upload_' + new Date().getTime(),
      exData: null
    }
  },
  computed: {
    emptyText() {
      return this.$t('fm.description.cTableEmpty')
    }
  },
  created() {
    this.getTableData = debounce(this.getTableData)
  },
  methods: {
    async getTableData() {
      try {
        const res = await jsonp(this.action)
        console.log('jsonp data', res);
        if (res.column && res.tableData && res.tableData.length) {
          this.$message({
            message: '表格数据加载成功！',
            type: 'success'
          });
          this.exData = res
          return
        }
      } catch (error) {

      }
      this.$message({
        message: '请检查table数据源是否正确！',
        type: 'warning'
      });
      this.exData = exData
    },
  },
  watch: {
    value: {
      handler(val) {
       if (val) {
          this.getTableData()
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
</style>
