<template>
  <div style="background: #fff">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="memberConfig" tab="会员管理">
        <div v-if="vdata.groupKey == 'memberConfig'" class="account-settings-info-view">
          <a-form ref="configFormModel" :model="vdata.memberConfigData" layout="vertical">
            <a-row justify="start" type="flex" style="margin-top: 20px">
              <a-col v-for="(item, config) in vdata.memberConfigData" :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-row>

            <!-- 仅做数据展示 -->
            <a-row justify="start" type="flex" style="margin-top: 20px">
              <a-col :span="7" :offset="1">
                <a-form-item label="会员最大储值余额(元)">
                  <view>{{ vdata.mbrMaxBalance != 0 ? Number.parseFloat((vdata.mbrMaxBalance/100).toFixed(2)) : '不限制' }}</view>
                </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-tabs>
  </div>
</template>
<script setup lang="ts">
import { API_URL_MCH_CONFIG, req } from '@/api/manage'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'

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

const configFormModel = ref()

const vdata : any = reactive ({
  btnLoading: false,
  groupKey: 'memberConfig',
  // 会员配置
  memberConfigData: [
    { configKey: 'memberPayState', configName: '会员支付开关', configVal: '0', type: 'radio' },
    { configKey: 'memberCustomAmountState', configName: '充值自定义金额', configVal: '1', type: 'radio' }
  ],
  mbrMaxBalance: 0
})
onMounted(()=>{
  selectTabs(vdata.groupKey) //初始化数据
})

function selectTabs (key) { // 清空必填提示
  if (key) {
    vdata.groupKey = key

    if(key == 'memberConfig'){
      req.list(API_URL_MCH_CONFIG, {groupKey: vdata.groupKey}).then(res => {
        if (res != null && res.length > 0) {

          res = res.filter( element => { 
            return element.configKey != 'memberModelState' 
          })

          // val赋值
          vdata.memberConfigData.forEach(item =>{
            res.forEach(res => {
              if (item.configKey == res.configKey) {
                item.configVal = res.configVal
              }
            })
          })
        }
      })

      req.getById(API_URL_MCH_CONFIG, 'mbrMaxBalance').then(res => {
        if (res != null) {
          vdata.mbrMaxBalance = res
        }
      })
    }
  }
}


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

      let reqObject : any = JSON.parse(JSON.stringify(vdata.memberConfigData))

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

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