<template>
  <div class="biz-page">
    <div class="biz-toolbar">
      <h2 class="biz-title">业务用户</h2>
      <Button type="primary" @click="openEdit(null)">新增</Button>
      <Button class="ml8" @click="load(1)">刷新</Button>
    </div>
    <div class="biz-search">
      <Form inline :label-width="70">
        <FormItem label="条件">
          <Select v-model="param.seachOption.key" style="width: 140px">
            <Option value="mobile">手机</Option>
            <Option value="company_name">公司</Option>
            <Option value="status">状态</Option>
          </Select>
          <Input v-model="param.seachOption.value" placeholder="关键字" style="width: 220px" class="ml8" search @on-search="load(1)" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="load(1)">查询</Button>
        </FormItem>
      </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="modal" :title="form.id ? '编辑用户' : '新增用户'" width="640" :loading="saving" @on-ok="save">
      <Form ref="formRef" :model="form" :rules="rules" :label-width="100">
        <FormItem label="名称" prop="name">
          <Input v-model="form.name" />
        </FormItem>
        <FormItem label="手机" prop="mobile">
          <Input v-model="form.mobile" />
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="form.email" />
        </FormItem>
        <FormItem label="公司">
          <Input v-model="form.company_name" />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Select v-model="form.status" style="width: 100%">
            <Option value="active">正常</Option>
            <Option value="disabled">禁用</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="detailVisible" title="用户详情" width="720" footer-hide>
      <p v-if="detail">Token 数量：{{ detail.tokenCount }}</p>
      <Table v-if="detail && detail.subscriptions" :columns="subCols" :data="detail.subscriptions" size="small" border />
    </Modal>
  </div>
</template>

<script>
import bizUserServer from '@/api/biz/biz_user_server.js'

export default {
  name: 'BizUsers',
  data() {
    return {
      rows: [],
      total: 0,
      param: {
        seachOption: { key: 'mobile', value: '' },
        pageOption: { page: 1, pageSize: 20, total: 0 },
      },
      modal: false,
      saving: false,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
      detailVisible: false,
      detail: null,
      subCols: [
        { title: 'ID', key: 'id', width: 80 },
        { title: '套餐ID', key: 'plan_id', width: 90 },
        { title: '状态', key: 'status', width: 100 },
        { title: '开始', key: 'start_time', minWidth: 160 },
        { title: '结束', key: 'end_time', minWidth: 160 },
      ],
    }
  },
  computed: {
    columns() {
      return [
        { title: 'ID', key: 'id', width: 80 },
        { title: '名称', key: 'name', minWidth: 120 },
        { title: '手机', key: 'mobile', width: 130 },
        { title: '公司', key: 'company_name', minWidth: 140 },
        { title: '状态', key: 'status', width: 90 },
        {
          title: '操作',
          key: 'a',
          width: 220,
          render: (h, p) => {
            return h('div', [
              h(
                'Button',
                {
                  props: { type: 'info', size: 'small' },
                  on: { click: () => this.openEdit(p.row) },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: { type: 'default', size: 'small' },
                  class: { ml8: true },
                  on: { click: () => this.showDetail(p.row) },
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: { type: 'warning', size: 'small' },
                  class: { ml8: true },
                  on: { click: () => this.doDisable(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 bizUserServer.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 }
      } else {
        this.form = { name: '', mobile: '', email: '', company_name: '', status: 'active' }
      }
      this.modal = true
    },
    save() {
      this.saving = true
      this.$refs.formRef.validate(async (ok) => {
        if (!ok) {
          this.saving = false
          return
        }
        try {
          const res = this.form.id
            ? await bizUserServer.edit(this.form)
            : await bizUserServer.add(this.form)
          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 showDetail(row) {
      const res = await bizUserServer.detail(row.id)
      if (res && res.code === 0) {
        this.detail = res.data
        this.detailVisible = true
      } else {
        this.$Message.error((res && res.message) || '加载详情失败')
      }
    },
    doDisable(row) {
      this.$Modal.confirm({
        title: '禁用用户',
        content: '确认禁用该用户？',
        onOk: async () => {
          const res = await bizUserServer.disable({ id: row.id })
          if (res && res.code === 0) {
            this.$Message.success('已禁用')
            this.load(1)
          } else {
            this.$Message.error((res && res.message) || '操作失败')
          }
        },
      })
    },
    doDel(row) {
      this.$Modal.confirm({
        title: '删除用户',
        content: '确认删除？若存在订阅/Token 可能受外键限制。',
        onOk: async () => {
          const res = await bizUserServer.del({ 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-search {
  margin-bottom: 12px;
}
.biz-page-bar {
  margin-top: 12px;
  text-align: right;
}
</style>
