<template>
  <div>
    <el-table
        v-if="passList.length > 0"
        :data="passList"
        :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
              class="pass-name"
              @click="toProve(scope.row)"
              v-else-if="item.prop === 'name'">{{ scope.row[item.prop] }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="划转" width="80" align="center">
        <template slot-scope="scope">
          <span class="text-gray" v-if="scope.row.balance === 0">划转</span>
          <el-button
              class="text-btn"
              v-else-if="scope.row.status === 2"
              type="text"
              @click="transfer(scope.row)"
          >划转</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="empty" v-else>
      <img src="../../assets/images/pass/empty.png" alt="">
      <span>搜索无结果</span>
    </div>
    <!-- 转账弹窗-->
    <common-dialog showMask v-if="passShow" @closePopup="passShow = false">
      <transfer-pass @update="$emit('update', curItem.id, curItem.balance)" :content="curItem" @closePopup="passShow = false"></transfer-pass>
    </common-dialog>
  </div>
</template>

<script>
import {debounce} from "../../utils/tool/debounce";
import CommonDialog from "@/components/CommonDialog.vue";
import TransferPass from "@/components/newProductList/TransferPass";
import {GO_URLS} from "../../config/URLS";
import store from "../../store";

export default {
  name: "PassListTable",
  props: ['passList'],
  data() {
    return {
      columns: [
        {
          label: "通证名称",
          prop: "name",
          mWidth: 120,
          width: 0,
        },
        {
          label: "通证标识",
          prop: "identifier",
          mWidth: 0,
          width: 180,
        },
        {
          label: "发行数量",
          prop: "amount",
          mWidth: 60,
          width: 0,
        },
        {
          label: "剩余数量",
          prop: "balance",
          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;
    }
  },
  components: {
    CommonDialog,
    TransferPass
  },
  methods: {
    toProve(item) {
      window.open(`${store.getters.get_urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`);
    },
    reIssue: debounce(async function (content) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.reissue,
        params: {
          ids: [content.id]
        },
      });
      if (!res) return;
      this.$message.success('重新发行成功');
      this.$emit('update');
    }, 500, false),
    transfer(item) {
      this.curItem = item;
      this.passShow = true
    },
    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;
  }
}
.pass-name {
  cursor: pointer;
}
.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: #3F79FE;
  font-size: 12px;
  font-weight: normal;
}
.text-gray {
  font-size: 12px;
  color: #808080;
}
.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;
  }
}

/deep/.el-table {
  .el-table__cell {
    padding: 0;
  }
  th.el-table__cell {
    height: 35px;
    line-height: 35px;
  }
  .el-table__body td.el-table__cell {
    height: 55px;
    line-height: 55px;
  }
}
</style>
