<template>
  <div class="biz-page">
    <div class="biz-toolbar">
      <h2 class="biz-title">订阅</h2>
      <Button type="primary" @click="openOpen">开通订阅</Button>
      <Button class="ml8" @click="load(1)">刷新</Button>
    </div>
    <div class="biz-search">
      <Form inline>
        <FormItem label="用户ID">
          <Input v-model="param.seachOption.value" style="width: 140px" placeholder="筛选 user_id" />
        </FormItem>
        <FormItem>
          <Select v-model="param.seachOption.key" style="width: 120px">
            <Option value="user_id">用户ID</Option>
            <Option value="status">状态</Option>
          </Select>
        </FormItem>
        <Button type="primary" @click="load(1)">查询</Button>
      </Form>
    </div>
    <Table :columns="columns" :data="rows" border stripe />
    <div class="biz-page-bar">
      <Page
        :total="total"
        :current="param.pageOption.page"
        :page-size="param.pageOption.pageSize"
        show-total
        @on-change="onPage"
        @on-page-size-change="onSize"
      />
    </div>

    <Modal v-model="openModal" title="开通订阅" width="640" :loading="saving" @on-ok="submitOpen">
      <Form :label-width="110">
        <FormItem label="用户ID"><Input v-model="openForm.user_id" type="number" /></FormItem>
        <FormItem label="套餐ID"><Input v-model="openForm.plan_id" type="number" /></FormItem>
        <FormItem label="开始时间"><Input v-model="openForm.start_time" placeholder="2025-01-01 00:00:00" /></FormItem>
        <FormItem label="结束时间"><Input v-model="openForm.end_time" placeholder="2025-12-31 23:59:59" /></FormItem>
        <FormItem label="状态">
          <Select v-model="openForm.status" style="width: 100%">
            <Option value="pending">pending</Option>
            <Option value="active">active</Option>
          </Select>
        </FormItem>
        <FormItem label="续费方式">
          <Select v-model="openForm.renew_mode" style="width: 100%">
            <Option value="manual">manual</Option>
            <Option value="auto">auto</Option>
          </Select>
        </FormItem>
        <FormItem label="支付渠道">
          <Select v-model="openForm.payment_channel" clearable style="width: 100%">
            <Option value="offline">offline</Option>
            <Option value="pay_link">pay_link</Option>
          </Select>
        </FormItem>
        <FormItem label="支付单号"><Input v-model="openForm.payment_ref" /></FormItem>
      </Form>
    </Modal>

    <Modal v-model="renewModal" title="续费" :loading="saving" @on-ok="submitRenew">
      <Form :label-width="100">
        <FormItem label="新结束时间"><Input v-model="renewForm.end_time" /></FormItem>
      </Form>
    </Modal>

    <Modal v-model="upgradeModal" title="升级套餐" :loading="saving" @on-ok="submitUpgrade">
      <Form :label-width="100">
        <FormItem label="新套餐ID"><Input v-model="upgradeForm.new_plan_id" type="number" /></FormItem>
        <FormItem label="开始"><Input v-model="upgradeForm.start_time" /></FormItem>
        <FormItem label="结束"><Input v-model="upgradeForm.end_time" /></FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import bizSubscriptionServer from '@/api/biz/biz_subscription_server.js'

export default {
  name: 'BizSubscriptions',
  data() {
    return {
      rows: [],
      total: 0,
      param: {
        seachOption: { key: 'user_id', value: '' },
        pageOption: { page: 1, pageSize: 20, total: 0 },
      },
      openModal: false,
      renewModal: false,
      upgradeModal: false,
      saving: false,
      currentRow: null,
      openForm: {},
      renewForm: { end_time: '' },
      upgradeForm: { new_plan_id: '', start_time: '', end_time: '' },
    }
  },
  computed: {
    columns() {
      return [
        { title: 'ID', key: 'id', width: 70 },
        { title: '用户', key: 'user_id', width: 90 },
        { title: '套餐', key: 'plan_id', width: 90 },
        { title: '状态', key: 'status', width: 100 },
        { title: '开始', key: 'start_time', minWidth: 150 },
        { title: '结束', key: 'end_time', minWidth: 150 },
        {
          title: '操作',
          key: 'a',
          width: 200,
          render: (h, p) =>
            h('div', [
              h('Button', { props: { size: 'small' }, on: { click: () => this.openRenew(p.row) } }, '续费'),
              h('Button', { props: { size: 'small' }, class: { ml8: true }, on: { click: () => this.openUpgrade(p.row) } }, '升级'),
              h('Button', { props: { type: 'error', size: 'small' }, class: { ml8: true }, on: { click: () => this.doCancel(p.row) } }, '取消'),
            ]),
        },
      ]
    },
  },
  mounted() {
    this.load(1)
  },
  methods: {
    async load(page) {
      if (page) this.param.pageOption.page = page
      const res = await bizSubscriptionServer.page({ param: this.param })
      if (res && res.code === 0) {
        this.rows = res.data.rows || []
        this.total = res.data.count || 0
      } else {
        this.$Message.error((res && res.message) || '加载失败')
      }
    },
    onPage(p) {
      this.param.pageOption.page = p
      this.load()
    },
    onSize(s) {
      this.param.pageOption.pageSize = s
      this.load(1)
    },
    openOpen() {
      const now = new Date()
      const end = new Date(now)
      end.setFullYear(end.getFullYear() + 1)
      const fmt = (d) =>
        `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(
          d.getHours()
        ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:00`
      this.openForm = {
        user_id: '',
        plan_id: '',
        start_time: fmt(now),
        end_time: fmt(end),
        status: 'pending',
        renew_mode: 'manual',
        payment_channel: '',
        payment_ref: '',
      }
      this.openModal = true
    },
    async submitOpen() {
      this.saving = true
      try {
        const body = {
          user_id: Number(this.openForm.user_id),
          plan_id: Number(this.openForm.plan_id),
          start_time: this.openForm.start_time,
          end_time: this.openForm.end_time,
          status: this.openForm.status,
          renew_mode: this.openForm.renew_mode,
          payment_channel: this.openForm.payment_channel || null,
          payment_ref: this.openForm.payment_ref || null,
        }
        const res = await bizSubscriptionServer.open(body)
        if (res && res.code === 0) {
          this.$Message.success('已创建订阅')
          this.openModal = false
          this.load(1)
        } else {
          this.$Message.error((res && res.message) || '失败')
        }
      } finally {
        this.saving = false
      }
    },
    openRenew(row) {
      this.currentRow = row
      this.renewForm = { end_time: row.end_time || '' }
      this.renewModal = true
    },
    async submitRenew() {
      if (!this.currentRow) return
      this.saving = true
      try {
        const res = await bizSubscriptionServer.renew({
          subscription_id: this.currentRow.id,
          end_time: this.renewForm.end_time,
        })
        if (res && res.code === 0) {
          this.$Message.success('已续费')
          this.renewModal = false
          this.load(1)
        } else {
          this.$Message.error((res && res.message) || '失败')
        }
      } finally {
        this.saving = false
      }
    },
    openUpgrade(row) {
      this.currentRow = row
      this.upgradeForm = { new_plan_id: row.plan_id, start_time: '', end_time: '' }
      this.upgradeModal = true
    },
    async submitUpgrade() {
      if (!this.currentRow) return
      this.saving = true
      try {
        const res = await bizSubscriptionServer.upgrade({
          subscription_id: this.currentRow.id,
          new_plan_id: Number(this.upgradeForm.new_plan_id),
          start_time: this.upgradeForm.start_time || undefined,
          end_time: this.upgradeForm.end_time || undefined,
        })
        if (res && res.code === 0) {
          this.$Message.success('已升级')
          this.upgradeModal = false
          this.load(1)
        } else {
          this.$Message.error((res && res.message) || '失败')
        }
      } finally {
        this.saving = false
      }
    },
    doCancel(row) {
      this.$Modal.confirm({
        title: '取消订阅',
        content: '确认取消？',
        onOk: async () => {
          const res = await bizSubscriptionServer.cancel({ subscription_id: row.id })
          if (res && res.code === 0) {
            this.$Message.success('已取消')
            this.load(1)
          } else {
            this.$Message.error((res && res.message) || '失败')
          }
        },
      })
    },
  },
}
</script>

<style scoped>
.biz-page {
  padding: 16px;
}
.biz-toolbar {
  margin-bottom: 12px;
}
.biz-title {
  display: inline-block;
  margin: 0 16px 0 0;
  font-size: 18px;
  vertical-align: middle;
}
.ml8 {
  margin-left: 8px;
}
.biz-page-bar {
  margin-top: 12px;
  text-align: right;
}
</style>
