<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 platformList" :key="item.id">
          <div class="platformBox">
            <div class="platformIcon">
              <img :src="item.icon" :onerror="'this.remove()'" >
            </div>
            <div class="platformText">
              <h3>{{item.name}}</h3>
              <div class="platformBtn">
                <Button type="primary" v-if="item.disable==1" class="platformButton already">已激活</Button>
                <Button type="primary" v-else class="platformButton" @click="handlerPlatformClick(item)">激活平台</Button>
                <Button class="platformButton" @click="handlerServiceClick(item)">联系客服</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <platform-service :name="title" :show.sync="show" :value="value"></platform-service>
  </div>
</template>
<script>
import { mapState } from "vuex"
import platformService from '@@/platform/platform_service'
export default {
  name: "platform_center",
  components: { platformService },
  data() {
    return {
      platformList: [],
      show: false,
      value: {},
      title: ''
    }
  },
  computed:{
    ...mapState({
      role_id: state => state.adminInfo.role_id,
    }),
  },
  methods: {
    getData () {
      this.$api.getSystemPlatformList()
        .then(response => {
          if (response.code == 200) {
            this.platformList = response.data
          }
        })
    },
    handlerPlatformClick (item) {
      this.$api.applySystemPlatform({id:item.id})
        .then(response => {
          if (response.code == 200) {
            this.$Message.success(response.msg)
            for(let [key, value] of Object.entries(this.platformList)) {
              if (value.id == item.id) {
                value.status = 1
                break;
              }
            }
          } else {
            this.$Message.error(response.msg)
          }
        })
    },
    handlerServiceClick (item) {
      this.show = true
      this.value = {
        name: item.linkman,
        mobile: item.tel,
        qq: item.qq
      },
      this.title = item.name
    }
  },
  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: 20%;
  padding: 24px 0 0 ;
  float: left;
  min-width: 200px;
}
.platformBox {
  width: 92%;
  height: 110px;
  margin: 0 auto;
  background: #F5F6FA;
  border-radius: 6px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.platformIcon {
  width: 68px;
  height: 68px;
  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: 16px;
  width: 160px;
}
.platformText h3 {
  font-size: 14px;
  font-weight: bold;
  line-height: 48px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platformBtn {
  display: flex;
}
.platformButton {
  font-size: 12px;
  height: 26px;
  width: 64px;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ivu-btn-primary {
  background-color: #3B82FF !important;
  border-color: #3B82FF !important;
}
.platformButton:last-child {
  margin-left: 16px;
  color: #3B82FF;
  border-color: #3B82FF;
  background: #fff;
}
.platformButton:hover {
  opacity: .75;
}
.platformButton.already {
  background: #999 !important;
  border-color: #999 !important;
  cursor: not-allowed;
}
.platformButton.already:hover {
  opacity: 1;
}
</style>