<template>
  <CommonPage show-footer :title="$route.title">
    <!-- {{ queryData }} -->
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
          <n-card w-500>
            <n-statistic label="未激活" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.total" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="已激活" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.service" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="未领取" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="已领取" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <span>激活状态：</span>
          <n-radio-group v-model:value="queryData.status">
            <n-radio-button
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <span>领取状态：</span>
          <n-radio-group v-model:value="queryData.status1">
            <n-radio-button
              v-for="song in songs1"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <div w-100>关键字搜索：</div>
          <n-input-group>
            <n-select
              v-model:value="queryData.selectKey"
              :style="{ width: '15%' }"
              :options="selectOptions"
              placeholder="请选择"
            />
            <n-input v-model:value="queryData.word" :style="{ width: '20%' }" />
          </n-input-group>
        </div>
      </n-col>
      <n-col :span="10">
        <div mt-10 flex items-center>
          <span w-100>时间搜索：</span>
          <n-date-picker
            v-model:formatted-value="queryData.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            clearable
          />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <n-button v-perms="['/admin/qrcode/add']" mr-10 type="primary" @click="openModal(1)">
            新增二维码
          </n-button>
          <n-button v-perms="['/admin/qrcode/edit']" mr-10 type="warning" @click="openModal(2)">
            修改二维码
          </n-button>
          <n-button mr-10 type="info" @click="saveCode">下载二维码</n-button>
          <!-- <n-button mr-10 type="primary" @click="openModal(1)">新增二维码</n-button> -->
          <!-- <n-button mr-10 type="warning" @click="openModal(3)">修改二维码</n-button> -->
          <n-button type="primary" @click="getList">搜索</n-button>
          <n-button ml-10 @click="clear">重置</n-button>
        </div>
      </n-col>
    </n-row>
    <n-data-table
      class="mt-5"
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      :row-key="rowKey"
      :checked-row-keys="checkedRowKeysRef"
      remote
      @update:checked-row-keys="handleCheck"
    />
    <n-modal v-model:show="showModal" :auto-focus="false">
      <n-card
        style="width: 600px"
        :title="modelTitle"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
          <n-form-item v-if="modalType === 1" label="新增数量：" path="number">
            <n-input-number v-model:value="formValue.number" :min="1" clearable />
          </n-form-item>
          <n-form-item label="赠送豆子：" path="pulse">
            <n-input-number v-model:value="formValue.pulse" :min="1" clearable />
          </n-form-item>
          <n-form-item label="激活状态：" path="activate_status">
            <n-switch
              v-model:value="formValue.activate_status"
              :checked-value="1"
              :unchecked-value="2"
            />
          </n-form-item>
          <n-form-item>
            <div class="m-auto">
              <n-button
                class="m-auto"
                type="primary"
                attr-type="button"
                @click="handleValidateClick"
              >
                提交
              </n-button>
              <n-button class="ml-10" @click="handleclear">取消</n-button>
            </div>
          </n-form-item>
        </n-form>
      </n-card>
    </n-modal>
  </CommonPage>
</template>

<script setup>
import { NButton } from 'naive-ui'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import api from '../api'
import { ref, resolveDirective, withDirectives } from 'vue'

const vPerms = resolveDirective('perms')

const songs = ref([
  {
    value: 1,
    label: '已激活',
  },
  {
    value: 2,
    label: '未激活',
  },
])

const songs1 = ref([
  {
    value: 1,
    label: '已领取',
  },
  {
    value: 2,
    label: '未领取',
  },
])

const selectOptions = ref([
  {
    value: 0,
    label: 'ID',
  },
  {
    value: 1,
    label: '手机号',
  },
])
const queryData = ref({
  status: '',
  status1: '',
  time: null,
  word: '',
  selectKey: null,
})

const cardData = ref({})

const columns = ref([
  {
    type: 'selection',
  },
  {
    title: 'ID',
    align: 'center',
    key: 'qid',
  },
  {
    title: '二维码',
    align: 'center',
    slot: 'qrcode',
    render(row) {
      return h('img', {
        src: row.url,
        style: {
          width: '50px',
          height: '50px',
        },
      })
    },
  },
  {
    title: '用户',
    align: 'center',
    slot: 'user_name',
    render(row) {
      return h('span', row.User.nickName)
    },
  },
  {
    title: '用户电话',
    align: 'center',
    slot: 'phone',
    render(row) {
      return h('span', row.User.phone)
    },
  },
  {
    title: '赠送豆子',
    align: 'center',
    key: 'pulse',
  },
  {
    title: '激活状态',
    align: 'center',
    slot: 'status',
    render(row) {
      switch (row.activate_status) {
        case 1:
          return h('span', '已激活')
        case 2:
          return h('span', '未激活')
      }
    },
  },
  {
    title: '领取状态',
    align: 'center',
    slot: 'status',
    render(row) {
      switch (row.use_status) {
        case 1:
          return h('span', '已领取')
        case 2:
          return h('span', '未领取')
      }
    },
  },
  {
    title: '激活时间',
    align: 'center',
    key: 'activate_time',
  },
  {
    title: '领取时间',
    align: 'center',
    key: 'use_time',
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render(row) {
      if (row.use_status === 2) {
        return withDirectives(
          h(
            NButton,
            {
              type: 'primary',
              size: 'small',
              onClick: () => openModal(2, row),
            },
            {
              default: () => '编辑',
            }
          ),
          [[vPerms, ['/admin/qrcode/edit']]]
        )
        // return h(
        //   NButton,
        //   {
        //     type: 'primary',
        //     size: 'small',
        //     onClick: () => {
        //       openModal(2, row)
        //     },
        //   },
        //   {
        //     default: () => '编辑',
        //   }
        // )
      }
    },
  },
])

const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  prefix: ({ itemCount }) => {
    return `共 ${itemCount} 项`
  },
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

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

const loading = ref(false)

const getList = async () => {
  loading.value = true
  try {
    const query_data = {
      UseStatus: queryData.value.status,
      ActivateStatus: queryData.value.status1,
      StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
      EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
    }
    switch (queryData.value.selectKey) {
      case 0:
        query_data['Qid'] = queryData.value.word
        break
      case 1:
        query_data['Phone'] = queryData.value.word
        break
    }
    const res = await api.getCodelist({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
      ...query_data,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
    cardData.value.total = res.data.number
    cardData.value.service = res.data.commission
    cardData.value.count = 0
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const clear = () => {
  queryData.value = {
    status: '',
    status1: '',
    time: null,
    word: '',
    selectKey: null,
  }
  getList()
}

const rowKey = (row) => row.qid

const checkedRowKeysRef = ref([])

const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const showModal = ref(false)

const modelTitle = ref('')

const formValue = ref({
  number: null,
  pulse: null,
  activate_status: 2,
})

const rules = {
  number: {
    required: true,
    type: 'number',
    message: '请输入生成数量',
    trigger: 'blur',
  },
  pulse: {
    required: true,
    type: 'number',
    message: '请输入豆子数量',
    trigger: 'blur',
  },
}

const handleclear = () => {
  showModal.value = false
  formValue.value = {
    number: null,
    pulse: null,
    activate_status: 2,
  }
  checkedRowKeysRef.value = []
}

const modalType = ref(null)
const nowRow = ref([])

const openModal = (e, row) => {
  showModal.value = true
  modalType.value = e
  modelTitle.value = e === 1 ? '新增二维码' : '编辑二维码'
  if (e === 2) {
    nowRow.value = [row.qid]
    formValue.value.pulse = row.pulse
    formValue.value.activate_status = row.activate_status
  } else if (e === 3) {
    nowRow.value = checkedRowKeysRef.value
  }
}

const formRef = ref(null)

const handleValidateClick = (e) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        if (modalType.value === 1) {
          await api.addCode(formValue.value)
        } else {
          await api.updateCode({
            qid: nowRow.value,
            ...formValue.value,
          })
        }
        handleclear()
        getList()
      } catch (error) {
        // $message.error(error.msg)
      }
    }
  })
}

// 下载二维码
const saveCode = async () => {
  if (checkedRowKeysRef.value.length === 0) return $message.error('请选择二维码')

  const zip = new JSZip()

  data.value.forEach((item) => {
    checkedRowKeysRef.value.forEach((id) => {
      if (item.qid === id) {
        const imageData = item.url.split(',')[1]
        zip.file(`${item.qid}.png`, imageData, {
          base64: true,
        })
      }
    })
  })

  const content = await zip.generateAsync({ type: 'blob' })
  saveAs(content, '二维码.zip')
}
</script>

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