<template>
  <div>
    <el-table
        v-if="transferList.length > 0"
        :data="transferList"
        :height="tableHeight"
        v-load-more.expand="{func: next, target: '.el-table__body-wrapper', delay: 500}"
        style="width: 100%">
      <el-table-column
          v-for="item in columns"
          :key="item.label"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
          :min-width="item.mWidth"
          :width="item.width"
      >
        <template slot-scope="scope">
          <span v-if="item.prop === 'create_time'">{{scope.row[item.prop] | formatTime}}</span>
          <div v-else-if="item.prop === 'status'">
            <div class="column-status status1" v-if="scope.row.status === 1">
              划转中
            </div>
            <div
                class="column-status status2"
                v-else-if="scope.row.status === 2"
            >
              划转成功
            </div>
            <div v-else-if="scope.row.status === 3" class="status">
              <div class="column-status status3">划转失败</div>
              <svg-icon class="icon-re" icon-class="re" @click="reIssue(scope.row)"/>
            </div>
          </div>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="empty" v-else>
      <img src="../../assets/images/pass/empty.png" alt="">
      <span>搜索无结果</span>
    </div>
  </div>
</template>

<script>
import {debounce} from "../../utils/tool/debounce";
import {GO_URLS} from "../../config/URLS";

export default {
  name: "TransferRecordList",
  props: ['transferList'],
  data() {
    return {
      columns: [
        {
          label: "转账名称",
          prop: "pass_name",
          mWidth: 100,
          width: 0,
        },
        {
          label: "通证标识",
          prop: "identifier",
          mWidth: 0,
          width: 180,
        },
        {
          label: "划转地址",
          prop: "to",
          mWidth: 100,
          width: 0,
        },
        {
          label: "划转数量",
          prop: "amount",
          mWidth: 60,
          width: 0,
        },
        {
          label: "划转时间",
          prop: "create_time",
          mWidth: 80,
          width: 0,
        },
        {
          label: "划转状态",
          prop: "status",
          mWidth: 80,
          width: 0,
        }
      ],
      passShow: false, // 显示转账弹窗
      curItem: {}
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 145;
    }
  },
  methods: {
    reIssue: debounce(async function (content) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.reTransfer,
        params: {
          id: content.id
        },
      });
      if (!res) return;
      this.$message.success('重新转账成功');
      this.$emit('update');
    }, 500, false),
    next() {
      this.$emit('nextPage');
    }
  }
}
</script>

<style scoped lang="less">
.status {
  position: relative;
  .icon-re {
    height: 14px;
    width: 14px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: 40px;
  }
}
.column-status {
  width: 70px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
  position: relative;
  overflow: visible;
  margin: 0 auto;

  &.status1 {
    background-color: #fff7ec;
    color: #fe953f;
  }

  &.status2 {
    background-color: #ecf1ff;
    color: #3f79fe;
  }

  &.status3 {
    background-color: #ffeeec;
    color: #fe563f;
  }
}

.text-btn {
  color: #4A90E2;
  font-size: 12px;
  font-weight: normal;
}
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 145px);

  img {
    width: 134px;
    height: 113px;
    margin-bottom: 6px;
  }

  span {
    font-size: 14px;
    color: #929292;
    line-height: 20px;
  }
}
</style>


