<template>
  <div class="content-view">
    <div class="table-head-tool">
      <div class="table-title-row">
        <Button type="primary" @click="openEdit(null)">新增套餐</Button>
      </div>

      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
        <FormItem label="条件">
          <Select v-model="param.seachOption.key" style="width: 140px">
            <Option value="plan_code">编码</Option>
            <Option value="plan_name">名称</Option>
            <Option value="status">状态</Option>
          </Select>
          <Input
            v-model="param.seachOption.value"
            class="ml10"
            style="width: 220px"
            search
            @on-search="load(1)"
          />
        </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="modal" :title="form.id ? '编辑套餐' : '新增套餐'" width="720" :loading="saving" @on-ok="save">
      <Form ref="formRef" :model="form" :rules="rules" :label-width="120">
        <FormItem label="套餐编码" prop="plan_code">
          <Input v-model="form.plan_code" :disabled="!!form.id" />
        </FormItem>
        <FormItem label="套餐名称" prop="plan_name">
          <Input v-model="form.plan_name" />
        </FormItem>
        <FormItem label="月费">
          <Input v-model="form.monthly_price" type="number" />
        </FormItem>
        <FormItem label="授权费">
          <Input v-model="form.auth_fee" type="number" />
        </FormItem>
        <FormItem label="账号上限">
          <Input v-model="form.account_limit" type="number" />
        </FormItem>
        <FormItem label="活跃上限">
          <Input v-model="form.active_user_limit" type="number" />
        </FormItem>
        <FormItem label="消息额度">
          <Input v-model="form.msg_quota" type="number" />
        </FormItem>
        <FormItem label="群发额度">
          <Input v-model="form.mass_quota" type="number" />
        </FormItem>
        <FormItem label="好友额度">
          <Input v-model="form.friend_quota" type="number" />
        </FormItem>
        <FormItem label="朋友圈额度">
          <Input v-model="form.sns_quota" type="number" />
        </FormItem>
        <FormItem label="功能点 JSON">
          <Input v-model="featuresText" type="textarea" :rows="4" placeholder='如 {"msg":true} 或 ["msg","mass"]' />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Select v-model="form.status" style="width: 100%">
            <Option value="active">上线</Option>
            <Option value="inactive">下线</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import planServer from '@/api/subscription/plan_server.js'
import { downloadCsvFromRows } from '@/utils/csvExport.js'

export default {
  name: 'SubscriptionPlans',
  data() {
    return {
      rows: [],
      total: 0,
      param: {
        seachOption: { key: 'plan_code', value: '' },
        pageOption: { page: 1, pageSize: 20, total: 0 },
      },
      modal: false,
      saving: false,
      form: {},
      featuresText: '{}',
      rules: {
        plan_code: [{ required: true, message: '必填', trigger: 'blur' }],
        plan_name: [{ required: true, message: '必填', trigger: 'blur' }],
        status: [{ required: true, message: '必选', trigger: 'change' }],
      },
    }
  },
  computed: {
    columns() {
      return [
        { title: 'ID', key: 'id', width: 70 },
        { title: '编码', key: 'plan_code', width: 120 },
        { title: '名称', key: 'plan_name', minWidth: 140 },
        { title: '月费', key: 'monthly_price', width: 90 },
        { title: '状态', key: 'status', width: 90 },
        {
          title: '操作',
          key: 'a',
          width: 260,
          render: (h, p) =>
            h('div', [
              h('Button', { props: { type: 'info', size: 'small' }, on: { click: () => this.openEdit(p.row) } }, '编辑'),
              h('Button', { props: { type: 'warning', size: 'small' }, class: { ml8: true }, on: { click: () => this.toggle(p.row) } }, '上下线'),
              h('Button', { props: { type: 'error', size: 'small' }, class: { ml8: true }, on: { click: () => this.doDel(p.row) } }, '删除'),
            ]),
        },
      ]
    },
  },
  mounted() {
    this.load(1)
  },
  methods: {
    async load(page) {
      if (page) this.param.pageOption.page = page
      const res = await planServer.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)
    },
    openEdit(row) {
      if (row) {
        this.form = { ...row }
        this.featuresText =
          row.enabled_features == null
            ? ''
            : typeof row.enabled_features === 'string'
              ? row.enabled_features
              : JSON.stringify(row.enabled_features, null, 2)
      } else {
        this.form = {
          plan_code: '',
          plan_name: '',
          monthly_price: 0,
          auth_fee: 0,
          account_limit: 0,
          active_user_limit: 0,
          msg_quota: 0,
          mass_quota: 0,
          friend_quota: 0,
          sns_quota: 0,
          status: 'active',
        }
        this.featuresText = '{}'
      }
      this.modal = true
    },
    save() {
      this.saving = true
      this.$refs.formRef.validate(async (ok) => {
        if (!ok) {
          this.saving = false
          return
        }
        let enabled_features = null
        const t = (this.featuresText || '').trim()
        if (t) {
          try {
            enabled_features = JSON.parse(t)
          } catch (e) {
            this.$Message.error('功能点 JSON 格式错误')
            this.saving = false
            return
          }
        }
        const payload = { ...this.form, enabled_features }
        try {
          const res = this.form.id ? await planServer.edit(payload) : await planServer.add(payload)
          if (res && res.code === 0) {
            this.$Message.success('保存成功')
            this.modal = false
            this.load(1)
          } else {
            this.$Message.error((res && res.message) || '保存失败')
          }
        } finally {
          this.saving = false
        }
      })
    },
    async toggle(row) {
      const res = await planServer.toggle({ id: row.id })
      if (res && res.code === 0) {
        this.$Message.success('状态已更新为 ' + (res.data && res.data.status))
        this.load()
      } else {
        this.$Message.error((res && res.message) || '失败')
      }
    },
    doDel(row) {
      this.$Modal.confirm({
        title: '删除套餐',
        content: '确认删除？若已被订阅引用可能失败。',
        onOk: async () => {
          const res = await planServer.del({ 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 planServer.exportRows({ param: this.param })
      if (res && res.code === 0 && res.data && res.data.rows) {
        downloadCsvFromRows(res.data.rows, 'plans.csv')
        this.$Message.success('已导出')
      } else {
        this.$Message.error((res && res.message) || '导出失败')
      }
    },
    resetQuery() {
      this.param.seachOption = { key: 'plan_code', 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>
