﻿<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { FormInstance } from "ant-design-vue";
import { useAuthority } from "@/utils/Authority";
import AppIcon from "@/core/components/AppIcon.vue";
import Info from "./Info.vue";
import Tools from "@/core/utils/Tools";
import PageContainerGame from "@/core/components/PageContainerGame.vue";
import TableCurdV1 from "@/core/components/curd/TableCurdV1.vue";
import T_App_ConfigService from "@/services/apps/Ext/T_App_ConfigService";

defineOptions({ name: "t_App_ConfigIndex" });
var columns = [
  {
    dataIndex: "name",
    title: "配置名称",
    show: true,
    width: 80,
    sorter: true,
  },
  {
    dataIndex: "configType",
    title: "配置类型",
    show: true,
    width: 80,
    sorter: true,
  },

  {
    dataIndex: "actionId",
    title: "配置值类型",
    show: false,
    width: 120,
    sorter: true,
  },

  {
    dataIndex: "configValue",
    title: "配置值",
    show: true,
    width: 500,
    sorter: true,
  },

  {
    dataIndex: "isEnabled",
    title: "是否启用",
    show: true,
    width: 80,
    sorter: true,
  },

  {
    dataIndex: "desc",
    title: "备注",
    show: true,
    width: 40,
    sorter: true,
  },

  {
    dataIndex: "channelId",
    title: "渠道号",
    show: true,
    width: 60,
    sorter: true,
  },

  {
    dataIndex: "plat",
    title: "平台类型",
    show: true,
    width: 80,
    sorter: true,
  },

  {
    dataIndex: "appVersion",
    title: "app版本号",
    show: true,
    width: 120,
    sorter: true,
  },

  {
    dataIndex: "continent",
    title: "州",
    show: false,
    width: 20,
    sorter: true,
  },

  {
    dataIndex: "countryName",
    title: "国家",
    show: false,
    width: 40,
    sorter: true,
  },

  {
    dataIndex: "creatTime",
    title: "创建时间",
    show: true,
    width: 80,
    sorter: true,
  },

  {
    dataIndex: "updateTime",
    title: "修改时间",
    show: true,
    width: 80,
    sorter: true,
  },
];
const state = reactive({
  search: {
    state: true,
    vm: {
      configtype: undefined,
      name: undefined,
    },
    sort: [] as any[],
  },
  loading: false,
  page: 1,
  size: 50,
  total: 100,
  columns: [] as any,
  data: [] as any,
});

//权限
const power = useAuthority();
//表格
const refTableCurd = ref<InstanceType<typeof TableCurdV1>>();
//表单操作对象
const refInfo = ref<InstanceType<typeof Info>>();
//检索表单
const refSearchForm = ref<FormInstance>();

/**
 * 初始化
 */
onMounted(() => {
  findList();
});

/**
 *获取数据
 */
async function findList() {
  try {
    state.loading = true;
    const result = await T_App_ConfigService.findList(
      state.page,
      state.size,
      state.search.vm,
      state.search.sort
    );
    state.loading = false;
    if (result.code != 200) return;
    state.page = result.data.page;
    state.size = result.data.size;
    state.total = result.data.total;
    state.columns = columns; // result.data.columns;
    state.data = result.data.dataSource;
    // state.visible = false;
  } catch (error) {
    state.loading = false;
  }
}

/**
 * 删除数据
 * @param id
 */
async function deleteList(id?: string) {
  let ids: string[] = [];
  if (id) {
    ids.push(id);
  } else {
    ids = refTableCurd.value?.getSelectedRowKeys() ?? [];
  }

  if (ids.length == 0) return Tools.message.error("请选择要删除的行!");

  try {
    state.loading = true;
    const result = await T_App_ConfigService.deleteList(ids);
    state.loading = false;
    if (result.code != 200) return;
    Tools.message.success("删除成功!");
    findList();
  } catch (error) {
    state.loading = false;
  }
}

/**
 * 导出excel
 */
function exportExcel() {
  T_App_ConfigService.exportExcel(state.search.vm, state.search.sort);
}
</script>

<template>
  <PageContainerGame>
    <TableCurdV1
      ref="refTableCurd"
      :config="state"
      @change="
        (changeTable) => {
          state.page = changeTable.pagination.current ?? 1;
          state.size = changeTable.pagination.pageSize ?? state.size;
          state.search.sort =
            changeTable.sorter instanceof Array
              ? [...changeTable.sorter]
              : [changeTable.sorter];
          findList();
        }
      "
      @show-size-change="
        ({ current, size }) => {
          state.page = current == 0 ? 1 : current;
          state.size = size;
          findList();
        }
      "
    >
      <!-- search -->
      <template #search>
        <a-form
          ref="refSearchForm"
          :model="state.search.vm"
          v-if="power.search"
        >
          <a-row :gutter="[16, 0]">
            <a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
              <a-form-item class="mb-0" name="name" label="配置类型">
                <h-common-select
                  code="appconfigManage_type"
                  v-model="state.search.vm.configtype"
                  :ShowAll="true"
                  :defaultValue="0"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
              <a-form-item class="mb-0" name="name" label="配置名称">
                <a-input
                  v-model:value="state.search.vm.name"
                  placeholder="配置名称"
                />
              </a-form-item>
            </a-col>

            <!--button-->
            <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="text-right">
              <a-space :size="8">
                <a-button
                  @click="
                    state.page = 1;
                    refSearchForm?.resetFields();
                    findList();
                  "
                >
                  重置
                </a-button>
                <a-button
                  type="primary"
                  @click="
                    state.page = 1;
                    findList();
                  "
                >
                  查询
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </template>
      <!-- toolbar-left -->
      <template #toolbar-left>
        <!--  <a-button @click="state.search.state = !state.search.state" v-if="power.search">
           <div v-if="state.search.state"><AppIcon name="UpOutlined" />&nbsp;&nbsp;收起</div>
           <div v-else><AppIcon name="DownOutlined" />&nbsp;&nbsp;展开</div>
         </a-button> -->
        <a-button
          type="primary"
          @click="() => refInfo?.open()"
          v-if="power.insert"
        >
          <template #icon>
            <AppIcon name="PlusOutlined" />
          </template>
          新建
        </a-button>
        <a-popconfirm
          title="您确定要删除?"
          @confirm="deleteList()"
          okText="确定"
          cancelText="取消"
          v-if="power.delete"
        >
          <a-button type="primary" danger>
            <template #icon>
              <AppIcon name="DeleteOutlined" />
            </template>
            批量删除
          </a-button>
        </a-popconfirm>
      </template>
      <!-- toolbar-right -->
      <template #toolbar-right>
        <a-dropdown>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="exportExcel()"
                >导出 Excel</a-menu-item
              >
            </a-menu>
          </template>
          <a-button> 更多 <AppIcon name="ellipsis-outlined" /> </a-button>
        </a-dropdown>
      </template>
      <!-- table-col -->
      <template #table-col>
        <template
          v-for="item,index in state.columns.filter((w:any) => w.dataIndex !== 'id' && w.show)"
          :key="item.dataIndex"
        >
          <a-table-column
            :title="item.title"
            :width="item.width"
            :data-index="item.dataIndex"
            :sorter="item.sort ? { multiple: index + 1 } : false"
          >
            <template
              #default="{ record }"
              v-if="item.dataIndex === 'configValue'"
            >
              <div
                v-html="record.configValue"
                style="max-height: 200px; overflow: auto"
              ></div>
            </template>
          </a-table-column>
        </template>
        <!-- 操作 -->
        <a-table-column
          title="操作"
          data-index="id"
          :width="200"
          fixed="right"
          v-if="power.update || power.delete"
        >
          <template #default="{ record }">
            <a-button
              type="link"
              @click="() => refInfo?.open(record.id)"
              v-if="power.update"
              >编辑</a-button
            >
            <a-divider type="vertical" />
            <a-popconfirm
              title="您确定要删除?"
              @confirm="deleteList(record.id)"
              okText="确定"
              cancelText="取消"
              v-if="power.delete"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </TableCurdV1>
    <!-- Info -->
    <Info ref="refInfo" :onSuccess="() => findList()" />
  </PageContainerGame>
</template>
