<template>
  <div class="container">
    <Breadcrumb :items="['商户管理', '商户设置']" />
    <a-card class="general-card" title="商户设置">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="merchantName" label="商户名称">
                  <a-input
                    v-model="formModel.merchantName"
                    placeholder="请输入商户名"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="loginAccount" label="商户编号">
                  <a-input
                    v-model="formModel.merchantUid"
                    placeholder="请输入商户编号"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 42px" direction="vertical" />
        <a-col flex="172px" style="text-align: right">
          <a-space direction="horizontal" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              搜索
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="showAddModel">
              <template #icon>
                <icon-plus />
              </template>
              添加商户
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #status="{ record }">
          <a-switch
            v-model="record.status"
            checked-value="active"
            size="small"
            unchecked-value="unactive"
            @change="value => changeStatus(record, value)"
          >
            <template #checked>激活</template>
            <template #unchecked>冻结</template>
          </a-switch>
        </template>
        <template #operations="{ record }">
          <a-button size="small" @click="showDeploy(record.merchantUid)">
            查看通道
          </a-button>
        </template>
      </a-table>
    </a-card>
    <add-modal v-model:visible="state.addModalVisible" />
    <deploy-modal
      v-model:visible="state.deployModalVisible"
      :uid="state.selectedUid"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  MerchantConfigParams,
  MerchantConfigResRecord,
  queryMerchantConfigList,
  switchMerchantStatus
} from '@/api/merchant-list';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { reactive, ref, watch } from 'vue';
import AddModal from './components/add-modal.vue';
import DeployModal from './components/deploy-modal.vue';
import { TableColumnData } from '@arco-design/web-vue';

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index'
  },
  {
    title: '登录账号',
    dataIndex: 'loginAccount'
  },
  {
    title: '商户名称',
    dataIndex: 'merchantName'
  },
  {
    title: '商户ID',
    dataIndex: 'merchantUid',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '商户Key',
    dataIndex: 'merchantKey',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '商户秘钥',
    dataIndex: 'merchantSecret',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '注释',
    dataIndex: 'remark',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations'
  }
];
const generateFormModel = () => {
  return {
    merchantName: '',
    loginAccount: '',
    merchantUid: ''
  };
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<MerchantConfigResRecord[]>([]);
const formModel = ref(generateFormModel());
const state = reactive({
  addModalVisible: false,
  deployModalVisible: false,
  selectedUid: ''
});

const fetchData = async (
  params: MerchantConfigParams = { current: 1, pageSize: 50 }
) => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await queryMerchantConfigList(params);
    renderData.value = list;
    pagination.current = params.current;
    pagination.total = total;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

const onPageChange = (current: number) => {
  fetchData({ ...basePagination, current });
};
const search = () => {
  fetchData({
    ...basePagination,
    ...formModel.value
  } as unknown as MerchantConfigParams);
};
const reset = () => {
  formModel.value = generateFormModel();
};
const showAddModel = () => {
  state.addModalVisible = true;
};
const changeStatus = async (
  record: MerchantConfigResRecord,
  status: string | number | boolean
) => {
  try {
    await switchMerchantStatus({
      merchantUid: record.merchantUid,
      status: status as string
    });
    search();
  } finally {
    // /
  }
};
watch(
  () => state.addModalVisible,
  val => {
    if (!val) {
      search();
    }
  }
);
const showDeploy = (uid: string) => {
  state.deployModalVisible = true;
  state.selectedUid = uid;
};
fetchData();
</script>
