<template>
  <page-header-wrapper>
    <a-card style="box-sizing:border-box;padding:20px;margin-top: 10px;">
      <div  style="width: 100%;" class="paydemo">
        <div class="paydemo-type-content">
          <div class="paydemo-type-name article-title paydemo-type-name-div">
            <div class="article-title-top1">关联应用</div>
            <div class="article-title-top2 div-top-title-tio2" @click="submitPay(1)">
              <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
            </div>
          </div>
          <a-divider />
          <div class="title-content" v-if="vdata.orderType == 1">

            <a-form>
              <div style="display:flex;flex-direction:row">
                <a-col :span="11" v-if="$access('ENT_MCH_APP_LIST')">
                  <a-form-item label="关联应用" name="appId">
                    <a-select v-model:value="vdata.appId" placeholder="选择应用" show-search @search="handleAppidChange" :filter-option="false">
                      <a-select-option v-for="(item) in vdata.filteredAppInfoList" :key="item.appId">{{ item.appName }} [{{ item.appId }}]</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-button style="margin-left: 15px;"  type="primary" @click="submitPay(2)"><plus-outlined />创建应用</a-button>

              </div>
            </a-form>
          </div>
        </div>
      </div>
    </a-card>

    <a-card style="box-sizing:border-box;padding:20px;margin-top: 10px;">
      <div  style="width: 100%;" class="paydemo">
        <div class="paydemo-type-content">
          <div class="paydemo-type-name article-title">
            收费信息
          </div>
          <a-divider />
          <div class="title-content" v-if="vdata.orderType == 1">
            <div  class="product-content" v-html="vdata.packageText" />
          </div>
        </div>
      </div>
    </a-card>

    <a-card style="box-sizing:border-box;padding:20px;margin-top: 10px;">
      <a-form  ref="formSage" :model="formState" :rules="sageRules" >
        <div  style="width: 100%;" class="paydemo">
          <div class="product-bottom"  >

            <a-button style="margin-left: 15px;border-radius: 5px;"  type="primary" @click="submitPay(0)">立即开通</a-button>
                <a-form-item name="checked" style="margin-left: 10px;">
                  <a-checkbox  class="checked_size" v-model:checked="formState.checked" @click.stop.prevent="check">我已阅读并同意</a-checkbox>
                  <a class="forge-password checked_size" @click.stop.prevent="servicePaymentFlund">《产品服务合同》</a>
                </a-form-item>
          </div>
        </div>
      </a-form>
    </a-card>

    <a-modal v-model:visible="vdata.visible" :title="vdata.toastTitle" :footer="null" width="70%">
      <div style="height: 70vh; overflow: auto;" v-html="vdata.toastContent" />
    </a-modal>
  </page-header-wrapper>
</template>

<script setup lang="ts">
import {
  API_URL_MCH_APP,
  API_URL_MCH_STORE_LIST,
  req,
  $payTest,
  $payTestOrder,
  $getTreaty,
  API_URL_PACKAGE_DETAIL_LIST
} from '@/api/manage' // 接口
import {ref, onMounted, reactive, getCurrentInstance, nextTick, defineComponent, defineEmits} from 'vue'
import {useRoute} from 'vue-router'
// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties


const route = useRoute()
let formState: any = reactive({
  checked: false,
})
const vdata =  reactive({
  visible: false, // 对话框
  packageId:"",
  toastContent: '', // 对话框内容
  toastTitle: '', // 对话框标题
  mchAppList: [] as any, // app列表
  filteredAppInfoList: [] as any, // app列表
  mchStoreList: [] as any, // 门店列表
  storeId: '', // 已选择的门店ID
  appPaywayList: [] as any, // 商户app支持的支付方式
  currentWayCode: '', // 以何种方式进行支付，默认是微信二维码
  currentPayDataType: '', // 支付参数
  mchOrderNo: '', // 模拟商户订单号
  authCode: '', // 条码的值
  autoPosExtra: {}, // 智能POS参数
  paytestAmount: 0.01, // 支付金额，默认为0.01
  amountInput: false, // 自定金额输入框是否展示
  noConfigText: false, // 尚无任何配置分割线提示文字
  divisionMode: 0, // 订单分账模式
  orderRemarks: '', // 订单标题
  orderNumber: '', // 订单标题
  orderType:1,
  divisionMode1:0.01,  //默认支付金额绑定
  webCashierIsShow: true,  // 是否显示web统一收银台
  packageDetail:{},
  packageText:"",
  appId:"",
})

let formSage = ref()
const sageRules: any = reactive({
  checked: [{ type: 'boolean', required: true, message: '请勾选产品服务合同', trigger: 'check' },{
    validator: (rule, value) => {
      if(formState.checked){
        return Promise.resolve()
      }else{
        return Promise.reject('请勾选产品服务合同')
      }
    }
  }]
})
const infoFormModel = ref()
onMounted(()=>{

})

const emit = defineEmits(['itemRender'])
function submitPay(type){

  if(type == 1){
    emit('itemRender',{'table':'table','packageId':vdata.packageId,'type':1})
  }else if(type == 2){
    emit('itemRender',{'table':'table','packageId':vdata.packageId,'type':4})
  }else{
    formSage.value
        .validate()
        .then(() => {
          emit('itemRender',{'table':'table','packageId':vdata.packageId,'appId':vdata.appId,'type':3})
        })
        .catch((error) => {
          console.log('error', error)
        })
  }
}

function servicePaymentFlund() {
  vdata.visible = true
  vdata.toastTitle = '产品服务合同'
  // message.success('服务协议')
  getTreaty('产品服务合同')
}
const getTreaty = (name) => {
  $getTreaty().then(res => {
    name === '产品服务合同' ? vdata.toastContent = res.servicePaymentFlund
        : vdata.toastContent = res.privacyPolicy
  })
}
function changeAppId(){

}

function check() {
  formState.checked = !formState.checked
}

function  getOrderType(type){
  vdata.orderType = type
}
function show(packageId){
  vdata.packageId = packageId
  getDetail()
  getMchApp()
}

function getDetail(){
  if(!vdata.packageId){
    return false;
  }
  req.list(API_URL_PACKAGE_DETAIL_LIST, { packageId: vdata.packageId }).then(data => {
    vdata.packageDetail = data
    vdata.packageText = data.packageText

  })
}


function getMchApp(){
  req.list(API_URL_MCH_APP, { pageSize: -1 }).then(res => {
    vdata.mchAppList = res.records
    vdata.filteredAppInfoList = res.records
  })
}


//应用搜索
const handleAppidChange = (value) => {
  vdata.filteredAppInfoList = [];
  console.log(vdata.mchAppList,'vdata.storeList')
  vdata.mchAppList.forEach((item: { appName: string | any[], appId: string | any[] },index) => {
    if (item.appName.includes(value) || item.appId.includes(value) ) {
      vdata.filteredAppInfoList.push(vdata.mchAppList[index]);
    }
  });
};


defineExpose({ show })
</script>

<style scoped lang="css">
.article-title-span{
  padding: 0 10px;
}
.span-active{
  color: #1677ff;
}
.span-active::after{
//content: '' !important;
//display: block !important;
//background-color: rgba(44, 110, 246, 1) !important;
//border-radius: 45px !important;
//width: 22px !important;
//height: 4px !important;
}
.paydemo-type-name-div{
  display: flex;
}
.article-title-top1{
  width: 50%;
}
.article-title-top2{
  width: 50%;
  text-align: right;
}
.article-title-top2 bottom{
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.015);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5715;
  padding: 4px 25px !important;
  text-align: center;
}
h4{
  color: #333;
  height: 30px;
  padding: 20px 0;
}
.title-content h3{
  font-weight: bold;
}
.title-content p{
  color: #9b9b9b;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line;
}
.paydemo .paydemo-type-content{
  padding: unset !important;
}
.paydemo-address{
  display: block !important;
  background: #f9f9f9;
  border-radius: 5px;
}
.paydemo-address p{
}

.paydemo-address-div{
  width: 600px;
  display: flex;
}
.span1{
  width: 80px !important;
  text-align:right;
  padding: 15px 10px 0 10px;
}
.span2{
  width: 280px !important;
  text-align:left;
  padding: 15px 5px 0 15px;
}
.span3{
  padding: 5px 0 0 0;
  width: 100px !important;
  text-align:right;
  color: #1677ff;
}
.layui-form{
  margin-top:50px;
}
.paydemo-form-item{
  padding-top:10px ;
  padding-bottom:10px ;
}
.paydemo .paydemo-form-item{
  margin-bottom: 45px;
}
.table-head-layout{
  margin-bottom: unset !important;
  margin-right: 10px;
}
.paydemo-form-item-input{
  display: grid !important;
}

.product-bottom{
  display: flex;
}
.product-bottom-span{
  padding: 10px 25px;
  background: #2C6EF6;
  color: #ffffff;
  border-radius: 11px;
}
.product-bottom-check{
  margin-left: 20px;
  padding-top: 10px;
}
.article-title{
  font-weight: bold;
  font-size: 18px;
}
.ant-card-body{
  background: #f0f0f0 !important;
}
</style>
