<!-- eslint-disable vue/no-v-html -->
<template>
  <CommonPage show-footer :title="$route.title">
    <!-- {{ queryParams }} -->
    <n-grid class="mb-10" x-gap="12">
      <n-gi span="12" mt-10 flex items-center>
        <span w-100>筛选条件:</span>
        <n-input-group>
          <n-select
            v-model:value="queryParams.selectKey"
            :style="{ width: '25%' }"
            :options="selectOptions"
            placeholder="请选择"
          />
          <n-input v-model:value="queryParams.word" :style="{ width: '50%' }" />
        </n-input-group>
      </n-gi>
      <n-gi :span="24" mt-10>
        <div>
          <span>审核状态：</span>
          <n-radio-group v-model:value="queryParams.status">
            <n-radio-button
              v-for="song in [
                {
                  label: '已审核',
                  value: 1,
                },
                {
                  label: '拒绝',
                  value: 2,
                },
                {
                  label: '待审核',
                  value: 3,
                },
              ]"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-gi>
      <n-gi :span="24" mt-10>
        <div>
          <span>商品类型：</span>
          <n-radio-group v-model:value="queryParams.type">
            <n-radio-button
              v-for="song in [
                {
                  label: '普通商品',
                  value: 0,
                },
                {
                  label: '活动商品',
                  value: 1,
                },
                {
                  label: '积分商品',
                  value: 2,
                },
                {
                  label: '摇球商品',
                  value: 3,
                },
              ]"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-gi>
      <n-gi span="24" mt-10 flex items-center>
        <n-button type="primary" @click="getList">查询</n-button>
        <n-button ml-10 @click="clear">重置</n-button>
      </n-gi>
      <n-gi span="24" mt-10 flex items-center>
        <n-button strong secondary type="primary" @click="changeGoodsType(0)">
          设为普通商品
        </n-button>
        <n-button strong secondary ml-10 type="warning" @click="changeGoodsType(1)">
          设为活动商品
        </n-button>
        <n-button strong secondary ml-10 type="info" @click="changeGoodsType(2)">
          设为兑换商品
        </n-button>
        <n-button strong secondary ml-10 type="error" @click="changeGoodsType(3)">
          设为摇球机活动商品
        </n-button>
      </n-gi>
    </n-grid>

    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      :row-key="(row) => row.gid"
      :checked-row-keys="queryParams.checkedRowKeysRef"
      remote
      @update:checked-row-keys="handleCheck"
    />
    <!-- 拒绝 -->
    <n-modal v-model:show="isNoteModel">
      <n-card
        style="width: 500px"
        title="拒绝信息"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-input v-model:value="notesVal" type="textarea" placeholder="请输入拒绝理由...." />
        <div m-auto p-10>
          <n-button type="primary" @click="veeify">确定</n-button>
          <n-button ml-10 @click="clear">取消</n-button>
        </div>
      </n-card>
    </n-modal>
    <!-- 豆子设置 -->
    <n-modal v-model:show="isDzModel">
      <n-card
        style="width: 500px"
        title="赠送/比例"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-form ref="formRef" :model="nowRow" :rules="rules" label-placement="left">
          <n-grid :cols="24">
            <n-form-item-gi :span="20" label="商品赠送豆子" path="pulse">
              <n-input-number
                v-model:value="nowRow.pulse"
                clearable
                placeholder="请输入赠送豆子数量...."
                :min="0"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="20" label="商品赠送积分" path="integral">
              <n-input-number
                v-model:value="nowRow.integral"
                clearable
                placeholder="请输入赠送积分数量...."
                :min="0"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="18" label="商品分佣类型" path="commission_type">
              <n-select
                v-model:value="nowRow.commission_type"
                placeholder="请选择分佣类型"
                clearable
                :options="[
                  {
                    label: '百分比',
                    value: 1,
                  },
                  {
                    label: '数值',
                    value: 2,
                  },
                ]"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="20" label="商品分佣比例" path="commission">
              <n-input-number
                v-model:value="nowRow.commission"
                clearable
                placeholder="请输入分佣比例...."
                :min="0"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="20" label="豆子过期时间" path="expiration">
              <n-input-number
                v-model:value="nowRow.expiration"
                clearable
                placeholder="请输入豆子过期时间"
                :min="0"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12">
              <div m-auto p-10>
                <n-button type="primary" @click="veeify">确定</n-button>
                <n-button ml-10 @click="clear">取消</n-button>
              </div>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-card>
    </n-modal>
    <!-- 商品详情 -->
    <n-drawer v-model:show="showDrawer" :width="502">
      <n-drawer-content title="商品详情" closable>
        <n-space vertical>
          <div>
            <span>商品分类：</span>
            <span>{{ goodInfo.class_name }}</span>
          </div>
          <div>
            <span>商品名称：</span>
            <span>{{ goodInfo.name }}</span>
          </div>
          <div flex items-center>
            <span>封面：</span>
            <n-image width="100" :src="goodInfo.cover" />
          </div>
          <div flex items-center>
            <span>轮播图：</span>
            <div w-400 overflow-auto>
              <n-image
                v-for="(url, index) in goodInfo.rotation?.split(',')"
                :key="index"
                width="100"
                :src="url"
              />
            </div>
          </div>
          <div>
            <span>商品价格：</span>
            <span>{{ goodInfo.number }}</span>
          </div>
          <div>
            <span>市场价格：</span>
            <span>{{ goodInfo.market_num }}</span>
          </div>
          <div>
            <span>商品库存：</span>
            <span>{{ goodInfo.stock }}</span>
          </div>
          <div>
            <span>商品简介：</span>
            <span>{{ goodInfo.profile }}</span>
          </div>
          <div>
            <span>商品详情：</span>
            <div v-html="goodInfo.details"></div>
          </div>
        </n-space>
      </n-drawer-content>
    </n-drawer>
  </CommonPage>
</template>

<script setup>
import api from './api'
import { NButton, NImage, NSpace, NEllipsis, NTag } from 'naive-ui'
import { h, withDirectives, resolveDirective } from 'vue'

const vPerms = resolveDirective('perms')

const loading = ref(false)

const isNoteModel = ref(false)

const isDzModel = ref(false)

const goodInfo = ref({})

const showDrawer = ref(false)

const notesVal = ref('')

const formRef = ref(null)

const selectOptions = ref([
  {
    label: '商品名称',
    value: 0,
  },
  {
    label: '商家名称',
    value: 1,
  },
])

const queryParams = ref({
  selectKey: 0,
  word: '',
  type: '',
  status: 0,
  checkedRowKeysRef: [],
})

const handleCheck = (row) => {
  queryParams.value.checkedRowKeysRef = row
}

const changeGoodsType = async (type) => {
  if (queryParams.value.checkedRowKeysRef.length === 0) return $message.info('没有选中商品')
  await api.updateType({
    type: type,
    gid: queryParams.value.checkedRowKeysRef,
  })
  getList()
  queryParams.value.checkedRowKeysRef = []
}

const rules = {
  pulse: {
    required: true,
    type: 'number',
    message: '请输入赠送豆子数量',
    trigger: 'blur',
  },
  integral: {
    required: true,
    type: 'number',
    message: '请输入赠送积分数量',
    trigger: 'blur',
  },
  commission_type: {
    required: true,
    type: 'number',
    message: '请选择分佣类型',
    trigger: 'change',
  },
  commission: {
    required: true,
    type: 'number',
    message: '请输入分佣比例',
    trigger: 'blur',
  },
}

const nowRow = ref({})
const nowKey = ref(null)

const columns = ref([
  {
    type: 'selection',
  },
  {
    title: '商品名称',
    slot: 'name',
    align: 'center',
    render: (row) => {
      return h(
        NEllipsis,
        {
          style: 'max-width: 200px',
        },
        {
          default: () => row.name,
        }
      )
    },
  },
  {
    title: '商品封面',
    slot: 'cover',
    align: 'center',
    render(row) {
      return h(NImage, {
        src: row.cover,
        width: '30',
      })
    },
  },
  {
    title: '商品分类',
    slot: 'Classify',
    align: 'center',
    render(row) {
      return h(
        'div',
        {},
        {
          default: () => row.Classify.name,
        }
      )
    },
  },
  {
    title: '商品类型',
    slot: 'type',
    align: 'center',
    render(row) {
      const obj = {
        0: {
          type: 'success',
          text: '普通商品',
        },
        1: {
          type: 'warning',
          text: '活动商品',
        },
        2: {
          type: 'info',
          text: '兑换商品',
        },
        3: {
          type: 'error',
          text: '摇球机活动商品',
        },
      }
      return h(
        NTag,
        {
          type: obj[row.type].type,
        },
        {
          default: () => obj[row.type].text,
        }
      )
    },
  },
  {
    title: '商品价格(元)',
    key: 'number',
    align: 'center',
  },
  {
    title: '商品库存',
    key: 'stock',
    align: 'center',
  },
  {
    title: '赠送豆子',
    key: 'pulse',
    align: 'center',
  },
  {
    title: '赠送积分',
    key: 'integral',
    align: 'center',
  },
  {
    title: '分佣类型',
    slot: 'commission_type',
    align: 'center',
    render(row) {
      return row.commission_type === 1 ? '百分比' : '数值'
    },
  },
  {
    title: '分佣比例',
    key: 'commission',
    align: 'center',
  },
  {
    title: '商品状态',
    slot: 'status',
    align: 'center',
    render(row) {
      return row.status === 3 ? '待审核' : row.status === 1 ? '已审核' : '已拒绝'
    },
  },
  {
    title: '备注',
    key: 'notes',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'action',
    align: 'center',
    render(row) {
      let el = []
      if (row.status === 3) {
        el = [
          h(
            NSpace,
            {
              justify: 'center',
            },
            {
              default: () => [
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'primary',
                      text: true,
                      onClick: () => {
                        nowKey.value = 1
                        nowRow.value = { ...row }
                        veeify()
                      },
                    },
                    () => '审核通过'
                  ),
                  [[vPerms, ['/admin/goods/process']]]
                ),
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'error',
                      text: true,
                      onClick: () => {
                        nowKey.value = 2
                        nowRow.value = { ...row }
                        isNoteModel.value = true
                      },
                    },
                    () => '审核拒绝'
                  ),
                  [[vPerms, ['/admin/goods/process']]]
                ),
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'warning',
                      text: true,
                      onClick: () => {
                        nowKey.value = 3
                        goodInfo.value = { ...row }
                        showDrawer.value = true
                      },
                    },
                    () => '商品详情'
                  ),
                  [[vPerms, ['/admin/goods/process']]]
                ),
              ],
            }
          ),
        ]
      } else {
        el = [
          withDirectives(
            h(
              NButton,
              {
                type: 'info',
                text: true,
                onClick: () => {
                  nowRow.value = { ...row }
                  nowKey.value = 3
                  isDzModel.value = true
                },
              },
              {
                default: () => '赠送/比例',
              }
            ),
            [[vPerms, ['/admin/goods/process']]]
          ),
        ]
      }

      return el
    },
  },
])

const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
})

const getList = async () => {
  loading.value = true
  try {
    const query_data = {
      status: queryParams.value.status,
      type: queryParams.value.type,
    }

    query_data[queryParams.value.selectKey === 0 ? 'name' : 'store_name'] = queryParams.value.word

    const res = await api.getHotlist({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
      ...query_data,
    })
    data.value = res.data.data.sort((a, b) => b.status - a.status) || []
    pagination.value.itemCount = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const clear = () => {
  isNoteModel.value = false
  isDzModel.value = false
  notesVal.value = ''
  nowRow.value = {}
  queryParams.value = {
    selectKey: 0,
    word: '',
    type: '',
    status: 0,
    checkedRowKeysRef: [],
  }
  getList()
}

const veeify = async () => {
  let data = {}
  if (nowKey.value === 1 || nowKey.value === 2) {
    data = {
      gid: nowRow.value.gid,
      status: nowKey.value,
      notes: notesVal.value,
    }
    await api.getHotStatus(data)
    await getList()
    clear()
  } else {
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        data = {
          ...nowRow.value,
        }
        await api.getHotStatus(data)
        await getList()
        clear()
      }
    })
  }
}
</script>

<style lang="scss" scoped></style>
