<template>
  <div>
    <a-form-item label="显示ID：" name="showIdFlag">
      <a-radio-group v-model:value="vdata.configModel.showIdFlag" @change="thisViewFunc">
        <a-radio :value="true">显示</a-radio>
        <a-radio :value="false">隐藏</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item name="showStoreNameFlag">
      <template #label>
        显示门店名称 &nbsp;
        <a-popover title="提示">
          <template #content>
            <p>* 部分模版不支持该属性。</p>
            <p>* 码牌创建时若未绑定到商户则不会显示名称，绑定商户后则可正常显示。 </p>
          </template>
          <i class="bi bi-info-circle" />
        </a-popover>
      </template>

      <a-radio-group v-model:value="vdata.configModel.showStoreNameFlag" @change="thisViewFunc">
        <a-radio :value="true">显示</a-radio>
        <a-radio :value="false">隐藏</a-radio>
      </a-radio-group>
    </a-form-item>
            
    <a-form-item label="支付方式：">
      <!-- 避免一条没有时， 不显示新增 -->
      <a-button v-show="vdata.configModel.payTypeList.length == 0 " style="margin-left: 10px;" size="small" @click="addPayType()">
        新增支付方式
      </a-button>

      <template v-for="(item, i) in vdata.configModel.payTypeList" :key="item">
        <a-radio-group v-model:value="item.name" @change="thisViewFuncAndChangeText(item)">
          <a-radio value="unionpay">银联</a-radio>
          <a-radio value="ysfpay">云闪付</a-radio>
          <a-radio value="wxpay">微信</a-radio>
          <a-radio value="alipay">支付宝</a-radio>
          <a-radio value="custom">自定义</a-radio>
        </a-radio-group>
        <template v-if="showTypeArrayComputed.payTypeAllowAlias">
          名称: <a-input v-model:value="item.alias" :maxlength="5" style="width: 100px" @blur="thisViewFunc" />
        </template>
        <a-button size="small" @click="removePayType(i)">删除</a-button>

        <a-button v-show="vdata.configModel.payTypeList.length < showTypeArrayComputed.payTypeLength && i == vdata.configModel.payTypeList.length -1 " style="margin-left: 10px;" size="small" @click="addPayType()">
          新增支付方式
        </a-button>

        <div v-if="item.name == 'custom'" class="uploadDiv">
          <JeepayUpload v-model:src="item.imgUrl" style="display: inline;" bizType="ifBG" fileType="img" @change="thisViewFunc" />
          <span class="jeepay-tip-text">{{ showTypeArrayComputed.payTypeImgDesc }}</span>
        </div>
        <br>
      </template>
    </a-form-item>

    <a-form-item label="背景颜色：">
      <a-radio-group v-model:value="vdata.configModel.bgColor" @change="thisViewFunc">
        <a-radio value="#5094d5"><span style="color:#5094d5">蓝色</span></a-radio>
        <a-radio value="#5ccc7e"><span style="color:#5ccc7e">绿色</span></a-radio>
        <a-radio value="#fb7851"><span style="color:#fb7851">红色</span></a-radio>
        <a-radio value="#3835ec"><span style="color:#3835ec">青色</span></a-radio>
        <a-radio value="custom">自定义</a-radio>
      </a-radio-group>
      <a-input v-if="vdata.configModel.bgColor == 'custom'" v-model:value="vdata.configModel.customBgColor" type="color" @blur="thisViewFunc" />
    </a-form-item>

    <a-form-item v-if="showTypeArrayComputed.mainDescTextShowFlag" label="描述文字：">
      <a-input v-model:value="vdata.configModel.descText" style="width: 220px;" @blur="thisViewFunc" />
    </a-form-item>

    <a-form-item label="主logo">
      <div class="uploadDiv">
        <JeepayUpload v-model:src="vdata.configModel.logoImgUrl" bizType="ifBG" fileType="img" @change="thisViewFunc" />
        <span class="jeepay-tip-text">{{ showTypeArrayComputed.mainLogoDesc }}</span>
      </div>
    </a-form-item>

    <a-form-item label="二维码上的logo">
      <div class="uploadDiv">
        <JeepayUpload v-model:src="vdata.configModel.qrInnerImgUrl" bizType="ifBG" fileType="img" @change="thisViewFunc" />
        <span class="jeepay-tip-text">{{ showTypeArrayComputed.qrLogoDesc }}</span>
      </div>
    </a-form-item>
  </div>
</template>
<script lang="ts" setup>

import { inject, getCurrentInstance, reactive, defineProps, computed } from 'vue'

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


// 定义传入属性
const props = defineProps({
  showTextArray: {type: Object, default: () => {} }, // 显示文本
})


// 计算属性 
const showTypeArrayComputed : any = computed((params) => {
  let defaultModel = {

    payTypeLength: 4, // 支付方式最大支持数量
    payTypeAllowAlias: false, // 支付方式是否支持输入文本
    qrLogoDesc: '', //二维码中间文本logo图片上传提示
    mainLogoDesc: '', //主要logo提示文本
    payTypeImgDesc: '', //支付方式上传图片提示文字
    mainDescTextShowFlag: false, //主要的描述问题是否显示

  }
  return Object.assign(defaultModel, props.showTextArray)
})


const vdata : any = reactive({

  configModel: {  // 配置model
    payTypeList: []
  }
  
})

const payTypeTextMap = {
  'unionpay':  '银联',
  'ysfpay':  '云闪付',
  'wxpay':  '微信',
  'alipay':  '支付宝',
}

// 预览函数
let viewFunc : any = inject('viewFunc')

function removePayType(i){

   // 删除当前下标的元素
   vdata.configModel.payTypeList.splice(i, 1)

   thisViewFunc() // 显式调用预览函数

  
}

// 给paytype用
function thisViewFuncAndChangeText(item){
  item.alias = payTypeTextMap[item.name] || ''
  thisViewFunc()
}

// 预览图片
function thisViewFunc(){
  viewFunc()
}

// 新增支付方式
function addPayType(){
   if(vdata.configModel.payTypeList.length >= showTypeArrayComputed.value.payTypeLength){
     return $infoBox.message.error('最多不得大于'+showTypeArrayComputed.value.payTypeLength+'个')
   }
   vdata.configModel.payTypeList.push({ name: 'unionpay', alias: payTypeTextMap.unionpay, imgUrl: '' })

   thisViewFunc() // 显式调用预览函数
}


// 获取请求的req 
function genReqConfigModel(){

  let req = Object.assign({}, vdata.configModel)
  
  if(vdata.configModel.bgColor == 'custom'){
    req.bgColor = vdata.configModel.customBgColor
  }

  return req

}


// 初始化渲染
function pageRender(dbConfigInfo : any){

  vdata.configModel.payTypeList = [
    {name: 'unionpay', alias: payTypeTextMap.unionpay, imgUrl: ''}, 
    {name: 'ysfpay', alias: payTypeTextMap.ysfpay, imgUrl: ''}, 
    {name: 'wxpay', alias: payTypeTextMap.wxpay, imgUrl: ''}, 
    {name: 'alipay', alias: payTypeTextMap.alipay, imgUrl: ''}, 
  ]
  
  vdata.configModel.showIdFlag = true
  vdata.configModel.showStoreNameFlag = false
  vdata.configModel.customBgColor = '#000000'
  vdata.configModel.bgColor = '#5094d5'

  // 包含需要展示的数据
  if(dbConfigInfo){

    // 处理背景颜色选择器颜色
      if(dbConfigInfo.bgColor == '#5094d5' || dbConfigInfo.bgColor == '#5ccc7e' || dbConfigInfo.bgColor == '#fb7851' || dbConfigInfo.bgColor == '#3835ec'){
          vdata.configModel.bgColor = dbConfigInfo.bgColor
      }else{
          vdata.configModel.bgColor = 'custom'
          vdata.configModel.customBgColor = dbConfigInfo.bgColor
      }

      vdata.configModel.payTypeList = []
      // 处理 支付方式 (仅当存在支付方式时处理， 如果不存在该变量)
      if( typeof(dbConfigInfo.payTypeList) !== 'undefined' ){
        vdata.configModel.payTypeList =dbConfigInfo.payTypeList
      }

      vdata.configModel.descText = dbConfigInfo.descText
      vdata.configModel.qrInnerImgUrl = dbConfigInfo.qrInnerImgUrl
      vdata.configModel.logoImgUrl = dbConfigInfo.logoImgUrl
      vdata.configModel.showIdFlag = dbConfigInfo.showIdFlag
      vdata.configModel.showStoreNameFlag = dbConfigInfo.showStoreNameFlag

  }

  thisViewFunc()

}

// 对外提供生成请求的参数
defineExpose({ genReqConfigModel, pageRender })

</script>
<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
</style>