<template>
  <div v-if="!showCreate">
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="标题">
          <el-input v-model="query.title" clearable />
        </el-form-item>
        <el-form-item label="通知类型">
          <el-select v-model="query.notice_type_id" filterable remote clearable :remote-method="remoteNoticeMethod">
            <el-option v-for="item in noticesTypes" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <div class="pt-5 pl-2">
        <Add @click="openForm(null)" v-action="'system.Notices.addNotice'" />
      </div>
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="type_txt" label="类型" />
        <el-table-column prop="notice_type_txt" label="通知类型" />
        <el-table-column label="通知人群">
          <template #default="scope">
            <el-tag type="success" class="m-1" v-for="item in scope.row.notice_obj" :key="item.id" size="default"
              effect="dark">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="发布时间" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <Update @click="openForm(scope.row)" v-action="'system.Notices.edit'" />
            <Destroy @click="destroy(delapi, scope.row.id)" v-action="'system.Notices.delete'" />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
  </div>
  <Create v-else @close="cancel(search)" :primary="primary" :api="editapi" />
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import Create from './form/create.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { useDestroy } from '@/hook/curd/useDestroy';
import { noticesTypesList } from '@/api/notice/index';

const api = 'system/notices/notice/list';
const delapi = 'system/notices/notice/del';
const noticesTypes = ref([]);
let editapi = 'system/notices/notice/edit';
let showCreate = ref(false)

const { data, query, search, reset, loading } = useGetList(api, true);
const { destroy, deleted } = useDestroy('post');
const tableData = computed(() => data.value?.data);
const primary = ref({})


// 初始化通知人群
const initNoticeOtion = (params: object) => {
  noticesTypesList(params).then(res => {
    noticesTypes.value = res.data
  })
}
const remoteNoticeMethod = (query: string) => {
  if (query) {
    initNoticeOtion({ name: query })
  } else {
    initNoticeOtion({})
  }
}
const openForm = (data: any) => {
  showCreate.value = true
  if (data) {
    primary.value = data.id
  } else {
    primary.value = data
  }
};
const cancel = () => {
  showCreate.value = false
  search()
};
onMounted(() => {
  initNoticeOtion({})
  search();
  deleted(search);
});
</script>
