<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts" name="replace-mgr">
import type { MjEditFormProps, MjGridProps } from '#/components/mj/mj-table'

import { createIconifyIcon } from '@vben/icons'

import { platformService } from '#/api/service/auth/platform'
import MjTable, {
  mj_form_input,
  mj_form_switch,
} from '#/components/mj/mj-table'
import hud from '#/utils/hud'

import ApiCfg from './api-cfg.vue'
import PricePlanList from './price-plan-list.vue'
import SmsCfg from './sms-cfg.vue'
import WxMpCfg from './wx-mp-cfg.vue'
import WxPayCfg from './wx-pay-cfg.vue'

const platform = ref({} as any)

// 表单
const editForm = {
  modal: {
    width: 600,
  },
  form: {
    titleWidth: 120,
    items: [
      {
        required: true,
        field: 'name',
        title: '名称',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        required: true,
        field: 'code',
        title: '编码',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        required: true,
        field: 'host',
        title: '域名',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        field: 'status',
        title: '状态',
        span: 24,
        itemRender: {
          name: mj_form_switch,
        },
      },
    ],
    data: {},
  },
  updateFields: ['id', 'name', 'code', 'host', 'status'],
} as MjEditFormProps

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq' },
    {
      field: 'name',
      title: '名称',
    },
    { field: 'code', title: '编码' },
    { field: 'host', title: '域名' },
    {
      title: '状态',
      slots: {
        default: 'status',
      },
    },
    {
      title: '配置',
      slots: {
        default: 'config',
      },
    },
  ],
} as MjGridProps

// 状态改变
function statusChange(row: any) {
  const oldFlag = !row.status

  platformService
    .saveOrUpdate({
      id: row.id,
      status: row.status,
    })
    .catch(() => {
      row.status = oldFlag
    })
}

// 微信公众号
const wxMpCfgVisible = ref(false)
const showWxMpCfg = (row: any) => {
  platform.value = row
  wxMpCfgVisible.value = true
}

// 微信支付
const wxPayCfgVisible = ref(false)
const showWxPayCfg = (row: any) => {
  platform.value = row
  wxPayCfgVisible.value = true
}

// 短信
const smsCfgVisible = ref(false)
const showSmsCfg = (row: any) => {
  platform.value = row
  smsCfgVisible.value = true
}

// 价格体系
const pricePlanListVisible = ref(false)
const showPricePlanList = (row: any) => {
  platform.value = row
  pricePlanListVisible.value = true
}

// API
const apiCfgVisible = ref(false)
const showApiCfg = (row: any) => {
  platform.value = row
  apiCfgVisible.value = true
}

// 刷新
const reload = () => {
  gridRef.value?.reload()
}

// 重载配置
const reloadCfg = (row: any) => {
  hud.confirmLoad(`确定要重新加载[${row.name}]配置吗？`, {
    task: async () => {
      await platformService.reload(row.id)
    },
    option: '重新加载',
    hideSuccess: false,
  })
}

const wechatIcon = createIconifyIcon('streamline-ultimate-color:wechat-logo')
const wechatPayIcon = createIconifyIcon(
  'streamline-ultimate:wechat-pay-logo-bold',
)
const smsIcon = createIconifyIcon('la:sms')
const moneyIcon = createIconifyIcon('noto:money-bag')
</script>

<template>
  <div class="platform-mgr g-container">
    <MjTable
      ref="gridRef"
      :edit-form="editForm"
      :grid="grid"
      :service="platformService"
    >
      <template #status="{ row }">
        <el-switch v-model="row.status" @click="statusChange(row)" />
      </template>
      <template #config="{ row }">
        <el-button type="primary" @click="reloadCfg(row)">重载</el-button>
        <el-popover
          placement="left"
          trigger="hover"
          width="300"
          popper-class="platform-config-popover"
        >
          <template #reference>
            <el-button type="primary">配置</el-button>
          </template>
          <div class="config-buttons">
            <div class="row">
              <el-button
                type="primary"
                class="config-btn"
                :icon="wechatIcon"
                @click="showWxMpCfg(row)"
              >
                微信公众号
              </el-button>
              <el-button
                type="primary"
                class="config-btn"
                :icon="wechatPayIcon"
                @click="showWxPayCfg(row)"
              >
                微信支付
              </el-button>
            </div>
            <div class="row">
              <el-button
                type="primary"
                class="config-btn"
                :icon="smsIcon"
                @click="showSmsCfg(row)"
              >
                短信
              </el-button>
              <el-button
                type="primary"
                class="config-btn"
                @click="showApiCfg(row)"
              >
                API
              </el-button>
              <el-button
                type="primary"
                class="config-btn"
                :icon="moneyIcon"
                @click="showPricePlanList(row)"
              >
                价格体系
              </el-button>
            </div>
          </div>
        </el-popover>
      </template>
    </MjTable>
    <WxMpCfg v-model="wxMpCfgVisible" :platform="platform" @success="reload" />
    <WxPayCfg
      v-model="wxPayCfgVisible"
      :platform="platform"
      @success="reload"
    />
    <SmsCfg v-model="smsCfgVisible" :platform="platform" @success="reload" />
    <PricePlanList
      v-model="pricePlanListVisible"
      :platform="platform"
      @success="reload"
    />
    <ApiCfg v-model="apiCfgVisible" :platform="platform" @success="reload" />
  </div>
</template>

<style lang="scss" scoped>
.platform-mgr {
  height: 100% !important;
}
</style>

<style lang="scss">
.platform-config-popover {
  .config-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .row {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
  }
}
</style>
