<template>
  <div>
    <el-row>
      <el-button @click="searchList" v-hasPermi="['xj-applet:vip:vip-discount:search']"
        >查询</el-button
      >
      <el-button type="primary" @click="addDiscount" v-hasPermi="['xj-applet:vip:vip-discount:add']"
        >新增折扣</el-button
      >
    </el-row>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="折扣描述" align="center" prop="description" min-width="140" />
      <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">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="editDiscount(row)"
            v-hasPermi="['xj-applet:vip:vip-discount:update']"
            >修改</el-button
          >
          <el-button
            type="primary"
            link
            @click="deleteDiscount(row)"
            v-hasPermi="['xj-applet:vip:vip-discount:delete']"
            >删除</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="discountType">
          <el-select v-model="form.discountType" style="width: 100%" :disabled="!!form.id">
            <el-option
              v-for="item in discountTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="折扣描述">
          {{ discountDesc }}
        </el-form-item>
        <el-form-item v-if="form.discountType == 1" label="科目" prop="subject">
          <el-select v-model="form.subject" style="width: 100%" :disabled="!!form.id">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="变量1" prop="param1">
          <el-select v-model="form.param1" style="width: 100%" clearable :disabled="!!form.id">
            <el-option
              v-for="item in vipTypeOptions"
              :key="item.memberId"
              :label="item.memberName"
              :value="item.memberId"
            >
              <span style="float: left">{{ item.memberName }}</span>
              <span style="float: right; color: #aaa">{{ item.carName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变量2" prop="param2">
          <el-select v-model="form.param2" style="width: 100%" :disabled="!!form.id">
            <el-option
              v-for="item in vipTypeOptions"
              :key="item.memberId"
              :label="item.memberName"
              :value="item.memberId"
            >
              <span style="float: left">{{ item.memberName }}</span>
              <span style="float: right; color: #aaa">{{ item.carName }}</span>
            </el-option>
          </el-select>
        </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 v-for="(item, index) in unitOptions" :key="index" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-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="VipDiscount">
import {
  getVipDiscountList,
  addVipDiscount,
  updateVipDiscount,
  deleteVipDiscount
} from '@/api/xjapplet/discount'

import { getVipTypeOptions } from '@/api/xjapplet/vip'

const message = useMessage()

const searchForm = ref({
  pageNo: 1,
  pageSize: 50
})

onMounted(() => {
  searchList()

  getVipTypeOptions().then((response) => {
    vipTypeOptions.value = response
  })
})

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

const discountTypeOptions = [
  {
    label: '【$科目】模考首次通过后，在拥有【$会员名1】的情况下，购买【$会员名2】，享折扣价',
    value: '1'
  },
  { label: '之前拥有过【$会员名1】，购买【$会员名2】，享折扣价', value: '2' }
]

const subjectOptions = [
  { label: '科一', value: '1' },
  { label: '科四', value: '4' }
]

const unitOptions = [
  { label: '天', value: '1' },
  { label: '年', value: '3' }
]

const discountDesc = computed(() => {
  const vipTypeObj = {}
  vipTypeOptions.value.forEach((item) => {
    vipTypeObj[item.memberId] = `${item.memberName}(${item.carName})`
  })
  const { discountType, subject, param1, param2, discount, duration, unit } = form.value
  let baseStr = discountTypeOptions.find((item) => item.value == discountType).label
  const vip1 = param1 ? vipTypeObj[param1] : '无需会员'
  const vip2 = param2 ? vipTypeObj[param2] : '会员名2'
  return baseStr
    .replace('$科目', subjectOptions.find((item) => item.value == subject).label)
    .replace('$会员名1', vip1)
    .replace('$会员名2', vip2)
    .concat(
      `${discount || ''}，有效期${duration || 0}${
        unitOptions.find((item) => item.value == unit).label
      }`
    )
})

onMounted(() => {
  searchList()
})

const vipTypeOptions = ref([])
function searchList() {
  searchForm.value.pageNo = 1
  getList()
}

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

const showDialog = ref(false)
const form = ref({
  discountType: '1',
  subject: '1',
  param1: undefined,
  param2: undefined,
  discount: undefined,
  duration: undefined,
  unit: '1',
  description: undefined
})
const rules = ref({
  param2: [{ required: true, message: '请选择变量2', trigger: 'change' }],
  discount: [{ required: true, message: '请输入折扣价', trigger: 'blur' }],
  duration: [{ required: true, message: '请输入有效期', trigger: 'blur' }]
})

function addDiscount() {
  showDialog.value = true
  form.value = {
    discountType: '1',
    subject: '1',
    param1: undefined,
    param2: undefined,
    discount: undefined,
    duration: undefined,
    unit: '1',
    description: undefined
  }
}

function editDiscount(row) {
  form.value = {
    ...row,
    param1: row.param1 ? Number(row.param1) : undefined,
    param2: row.param2 ? Number(row.param2) : undefined
  }
  showDialog.value = true
}

function deleteDiscount(row) {
  message.confirm('确定删除该折扣？').then(() => {
    deleteVipDiscount(row.id).then(() => {
      message.success('删除成功')
      searchList()
    })
  })
}

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

  form.value.description = discountDesc.value

  // 调用接口
  if (form.value.id) {
    updateVipDiscount(form.value).then(() => {
      showDialog.value = false
      message.success('修改成功')
      searchList()
    })
  } else {
    addVipDiscount(form.value).then(() => {
      showDialog.value = false
      message.success('新增成功')
      searchList()
    })
  }
}
</script>

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