<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10 mb8">
        <el-form :inline="true" :model="queryForm" @keyup.enter="getDataList" ref="queryRef">
          <el-form-item :label="$t('templateManage.templateName')">
            <el-input v-model="queryForm.templateName" :placeholder="$t('templateManage.inputPlaceholder')" style="max-width:240px" />
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-table :data="state.dataList" style="width:100%" v-loading="state.loading" border row-key="id">
        <el-table-column type="index" label="#" width="60" />
        <el-table-column prop="templateName" :label="$t('templateManage.table.templateName')" />
        <el-table-column prop="templateType" :label="$t('templateManage.table.templateType')">
          <template #default="{ row }">
            {{ getTypeName(row.templateType) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('templateManage.table.createTime')" width="180" />
        <el-table-column :label="$t('common.action')" width="160">
          <template #default="{ row }">
            <el-button text size="small" type="primary" icon="view">{{ $t('templateManage.table.viewBtn') }}</el-button>
            <el-button text size="small" type="primary" icon="delete" @click="handleDelete(row.id)">{{ $t('common.delBtn') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { fetchTemplatesPage, deleteTemplate } from '/@/api/config/templateManage';
import { flowNameOptions } from '/@/hooks/enums';

const { t } = useI18n();
const message = useMessage();

const getTypeName = (templateType: number) => {
  const option = flowNameOptions.find(item => item.value === templateType)
  if (option) {
    return t(`flowTypes.${option.label}`)
  }
  return templateType
}

// query form
const queryForm = reactive({ templateName: '' });

const state: BasicTableProps = reactive({
  queryForm,
  pageList: fetchTemplatesPage,
});

const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);

const handleDelete = async (ids: string) => {
  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await deleteTemplate(ids);
    message.success(t('common.delSuccessText'));
    getDataList();
  } catch (err: any) {
    message.error(err?.msg || err?.message || t('common.operateFail'));
  }
};

const resetQuery = () => {
  queryForm.templateName = '';
  getDataList();
};

// initial fetch
getDataList();
</script>

<style scoped>
.layout-container .layout-padding-view {
  overflow: auto;
}
</style>