<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
      <el-button
        type="primary"
        @click.native="handleOperation({ type: 'add' })"
             icon="el-icon-s-promotion"
      >
      
        发布</el-button
      >
    </div>
    <el-row :gutter="32">
      <el-col :span="4" v-for="(item, index) in list.records" :key="index">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0px' }"
          style="margin-bottom: 10px"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.name }}</span>
          </div>
          <!-- <div class="deptName">贵州省博物馆</div> -->
          <div class="faceImage">
            <div class="img">
              <el-image :src="item.faceImage" style="width:100%;height: 100%;" fit="cover">
                <div slot="error" class="image-slot">
                  <img src="@/assets/404_images/no-pic1.png" alt="">
                </div>
              </el-image>
              <div class="modal">
                <i class="el-icon-view"></i>
                <div class="view-text">查看</div>
              </div>
            </div>
          </div>
          <div class="theme">{{ item.intro }}</div>
          <div class="buttons">
            <el-row>
              <el-col :span="12">
                <el-button icon="el-icon-edit" style="width: 100%"> </el-button>
              </el-col>
              <el-col :span="12">
                <el-button icon="el-icon-delete" style="width: 100%">
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(list.current)"
      :page-sizes="[10, 20, 40, 50]"
      :page-size="Number(list.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(list.total)"
      class="pagination"
    >
    </el-pagination>
    <InfoEditDialog
      :visible="drawerVisible"
      :form="form"
      @handleClose="handleClose"
      @refresh="loadData"
    />
  </div>
</template>

<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import {
  getMuseumList,
  // getRCDetailById,
  // deleteCultralRelic,
  // editCulturalRelic,
} from "@/api/org";
import InfoEditDialog from "./components/InfoEditDialog";
import SearchBar from "@/components/SearchBar";

export default {
  components: {
    TablePage,
    TableOperation,
    InfoEditDialog,
    SearchBar,
  },
  data() {
    return {
      list: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchForm: {
        name: "",
        status: "",
      },
      searchConfig: [
        {
          prop: "name",
          type: "input",
          label: "博物馆名称",
        },
        {
          prop: "status",
          type: "select",
          label: "状态",
          selectOptions: [
            {
              label: "已上架",
              value: "1",
            },
            {
              label: "已下架",
              value: "0",
            },
          ],
        },
      ],
      drawerVisible: false,
      isAdd: true,
      form: {
        name: "", //名称
        intro: "",
        latitude: "",//纬度
        longitude: "",//经度
        faceImage: "",
        pid:'',//所属部门id
        regionCode:'',//所属地code
      },
      loading: false,
    };
  },
  computed: {
    tableTitle() {
      return title;
    },
    tableOperates() {
      return operates;
    },
    tableOperations() {
      return operations;
    },
    getStatusTitle(status) {
      return (status) => {
        if (Number(status)) {
          return "是否确定要下架？";
        } else {
          return "是否确定要上架？";
        }
      };
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async search(form) {
      var params = {
        page: this.list.current,
        limit: this.list.size,
        ...form,
      };
      if (params.status == "") {
        delete params.status;
      }
      console.log("params", params);
      let res = await getMuseumList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },

    reset() {
      this.loadData();
    },

    //   加载表格数据
    async loadData() {
      var params = {
        page: this.list.current,
        limit: this.list.size,
      };
      let res = await getMuseumList(params);
      if (res.code == 0) {
        this.list.records = res.data; //TODO:待后端增加分页
      }
    },

    async handleOperation(value, row) {
      console.log("handleOperation", value, row);
      switch (value.type) {
        case "add":
          this.drawerVisible = true;
          break;
        case "view":
          
          break;
        case "edit":
          let detailRes = await getRCDetailById({ crId: row.crId });
          if (detailRes.code == 0) {
            this.form = detailRes.data;
            this.drawerVisible = true;
          }
          break;
        case "delete":
          let deleteRes = await deleteCultralRelic([row.crId]);
          if (deleteRes.code == 0) {
            this.$message.success("删除成功！");
            this.loadData();
          }
          break;
      }
    },
    async handleChangeStatus(row) {
      console.log("status", row);
      const { status } = row;
      let newStatus = status === "0" ? "1" : "0";
      const params = {
        ...row,
        status: newStatus,
      };
      let res = await editCulturalRelic(params);
      if (res.code == 0) {
        this.loadData();
        this.$message.success("修改成功！");
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },

    // 搜索
    onSubmitSearch() {
      console.log("submit!");
    },

    // 打开drawer
    handleOpenDialog(type, value) {
      this.drawerVisible = true;
      switch (type) {
        case "add":
          console.log("新增");
          break;
        case "edit":
          console.log("编辑", value);
          break;
      }
    },
    // 关闭Dialog
    handleClose() {
      this.drawerVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  margin: 16px;
}
::v-deep .el-card__header {
  padding: 10px 20px;
  font-weight: bold;
}
.deptName {
  padding: 12px 16px;
  font-size: 13px;
}
.theme {
  padding: 4px 16px;
  font-size: 13px;
}
.faceImage {
  padding: 16px;
  .img {
    position: relative;
    // width: 100%;
    width: 100%;
    height: 160px;
    &:hover {
      .modal {
        background-color: rgba(0, 0, 0, 0.3);
        i {
          display: inline;
        }
        .view-text {
          display: block;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    .modal {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all ease 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      i {
        font-size: 28px;
        color: #fff;
        display: none;
        transition: all ease 0.3s;
      }
      .view-text {
        color: #fff;
        font-size: 12px;
        display: none;
        transition: all ease 0.3s;
      }
      // display: none;
    }
  }
}
::v-deep .el-image{
  .image-slot{
    width: 100%;
    height: 100%;
  }
}
.buttons {
  .el-button {
    border-radius: 0;
  }
}
</style>