<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-col :span="5" style="text-align: right;">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加会员卡</el-button>
        <el-button  type="primary" size="small" icon="el-icon-setting" @click="openRight">会员权益配置</el-button>
      </el-col>
      
    </div>
    <div class="app-container">
        <div class="filter-container" style="margin-top: 10px;margin-left: 5px " id="member-cards-box">
          <div class="col" v-for="(card, index) in cardsData" :key="index">
              <div class="thumbnail">

                  <div class="pic" v-if="card.background_type==1" :style="'background: '+card.background">
                      <div class="ico_crow" ></div>
                  </div>
                  <div class="pic" v-else>
                      <img :src="card.background" alt="...">
                  </div>
                  <h3 class="tit">{{card.card_name}}</h3>
                  <div class="caption">
                      <h3 class="card_edier">
                        <span @click="openEdit(card, index)">编辑会员卡</span> -
                        <span @click="openDelete(card, index)">删除会员卡</span>
                      </h3>
                  </div>
              </div>
          </div>
        </div>
        <!--create-card-form 添加会员卡-->
        <create-card-form ref="createCardForm" :cardsData="cardsData" ></create-card-form>
        <!--create-card-form 编辑会员卡-->
        <edit-card-form ref="editCardForm" :cardsData="cardsData" :cardIndex="cardIndex" :form="editFormData"></edit-card-form>
        <!--create-right-form 编辑权益-->
        <edit-card-right-form ref="editCardRightForm"  :form="rightData" ></edit-card-right-form>
    </div>
  </div>
</template>

<script>
  import {GetCards, DeleteMemberShipCard} from "@/api/member/member";
  import BreadCrumb from '../components/bread-crumb';
  import CreateCardForm from "./components/CreateCardForm";
  import EditCardForm from "./components/EditCardForm";
  import EditCardRightForm from "./components/EditCardRightForm";

  export default {
    name: 'memberCardList',
    components:{
      BreadCrumb,
      CreateCardForm,
      EditCardForm,
      EditCardRightForm
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '会员管理' },
          { path: false, name: '会员卡管理' }
        ],
        cardsData:[],
        rightData:{
          rights: "",
        },
        editFormData:{
            background_type:1,
            background:"#409EFF",
            background_color:"#409EFF",
            background_image:"",
            card_name:'',
            use_notice:'',
            card_right:'',
            service_phone:'',
            upgrade_integral:0,
            id:0,
        },
        cardIndex:-1,
      }
    },
    methods:{
        openCreate:function(){
          this.$refs.createCardForm.open();
        },
        // updateRightData(right){
        //   this.rightData.rights = right;
        // },
        openRight(){
          this.$refs.editCardRightForm.open();
        },
        openEdit(row, index) {
          for (const key in this.editFormData) {
            this.editFormData[key] = row[key];
          }
          this.cardIndex = index;
          this.$refs.editCardForm.open();
        },
        openDelete:function(row,index){
          this.$confirm('确认要删除该会员卡吗？<br>删除后，该会员卡将无法恢复', '删除提示', {
            dangerouslyUseHTMLString:true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            ids.push(row.id);
            DeleteMemberShipCard({ids:ids}).then(response=>{
              var res = response.data;
              if (res.state === 1) {
                this.cardsData.splice(index, 1);
                this.$message.success("删除会员卡成功");
              }else {
                this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
        GetCards(){
            GetCards().then(response=>{
                var res = response.data;
                if(res.state===1) {
                    this.cardsData = res.data.cards;
                    if (res.data.right) {
                      this.rightData.rights = res.data.right.rights;
                    }
                }
            }).catch(e=>{})
        }
    },
    created(){
        this.GetCards();
    }
  }
</script>

<style scoped>
 #member-cards-box .col {
    float: left;
    padding: 0 6px;
 }
 #member-cards-box .thumbnail {
    padding: 0;
    position: relative;
    border: none;
    background: #dde1e4;
    color: #58a2ec;
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
 #member-cards-box .thumbnail .pic {
    width: 20rem;
    height: 8rem;
    background: #58a2ec;
    border-radius: 25px 25px 0 0;
    position: relative;
}
 #member-cards-box .thumbnail .ico_crow {
    position: absolute;
    right: 18px;
    top: 10px;
    width: 64px;
    height: 54px;
    background: url("https://images.shengws.com/icos-201906141103.png") no-repeat -58px -422px;
}
 #member-cards-box .thumbnail .pic img {
    width: 100%;
    height: 100%;
    object-position: top left;
    object-fit: cover;
    border-radius: 25px 25px 0 0;
    margin: 0;
    border: 0;
    vertical-align: middle;
}

 #member-cards-box .thumbnail .tit {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: 1rem;
    color: #fff;
}
 #member-cards-box .thumbnail .caption {
    background: #eef6fd;
    border-radius: 0 0 20px 20px;
    height: 38px;
    cursor: pointer;
    max-width: 100%;
    padding: 9px;
    color: #333;
}
 #member-cards-box .thumbnail .caption .card_edier {
    font-size: 12px;
    color: #58a2ec;
    padding-left: 0.8rem;
}
 #member-cards-box .thumbnail .caption .card_edier span {
    color: #58a2ec;
    text-decoration: none;
}

 #member-cards-box .thumbnail .caption .card_edier span:hover {
    color: #58a2ec;
    text-decoration: underline;
}
  /*.app-container .cell.clearfix .time ul li {*/
    /*float: left;*/
    /*list-style: none;*/
    /*cursor: pointer;*/
    /*padding: 6px 20px;*/
    /*color: #606266;*/
    /*border-radius: 4px;*/
    /*margin: 0 8px 0 0;*/
    /*font-size: 14px;*/
    /*text-align: center;*/
  /*}*/
</style>