<template>
  <div class="">
    <div class="m-10 bg-w p-20 br-10">
      <div class="f-sa-s">
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">总量</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.all }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">月新增</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.month }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">周新增</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.week }}
          </div>
        </div>
      </div>
    </div>

    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <div class="m-10 bg-w p-20 br-10">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
        >新增</el-button
      >
      <base-table
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage, getCount, delItem, sendCode } from '@/api/scene';

export default {
  name: 'SceneList',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getPage, // 在下方data再声明一个 fetchList: iGetList 同等效果
      internalFilterObj: {
        isDel: false,
        auditStatus: 1
      }
    })
  ],

  data() {
    return {
      statistics: {},
      columns: [
        {
          key: 'name',
          name: '机构名称',
          width: this.$col.b
        },
        {
          key: 'logo',
          name: 'Logo',
          width: this.$col.b,
          render: (h, { row }) =>
            h('img', {
              style: {
                width: '120px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.logo
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.logo }]
                  })
              }
            })
        },
        {
          key: 'region',
          name: '所在地区',
          minWidth: this.$col.auto(200),
          render: (h, { row }) =>
            h('span', `${row.province}/${row.city}/${row.area}`)
        },
        {
          key: 'type',
          name: '机构类型',
          width: this.$col.b
        },
        {
          key: 'realName',
          name: '申请人',
          width: this.$col.m
        },
        {
          key: 'phonenumber',
          name: '办公号码',
          width: this.$col.m
        },
        {
          key: 'isShow',
          name: '状态',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => (val ? 'success' : 'info'),
          tagName: row => (row.isShow ? '显示' : '隐藏')
        },
        {
          key: 'action',
          name: '操作',
          width: '180',
          render: (h, { row }) => {
            const action = [];
            action.push(
              h(
                'el-button',
                {
                  props: {
                    type: 'text'
                  },
                  on: {
                    click: () =>
                      this.$SceneItemModal({
                        id: row.id
                      })
                  }
                },
                '编辑'
              )
            );
            action.push(
              h(
                'el-button',
                {
                  props: {
                    type: 'text'
                  },
                  on: {
                    click: () =>
                      this.handleSend({
                        id: row.id
                      })
                  }
                },
                '发送邮件'
              )
            );
            action.push(
              h(
                'BaseBtn',
                {
                  props: {
                    popip: true,
                    txt: '删除',
                    type: 'text'
                  },
                  class: 'ml-10',
                  on: {
                    ok: () => this.handleDelItem(row)
                  }
                },
                '删除'
              )
            );

            return h('div', action);
          }
        }
      ]
    };
  },

  created() {
    this.$g_on('scene_reload', this.reload);
  },

  beforeDestroy() {
    this.$g_off('scene_reload', this.reload);
  },

  methods: {
    handleAdd() {
      this.$SceneItemModal();
    },
    async handleSend(item) {
      const { success, msg } = await sendCode({
        id: item.id
      });
      if (success) {
        this.$success('发送成功！');
      }
    },
    async handleDelItem(item) {
      const { success, msg } = await delItem({
        id: item.id
      });
      if (success) {
        this.$success('删除成功！');
        this.$g_emit('scene_reload');
      }
    },
    async pageChange(page) {
      this.pagination.page = page;
      const inParams = {
        ...this.filter,
        ...this.internalFilterObj,
        limit: this.pagination.pageSize,
        start: this.pagination.page
      };

      const { data, msg } = await this.apiList(inParams);

      const res2 = await getCount(inParams);
      this.statistics = res2.data;
      if ('data' in data) {
        const items = data.data;
        if (items.length === 0 && this.pagination.page > 1) {
          this.pageChange(1);
        } else {
          this.items = items;
          this.pagination.total = data.total;
        }
        this.loadCallBack(data);
      }
    }
  }
};
</script>

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