<template>
<page-header-wrapper>

     <div class="div-box">
       <a-card style="box-sizing:border-box;">
      <div class="div-top">
            <div class="div-top-title">
             <div  class="div-top-title-tio1">
               <span class="div-top-title-tio-span">{{vdata.productDetail.productName}} </span>
               <a-badge v-if="vdata.productDetail.state == 0 || vdata.productDetail.state == 4" status="default" text="未开通" />
               <a-badge v-if="vdata.productDetail.state == 1" status="warning" text="审核中" />
               <a-badge v-if="vdata.productDetail.state == 3" status="success" text="已开通" />
               <a-badge v-if="vdata.productDetail.state == 2" status="error" text="驳回待修改" />
               <a-tooltip  v-if="vdata.productDetail.state == 2"  :title="vdata.productDetail.stateDesc" >
                 <info-circle-outlined style="color: #FFD080;margin-left: 10px"/>
               </a-tooltip>
             </div>
              <div class="div-top-title-tio2" @click="getState(1)">
                <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
              </div>
            </div>
<!--           <a-divider />-->
<!--            <div class="div-top-line"></div>-->
            <p v-if="vdata.productDetail.state == 2" class="div-cancel-p">审核驳回备注：{{ vdata.productDetail.stateDesc }}</p>
            <div class="div-top-des" v-if="vdata.productDetail.state == 3">
               <span class="div-top-des3">已管理应用 {{vdata.productDetail.applyCount}}</span>
              <span  class="div-top-des4"  @click="getState(2)">立即创建应用</span>
              <span  class="div-top-des-span1"  @click="getState(2)">管理应用</span>
            </div>

<!--        <div v-if="vdata.productDetail.state == 3">-->
<!--          <span  class="div-top-des-span1"  @click="getState(2)">管理应用</span>-->
<!--          &lt;!&ndash; <span  class="div-top-des-span2">关闭产品</span> &ndash;&gt;-->
<!--        </div>-->

            <div class="div-top-des1">{{vdata.productDetail.productDesc}}</div>
           <div class="changjing-div-box-button" v-if="vdata.productDetail.packageInfoRelevancyList.length > 0 || vdata.productDetail.productInfoRelevancyList.length > 0 || vdata.productDetail.payInterRelevancyList.length > 0">
            <div class="changjing-box" v-if="vdata.productDetail.packageInfoRelevancyList.length > 0">
              <div class="changjing-title">关联方案</div>
              <div class="changjing-content" >
                <span class="span" v-for="(item, index) in vdata.productDetail.packageInfoRelevancyList" :key="index" @click="getPackageDeatil(item)">{{ item.name }}</span>
              </div>
            </div>
            <div class="changjing-box"  v-if="vdata.productDetail.productInfoRelevancyList.length > 0">
              <div class="changjing-title">关联产品</div>
              <div class="changjing-content">
                <span class="span" v-for="(item, index) in vdata.productDetail.productInfoRelevancyList" :key="index" @click="getProductDeatil(item)">{{ item.productName }}</span>
              </div>
            </div>
            <div class="changjing-box"  v-if="vdata.productDetail.payInterRelevancyList.length > 0">
              <div class="changjing-title">关联通道</div>
              <div class="changjing-content">
                <span class="span" v-for="(item, index) in vdata.productDetail.payInterRelevancyList" :key="index">{{ item.ifName }}</span>
              </div>
            </div>
          </div>

        <div v-if=" vdata.productDetail.allRemainingDays>0">
          <div v-if="vdata.productDetail.apiCode==='API_SHIPINHAO_CP_PAY'" class="allRemainingDays_box"   @click="getState(12)">进入服务</div>
          <div v-if="vdata.productDetail.apiCode==='API_ANQUANFA_CP_PAY'" class="allRemainingDays_box"   @click="getState(13)">进入服务</div>
        </div>

       </div>

       </a-card>
       <a-card style="box-sizing:border-box;margin-top: 10px;">
      <div >
      <div class="product">
            <div class="product-title">
              <div class="product-title-1">{{vdata.productDetail.typeName}}</div>
              <div class="product-title-1" style="text-align: right;color: #2C6EF6;" @click="toUrl(vdata.productDetail.productUrl)" :style="[!vdata.productDetail.productUrl?'display: none':'']" v-if="vdata.productDetail">查看开发文档</div>
            </div>

        <a-divider />
            <div  class="product-list" style="display: block;">
              <div  class="product-content" v-html="vdata.toastContent" />
            </div>
      </div>
      </div>
       </a-card>
    </div>

  <a-card style="box-sizing:border-box;padding:30px;margin-top: 5px; position: fixed; bottom: 0; width: calc(100% - 340px);" class="product-card" v-if="vdata.productDetail.state != 1 && vdata.productDetail.state != 3">
    <div class="product-bottom"  @click="getState(0)">
      <div class="product-bottom-span">立即开通</div>
    </div>

  </a-card>
</page-header-wrapper>
</template>

<script setup lang="ts">
import { API_URL_PRODUCT_DETAIL_LIST,API_URL_PRODUCT_START_LIST, req } from '@/api/manage'
import {ref, onMounted, reactive, getCurrentInstance, nextTick, defineEmits} from 'vue'
import MchAppAddOrEdit from './Detail.vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import $infoBox from '@/utils/infoBox'
const { $mittBus } = getCurrentInstance()!.appContext.config.globalProperties;

const vdata =  reactive({
      detailType:"detail",
      productDetail: {
        packageInfoRelevancyList:[],
        productInfoRelevancyList:[],
        payInterRelevancyList:[],
      } as any, // 产品列表
      toastContent: '', // 对话框内容
      productId:'' as any ,
    })


const emit = defineEmits(['itemRender'])
//开通
function getState(type = 0){
  if(type == 1){
    $mittBus.emit('specialrouterOnUnmounted',{type:4,index:0})
    emit('itemRender',{'table':'table','productId':vdata.productId,'type':1})
  }else if(type == 2){
    emit('itemRender',{'table':'table','productId':vdata.productId,'type':4})
  }else if(type == 12){
    emit('itemRender',{'table':'sph','productId':vdata.productId,'type':12})
  }else if(type == 13){
    $mittBus.emit('specialrouter',{type:4,index:0})
    // emit('itemRender',{'table':'aqf','productId':vdata.productId,'type':13})
  }else{
    emit('itemRender',{'table':'sign','productId':vdata.productId,'type':2})
  }
  // return false;
  // router.push({
  //   path:'/product/productSign',
  //   query:{productId:vdata.productId}
  // })
  // req.list(API_URL_PRODUCT_START_LIST, { productId: vdata.productId }).then(data => {
  //        console.log(data,'resresres')
  //        $infoBox.message.success(data)
  //        getDetail()
  //  })
}


function getProductDeatil(data){

  emit('itemRender',{'table':'detail','productId':data.productId,'type':6})
}

function getPackageDeatil(data){

  emit('itemRender',{'table':'packageDetail','productId':data.packageId,'type':7})
}

function toUrl(url){
  window.open(url,'url')
}

function toApplication () {
  window.location.href = "/apps"
  // router.push({ name: 'apps', path: '/views/mchApp/List' })
}

function getDetail(){
  if(!vdata.productId){
    return false;
  }
  req.list(API_URL_PRODUCT_DETAIL_LIST, { productId: vdata.productId }).then(data => {
         console.log(data,'resresres')
         vdata.productDetail = data
         vdata.toastContent = data.productContent

      })
}

function show(productId){
  // if(!useRoute().query.productId){
  //   router.push({
  //     path:'/productCenter',
  //   })
  // }
  vdata.productId  = productId
  getDetail()
}

defineExpose({ show })

</script>

<style scoped lang="less">
.div-top{
    background: #ffffff;
    padding: 20px 20px;
    border-radius: 10px;
}
.div-top-title{
    display: flex;
    position: relative;
    margin-bottom: 10px;
}
.div-top-title-tio-span{
  font-size: 17px;
  font-weight: 600;
}
.div-top-title-tio1{
  width: 50%;
}
.div-top-title-tio2{
  width: 50%;
  text-align: right;
}

.div-top-title-tio2 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;
}


.div-top-title span{
  padding-right: 10px;
}
.div-top-title::after{

    //content: '' !important;
    //display: block !important;
    //position: absolute !important;
    ///* bottom: -8px !important; */
    //background-color: rgba(44, 110, 246, 1) !important;
    //border-radius: 45px !important;
    //width: 35px !important;
    //height: 3px !important;
    //text-align: center !important;
}
.div-top-des{
    color: #2C6EF6;
    margin-top: 15px;
    margin-bottom: 30px;
}
.div-top-line{
  border-bottom: 1px solid #EDEDED;
}
.div-top-status{
  display: flex;
  margin: 18px 0;
  font-size: 13px;
}
.div-top-status-title{
  padding-right:10px;
  color:#767676;
}
.div-top-status-title-span{
  padding: 0 10px;
  font-weight: 600;
}
.div-top-active{
  color: #2C6EF6;
}

.div-top-des1{
    color: #6c7380;
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 14px;
}

/*列表 */
.product{
    background: #ffffff;
    padding: 20px 20px;
    border-radius: 10px;
    //margin-top: 20px;;
}
.product-title{
    font-size: 17px;
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
}
.product-list{
  width: 100%;
  margin-top: 25px;
  display: block;
  flex-wrap: wrap;
  min-height: 300px;
  position: relative;
}
.product-list-li{
    background: #F9FAFA;
    width: 32%;
    padding: 20px;
    border-radius:10px;
    margin: 10px;
}
.product-list-li-span1{
  font-size: 16px;
    font-weight: 600;
}
.product-list-li-span2{
  font-size: 13px;
    color: #2C6EF6;
    padding-left: 15px;
}
.product-list-li-desc{
  margin-top: 20px;
}
.product-list-li-span3{
  font-size: 13px;
    color: #767676;
}
.color-e3{
  color: #767676;
}
.color-yellow{
  color: rgb(250, 118, 0);
}
.color-red{
 color: #FF0000;
}
.color-blue{
  color: #2C6EF6;
}

.color-cancel{
  color: #767676;
}
.div-top-sjapn{
  font-size: 13px !important;
  margin-left: 10px;
  font-weight: 500;
}

.color-e3{
  color: #767676;
}
.color-yellow{
  color: rgb(250, 118, 0);
}
.color-red{
 color: #FF0000;
}
.color-blue{
  color: #2C6EF6;
}

.color-cancel{
  color: #767676;
}
.div-top-des-span1{
  padding: 5px 20px;
    background: #2C6EF6;
    color: #ffffff;
    border-radius: 10px;
}
.div-top-des-span2{
  padding: 5px 20px;
    background: #F7F7F7;
    color: #767676;
    border-radius: 10px;
    margin-left: 10px;
}
.div-top-des3{
  font-size: 13px;
  font-weight: 600;
  color: #000 !important;
}
.div-top-des4{
  padding: 5px 20px;
    /* background: #2C6EF6; */
    color: #2C6EF6;
    border-radius: 10px;
    margin-left: 10px;
}
.div-cancel-p{
  font-size: 16px;
  color: #FF0000;
  margin: 10px 0;
}
.div-box{
  //height: 100% !important;
    overflow: hidden !important;
    flex:  none !important;
}
.product-bottom{
  width: 100%;
  //text-align: end;
  display: flex;

}
.product-bottom-span{
  padding: 10px 25px;
    background: #2C6EF6;
    color: #ffffff;
    border-radius: 11px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    margin: 10px 0;
}
.product-bottom-span1{
  padding: 10px 50px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  color: #000000;
  border-radius: 11px;
  position: absolute;
  left: 60%;
  font-size: 16px;
  bottom: 0;
  font-weight: bold;
  transform: translate(-50%);
  margin: 10px 0;
}
 .product-content{
  overflow: auto;
  /* min-width: 400px; */

}
.product-title-1{
  width: 50%;
}
::v-deep .product-content img{
  width: 100% !important;
  }
.changjing-div-box-button{
  background: #f4f6f8;
  padding: 10px;
  border-radius: 10px;
}
.changjing-box{
  display: flex;
  margin: 10px 0 ;
}

.changjing-title{
  color: #6c7380;
  margin-right:10px;
}

.changjing-content span{
   border: 1px solid #d7dee7;
  padding: 2px 15px;
   border-radius: 30px;
   color: #6c7380;
   font-size: 12px;
   margin-right: 5px;
}

.changjing-content .span{
  border: 1px solid #3c87e9;
  padding: 2px 15px;
  border-radius: 30px;
  color: #3c87e9;
  font-size: 12px;
  background: #ffffff;
  margin-right: 5px;
}

.product-bottom-span-box{
   width: 100%;
   display: flex;
  .product-bottom-span{
    padding: 10px 25px;
    background: #2C6EF6;
    color: #ffffff;
    border-radius: 11px;
    position: absolute;
    //left: 50%;
    bottom: 0;
    transform: translate(-50%);
    margin: 10px 0;
  }
}
.allRemainingDays_box{
  padding: 10px 0;
  background: #2C6EF6;
  color: #ffffff;
  border-radius: 11px;
  margin: 10px 0;
  width: 120px;
  text-align: center;
}
</style>
