<template>
  <div class="rentrun">
    <div class="successful_alert">
      <van-row class="head_icon" type="flex" align="center" justify="center">
        <icon name="overdue_deduction" v-if="total === err_count" class="overdue_deduction"></icon>
        <icon name="sucessful_icon" v-else class="sucessful_icon"></icon>
      </van-row>
      <van-row style="text-align: center; padding: 0.32rem;">
        <van-col v-if="total === err_count" span="24">提交失败</van-col>
        <van-col v-else span="24">提交成功</van-col>
      </van-row>
    </div>

    <van-row class="row_line_bg">
      <van-col span="24">
        <span class="color_blue">提交成功: {{success_count}}</span> /
        <span class="color_red">提交失败：{{err_count}}</span> /
        <span class="color_grey">已提交：{{total}}</span>
      </van-col>
    </van-row>

    <div class="body_com has_header" >
      <scroller>
        <van-cell-group>
          <van-cell v-for="(item,index) in list" :key="index" :title="item.target" :label="item.msg || item.rule_item" >
            <template slot="title">
              <Wxopendata type="userName" :openid="item.target"></Wxopendata>
            </template>
            <template #value>
              <span v-if="item.point != 0" :class="item.point>0?'color_blue':'color_red'">{{item.point}}</span>
            </template>
          </van-cell>
        </van-cell-group>
      </scroller>
    </div>
    <van-row>
      <van-col span="12">
        <div class="buttom_btn one" @click="go">+ 继续添加</div>
      </van-col>
      <van-col span="12">
        <div class="buttom_btn color_blue" @click="$router.replace('/home')">> 返回</div>
      </van-col>
    </van-row>
  </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 () {
      this.$router.push(this.url)
    },
    handleData (data) {
      this.list = data.result.list
      this.url = data.detail_url
      this.err_count = data.result.fail_count
      this.success_count = data.result.success_count
      this.total = data.result.total
    }
  },
  created () {

  },
  activated () {
    let callback_data = window.plus ? JSON.parse(plus.storage.getItem('callback_data')) : JSON.parse(localStorage.getItem('callback_data'))
    this.handleData(callback_data)
  },
  mounted () {
    window.plus ? this.isPhone = true : this.isPhone = false
    let callback_data = window.plus ? JSON.parse(plus.storage.getItem('callback_data')) : JSON.parse(localStorage.getItem('callback_data'))
    this.handleData(callback_data)
  },
  data () {
    return {
      list: [],
      url: '',
      err_count: '',
      success_count: '',
      total: '',
      isPhone: false
    }
  }
}

</script>

<style scoped>
.body_com {
  height: calc(100vh - 6.4rem);
  position: relative;
}
.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/ .head_icon .overdue_deduction{
  width:1.28rem;
  height:1.28rem;
  color:#F56C6C;
  padding-top:0.5rem;
}

.row_line_bg{
  background: #f1f1f1;
  font-size: 0.32rem;
  padding: 0.1rem 0.32rem;
}

.buttom_btn{
  line-height: 0.83rem;
  text-align: center;
  font-size: 0.32rem;
  position: relative;
  /* color: #909399 */
}
.buttom_btn.one::after{
  content: '';
  width: 1px;
  height: 0.85rem;
  background: #f1f1f1;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.color_blue{
  color:#26A2FF;
}
.color_red{
  color: #F56C6C;
}
.color_grey{
  color: #909399;
}
</style>
