<template>
  <div class="content-view">
    <div class="table-head-tool">
      <div class="table-title-row">
        <Button type="primary" @click="openOpen">开通订阅</Button>
      </div>

      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
        <FormItem label="筛选">
          <Select v-model="param.seachOption.key" style="width: 120px" @on-change="onSearchKeyChange">
            <Option value="user_id">用户</Option>
            <Option value="status">状态</Option>
          </Select>
        </FormItem>
        <FormItem v-if="param.seachOption.key === 'user_id'">
          <Select
            v-model="param.seachOption.value"
            filterable
            clearable
            placeholder="选择用户"
            style="width: 260px"
            class="ml10"
          >
            <Option v-for="u in bizUserOptions" :key="u.id" :value="String(u.id)">{{ bizUserLabel(u) }}</Option>
          </Select>
        </FormItem>
        <FormItem v-else>
          <Input v-model="param.seachOption.value" style="width: 160px" placeholder="pending / active …" class="ml10" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="load(1)">查询</Button>
          <Button type="default" @click="resetQuery" class="ml10">重置</Button>
          <Button type="default" @click="doExport" class="ml10">导出 CSV</Button>
        </FormItem>
      </Form>
    </div>

    <div class="table-body">
      <Table :columns="columns" :data="rows" border stripe />
      <div class="table-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>
    </div>

    <Modal v-model="openModal" title="开通订阅" width="640" :loading="saving" @on-ok="submitOpen">
      <Form :label-width="110">
        <FormItem label="用户">
          <Select v-model="openForm.user_id" filterable clearable placeholder="请选择" style="width: 100%">
            <Option v-for="u in bizUserOptions" :key="u.id" :value="u.id">{{ bizUserLabel(u) }}</Option>
          </Select>
        </FormItem>
        <FormItem label="套餐">
          <Select v-model="openForm.plan_id" filterable clearable placeholder="请选择" style="width: 100%">
            <Option v-for="p in bizPlanOptions" :key="p.id" :value="p.id">{{ bizPlanLabel(p) }}</Option>
          </Select>
        </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="套餐">
          <Select v-model="upgradeForm.new_plan_id" filterable clearable placeholder="请选择" style="width: 100%">
            <Option v-for="p in bizPlanOptions" :key="p.id" :value="p.id">{{ bizPlanLabel(p) }}</Option>
          </Select>
        </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 subscriptionsServer from '@/api/subscription/subscriptions_server.js'
import { downloadCsvFromRows } from '@/utils/csvExport.js'
import subscriptionRelations from '@/mixins/subscriptionRelations.js'

export default {
  name: 'SubscriptionRecords',
  mixins: [subscriptionRelations],
  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: undefined, 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) } }, '取消'),
            ]),
        },
      ]
    },
  },
  async mounted() {
    await this.loadBizRelationOptions()
    this.load(1)
  },
  methods: {
    onSearchKeyChange() {
      this.param.seachOption.value = ''
    },
    async load(page) {
      if (page) this.param.pageOption.page = page
      const res = await subscriptionsServer.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: undefined,
        plan_id: undefined,
        start_time: fmt(now),
        end_time: fmt(end),
        status: 'pending',
        renew_mode: 'manual',
        payment_channel: '',
        payment_ref: '',
      }
      this.openModal = true
    },
    submitOpen() {
      const uid = this.openForm.user_id
      const pid = this.openForm.plan_id
      if (uid === undefined || uid === null || uid === '') {
        this.$Message.warning('请选择用户')
        return false
      }
      if (pid === undefined || pid === null || pid === '') {
        this.$Message.warning('请选择套餐')
        return false
      }
      this.saving = true
      this._submitOpen()
      return false
    },
    async _submitOpen() {
      const uid = this.openForm.user_id
      const pid = this.openForm.plan_id
      try {
        const body = {
          user_id: Number(uid),
          plan_id: Number(pid),
          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 subscriptionsServer.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 subscriptionsServer.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 != null ? Number(row.plan_id) : undefined, start_time: '', end_time: '' }
      this.upgradeModal = true
    },
    submitUpgrade() {
      if (!this.currentRow) return false
      const np = this.upgradeForm.new_plan_id
      if (np === undefined || np === null || np === '') {
        this.$Message.warning('请选择套餐')
        return false
      }
      this.saving = true
      this._submitUpgrade()
      return false
    },
    async _submitUpgrade() {
      if (!this.currentRow) {
        this.saving = false
        return
      }
      const np = this.upgradeForm.new_plan_id
      try {
        const res = await subscriptionsServer.upgrade({
          subscription_id: this.currentRow.id,
          new_plan_id: Number(np),
          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 subscriptionsServer.cancel({ subscription_id: row.id })
          if (res && res.code === 0) {
            this.$Message.success('已取消')
            this.load(1)
          } else {
            this.$Message.error((res && res.message) || '失败')
          }
        },
      })
    },
    async doExport() {
      const res = await subscriptionsServer.exportRows({ param: this.param })
      if (res && res.code === 0 && res.data && res.data.rows) {
        downloadCsvFromRows(res.data.rows, 'subscriptions.csv')
        this.$Message.success('已导出')
      } else {
        this.$Message.error((res && res.message) || '导出失败')
      }
    },
    resetQuery() {
      this.param.seachOption = { key: 'user_id', value: '' }
      this.load(1)
    },
  },
}
</script>

<style lang="less" scoped>
.content-view {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 26px 36px 36px;
  box-sizing: border-box;
}

.table-head-tool {
  margin-bottom: 16px;
}

.table-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.ml10 {
  margin-left: 10px;
}

.ml8 {
  margin-left: 8px;
}

.table-page-bar {
  margin-top: 12px;
  text-align: right;
}
</style>
