<template>
  <div style="background: #fff">
    <a-tabs>
      <a-tab-pane key="mchConfig" tab="系统配置">
        <div class="account-settings-info-view">
          <a-form ref="configFormModel" :model="vdata.mchConfigData" layout="vertical">
            <a-row justify="start" type="flex" style="margin-top: 20px">
              <a-col v-for="(item, config) in vdata.mchConfigData" :key="config" :span="7" :offset="1">
                <a-form-item :label="item.configName">
                  <a-radio-group v-if="item.type === 'radio'" v-model:value="item.configVal">
                    <a-radio value="1">启用</a-radio>
                    <a-radio value="0">禁用</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <!-- <a-col :span="7" :offset="1">
                <a-form-item label="是否启用码牌防逃单功能" name="qrcEscaping">
                  <a-radio-group v-model:value="vdata.mchConfigData.qrcEscaping">
                    <a-radio :value="1">启用</a-radio>
                    <a-radio :value="0">禁用</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="7" :offset="1">
                <a-form-item label="是否启用app订单语音播报" name="appVoice">
                  <a-radio-group v-model:value="vdata.mchConfigData.appVoice">
                    <a-radio :value="1">启用</a-radio>
                    <a-radio :value="0">禁用</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col> -->
            </a-row>
            <a-form-item class="bottom-btn">
              <a-button :disabled="!$access('ENT_MCH_CONFIG_EDIT')" type="primary" :loading="vdata.btnLoading" @click="confirm"><check-circle-outlined />确认更新</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>

      <a-tab-pane key="mchConfig2" tab="功能配置">
        <div class="account-settings-info-view" style="margin-left: 40px">
          <a-form layout="vertical">
            <a-row justify="start" type="flex" style="margin-top: 20px">
              <a-form-item label="商户等级切换">
                  <div class="typePopover">
                  <a-popover placement="top">
                    <template #title><span>商户级别</span></template>
                    <template #content>
                      <p>M0商户：简单模式（页面简洁，仅基础收款功能）</p>
                      <p>M1商户：高级模式（支持api调用， 支持配置应用及分账、转账功能）</p>
                    </template>
                    <question-circle-outlined />
                  </a-popover>
                </div>
                <a-radio-group v-model:value="vdata.mchLevel">
                  <a-radio value="M0">M0</a-radio>
                  <a-radio value="M1">M1</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-row>
            <a-form-item class="bottom-btn">
              <a-button :disabled="!$access('ENT_MCH_CONFIG_EDIT')" type="primary" :loading="vdata.btnLoading" @click="confirmUpdateLevel"><check-circle-outlined />确认更新</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { API_URL_MCH_CONFIG, req, $getMainUserInfo, $updateMchLevel } from '@/api/manage'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'

  const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

  const configFormModel = ref()

  const vdata = reactive ({
    btnLoading: false,
    groupKey: 'orderConfig',
    mchConfigData: [] as any, // 配置保存对象
    defaultConfig: [{
      configKey: 'appVoice',
      configName: '是否启用app订单语音播报',
      configVal: '1',
      type: 'radio'
    }, {
      configKey: 'qrcEscaping',
      configName: '是否启用码牌防逃单功能',
      configVal: '1',
      type: 'radio'
    }], // 默认配置项

    mchLevel: '',

  })

  onMounted(()=>{
    req.list(API_URL_MCH_CONFIG, {groupKey: vdata.groupKey}).then(res => {
      if (res != null && res.length > 0) {
        vdata.mchConfigData = res
      }else {
        vdata.mchConfigData = vdata.defaultConfig
      }
    })

    $getMainUserInfo().then((res) => {
      vdata.mchLevel = res.mchLevel
    })

  })

  // 确认更新
  function confirm (e) {
    configFormModel.value.validate().then(valid => {
      $infoBox.confirmPrimary('确认修改系统配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading

        req.updateById(API_URL_MCH_CONFIG, vdata.groupKey, {configData: JSON.stringify(vdata.mchConfigData)}).then(res => {
          $infoBox.message.success('修改成功')
          vdata.btnLoading = false
        }).catch(res => {
          vdata.btnLoading = false
        })
      })
    })
  }

  // 更新商户等级
  function confirmUpdateLevel(){
    $updateMchLevel(vdata.mchLevel).then(() => {
      $infoBox.modalWarning('提示', '更新成功，重新登录后将切换功能模式！')
    })
  }

</script>
<style lang="less" scoped>
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
  .typePopover {
  position: absolute;
  top: -30px;
  left: 93px;
}
</style>
