<template>
   <div class="rentrun">
    <scroller>

     <div class="successful_alert">

      <van-row class="head_icon" type="flex" align="center" justify="center">
        <icon name="sucessful_icon" class="sucessful_icon"></icon>
      </van-row>

       <van-row  span="24" type="flex" align="center" justify="center">
          <van-col>
            <van-cell :center="true" :title="title"></van-cell>
            <van-cell style="padding: 0rem 0.32rem;text-align: center" title-class="lookinfo" v-if="url != ''" @click="$router.push({path: url})" title="查看详情 >"></van-cell>
        </van-col>
      </van-row>




     </div>
      <van-cell-group v-if="result && result.length > 0">
        <van-cell v-for="(item, index) in result" :key="index">
          <template slot="title">{{item.target}}</template>
          <template slot="label">
            <span>{{item.rule_item || item.msg}}</span>
          </template>
          <template slot="right-icon">
            <span v-if="item.point > 0" class="color_red">+{{item.point}}</span>
            <span v-if="item.point < 0" class="color_green">{{item.point}}</span>
          </template>
        </van-cell>
      </van-cell-group>
     <div class="choose_model">

      <van-divider style="font-size:0.28rem;color:#909399;">你可以继续进行以下操作</van-divider>

       <van-row>
          <van-col  v-for="(item,index) in meum" :key="index" span="12" @click="go(item)">
            <van-row type="flex" justify="center">
              <van-col span="12" gutter="90">
                {{item.text}}
              </van-col>
              <van-col span="12" gutter="40">
                <van-image
                  width="44"
                  :src="item.image"
                />
              </van-col>
            </van-row>
          </van-col>
        </van-row>

     </div>

     <van-cell class="bottom_button" @click="$router.replace('/home')" title="返回"></van-cell>

    </scroller>
   </div>
</template>
<script>
  import Vue from 'vue'
  import {Image,Col, Row ,Divider} from 'vant'
  Vue.use(Image).use(Col).use(Row).use(Divider);
  export default {
    name: "callback",
    methods:{
      go(item){
        if(window.plus){
          plus.navigator.setStatusBarStyle('light');
          document.documentElement.style.backgroundColor = '#238dfa';
        }
        this.$router.replace(item.url)
      }
    },
    created(){

    },
    activated(){
      let data = JSON.parse(localStorage.getItem('callback_data'))
      this.title = data.title
      this.url = data.detail_url
      this.result = data.result
      this.$forceUpdate()
    },
    data() {
      return {
        title: '',
        url: '',
        result: [],
        meum: [
          {
            value: '1',
            text: '录入B分',
            image:'static/images/B.png',
            url: '/integral_entry_n?type=2'
          },
          {
            value: '2',
            text: '申请积分',
            image:'static/images/c.png',
            url: '/integral_apply'
          },
          {
            value: '3',
            text: '录入A分',
            image:'static/images/A.png',
            url: '/integral_entry_n?type=1'
          },
          // {
          //   value: '4',
          //   text: '发布绩效',
          //   image:'static/images/E.png',
          //   url: '/efficiency_create'
          // },
          {
            value: '5',
            text: '临时任务',
            image:'static/images/D.png',
            url: '/short_task'
          },
          {
            value: '6',
            text: '悬赏任务',
            image:'static/images/F.png',
            url: '/temp_task'
          }
        ]
      }
    }


  }

</script>

<style scoped>
.rentrun {
  width:100vw;
  background: #fff;
}
.successful_alert{padding-top:1rem;}
.successful_alert /deep/ .head_icon .sucessful_icon{
  width:1.28rem;
  height:1.28rem;
  color:#26A2FF;
  padding-top:0.5rem;
}
.successful_alert /deep/ .van-cell{
  text-align: center;
  padding:0.2rem 0 0.08rem;
}
.successful_alert /deep/ .van-cell:after{
  border:none;
}
.successful_alert /deep/ .van-cell .van-cell__title span{
   color: #303133;
   font-size: 0.4rem;
 }
.successful_alert /deep/ .van-cell .lookinfo span{
  color: #909399;
  font-size: 0.28rem;
}
/deep/ .choose_model{
    padding-top:0.5rem;
}
/deep/ .choose_model .van-row .van-col {
  width:3.08rem;
  margin:0.2rem 0.275rem;
  padding:0.4rem 0 0.2rem;
  background:#F8F8F8;
  border:0.02rem solid transparent;
  border-radius:0.32rem;
}
/deep/ .choose_model .van-row .van-col:active{
  color:#26A2FF;
  border:0.02rem solid #26A2FF;
}
/deep/ .choose_model .van-row .van-col .van-row .van-col{
  vertical-align: middle;
  width: auto;
  font-size: 0.32rem;
  height: 1rem;
  line-height: 0.8rem;
  font-weight: normal;
  margin: 0;
  padding: 0 0 0 0.12rem;
  overflow: hidden;
  border:none;
}
/deep/ .choose_model .van-row .van-col .van-row .van-col  .van-image{
  padding-top:0rem;
  opacity: 0.5;
}
.bottom_button{
  text-align: center;
  font-size:0.32rem;
  color:#26A2FF;
  line-height: 1rem;
  margin:0;
  padding: 0;
}
.bottom_button:active{
  color:#1c1c1c;
}
</style>
