<template>
  <div>
    <el-form :model="searchForm" inline @submit.prevent>
      <el-form-item>
        <el-input v-model="searchForm.memberName" placeholder="会员名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="searchList">查询</el-button>
        <el-button type="primary" @click="addVip">新增会员类型</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableList" height="calc(100vh - 260px)">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="会员名" align="center" prop="memberName" min-width="140" />
      <el-table-column label="原价" align="center" prop="price" />
      <el-table-column label="折扣价" align="center" prop="discount" />
      <el-table-column label="有效期" align="center" prop="duration" />
      <el-table-column label="单位" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.unit == 1">天</el-tag>
          <el-tag v-else type="danger">年</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="使用方式" align="center" prop="useTypeName" />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button type="primary" link @click="editVip(row)">修改</el-button>
          <el-button type="primary" link @click="handleDelete(row.memberId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="searchForm.pageNo"
      v-model:limit="searchForm.pageSize"
      @pagination="getList"
    />

    <el-dialog title="会员详情" v-model="showDialog" width="500px" :close-on-click-modal="false">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
        <el-form-item label="会员名称" prop="memberName">
          <el-input v-model="form.memberName" />
        </el-form-item>
        <el-form-item label="原价" prop="price">
          <el-input v-model="form.price" type="number" />
        </el-form-item>
        <el-form-item label="折扣价" prop="discount">
          <el-input v-model="form.discount" type="number" />
        </el-form-item>
        <el-form-item label="有效期" prop="duration">
          <el-input v-model="form.duration" type="number" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-radio-group v-model="form.unit">
            <el-radio :label="1">天</el-radio>
            <el-radio :label="3">年</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用方式" prop="useTypes">
          <el-checkbox-group v-model="form.useTypes">
            <el-checkbox :label="1"> 用户购买 </el-checkbox>
            <el-checkbox :label="2"> 客服赠送 </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <span>
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="sureAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="VipType">
import {
  getVipTypeList,
  addVipType,
  updateVipType,
  deleteVipType,
  getVipType
} from '@/api/gds/appletUser'
const message = useMessage()
const searchForm = ref({
  memberName: undefined,
  pageNo: 1,
  pageSize: 50
})

const loading = ref(false)
const tableList = ref([])
const total = ref(0)

onMounted(() => {
  searchList()
})
function searchList() {
  searchForm.value.pageNo = 1
  getList()
}

function getList() {
  loading.value = true
  getVipTypeList(searchForm.value).then((response) => {
    tableList.value = response.list
    total.value = response.total
    loading.value = false
  })
}

const showDialog = ref(false)
const form = ref({
  memberName: '',
  price: '',
  discount: '',
  duration: '',
  unit: 1,
  useTypes: [1]
})
const rules = ref({
  memberName: [{ required: true, message: '请输入会员名称', trigger: 'blur' }],
  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  discount: [{ required: true, message: '请输入折扣价', trigger: 'blur' }],
  duration: [{ required: true, message: '请输入有效期', trigger: 'blur' }]
})

function addVip() {
  showDialog.value = true

  form.value = {
    memberName: '',
    price: '',
    discount: '',
    duration: '',
    unit: 1,
    useTypes: [1]
  }
}

function editVip(row) {
  try {
    getVipType(row.memberId).then((res) => {
      form.value = {
        ...res,
        useTypes: res.useType.split(',').map((item) => Number(item)),
        unit: Number(res.unit)
      }
      showDialog.value = true
    })
  } catch (error) {}
}

const formRef = ref(null)
async function sureAdd() {
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  // 调用接口
  if (form.value.memberId) {
    updateVipType(form.value).then(() => {
      message.success('修改成功')
      showDialog.value = false
      searchList()
    })
  } else {
    addVipType(form.value).then(() => {
      message.success('添加成功')
      showDialog.value = false
      searchList()
    })
  }
}

function handleDelete(id) {
  message.confirm('是否确认删除该会员？').then(() => {
    deleteVipType(id).then(() => {
      message.success('删除成功')
      searchList()
    })
  })
}
</script>

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