<template>
  <div style="background: #fff">
    <div class="account-settings-info-view">
      <a-form ref="redConfigInfoFormModelRef" :rules="defaultConfigRules" :model="vdata.configData" layout="vertical">


        <a-divider orientation="left">初始配置</a-divider>

        <a-row>
          <a-col :span="6" :offset="2">
            <a-form-item label="平台红包权限设置" name="platRedPacket">
              <a-radio-group v-model:value="vdata.configData.platRedPacket">
                <a-radio value="1">开启</a-radio>
                <a-radio value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="2">
<!--            <a-form-item label="红包" name="adsName">-->
<!--              <a-input v-model:value="vdata.configData.adsName" placeholder="请输入广告名称" />-->
<!--            </a-form-item>-->
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" :offset="2">
            <a-form-item label="领取红包页面背景图" name="sysBgUrl">
              <JeepayUpload v-model:src="vdata.configData.sysBgUrl" bizType="oem" />
              <span class="jeepay-tip-text">建议尺寸：720x1280</span>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="2">
            <a-form-item label="领取红包页面内容图" name="sysBgUrl2">
              <JeepayUpload v-model:src="vdata.configData.sysBgUrl2" bizType="oem" />
              <span class="jeepay-tip-text">建议尺寸：375*357</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-col :span="6" :offset="2">
          <a-form-item label="分账商户号" name="mchNo">
            <a-input v-model:value="vdata.configData.mchNo" placeholder="请输入分账商户号" />
          </a-form-item>
        </a-col>
        <a-row>
          <a-col :span="6" :offset="2">
            <a-form-item label="广告权限设置" name="adsStatus">
              <a-radio-group v-model:value="vdata.configData.adsStatus">
                <a-radio value="1">开启</a-radio>
                <a-radio value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col :span="6" :offset="2">
            <a-form-item label="广告名称" name="adsName">
              <a-input v-model:value="vdata.configData.adsName" placeholder="请输入广告名称" />
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="2">
            <a-form-item label="广告链接" name="adsUrl">
              <a-input v-model:value="vdata.configData.adsUrl" placeholder="请输入广告链接" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item class="bottom-btn" style="margin-top: 10px">
          <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirm"><check-circle-outlined />确认更新</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import {API_URL_SYS_CONFIG, API_URL_ISV_LIST, req, $getConfigs, API_URL_AGENT_LIST} from '@/api/manage'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import dayjs, {Dayjs} from 'dayjs'
import { Base64 } from 'js-base64'

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

const redConfigInfoFormModelRef = ref()

const vdata = reactive ({
  isEdit:$access('ENT_PUSH_CONFIG_EDIT'),
  btnLoading: false,
  groupKey: 'marketingConfig',
  configData: {} as any, // 配置保存对象
  mchApplyTimeLimit: '', // 商户进件时间限制
  agentApplyTimeLimit: '', // 服务商进件时间限制
  castOutFeeRule: { feeType: 'FIX', fixFee: 0, feeRate: 0, freeLimit: 0, applyLimit: 0 },
  isvList: [],
  agentList: [],
}) as any

const defaultConfigRules = {
  // defaultPassword: [{ min:6, message: '请录入至少6位的密码', trigger: 'blur' }],
}

onMounted(()=>{
  // 配置信息
  getConfig()
})


function getConfig() {
  console.log(vdata.groupKey,'vdata.groupKey')
  $getConfigs(vdata.groupKey).then(res => {
    console.log(res,'res')
    res.forEach(item => vdata.configData[item.configKey] = item.configVal )

  })
}

// 更新配置
function confirm () {
  redConfigInfoFormModelRef.value.validate().then(valid => {




    $infoBox.confirmPrimary('确认更新默认配置吗？', '', () => {
      vdata.btnLoading = true // 打开按钮上的 loading
      const reqData:any = Object.assign({}, vdata.configData)

      req.updateById(API_URL_SYS_CONFIG, vdata.groupKey, reqData)
          .then(res => {
            $infoBox.message.success('修改成功')
            vdata.btnLoading = false

            getConfig()
          }).catch(res => {
        vdata.btnLoading = false
      })
    })
  })
}

// 点击不限制进件日期时显示的默认日期范围
const initDateRange = ref<[Dayjs, Dayjs]>([
  dayjs('00:00:00', 'HH:mm:ss'),
  dayjs('23:59:59', 'HH:mm:ss'),
])

// 勾选“不限制”按钮时的时间数据处理 -- 商户配置
function changeMchRange(value){
  if (value.target.checked) {
    vdata.mchApplyTimeLimit = ''
    vdata.configData.mchApplyTimeLimit = ''
  } else {
    vdata.mchApplyTimeLimit = initDateRange.value
    vdata.configData.mchApplyTimeLimit = JSON.stringify(['00:00:00', '23:59:59'])
  }
}

// 勾选“不限制”按钮时的时间数据处理 -- 服务商配置
function changeAgentRange(value){
  if (value.target.checked) {
    vdata.agentApplyTimeLimit = ''
    vdata.configData.agentApplyTimeLimit = ''
  } else {
    vdata.agentApplyTimeLimit = initDateRange.value
    vdata.configData.agentApplyTimeLimit = JSON.stringify(['00:00:00', '23:59:59'])
  }
}

// 商户进件时间限制  传给后端的格式 '' 或 时间数组字符串
function onRangeChangeMch(value: any, dateString: any) {
  if (!dateString[0] && !dateString[1]) {
    vdata.configData.mchApplyTimeLimit = ''
    return
  }
  if (dateString[0] && !dateString[1]) {
    dateString[1] = '23:59:59'
  } else if (!dateString[0] && dateString[1]) {
    dateString[0] = '00:00:00'
  }
  vdata.configData.mchApplyTimeLimit = JSON.stringify(dateString)
}

// 进件时间限制  传给后端的格式 '' 或 时间数组字符串
function onRangeChangeAgent(value: any, dateString: any) {
  if (!dateString[0] && !dateString[1]) {
    vdata.configData.agentApplyTimeLimit = ''
    return
  }
  if (dateString[0] && !dateString[1]) {
    dateString[1] = '23:59:59'
  } else if (!dateString[0] && dateString[1]) {
    dateString[0] = '00:00:00'
  }
  vdata.configData.agentApplyTimeLimit = JSON.stringify(dateString)
}

</script>
<style lang="less" scoped>
.bottom-btn{
  /deep/ div{
    display: flex;
    justify-content: center;
  }
}
</style>
