<template>
  <div class="right-wrap task-public">
    <topNav ></topNav><!-- :navpath="navpath" -->
    <el-tabs v-model="memberTab" @tab-click="handleTabClick">
          <el-tab-pane label="消费类" name="first">
            <div class="right-content">
              <div class="right-box">
                <div class="attention-wrap member-achieve-contain">
                <!-- tab panel -->

                    <!-- 消费类 -->
                    <div class="outer-contain">
                      <!-- 消费累计 -->
                      <template v-for="(item,index) in consumeArray">
                        <memberTableEdit :tableEditData="item"/><!-- v-for="(consumItem,index) in consumeArray"-->

                        <!-- <div class="inner-cell-contain" >
                          <div class="member-achieve-tabletitle">
                            <label class="tabletitle-l">{{item.achievementName}}</label>
                            <el-switch v-model="item.isOpen" @change="consumItemSwitch($event,item)"></el-switch>
                          </div>
                          <el-table class="member-cell-table"
                            :data="item.subAchievementList"
                            style="width: 100%">
                            <el-table-column
                              prop="limitNum"
                              label="额度">
                              <template slot-scope="scope">
                                <span class="span-txt">{{item.text}}</span>
                                <span class="span-num" v-if="!scope.row.editLimitFlag">{{scope.row.achievementTarget}}</span>
                                <el-input class="w-175" v-if="scope.row.editLimitFlag" v-model="scope.row.achievementTarget" @keyup.native="($event,value,item) => limitNumInput($event,value,item)" placeholder="请输入" type="tel" :maxlength="inputLength"></el-input>
                                <span class="span-unit">{{item.unit}}</span>

                                <i class="el-icon-edit" v-if="!scope.row.editLimitFlag" @click="editLimitNum(scope.$index,scope.row,item)"></i>
                                <span class="span-oprate-icon" v-if="scope.row.editLimitFlag"><i class="el-icon-check" @click="saveLimitNum(scope.$index,scope.row,item)"></i><i class="el-icon-close" @click="cancelLimitNum(scope.$index,scope.row,item)"></i></span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="rewardNum"
                              label="奖励">
                              <template slot-scope="scope">
                                <span class="span-txt">奖励</span>
                                <span class="span-num" v-if="!scope.row.editRewardFlag">{{scope.row.rewardValue}}</span>
                                <el-input class="w-175" v-if="scope.row.editRewardFlag" v-model="scope.row.rewardValue" @keyup.native="($event,value) => rewardNumInput($event,value)" placeholder="请输入" type="tel" :maxlength="inputLength"></el-input>
                                <span class="span-unit">积分</span>
                                <i class="el-icon-edit" v-if="!scope.row.editRewardFlag" @click="editRewardNum(scope.$index, scope.row,item)"></i>
                                <span class="span-oprate-icon" v-if="scope.row.editRewardFlag"><i class="el-icon-check" @click="saveRewardNum(scope.$index, scope.row,item)"></i><i class="el-icon-close" @click="cancelRewardNum(scope.$index, scope.row,item)"></i></span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop=""
                              label="库存">
                              <template slot-scope="scope">
                                {{scope.row.couponStock==0? '--': ''}}
                              </template>
                            </el-table-column>
                          </el-table>
                        </div> -->
                      </template>
                      <!-- <memberTableEdit :tableEditData="accumulateConsum"/> -->

                      <!-- 连续每月消费行为 -->
                      <!-- <memberTableEdit :tableEditData="continuousConsum"/> -->

                      <!-- 最高单天消费 -->
                      <!-- <memberTableEdit :tableEditData="maxSingleConsum"/> -->

                      <!-- 最高单天购买件数 -->
                      <!-- <memberTableEdit :tableEditData="maxSinglePerNum"/> -->

                      <!-- 累计评价次数 -->
                      <!-- <memberTableEdit :tableEditData="totalEvaluate"/> -->

                    </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="互动类" name="second">
            <div class="right-content">
                <div class="right-box">
                  <div class="attention-wrap member-achieve-contain">
                    <!-- 互动类 -->
                    <div class="outer-contain">
                      <template v-for="(item,index) in interactionArray">
                        <memberTableEdit :tableEditData="item"/>
                      </template>
                      <!-- 累计获取积分 -->
                      <!-- <memberTableEdit :tableEditData="accumulatePoint"/> -->
                      <!-- 累计关注时长 -->
                      <!-- <memberTableEdit :tableEditData="accumulateFollow"/> -->
                      <!-- 累计签到次数 -->
                      <!-- <memberTableEdit :tableEditData="accumulateSign"/> -->
                      <!-- 最高连续签到天数 -->
                      <!-- <memberTableEdit :tableEditData="maxSignNum"/> -->
                      <!-- 使用优惠券数量 -->
                      <!-- <memberTableEdit :tableEditData="useCouponNum"/> -->
                      <!-- 积分兑换次数 -->
                      <!-- <memberTableEdit :tableEditData="pointExchange"/> -->
                    </div>
                  </div>
                </div>
            </div>
          </el-tab-pane>
      </el-tabs>
      <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import topNav from 'components/nav/nav';
import memberTableEdit from '../memberTableEdit';
import strLength from '@/common/js/strlen';

import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import { getRequest, postRequest, postJsonRequest, postForm } from '@/api/api';

export default {
  name: "memberAchievement",
  data() {
    return {
      projectName: 'gic-clique', // 当前项目名
      memberTab: 'first',
      navpath: [{
          name: '首页',
          path: ''
        },
        {
          name: '会员成就',
          path: ''
        },
        {
          name: '',
          path: ''
        },
        {
          name: '',
          path: ''
        }
      ],
      // 消费
      consumeArray: [],
      accumulateConsum:{
        // 消费累计
        // title: '消费累计',
        // switchFlag: true,
        // 暂定0:累计 元,1:连续 个月,2:达到 元,3:达到 件,4:累计 次,5:累计获得 积分,6:累计  天,7: 累计 次 ,8: 达到 次 ,9:达到  次,10:达到  次
        // type: 0,
        // tableData: [
        //   {
        //     limitNum: '1',
        //     rewardNum: '6',
        //     stockNum: '1',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      // 连续每月有消费行为
      continuousConsum:{
        // 消费累计
        // title: '连续每月有消费行为',
        // type: 1,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '2',
        //     rewardNum: '60',
        //     stockNum: '15',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      //  最高单天消费
      maxSingleConsum: {
        // title: '最高单天消费',
        // type: 2,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '3',
        //     rewardNum: '6',
        //     stockNum: '1',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      // 最高单天购买件数
      maxSinglePerNum: {
        // title: '最高单天购买件数',
        // type: 3,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '4',
        //     rewardNum: '66',
        //     stockNum: '15',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      // 累计评价次数
      totalEvaluate: {
        // 消费累计
        // title: '累计评价次数',
        // type: 4,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '5',
        //     rewardNum: '6666',
        //     stockNum: '151',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },

      // 互动类
      interactionArray: [],
      accumulatePoint:{
        // 累计获取积分
        // title: '累计获取积分',
        // type: 5,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '1',
        //     rewardNum: '6666',
        //     stockNum: '1518',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      // 累计关注时长
      accumulateFollow:{
        // title: '累计关注时长',
        // type: 6,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '2',
        //     rewardNum: '1213',
        //     stockNum: '156',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      //  累计签到次数
      accumulateSign: {
        // title: '累计签到次数',
        // type: 7,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '3',
        //     rewardNum: '666',
        //     stockNum: '1518',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      // 最高连续签到天数
      maxSignNum: {
        // title: '最高连续签到天数',
        // type: 8,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '4',
        //     rewardNum: '666',
        //     stockNum: '1518',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },

      // 使用优惠券数量
      useCouponNum: {
        // title: '使用优惠券数量',
        // type: 9,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '5',
        //     rewardNum: '634',
        //     stockNum: '1418',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },

      // 积分兑换次数
      pointExchange: {
        // title: '积分兑换次数',
        // type: 10,
        // switchFlag: true,
        // tableData: [
        //   {
        //     limitNum: '6',
        //     rewardNum: '666',
        //     stockNum: '167',
        //     editLimitFlag: false,
        //     editRewardFlag: false
        //   }
        // ]
      },
      inputLength: 10, // 限制输入数字长度

      editObj: {
        index: '',
        row: ''
      }

    }
  },
  created() {
    // this.selectReplayStyle()
  },
  methods: {

    changeRoute(route) {
      this.$router.push(route);
    },

    // tab click
    handleTabClick(tab, event) {
      var that = this
      console.log(tab, event)
    },

    // 获取成就信息
    getInfo() {
      var that = this
      var para = {

      }
      postJsonRequest('/api-member/achievement-list-clique',para)
      .then((res) => {
        console.log(res.data)
        var resData = res.data
        if (resData.errorCode == 0) {
          var data = resData.result.achievememntList
          data.forEach(function(ele,index){

            // 处理显示 XX, 在组件中处理会无法渲染到页面
            var obj = ele
            var arr = obj.achievementDoc.split('XX')
            obj.text = arr[0]
            obj.unit = arr[1]
            obj.isOpen  = obj.isOpen==1? true: false
            obj.subAchievementList.forEach(function(el,i){
              // obj.achievementDoc = obj.achievementDoc.replace(/XX/g, ele.)
              // 添加编辑 flag
              el.editLimitFlag = false;
              el.targetInput = el.achievementTarget;
              el.editRewardFlag = false;
              el.rewardInput = el.rewardValue;
            })
            if (ele.achievementType==1) {
              // 消费类
              that.consumeArray.push(ele)
            }else {
              // 互动类
              that.interactionArray.push(ele)
            }
          })

          console.log(that.consumeArray,that.interactionArray)

          // showMsg.showmsg('设置成功','success')
          return;
        }
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // get nav path
    getNavPath() {
      var that = this
      var para = {
        project: that.projectName,
        path: 'memberAchievement'//that.$route.path
      }

      postRequest('/api-auth/get-current-memu-data',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {
          if (!resData.result) {
            console.log("resData.result: ",resData.result)
            return;
          }
          that.navpath[1].name = resData.result.level2.menuName;
          that.navpath[1].path = ''

          that.navpath[2].name = resData.result.level3.menuName;
          that.navpath[2].path = ''
          that.navpath[3].name = resData.result.level4.menuName;
          that.navpath[3].path = ''

          return;
        }
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);
        // that.toLogin()
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });

    }


  },
  components: {
    topNav,
    memberTableEdit
  },

  mounted() {
    var that = this
    that.getInfo()
    // that.getNavPath()
  }

}

</script>
<style lang="scss" scoped>

.right-wrap /deep/ {

  .navwrap.boxbttom {
    border: none;
  }
  .el-tabs /deep/{
    .el-tabs__header {
      margin: 0;
      padding-left: 24px;
      border-bottom: 1px solid #e4e7ed;
      background: #fff;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .el-tabs__nav-wrap::after {
      content: none;
    }
  }
}

.el-tabs__nav {
  z-index: 1;
}

.attention-wrap {
  /*background: #fff;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .item-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 30px;

    span {
      display: inline-block;
      width: 80px;
    }
  }
  .attention-content-wrap {}

  &.member-achieve-contain /deep/ {

    .inner-cell-contain {
      /*padding: 5px 15px 40px 15px;*/
      border: 0px solid #e7e7eb;
      border-radius:2px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      &+.inner-cell-contain {
        margin-top: 15px;
      }
      el-table::before {
        content: none;
      }

      .member-cell-table /deep/ {
        /*&.el-table::before {
          content: none;
        }
        .el-table__body {
          width: 90px;
          tr.el-table__row td {
            border: none;
          }
        }*/
        .el-table__body {
          width: 90px;
          tr.el-table__row:last-child td {
            border: none;
          }
        }
      }
    }

    .member-achieve-tabletitle {
      padding: 0 0 10px 0;
      font-size: 16px;
      color: #303133;
      font-weight: 700;
      margin-bottom: 10px;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      .el-switch {
        float: right;
      }
    }

    .el-icon-edit {
      cursor: pointer;
      color: #909399;
      font-size: 14px;
      &:hover{
        color: #409eff;
      }
    }

    .span-oprate-icon i {
      cursor: pointer;
      /*font-size: 20px;*/
      display: inline-block;
      vertical-align: middle;
    }

    .w-175 {
      width: 175px;
    }
  }
}

</style>
