<template>
  <div v-if="!showCreate">
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="模板名称">
          <el-input v-model="query.name" clearable />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <div class="pt-5 pl-2">
        <Add @click="openForm(null)" v-action="'channel.payTemplate.store'" />
      </div>
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column label="状态" v-action="'channel.payTemplate.updateStatus'">
          <template #default="scope">
            <el-switch v-model="scope.row.status" @change="statusChange($event, scope.row)" :active-value="1"
              :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm(scope.row)"
              v-action="'channel.payTemplate.update'">编辑</el-button>
          </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 { channelPaytemplateUpdateStatus } from '@/api/charge/index'

const api = 'channel/paytemplate/list';
let editapi = 'system/notices/notice/edit';
let showCreate = ref(false)

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

const openForm = (data: any) => {
  showCreate.value = true
  if (data) {
    primary.value = data.id
  } else {
    primary.value = data
  }
};
const cancel = () => {
  showCreate.value = false
  search()
};
const statusChange = (e, row) => {
  channelPaytemplateUpdateStatus(row.id, { status: e }).then(res => {
    ElMessage.success(res.message)
    search()
  })
};
onMounted(() => {
  search();
});
</script>
