<template>
  <div>
    <!-- <el-row  type="flex"  justify="center"> -->
    <!-- <el-col :span="24" class="wrapList"> -->
    <div>
      <el-row class="wrapList-top" type="flex" justify="end">
        <!-- <el-button type="primary" size="small" @click="test">测试</el-button> -->
        <el-button-group class="type-group">
          <el-button
            :class="{ 'button-state-hover': isHover }"
            @click="handleSwitchList"
            size="small"
            >缩略图</el-button
          >
          <el-button @click="handleSwitchTable" size="small">列表</el-button>
        </el-button-group>
      </el-row>
      <div v-show="isSwitch" class="wrapList-table">
        <el-table
          highlight-current-row
          :data="
            layoutArr.filter(
              (data) =>
                !nameSearch ||
                data.name.toLowerCase().includes(nameSearch.toLowerCase())
            )
          "
          :header-cell-style="{ background: '#C6E2FF', color: '#303133' }"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="项目英文名"
            prop="name"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.name }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="项目英文名"
            prop="name"
            sortable
            align="right"
          ></el-table-column>
          <el-table-column
            label="项目中文名"
            prop="name_zh"
            sortable
            align="right"
          ></el-table-column>
          <el-table-column
            label="项目端口"
            prop="port"
            sortable
            align="right"
          ></el-table-column>
          <el-table-column
            label="项目提供者"
            prop="provider"
            sortable
            align="right"
          ></el-table-column>
          <el-table-column
            label="数据库文件名"
            prop="dbfilename"
            sortable
            align="right"
          ></el-table-column>
        </el-table>
      </div>
      <div v-show="!isSwitch">
        <!-- :row-height="30" -->
        <!-- :is-draggable="true" -->
        <!-- :is-resizable="true" -->
        <!-- :is-mirrored="false" -->
        <!-- :vertical-compact="true" -->
        <!-- :use-css-transforms="true" -->
        <grid-layout
          :layout.sync="layoutArr"
          :col-num="12"
          :row-height="35"
          :margin="[15, 15]"
          :responsive="true"
        >
          <grid-item
            v-for="item in layoutArr"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            dragIgnoreFrom="i"
            :key="item.i"
          >
            <!-- <div class="card-item-mark">模板 {{Number(item.i)+1}}</div> -->
            <slot name="card" :cardItem="item"></slot>
          </grid-item>
        </grid-layout>
      </div>
    </div>
    <!-- </el-col> -->
    <!-- </el-row> -->

    <el-row class="pageArea" type="flex" justify="end">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="index"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import VueGridLayout from "vue-grid-layout";
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  props: {
    layout: {
      type: Array,
    },
    nameSearch: {
      type: String,
    },
  },
  computed: {
    layoutArr: {
      get() {
        return this.layout;
      },
      set() {},
    },
  },
  mounted() {
    // const gridLayout = this.layout;
    // console.log("gridLayout", gridLayout);
    // this.index = gridLayout.length;
    // this.cacheArr = gridLayout;
    // console.log("card content", this.content);
  },
  data() {
    return {
      isSwitch: false,
      isHover: true,

      // cacheArr: [],
      index: 0,
      currentPage: 1,
    };
  },
  methods: {
    test() {
      let xcoor = 2 * Math.round(Math.random() * 5);
      console.log(xcoor, "xcoor");
      let ycoor = Math.ceil(Math.random() * 10);
      console.log(ycoor, "xcoor");
      let item = {
        x: xcoor,
        y: ycoor,
        w: 2,
        h: 8,
        i: this.index + "",
        name: "c xs",
        exporter_type: "process_exporter",
        description: "description1",
        image: "summer.jpg",
      };
      console.log("item", item);
      this.index++;
      // this.layout.push(item);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.cacheArr = this.layout.filter((item, index) => {
        return index > 10 * (val - 1) - 1 && index <= 10 * val - 1;
      });
      console.log(`this.cacheArr:`, this.cacheArr);
      console.log(`当前页: ${val}`);
    },

    handleSwitchTable() {
      this.isSwitch = true;
      console.log("table click");
    },
    handleSwitchList() {
      this.isSwitch = false;
      this.isHover = false;
      console.log("list click");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-bottom: 20px;
  width: 100%;
  table-layout: auto;
}
.vue-grid-item {
  img {
    display: block;
    width: 100%;
    height: 90%;
  }
}
.wrapList-top {
  padding: 15px 15px 0;
}
.wrapList-table {
  padding: 15px 15px 0;
}
.button-state-hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.card {
  img {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  .card-word {
    padding: 10px 0;
    span {
      padding-left: 10px;
      font-size: 14px;
    }
    em {
      font-style: normal;
    }
  }
}
</style>