<template>
  <div class="main">
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="integralVisible"
      centered
      width="1250px"
      class="model_class"
      :before-close="IntegralmodalClose"
    >
      <header style="width: 100%;height: 70px;">
        <div class="headerclass">
          <div class="headermain">
            <div :class="['mode-tab', type == 1 ? 'active':'']" @click="typechange(1)">
              <div class="tab-icon">
                <svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
                  <use :xlink:href="'#' + (type == 1 ? 'icon-jifen-01':'icon-jf1')" />
                </svg>
              </div>
              <span :class="['tab-title', type == 1 ? 'active':'']">积分充值</span>
            </div>
            <div :class="['mode-tab','solo', type == 2 ? 'active':'']" @click="typechange(2)">
              <div class="tab-icon">
                <svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
                  <use :xlink:href="'#' + (type == 2 ? 'icon-jifen-01':'icon-jf1')" />
                </svg>
                <svg class="icon recommend" aria-hidden="true" style="width: 65px;height: 65px;">
                  <use xlink:href="#icon-tuijian2" />
                </svg>
              </div>
              <span :class="['tab-title', type == 2 ? 'active':'']">查询包月</span>
            </div>
          </div>
        </div>
      </header>
      <div class="hqpGER">
        <div class="left-container">
          <div class="left-main">
            <div v-if="type == 1">
              <div class="flex-c title">
                积分查询服务内容
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;">
                <div v-for="(item,i) in integralinfo" :key="i" style="margin-top:15px">
                  <i class="circle" />
                  <span class="jieshao">{{ item.title }}</span>
                  <div v-if="!!item.subtitle" class="bujieshao">
                    {{ item.subtitle }}
                  </div>

                </div>
                <div style="color:red;margin-top:10px">
                  每月入库安卓机器3000台以上建议使用包月服务
                </div>
              </div>
            </div>
            <div v-else>
              <div class="flex-c title">
                包月服务内容
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;">
                <div v-for="(item,i) in monthinfo" :key="i" style="margin-top:15px">
                  <i class="circle" />
                  <span style="margin-left:10px">{{ item.title }}</span>
                  <div v-if="!!item.subtitle" style="font-size:14px;margin-top:10px;color:rgb(93, 111, 143)">
                    {{ item.subtitle }}
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-container">
          <div class="right-main">
            <div style="margin-bottom: 32px;">
              <span class="title">当前积分:{{ aginfo ? aginfo.integral :'' }} <span v-if="type == 2" style="color:#e65555;margin-left:5px">本服务仅对安卓查询有效</span></span>
              <div class="info-title" style="margin:10px">积分规则: 一积分 = 一块钱</div>
            </div>
            <div v-if="type == 1">
              <div class="title" style="margin-bottom: 32px;">购买积分</div>
              <el-row :gutter="24">
                <el-col v-for="(e,i) in combo" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  <el-card
                    class="cardclass"
                    shadow="hover"
                    :style="{border:(show==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }"
                    @click.native.prevent="hidetrue(e)"
                  >
                    <span class="points">购买{{ e.points }}积分</span>
                    <p class="give">赠送{{ e.give }}积分</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <div class="title" style="margin-bottom: 32px;">购买包月 <span style="color:#e65555;margin-left:5px">反馈新老用户专享8折优惠</span></div>
              <el-row :gutter="24">
                <el-col v-for="(e,i) in monthList" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="monthclass" shadow="hover" :style="{border:(monthshow==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }" @click="monthhidetrue(e)">
                    <div class="monthmain">
                      <i :class="'iconfont ' + e.icon" style="font-size: 20px;" />
                      <span style="font-size: 25px;">{{ e.title }}</span>
                      <el-badge :value="e.discount" class="item" style="margin-top:10px">
                        <h2 style="color:#e65555">￥{{ e.money }}</h2>
                      </el-badge>
                      <del>￥{{ e.oldmoney }}</del>
                      <div class="xianshi">
                        <svg class="icon " aria-hidden="true" style="width: 60px;height: 60px;">
                          <use xlink:href="#icon-jf2-01" />
                        </svg>
                        <div class="text">限时</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div style="margin-top: 90px;font-size: 16px;font-weight: bold;">
                <div v-if="!!aginfo.last_time">
                  剩余时间:{{ aginfo ? intervalTime(new Date().getTime(),aginfo.last_time) :'' }}
                </div>
                <div><el-link type="primary" @click="server">开通服务记录</el-link></div>
              </div>
            </div>
          </div>
          <div class="right-r">
            <div class="title">购买详情</div>
            <div class="flex-b" style="height: 32px;">
              <div class="info-title">方案名称</div>
              <div class="info-value">{{ type == 1 ? '购买积分' :'购买包月' }}</div>
            </div>
            <div class="flex-b" style="height: 32px;">
              <div class="info-title">{{ type == 1 ? '购买积分' :'购买时长' }}</div>
              <div class="info-value">{{ czform['price'] }}</div>
            </div>
            <div v-if="type == 1" class="flex-b" style="height: 32px;">
              <div class="info-title">赠送积分</div>
              <div class="info-value">{{ !!czform['name']?czform['name']:'无' }}</div>
            </div>
            <div v-else class="flex-b" style="height: 32px;">
              <div class="info-title">预计到期</div>
              <div class="info-value">{{ czform['lasttime'] }}</div>
            </div>
            <div class="flex-b" style="height: 32px;">
              <div class="info-title">积分金额</div>
              <div class="info-value">￥{{ czform['price'] }}</div>
            </div>
            <div class="right-bottom">
              <h4 style="margin-top:10px">充值方式</h4>
              <div>
                <el-radio-group v-model="radiovalue">
                  <el-radio v-for="(item,i) in radioList" :key="i" style="margin-left:15px" :label="item.value">
                    <i :style="item.style" :class="item.icon" />
                    {{ item.title }}
                  </el-radio>
                </el-radio-group>
              </div>
              <div class="flex-b" style="margin-top:10px">
                <span style="font-size: 16px;color: rgb(93, 111, 143);">应付金额:</span>
                <span style="color:#ff6b81;font-size: 24px;">￥{{ czform['price'] }}</span>
              </div>
              <el-button type="primary" style="width:100%;margin-top:2px" :disabled="!checked" @click="IntegralmodalOk">立即购买</el-button>
              <div style="margin-top: 10px;">
                <el-checkbox v-model="checked" style="margin-right:5px" />我已阅读并同意<a target="_blank" style="color: rgb(41, 141, 248);" rel="noopener noreferrer" class="tos" href="https://www.yuque.com/aiguoerp/lcgmke/oa0z3fwethsor57l?singleDoc#">《积分协议》</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="recordList" :close-on-click-modal="false" title="开通服务">
      <el-table
        :data="recordDate"
        style="border-width: 1px 2px 0 2px;border-style: solid solid none solid; border-color: #ebeef5"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center','background':'#f9f9fa','color':'#606266'}"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column label="日期" prop="add_time">
          <template #default="{row}">
            {{ row.add_time| dateformat("YYYY-MM-DD") }}
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="remark" />
        <el-table-column label="时长">
          <template #default="{row}">
            <span>{{ row.months }}个月</span>
          </template>
        </el-table-column>
        <el-table-column label="实付金额" prop="pay_amount" />
        <el-table-column label="支付方式">
          <template #default="{row}">
            {{ row.pay_channel===1?'微信':row.pay_channel===2?'支付宝':'/' }}
          </template>
        </el-table-column>
        <el-table-column label="支付时间">
          <template #default="{row}">
            {{ row.add_time| dateformat("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top: 15px">
        <el-button size="small" @click="recordList=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { open_service_record } from '@/api/System'
export default {
  data() {
    return {
      recordList: false,
      recordDate: [],
      Visible: false,
      czform: { content: '', name: '', time: '', price: '' },
      checked: false,
      type: 2,
      cardList: [
        { title: '9', text: '赠送三个月', money: '9', style: "{display:(show==0 ? 'block': 'none') }" },
        { title: '49', text: '赠送一个月', money: '49', style: "{display:(show==1 ? 'block': 'none') }" },
        { title: '99', text: '无时长赠送', money: '99', style: "{display:(show==2 ? 'block': 'none') }" },
        { title: '299', text: '无时长赠送', money: '299', style: "{display:(show==2 ? 'block': 'none') }" },
        { title: '499', text: '无时长赠送', money: '499', style: "{display:(show==2 ? 'block': 'none') }" },
        { title: '999', text: '无时长赠送', money: '999', style: "{display:(show==2 ? 'block': 'none') }" }
      ],
      monthList: [
        { title: '1个月', text: '', money: '478', month: 1, oldmoney: '598', discount: '8折', icon: 'icona-huiyuanVIPVIPka', style: "{display:(show==0 ? 'block': 'none') }" },
        // { title: '12个月', text: '', money: '5598', month: 12, oldmoney: '7176', discount: '7.8折', icon: 'iconhuiyuan', style: "{display:(show==1 ? 'block': 'none') }" }
      ],
      radioList: [
        { title: '微信', icon: 'iconfont iconweixin1-copy', value: 1, style: 'color:#7ed321;font-size:20px' },
        { title: '支付宝', icon: 'iconfont iconzhifubao2', value: 2, style: 'color:#0d6bdb;font-size:20px' }
        // {title:'paypal',icon:'iconfont iconpaypal1',value:3,style:"color:#0d6bdb;font-size:20px"},
      ],
      monthinfo: [
        { title: '3万台/月，每台可低至2分钱', subtitle: '' },
        { title: '数量越多，优惠越大', subtitle: '' },
        { title: '保修信息查询，真伪查询', subtitle: '' },
        { title: '购买日期查询', subtitle: '' },
        { title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
        { title: '支持多品牌查询', subtitle: '华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
      ],
      integralinfo: [
        { title: '安卓查询: ￥0.05/台', subtitle: '' },
        { title: '苹果查询: ￥0.27/台', subtitle: '' },
        { title: '保修信息查询,真伪查询', subtitle: '' },
        { title: 'ID锁查询,购买日期查询', subtitle: '' },
        { title: '支持安卓机器包月查询', subtitle: '' },
        { title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
        { title: '支持多品牌查询', subtitle: '苹果、华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
      ],
      radiovalue: 1,
      mon: 12,
      show: 0,
      monthshow: 0,
      month: 1
    }
  },
  computed: {
    ...mapGetters([
      'expire_time'
    ]),
    money() {
      let num = 0
      num = this.mon * 88
      return num
    }
  },
  props: {
    aginfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    integralVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    combo: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted() {
    this.typechange(2)
  },
  methods: {
    async server() {
      console.log('开通')
      this.recordList = true
      const res = await open_service_record()
      console.log(res)
      this.recordDate = res.datas.datas
    },
    addMonth(dateTar, offset) {
      var date = new Date(dateTar)
      if (date instanceof Date && !isNaN(offset)) {
        const givenMonth = date.getMonth()
        const newMonth = givenMonth + offset
        date.setMonth(newMonth)
        return this.getCurrentDate(date)
      }
    },
    getCurrentDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    typechange(e) {
      this.type = e
      if (e == 1) {
        this.show = 0
        this.hidetrue(this.combo[0])
      } else {
        this.monthshow = 0
        this.monthhidetrue(this.monthList[0])
      }
    },
    monthhidetrue(e) {
      this.monthList.map((r, i) => {
        if (e.title == r.title) {
          this.monthshow = i
          this.czform['content'] = this.monthList[i].title
          this.czform['price'] = this.monthList[i].money
          this.czform['month'] = this.monthList[i].month
          this.czform['lasttime'] = this.addMonth(this.aginfo.last_time ? this.aginfo.last_time * 1000 : new Date(), this.monthList[i].month)
          this.month = this.monthList[i].month
        }
      })
    },
    hidetrue(e) {
      this.combo.map((r, i) => {
        if (e.points == r.points) {
          this.show = i
          // this.$set( this.czform, 'content', e.title)
          this.czform['price'] = e.points
          this.czform['name'] = e.give
        }
      })
    },
    IntegralmodalOk() {
      let obj = {}
      if (this.type == 1) { // 积分充值
        obj = { pay_type: 4, points: this.combo[this.show].points, key_id: this.combo[this.show].combo_id, pay_status: this.radiovalue }
      } else { // 包月
        obj = { pay_type: 5, months: this.month, actual_price: this.monthList[this.monthshow].money, pay_status: this.radiovalue }
      }
      this.$emit('IntegralmodalOk', obj)
      console.log(obj)
      this.$emit('update:integralVisible', false)
    },
    IntegralmodalClose() {
      this.checked = false
      this.$emit('update:integralVisible', false)
    },
    // 时间戳转化
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    },
    // 计算两个时间之间的时间差 多少天时分秒
    intervalTime(startTime, endTime) {
      var timestamp = new Date().getTime() // 计算当前时间戳(毫秒级)
      endTime = endTime * 1000
      var date1 = '' // 开始时间
      if (timestamp > startTime) {
        date1 = startTime
      } else {
        date1 = timestamp // 开始时间
      }
      var date2 = endTime // 结束时间
      // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
      var date3 = (date2 - date1) * 1000 // 时间差的毫秒数
      // 计算出相差天数
      var days = Math.floor(date3 / (24 * 3600 * 1000 * 1000))
      // 计算出小时数
      var leave1 = date3 % (24 * 3600 * 1000 * 1000) // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000 * 1000))
      // 计算相差分钟数
      var leave2 = leave1 % (3600 * 1000 * 1000) // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000 * 1000))
      // 计算相差秒数
      var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)
      // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
      return days + '天 '
    }
  }
}
</script>

<style scoped>
.jieshao{
   margin-left:10px;
   font-size:14px;
}
.bujieshao{
    font-size:14px;
    margin-top:10px;
    color:rgb(93, 111, 143)

}
.model_class >>> .el-dialog__body{
    padding: 0;
}
.model_class >>> .el-dialog__headerbtn{
    z-index: 999;
}
.mode-tab{
    cursor: pointer;
    width: 332px;
    height: 61px;
    position: absolute;
    left: 26px;
    bottom: -3px;
    z-index: 10;
}
.active{
    z-index: 20;
    color: rgb(255, 255, 255) ;
}
.tab-title.active {
    color: rgb(255, 255, 255);
}
.solo{
    left: 336px;
}
.tab-icon{
    position: relative;
    /* svg{
        position: unset;
    } */
}
.tab-icon >>> svg{
    position: unset;
}
.recommend{
    position: absolute !important;
    right: 0% !important;
    top: -3px !important;
    width: 86px;
}
.tab-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: rgb(93, 111, 143);
}
.headerclass{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}
.headermain{
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 20px;
    margin-left: 256px;
}
.model_top{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height:220px
}
.model_class{
    width: 100%;
}
.hqpGER{
    position: relative;
    width: 100%;
    height: 588px;
    display: flex;
    margin-top: 12px;
    padding: 0px 25px 28px 24px;
}
.left-container{

}
.left-main{
    position: relative;
    width: 245px;
    height: 560px;
    padding: 32px 12px 24px;
    border: 1px solid rgb(218, 235, 254);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    /* color: rgb(93, 111, 143);     */
    color: #000;
}
.right-container{
    /* width: 916px; */
    margin-left: 15px;
    display: flex;
}
.right-main{
    background: rgb(255, 255, 255);
    width: 637px;
    overflow: hidden auto;
    border-radius: 0px 0px 0px 8px;
    padding: 30px 23px 30px 27px;
}
.right-r{
    width: 279px;
    height: 100%;
    background: rgb(255, 255, 255);
    border-radius: 0px 8px 8px 0px;
    padding: 30px 19px 22px 18px;
    border-left: 1px solid rgb(229, 229, 229);
}
.right-bottom{
    height: 180px;
    position: absolute;
    bottom: 38px;
    border-top: 1px solid rgba(200, 205, 208, 0.3);
}
.info-title{
    font-size: 14px;
    color: rgb(93, 111, 143);
    line-height: 14px;
    font-weight: 400;
}
.info-value{
    font-size: 14px;
    color: rgb(53, 68, 93);
    text-align: right;
    line-height: 14px;
    font-weight: 400;
}
.model_class >>> .el-dialog__header{
   padding: 0;
}
.model_class >>> .el-dialog-wrap{
    z-index: 9999 !important;
}
.model_class >>> .el-dialog-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top:0px;
}
.model_class >>>.el-dialog__body{
    /* background: url('https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo_chaxun/jf_blg.png'); */
    background-size: 108% 35% ;
    background-repeat: no-repeat;
    background: rgb(241, 248, 255);
    width: 100%;

}
/* .model_class >>> .circle {
    border-radius: 50% ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(255,255,255,0.5) ,rgba(255,255,255,0.2), rgba(255,255,255,0));
    width: 150px;
    height: 150px;
} */
.circle2{
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    width: 150px;
    height: 38px;
    background:#fff ;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.cardclass{
    position: relative;
    /* border: 2px solid #e5e5e5; */
    color: #000;
    font-size: 16px;
    height: 100px;
    width: 160px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}
.cardclass >>> .ant-divider-horizontal{
    margin: 15px 0;
}
.monthclass{
    cursor: pointer;
    position: relative;
    width: fit-content;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(219, 219, 219);
    border-radius: 8px;
}
.monthmain{
    width: 150px;
    height: 178px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
    padding: 0px 19px;
    border: 1px solid transparent;
}
.el-card{
    overflow: unset;
}
.tj{
    position: absolute;
    top: 0px;
    right: 0px;
    background: #4a90e2;
    padding: 0px 0px;
    width: 33px;
    color: #fff;
    line-height: 18px;
    font-size: 12px;
}
.guoguo{
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 18px;
    width: 22px;
    background: url(https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/static/assets/xiaogou.png) 0px bottom;
    background-size: 100%;
    display: none;
}
.circle {
    display: inline-block;
    width: 14px;
    height: 14px;
}
.circle:after {
    content: '';
    margin: 3px;
    display: table;
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border-radius: 50%;
}
.title{
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: rgb(53, 68, 93);
}
.xianshi{
    position: absolute;
    left: -10px;
    top: -18px;
}
.text{
    position: absolute;
    top: 12px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: rgb(255, 255, 255);
}
</style>
