<template>
  <div class="right_con">
    <div class="rightTitle clear">
      <div class="staff_fgx fl"></div>
      <p class="fl staff_list">功能中心</p>
    </div>
    <div class="platformList">
      <div class="platformListWrapper clear">
        <div class="platformItem" v-for="item in featureList" :key="item.id">
          <div class="platformBox">
            <div class="platformMark"><span>超值特惠</span><span>仅需</span><span>￥</span><span>{{item.discounts}}</span></div>
            <div class="platformIcon">
              <img :src="item.icon" :onerror="'this.remove()'" >
            </div>
            <div class="platformText">
              <h3>{{item.title}}</h3>
              <div class="platformDesc" v-html="item.content">
              </div>
              <div class="platformBtn">
                <Button type="primary" v-if="item.status==1" class="platformButton already" >已开通</Button>
                <Button type="primary" v-else class="platformButton" @click="handlerFeatureClick(item)">开通</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <extension-pay :name="title" :show.sync="show" :value="value"></extension-pay>
  </div>
</template>
<script>
import { mapState } from "vuex"
import extensionPay from "@@/extension/extension_pay"
export default {
  name: "extension",
  components: { extensionPay },
  data() {
    return {
      featureList: [],
      show: false,
      value: {},
      title: ''
    }
  },
  computed:{
    ...mapState({
      role_id: state => state.adminInfo.role_id,
    }),
  },
  methods: {
    getData () {
      this.$api.getFeatureList()
        .then(response => {
          if (response.code == 200) {
            this.featureList = response.data
          }
        })
    },
    handlerFeatureClick (item) {
      this.show = true
      this.title = item.title
      this.value = item
    }
  },
  created() {
    this.getData();
  }
}
</script>
<style scoped>
.right_con {
  padding: 0 0 20px;
}
.rightTitle {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
.staff_list {
    width: 120px;
    margin-top: 15px;
    margin-left: 5px;
    font-size: 15px;
}
.platformList {
  width: 100%;
  min-height: 100px;
  padding: 0 3px;
}
.platformListWrapper {
  width: 100%;
}
.platformItem {
  width: 25%;
  padding: 24px 0 0 ;
  float: left;
  min-width: 200px;
}
.platformBox {
  width: 93%;
  height: 280px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E9EDF6;
  box-shadow: 11px 9px 24px 0px rgba(217, 217, 217, 0.1);
  border-radius: 6px;
  padding: 35px 0 0 10px;
  display: flex;
  align-items: top;
  position: relative;
}
.platformIcon {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1px 1px 6px 0px rgba(153, 153, 153, 0.16);
}
.platformIcon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.platformText {
  padding-left: 6px;
  width: 300px;
  font-size: 13px;
  color: #444;
}
.platformText h3 {
  font-size: 14px;
  font-weight: bold;
  line-height: 48px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platformBtn {
  display: flex;
  padding-top: 12%;
  justify-content: center;
}
.platformButton {
  font-size: 14px;
  height: 32px;
  width: 80px;
  line-height: 1;
}
.ivu-btn-primary {
  background-color: #3B82FF !important;
  border-color: #3B82FF !important;
}
.platformButton:hover {
  opacity: .75;
}
.platformButton.already {
  background: #999 !important;
  border-color: #999 !important;
  cursor: not-allowed;
}
.platformButton.already:hover {
  opacity: 1;
}
.platformMark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
}
.platformMark span {
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(170, 41, 52, 0.4);
}
.platformMark span:nth-child(1) {
  font-size: 14px;
  font-weight: bold;
}
.platformMark span:nth-child(2) {
  font-weight: bold;
}
.platformMark span:nth-child(4) {
  font-size: 18px;
  font-weight: bold;
}

</style>