<template>
  <el-dialog title="回收站" :visible.sync="dialogVisible" :fullscreen="true" custom-class="recycleDialog" @close="dialogClose">
    <div class="main-head">
      <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText" @keyup.native.enter="changeQueryText"
        style="width: 192px;">
      </el-input>
      <div class="head-right">
        <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
          <span class="drop-text">{{selText}}</span>
        </Dropdown>
      </div>
    </div>
    <div class="main-body" :class="{'no-data': !cardList.length}" v-loading="recycleLoading">
      <template v-for="t in cardList">
        <topoImageCard :isRecycle="true" :data="t" :key="t.id" @recover="recover" @deleteRecycle="deleteRecycle"></topoImageCard>
      </template>
      <div v-if="!cardList.length" style="margin-top: 112px;">
        <img :src="require('@/assets/images/no-data.png')" style="width: 116px;height:116px;">
        <p style="font-size: 16px;margin-top: 15px;text-align:center;">暂无数据</p>
      </div>
    </div>
    <!-- 二次确认弹窗 -->
    <recycleDialog ref="recycleDialog" :title="title" @recoverSuc="queryGraph"></recycleDialog>
  </el-dialog>
</template>

<script>
import { queryDraftsGraph } from "@/api/home"
import { Dropdown } from "meri-design";
import topoImageCard from "@/components/homeView/topoImageCard.vue";
import recycleDialog from "@/components/homeView/recycleDialog.vue";
export default {
  data() {
    return {
      dialogVisible: false,
      input: '',
      queryText: '',
      selVal: "delTime", // 排序方式
      selText: "按删除时间", // 排序方式文字
      dataSelect: [
        { id: "delTime", name: "按删除时间" },
        { id: "lastUpdate", name: "按最后修改" },
        { id: "name", name: "按字母顺序" },
        { id: "createTime", name: "按创建时间" }
      ], // 排序选项
      cardList: [],
      title: '恢复',
      recycleLoading: false,
    };
  },
  methods: {
    showDialog() {
      this.queryGraph();
      this.dialogVisible = true;
    },
    changeQueryText() {
      this.queryGraph();
    },
    // 查询图形信息
    queryGraph() {
      this.recycleLoading = true;
      const pa = {
        Filters: `state=4`,
        Orders: `${this.selVal} desc`
      }
      if (this.queryText) {
        pa.Filters += `;name contain "${this.queryText}"`
      }
      queryDraftsGraph(pa).then(res => {
        this.cardList = res.content.map(t => {
          t.checked = false;
          return t;
        });
        this.queryText = '';
        this.recycleLoading = false;
      })

    },
    // 恢复
    recover(data) {
      this.title = "恢复";
      this.$refs.recycleDialog.showDialog(data)
    },
    // 永久删除
    deleteRecycle() {
      this.$message('开发中')
    },
    // 关闭弹窗
    dialogClose() {
      this.$emit('recycleDialogClose');
    }
  },
  components: { Dropdown, topoImageCard, recycleDialog },
  watch: {
    // 排序方式修改
    selVal(n, o) {
      if (n === o) return;
      this.selText = this.dataSelect.find(d => d.id === n).name;
      this.selectCard = [];
      this.queryGraph()
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .recycleDialog {
  color: red;
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  .main-head {
    display: flex;
    justify-content: space-between;
    .head-right {
      display: flex;
      align-items: center;
      .Dropdown {
        min-width: 100px;
        margin-left: 20px;
        .drop-text {
          font-size: 14px;
          color: #1f2329;
          line-height: 16px;
        }
      }
    }
  }
  .main-body {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    height: calc(100% - 51px);
    &.no-data {
      justify-content: center;
      // align-items: center;
    }
  }
}
</style>