<template>
  <div>
    <Drawer width="46" title="图片集合" :closable="false" v-model="drawer">
      <Button
        @click="
          $refs['addImg'].setForm(
            ['map_point_id', 'activity_list_id'],
            [select.filter[0].value, 7]
          ),
            $refs['addImg'].setType('add'),
            $refs['addImg'].show()
        "
        >新增</Button
      >

      <xy-table
        style="margin-top: 20px"
        :total="total"
        :list="list"
        :table-item="talbe"
        :is-page="false"
        @pageSizeChange="pageSizeChange"
        @pageIndexChange="pageChange"
        @delete="row => destroy({
          table_name: 'map_point_contents',
          id: row.id,
          activity_list_id: 7
        }).then(_ => getList())"
        @editor="
          (row) => {
            $refs['addImg'].setForm(
              ['map_point_id', 'activity_list_id'],
              [select.filter[0].value, 7]
            );
            $refs['addImg'].setId(row.id);
            $refs['addImg'].setType('editor');
            $refs['addImg'].show();
          }
        "
      >
      </xy-table>
    </Drawer>

    <add-img ref="addImg" @refresh="getList"></add-img>
  </div>
</template>

<script>
import { index, destroy } from "@/api/index";

import addImg from "./addImg.vue";
export default {
  components: {
    addImg,
  },
  data() {
    return {
      drawer: false,
      select: {
        page: 1,
        page_size: 999,
        activity_list_id: 7,
        table_name: "map_point_images",
        filter: [
          {
            key: "map_point_id",
            value: 7,
            op: "eq",
          },
        ],
      },
      total: 0,
      list: [],
      talbe: [
        {
          prop: "name",
          label: "标题",
          minWidth: 220,
          align: "left",
        },
        {
          prop: "created_at",
          label: "创建信息",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          prop: "updated_at",
          label: "更新时间",
          align: "left",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
    };
  },
  methods: {
    destroy,
    show() {
      this.drawer = true;
    },
    hidden() {
      this.drawer = false;
    },
    setMapPointId(value) {
      this.select.filter[0].value = value;
    },

    async getList() {
      const res = await index(this.select);
      this.total = res.total;
      this.list = res.data;
    },

    pageSizeChange(e) {
      this.select.page_size = e;
      this.select.page = 1;
      this.getList();
    },
    pageChange(e) {
      this.select.page = e
      this.getList()
    },
  },
  computed: {},
  watch: {
    drawer(newVal) {
      if (newVal) {
        this.getList();
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
