<template>
  <div style="position: relative;">
    <Spin class="spin" v-show="isLoading"></Spin>
    <div style="min-height: 200px;max-height: 73vh;overflow-y: scroll;">
      <div class="cards">
        <Card v-for="item in exhibitors">
          <template #title>
            <div class="card-title">
              <div>
                <Icon type="md-calendar" />
                <strong>{{ item.meeting_id_meetings_id_relation ? item.meeting_id_meetings_id_relation.name : '' }}</strong>
                <Tag :color="tagColor(item.status)">{{ status(item.status) }}</Tag>
              </div>

              <template v-if="item.meeting_id_meetings_id_relation">
                <span>{{ item.meeting_id_meetings_id_relation.start_date }} ~ {{ item.meeting_id_meetings_id_relation.end_date }}</span>
              </template>
            </div>
          </template>

          <div class="file" v-if="item.fujian_uploads_id_relation">
            <i class="el-icon-document"></i>
            <a :href="item.fujian_uploads_id_relation.url" :download="item.fujian_uploads_id_relation.original_name">
              {{ item.fujian_uploads_id_relation.original_name }}
              <i class="el-icon-download"></i>
            </a>
            <span>{{ item.remark }}</span>

            <p @click="deleteClick(item)"><i class="el-icon-delete"></i> 删除</p>
          </div>
        </Card>
      </div>

      <div style="display: flex; justify-content: center;margin-top: 20px;">
        <Page
          :total="exhibitorTotal"
          :page-size="exhibitorSelect.page_size"
          show-total
          @on-change="
            (e) => {
              exhibitorSelect.page = e;
              getExhibitors();
            }
          "
        />
      </div>
    </div>
  </div>
</template>

<script>
import { exhibitorList, exhibitorDelete } from "@/api/h5";
export default {
  data() {
    return {
      isLoading: false,
      exhibitorTotal: 0,
      exhibitors: [],
      exhibitorSelect: {
        table_name: 'exhibitor_files',
        page: 1,
        page_size: 10,
      },
    };
  },
  methods: {
    async getExhibitors(isRefresh = false) {
      try {
        this.isLoading = true
        if (isRefresh) {
          this.exhibitorSelect.page = 1;
        }
        const res = await exhibitorList(this.exhibitorSelect);
        this.exhibitorTotal = res.total;
        this.exhibitors = res.data;

        this.isLoading = false;
      }catch (e) {
        this.isLoading = false;
      }
    },

    deleteClick (row) {
      this.$confirm('确定删除该条资料吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        exhibitorDelete({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getExhibitors()
        })
      })
    }
  },
  computed: {
    status() {
      return function (status) {
        let map = new Map([
          [1, "待审核"],
          [2, "已通过"],
          [3, "未通过"],
        ]);
        return map.get(status);
      };
    },
    tagColor() {
      return function (status) {
        let map = new Map([
          [1, "warning"],
          [2, "success"],
          [3, "error"],
        ]);
        return map.get(status);
      };
    },
  },
  created() {
    //this.getExhibitors();
  },
};
</script>

<style scoped lang="scss">
.spin {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position:absolute;
  width: 100%;
  height: calc(100%);
  left: 0;
  top: 0;
  bottom: 20px;
  z-index: 2;
}
.card-title {

  & > div {
    display: flex;
    align-items: center;

    margin-bottom: 5px;
    & > strong {

      padding: 0 10px;
    }
  }

  & > span {
    color: #999;
    font-weight: normal;
    zoom: .75;
  }
}
.cards {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-gap: 10px;
}
.item {
  display: flex;

  &__title {
    font-weight: 600;


  }
}
.file {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > i {
    font-size: 24px;
  }
  & > a {
    transition: all .2s;
    color: $primaryColor;

    margin-top: 6px;

    &:hover {
      text-decoration: underline;
    }
    &:active {
      color: #ee5450;
      text-decoration: underline;
    }
  }
  & > span {
    width: 100%;
    color: #666;
    zoom: .9;
    text-indent: 1em;
    word-break: break-all;

    margin-top: 10px;
  }
  & > p {
    color: red;
    cursor: pointer;
    zoom: .8;
    align-self: flex-end;
    padding-top: 20px;
  }
}
@media (max-width: 768px) {
  .cards {
    display: block;

    ::v-deep .ivu-card {
      margin-bottom: 10px;
    }
  }

}
</style>
<style>
@media (max-width: 768px) {
  .el-message-box {
    width: 90%;

    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
</style>
