<template>
  <CommonPage show-footer :title="$route.title">
    <!-- {{ formValue }} -->
    <n-button v-perms="['/store/edit']" type="primary" @click="handleAdd(1)">新增商户</n-button>
    <n-grid class="mb-10" x-gap="12" cols="6" collapsed>
      <n-gi>
        <div class="flex items-center">
          <div class="w-150">商户名称：</div>
          <n-input v-model:value="QuryVal.StoreName" type="text" placeholder="请输入商户名称" />
        </div>
      </n-gi>
      <n-gi>
        <div class="flex items-center">
          <div class="w-150">商户状态：</div>
          <n-select
            v-model:value="QuryVal.Status"
            placeholder="请选择商户状态"
            clearable
            :options="[
              {
                label: '正常',
                value: 1,
              },
              {
                label: '禁用',
                value: 2,
              },
            ]"
          />
        </div>
      </n-gi>
      <n-gi>
        <n-button type="primary" @click="getList">查询</n-button>
        <n-button class="ml10" @click="clearQuryVal">重置</n-button>
      </n-gi>
    </n-grid>

    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />

    <n-drawer v-model:show="showModal" :width="502" placement="right">
      <n-drawer-content :title="drawerTitle" closable>
        <n-form
          ref="formRef"
          label-placement="left"
          label-align="left"
          label-width="120px"
          :model="formValue"
          :rules="rules"
          size="medium"
        >
          <n-form-item label="商户名称:" path="name">
            <n-input
              v-model:value="formValue.name"
              :disabled="isEdit"
              placeholder="请输入商户名称"
            />
          </n-form-item>
          <n-form-item label="负责人姓名:" path="username">
            <n-input
              v-model:value="formValue.username"
              :disabled="isEdit"
              placeholder="请输入负责人姓名"
            />
          </n-form-item>
          <n-form-item label="商户手机号:" path="phone">
            <n-input
              v-model:value="formValue.phone"
              :disabled="isEdit"
              placeholder="请输入商户手机号"
            />
          </n-form-item>
          <n-form-item label="商户座机:" path="mobile">
            <n-input v-model:value="formValue.mobile" placeholder="请输入商户座机" />
          </n-form-item>
          <n-form-item label="商户地址:" path="address">
            <n-input v-model:value="formValue.address" placeholder="请输入商户地址" />
          </n-form-item>
          <n-form-item label="经营类目:" path="store_class_id">
            <n-select
              v-model:value="formValue.store_class_id"
              label-field="name"
              value-field="ID"
              clearable
              placeholder="请选择经营类目"
              :options="classOptions"
            />
          </n-form-item>
          <n-form-item v-if="!isEdit" label="商户密码:" path="password">
            <n-input v-model:value="formValue.password" placeholder="请输入商户密码" />
          </n-form-item>
          <n-form-item v-else label="修改密码:" path="password">
            <n-input v-model:value="formValue.password" placeholder="不修改密码请留空" />
          </n-form-item>
          <!--          <n-form-item label="商户类型:" path="bType">-->
          <!--            <n-select-->
          <!--              v-model:value="formValue.bType"-->
          <!--              label-field="name"-->
          <!--              value-field="ID"-->
          <!--              placeholder="请选择商户类型"-->
          <!--              clearable-->
          <!--              :options="typeOptions"-->
          <!--            />-->
          <!--          </n-form-item>-->
          <n-form-item label="手续费收取类型:" path="scaleType">
            <n-select
              v-model:value="formValue.scaleType"
              placeholder="请选择手续费收取类型"
              clearable
              :options="[
                {
                  label: '百分比',
                  value: 1,
                },
                {
                  label: '数值',
                  value: 2,
                },
              ]"
            />
          </n-form-item>
          <n-form-item label="手续费比例:" path="scale">
            <n-input-number v-model:value="formValue.scale" placeholder="请输入手续费比例" />
          </n-form-item>
          <!-- <n-form-item label="聚合积分额度:" path="quota">
            <n-input-number v-model:value="formValue.quota" placeholder="请输入聚合积分额度" />
          </n-form-item>
          <n-form-item label="聚合兑换比例:" path="ratio">
            <n-input-number
              v-model:value="formValue.ratio"
              placeholder="请输入聚合兑换比例"
              :precision="2"
            />
          </n-form-item> -->
          <!-- <n-form-item label="聚合appid:" path="appid">
            <n-input v-model:value="formValue.appid" placeholder="请输入聚合appid" />
          </n-form-item>
          <n-form-item label="聚合appKey:" path="appkey">
            <n-input v-model:value="formValue.appkey" placeholder="请输入聚合appKey" />
          </n-form-item>
          <n-form-item label="聚合查询接口:" path="check_url">
            <n-input v-model:value="formValue.check_url" placeholder="请输入聚合查询接口" />
          </n-form-item>
          <n-form-item label="聚合扣除接口:" path="edit_url">
            <n-input v-model:value="formValue.edit_url" placeholder="请输入聚合扣除接口" />
          </n-form-item> -->
          <n-form-item label="商户状态:" path="status">
            <n-switch v-model:value="formValue.status" :checked-value="1" :unchecked-value="2" />
          </n-form-item>
          <n-form-item label="商户序号:" path="sort">
            <n-input-number
              v-model:value="formValue.sort"
              placeholder="请输入商户排序序号"
              :min="0"
              :max="99999999"
            />
          </n-form-item>
          <n-form-item>
            <n-button
              class="m-auto w-200"
              attr-type="button"
              type="primary"
              @click="handleValidateClick"
            >
              提交
            </n-button>
            <!-- <n-button class="m-auto w-200" @click="handleClearValidateClick">重置</n-button> -->
          </n-form-item>
        </n-form>
      </n-drawer-content>
    </n-drawer>
    <!-- 退积分 -->
    <n-modal v-model:show="showModalJf">
      <n-card
        style="width: 600px"
        title="退积分"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-form ref="formRefJf" :model="model" :rules="rulesJf" label-placement="left">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" label="商家名称:">
              <n-input v-model:value="model.name" disabled placeholder="商家名称" />
            </n-form-item-gi>
            <n-form-item-gi :span="24" label="退积分:" path="number">
              <n-input-number
                v-model:value="model.number"
                placeholder="请输入积分"
                clearable
                :precision="3"
              />
            </n-form-item-gi>
            <n-form-item-gi span="24">
              <n-button class="w-100" attr-type="button" type="primary" @click="handleOutClick">
                提交
              </n-button>
              <n-button class="ml-10 w-100" @click="handleClearOutClick">取消</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-card>
    </n-modal>
  </CommonPage>
</template>

<script setup>
import { onMounted, ref, h, withDirectives, resolveDirective } from 'vue'
import { NButton } from 'naive-ui'
import api from './api'

const vPerms = resolveDirective('perms')

const isEdit = computed(() => drawerTitle.value === '编辑商户')

const showModalJf = ref(false)

const formRefJf = ref(null)

const model = ref({
  name: '',
  bid: null,
  number: null,
})

const rulesJf = ref({
  number: {
    required: true,
    type: 'number',
    message: '请输入退积分',
    trigger: 'blur',
  },
})

const handleOutClick = (e) => {
  e.preventDefault()
  formRefJf.value?.validate(async (errors) => {
    if (!errors) {
      try {
        await api.outJf({
          bid: model.value.bid,
          number: model.value.number,
        })
        $message.success('成功')
        handleClearOutClick()
        await getMertype()
        await getList()
        showModalJf.value = false
      } catch (error) {
        $message.error(error.msg)
      }
    } else {
      $message.error('Invalid')
    }
  })
}

const handleClearOutClick = () => {
  formRefJf.value?.restoreValidation()
  model.value = {
    number: null,
  }
  showModalJf.value = false
}

const columns = ref([
  {
    title: '商户名称',
    align: 'center',
    key: 'name',
  },
  {
    title: '电话',
    align: 'center',
    key: 'phone',
  },
  {
    title: '状态',
    align: 'center',
    slot: 'status',
    render(row) {
      return h('span', row.status === 1 ? '正常' : '禁用')
    },
  },
  {
    title: '积分',
    align: 'center',
    key: 'integral',
  },
  {
    title: '创建时间',
    align: 'center',
    key: 'add_time',
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render: (row) => {
      return [
        withDirectives(
          h(
            NButton,
            {
              type: 'primary',
              text: true,
              size: 'small',
              onClick: () => {
                formValue.value = { ...row }
                Reflect.deleteProperty(formValue.value, 'password')
                handleAdd(2)
              },
            },
            () => '编辑'
          ),
          [[vPerms, ['/admin/store/edit']]]
        ),
        // withDirectives(
        //   h(
        //     NButton,
        //     {
        //       class: 'ml-10',
        //       type: 'primary',
        //       text: true,
        //       size: 'small',
        //       onClick: () => {
        //         model.value.name = row.name
        //         model.value.bid = row.bid
        //         showModalJf.value = true
        //       },
        //     },
        //     () => '退积分'
        //   ),
        //   [[vPerms, ['/admin/store/set/integral']]]
        // ),
        withDirectives(
          h(
            NButton,
            {
              class: 'ml-10',
              type: 'primary',
              text: true,
              size: 'small',
              onClick: async () => {
                const res = await api.login({
                  bid: row.bid,
                })
                window.open(
                  `${import.meta.env.VITE_MER_LOGIN_URL}?redirect=/workbench&type=${
                    res.data.type
                  }&tk=${res.data.token}`
                )
              },
            },
            () => '一键登录'
          ),
          [[vPerms, ['/admin/store/easy/login']]]
        ),
      ]
    },
  },
])

const data = ref([])

const loading = ref(false)

const showModal = ref(false)

const formRef = ref(null)

const drawerTitle = 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()
  },
})

const QuryVal = ref({
  StoreName: '',
  Status: null,
})

let formValue = ref({
  name: '',
  username: '',
  phone: '',
  mobile: '',
  address: '',
  store_class_id: null,
  local: '',
  password: '',
  scaleType: null,
  scale: null,
  quota: null,
  ratio: null,
  status: 2,
  sort: 0,
})

const rules = {
  name: {
    required: true,
    message: '请输入商户名称',
    trigger: 'blur',
  },
  username: {
    required: true,
    message: '请输入负责人姓名',
    trigger: 'blur',
  },
  phone: {
    required: true,
    message: '请输入商户手机号',
    trigger: 'blur',
  },
  mobile: {
    required: false,
    message: '请输入商户座机',
    trigger: 'blur',
  },
  address: {
    required: true,
    message: '请输入商户地址',
    trigger: 'blur',
  },
  local: {
    required: true,
    message: '请搜索商户经纬度',
    trigger: 'blur',
  },
  store_class_id: {
    required: true,
    type: 'number',
    message: '请选择经营类目',
    trigger: 'change',
  },
  // password: {
  //   required: true,
  //   message: '请输入商户密码',
  //   trigger: 'blur',
  // },
  scaleType: {
    required: true,
    type: 'number',
    message: '请选择手续费收取类型',
    trigger: 'change',
  },
  scale: {
    required: true,
    type: 'number',
    message: '请输入手续费比例',
    trigger: 'blur',
  },
  status: {
    type: 'number',
    message: '请选择商户状态',
    trigger: 'change',
  },
}

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

const getList = async () => {
  loading.value = true
  const res = await api.getList({
    ...QuryVal.value,
    PageNum: pagination.value.page,
    PageSize: pagination.value.pageSize,
  })
  data.value = res.data.data || []
  pagination.value.itemCount = res.data.total
  loading.value = false
}

const classOptions = ref([])
const typeOptions = ref([])

const getMertype = async () => {
  const res = await api.getMerType()
  classOptions.value = res.data.class
  typeOptions.value = res.data.type
}

const clearQuryVal = () => {
  QuryVal.value = {
    StoreName: '',
    Status: null,
  }
  getList()
}

const handleAdd = (e) => {
  drawerTitle.value = e === 1 ? '新增商户' : '编辑商户'
  showModal.value = true
}

const handleValidateClick = (e) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        await api.addMer(formValue.value)
        $message.success('成功')
        handleClearValidateClick()
        await getMertype()
        await getList()
        showModal.value = false
      } catch (error) {
        $message.error(error.msg)
      }
    } else {
      $message.error('Invalid')
    }
  })
}

const handleClearValidateClick = () => {
  formRef.value?.restoreValidation()
  formValue.value = {
    name: '',
    username: '',
    phone: '',
    mobile: '',
    address: '',
    classId: null,
    local: '',
    password: '',
    bType: null,
    scaleType: null,
    scale: null,
    status: 2,
    quota: null,
    ratio: null,
    sort: 0,
  }
}
</script>

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