<template>
  <div class="page">
    <BaseTableHeader class="mb-10" title="我的品牌" :show-search="false">
      <template #topBarSlot>
        <router-link to="/brand/add">
          <a-button type="primary">新增品牌</a-button>
        </router-link>
      </template>
    </BaseTableHeader>
    <div class="px-25 py-30 bg-white rounded-4">
      <a-table
        class="theme-table"
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="list"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
      >
        <template #bodyCell="{ column, value, record }">
          <template v-if="column.dataIndex === 'billNo'">
            <router-link class="c-primary underline" :to="{ path: '/brand/detail', query: { id: record.id } }">{{ value }}</router-link>
          </template>
          <template v-if="column.dataIndex === 'brandLogo'">
            <a-image :src="value" width="52px" height="52px" class="object-contain" fallback=""> </a-image>
          </template>
          <template v-if="column.dataIndex === 'brandState'">
            <a-switch
              :checked="value"
              @click="onToggleStatus(record)"
              :disabled="record.checkState !== 'A055_B'"
              checked-children="开"
              checkedValue="A053_A"
              un-checked-children="关"
              unCheckedValue="A053_B"
            />
          </template>
          <template v-if="column.dataIndex === 'checkState'">
            <!-- {{ enumsMap(value, commonStore.dict[DICT_CODE.BRAND_CHECK_STATUS]) }} -->
            <span v-if="record.checkState === 'A055_A'" class="c-warning">{{ record.checkState_dictText }}</span>
            <span v-if="record.checkState === 'A055_B'" class="c-success">{{ record.checkState_dictText }}</span>
            <span v-if="record.checkState === 'A055_C'" class="c-danger">{{ record.checkState_dictText }}</span>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <router-link class="c-primary" :to="{ path: '/brand/edit', query: { id: record.id } }">编辑</router-link>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message, Modal } from 'ant-design-vue'
import { computed } from 'vue'
import type { TableProps } from 'ant-design-vue'
// import type { ProductSearchParams } from 'Types/api'
import { apiBrandList, apiBrandDelete, apiToggleStatus } from '@/api/brand'
import { usePagination } from 'vue-request'

import useCommonStore from '@/store/modules/common'
import { DICT_CODE } from '@/utils/const'
import { enumsMap } from '@/utils'
import { DEFAULT_IMG } from '@/utils/const'
const commonStore = useCommonStore()
commonStore.getDict(DICT_CODE.BRAND_CHECK_STATUS)
commonStore.getDict(DICT_CODE.BRAND_STATUS)

const columns = [
  {
    title: '品牌ID',
    dataIndex: 'billNo',
  },
  {
    title: '品牌名称',
    dataIndex: 'brandName',
  },
  {
    title: '品牌LOGO',
    dataIndex: 'brandLogo',
  },
  {
    title: '品牌分类',
    dataIndex: 'brandType_dictText',
  },
  {
    title: '关联商品数',
    dataIndex: 'customCount',
  },
  {
    title: '启用状态',
    dataIndex: 'brandState',
  },
  {
    title: '审核状态',
    dataIndex: 'checkState',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 80,
  },
]

const { data, run, loading, current, pageSize } = usePagination(apiBrandList, {
  // defaultParams: [searchParams],
  pagination: {
    currentKey: 'pageNo',
    pageSizeKey: 'pageSize',
  },
})

const pagination = computed(() => ({
  total: data.value?.data.result.total || 0,
  current: current.value,
  pageSize: pageSize.value,
  showSizeChanger: true,
}))

const list = computed(() => {
  return data.value?.data.result.records || []
})

const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number }, filters: any, sorter: any) => {
  run({
    pageSize: pag.pageSize,
    pageNo: pag.current,
    // ...searchParams,
    // sortField: sorter.field,
    // sortOrder: sorter.order,
    // ...filters,
  })
}

const onDelete = (id: number) => {
  apiProductDelete({ id }).then(() => {
    message.success('删除成功')
  })
}
const onToggleStatus = (item) => {
  console.log(item.brandState)

  const ON = 'A053_A'
  const OFF = 'A053_B'

  const doToggle = () => {
    apiToggleStatus({ id: item.id, state: item.brandState === ON ? OFF : ON }).then((res) => {
      console.log('---- 启用禁用 res ----', res)
      if (res.data.code === 200) {
        if (item.state === ON) {
          message.success('启用成功')
        } else {
          message.success('已禁用')
        }
        reload()
      }
    })
  }
  console.log(item)
  if (item.brandState === ON) {
    Modal.confirm({
      title: '提示',
      centered: true, 
      // icon: createVNode(ExclamationCircleOutlined),
      content: '禁用品牌后品牌下所有商品将在平台不可见，确定禁用该品牌？',
      onOk() {
        doToggle()
      },
    })
  } else {
    doToggle()
  }
}

const search = () => {
  run({
    page: 1,
    size: pagination.value.pageSize,
  })
}

const reload = () => {
  run({
    page: current.value,
    size: pagination.value.pageSize,
  })
}
</script>
<style scoped></style>

