<template>
  <div class="right-wrap">
    <topNav :navpath="navpath"></topNav>
    <div class="right-content">
      <div class="right-box">
        <div class="attention-wrap">
        <!-- 开卡策略 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">开卡策略</h3>
              <p class="open-card-descript">设置办理电子会员卡的基本规则</p>
            </div>
            <div class="cell-body">
              <card-cate :cardCateInfo="cardCateInfo" :projectName="projectName"></card-cate>
            </div>
          </div>


          <!-- 开卡基本信息配置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">开卡基本信息配置</h3>
              <p class="open-card-descript">设置办理电子会员卡的基本信息字段</p>
            </div>
            <div class="cell-body">
              <el-form>
                <el-form-item label="微信会员" prop="">
                  <el-button type="primary" @click="changeRoute('/memberInfoTemplate')">编辑模板</el-button>
                </el-form-item>
              </el-form>
              <div class="phone-container">
                <div class="phone-view">
                  <div class="phone-show-content">
                    <ul class="phone-list-bottom" id="showPhoneView">
                      <template v-for="(item,index) in memberTemp">

                        <li class="phone-list-item" v-if="!(item.systemFieldId == -1 && item.fieldType == 5)">
                          <template v-if="item.fieldType != 2">
                            <div class="opend-card-item" v-if="!(item.systemFieldId == -1 && item.fieldType == 5)">
                              <div :class="['item-title',item.fieldName.length>6?'item-title-prewrap':'']">{{item.fieldName}}</div>
                              <span>{{item.fieldDescription}}</span>
                            </div>

                          </template>
                          <template v-if="item.fieldType == 2">
                            <div class="opend-card-item sex">
                              <div class="item-title">{{item.fieldName}}</div>
                              <template v-for="(child,ind) in item.fieldContent">
                                 <el-radio v-model="firstRadio" :label="ind">{{child.name}}</el-radio>
                              </template>
                              <!-- <el-radio v-model="item.sex" label="1">男</el-radio>
                              <el-radio v-model="item.sex" label="2">女</el-radio> 选中值写固定的第一个-->
                            </div>
                          </template>
                         <!--  <template v-if="item.systemFieldId==2">
                            <div class="opend-card-item">
                              <div class="item-title">{{item.fieldName}}</div>
                              <span>请填写8位数字，例如19900101</span>
                            </div>
                          </template>
                          <template v-if="item.systemFieldId==4">
                            <div class="opend-card-item">
                              <div class="item-title">生日</div>
                              <span>请填写8位数字，例如19900101</span>
                            </div>
                          </template> -->
                        </li>
                        <li v-if="item.systemFieldId == -1 && item.fieldType == 5" class="block">
                          <template >
                            <div class="block-head">
                              <div class="opencard-item-title">{{item.fieldName}}</div>
                            </div>
                            <div class="opend-card-item" v-for="child in item.sonList">
                              <div :class="['item-title',child.fieldName.length>6?'item-title-prewrap':'']">{{child.fieldName}}</div>
                              <span>{{child.fieldDescription}}</span>
                            </div>
                          </template>
                        </li>
                      </template>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 开卡门店配置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">开卡门店配置</h3>
              <p class="open-card-descript">设置会员的开卡门店规则</p>
            </div>
            <div class="cell-body">
              <el-form :model="openCardForm" ref="openCardForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="微信会员" prop="">
                    <el-radio v-model="openCardForm.wxOpenCardStoreSet" label="0" @change="changeRadio($event,6)">首次关注门店</el-radio>
                    <el-radio v-model="openCardForm.wxOpenCardStoreSet" label="1" @change="changeRadio($event,6)">开卡前最后关联门店</el-radio>
                </el-form-item>
                <el-form-item label="POS转微信会员" prop="">
                    <el-radio v-model="openCardForm.posOpenCardStoreSet" label="0" @change="changeRadio($event,7)">ERP中的开卡门店</el-radio>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 第三方电商账号选择开关 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">第三方电商账号选择开关</h3>
              <p class="open-card-descript">设置会员开卡流程中选择第三方平台账号</p>
            </div>
            <div class="cell-body">
              <el-form :model="thirdForm" ref="thirdForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="开卡选择第三方电商账号" prop="">
                    <el-switch
                      v-model="thirdForm.switch"

                      @change="changeSwitch($event,1)">
                    </el-switch>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 主门店配置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">主门店配置</h3>
              <p class="open-card-descript">设置会员的主门店规则</p>
            </div>
            <div class="cell-body">
              <el-form :model="mainStoreForm" ref="mainStoreForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="微信会员" prop="">
                    <el-radio v-model="mainStoreForm.wxMainStoreSet" label="0" @change="changeRadio($event,8)">首次关注门店</el-radio>
                    <el-radio v-model="mainStoreForm.wxMainStoreSet" label="1" @change="changeRadio($event,8)">开卡前最后关联门店</el-radio>
                </el-form-item>
                <el-form-item label="POS转微信会员" prop="">
                    <el-radio v-model="mainStoreForm.posMainStoreSet" label="0" @change="changeRadio($event,9)">ERP中的开卡门店</el-radio>
                </el-form-item>

                <el-form-item label="开卡选择服务门店" prop="">
                    <el-switch
                      v-model="mainStoreForm.openCardStoreEdit"

                       @change="changeSwitch($event,2)">
                    </el-switch>
                </el-form-item>
                <el-form-item label="开卡选择专属导购" prop="">
                    <el-switch
                      v-model="mainStoreForm.openCardClerkEdit"

                       @change="changeSwitch($event,3)">
                    </el-switch>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 归属修改权限 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">归属修改权限</h3>
              <p class="open-card-descript">设置会员是否有权限对服务门店和专属导购进行修改</p>
            </div>
            <div class="cell-body">
              <el-form :model="belongAuthForm" ref="belongAuthForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="修改服务门店" prop="">
                    <el-switch
                      v-model="belongAuthForm.storeEdit"

                      @change="changeSwitch($event,4)">
                    </el-switch>
                </el-form-item>
                <el-form-item label="修改次数限制" prop="" v-if="belongAuthForm.storeEdit==true">
                    <el-radio v-model="belongAuthForm.storeEditTimesType" label="1" @change="changeRadio($event,11,'store')">最多修改</el-radio>
                    <el-input v-model="belongAuthForm.storeEditTimes" @change="changeInput($event,13,'storeEditTimes')"></el-input><label>次</label>
                    <el-radio v-model="belongAuthForm.storeEditTimesType" label="2" @change="changeRadio($event,11,'store')">每月最多修改1次</el-radio>
                    <el-radio v-model="belongAuthForm.storeEditTimesType" label="3" @change="changeRadio($event,11,'store')">每年最多修改1次</el-radio>
                </el-form-item>

                <el-form-item label="修改专属导购" prop="">
                    <el-switch
                      v-model="belongAuthForm.clerkEdit"
                      @change="changeSwitch($event,5)"><!-- active-text="启用" inactive-text="停用" -->
                    </el-switch>
                </el-form-item>

                <el-form-item label="修改次数限制" prop="" v-if="belongAuthForm.clerkEdit==true">
                    <el-radio v-model="belongAuthForm.clerkEditTimesType" :disabled="belongAuthForm.storeEditTimesType==2||belongAuthForm.storeEditTimesType==3? true:false" label="1" @change="changeRadio($event,12)">最多修改</el-radio>
                    <el-input v-model="belongAuthForm.clerkEditTimes" @change="changeInput($event,14,'clerkEditTimes')"></el-input><label>次</label>
                    <el-radio v-model="belongAuthForm.clerkEditTimesType" label="2" @change="changeRadio($event,12)">每月最多修改1次 </el-radio>
                    <el-radio v-model="belongAuthForm.clerkEditTimesType" :disabled="belongAuthForm.storeEditTimesType==2? true:false" label="3" @change="changeRadio($event,12)">每年最多修改1次</el-radio>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 商户会员等级 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">商户会员等级</h3>
              <p class="open-card-descript">商户具体会员等级，请点击对应商户行的编辑按钮查看</p>
            </div>
            <div class="cell-body">
              <el-table
                :data="merchantTableData"
                style="width: 100%">
                <el-table-column
                  prop="enterpriseName"
                  label="商户名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="gradeCount"
                  label="等级数量">
                </el-table-column>
                <el-table-column
                  prop=""
                  label="操作">
                  <template slot-scope="scope">
                    <!-- <el-button
                      @click="editMerchant(scope.$index,scope.row,merchantTableData)"
                      type="text"
                      size="small">
                      编辑
                    </el-button> -->
                    <router-link :to="{path:'/memberGrade',query:{enterpriseId: scope.row.enterpriseId,name:scope.row.enterpriseName}}" class="edit-btn el-button--text">编辑</router-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 集团会员等级设置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">集团会员等级设置</h3>
              <p class="open-card-descript">设置集团卡会员等级制度</p>
            </div>
            <div class="cell-body">
              <el-form :model="cliqueForm" ref="cliqueForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="升级模式" prop="">
                    <el-radio v-model="cliqueForm.gradeUpModel" label="0" @change="changeCliqueUp($event)">单商户独立计算</el-radio>
                    <el-radio v-model="cliqueForm.gradeUpModel" label="1" @change="changeCliqueUp($event)">跨商户联合计算</el-radio>
                </el-form-item>
                <el-form-item label="关联升级" prop="" v-if="cliqueForm.gradeUpModel==0">
                   <el-switch
                      v-model="cliqueForm.gradeUpModelSyncchange"

                      @change="changeSwitch($event,10)">
                    </el-switch>
                </el-form-item>
              </el-form>
              <div class="add-level"><el-button type="primary" @click="changeRoute('/addGroupGrade')">新增等级</el-button></div>
              <el-table
                :data="cliqueTableData"
                style="width: 100%">
                <el-table-column
                  prop=""
                  label="卡面预览"
                  width="260"
                  >
                  <template slot-scope="scope">
                    <div class="card-cell" :style="{background: scope.row.cardColor}">
                      <img :src="logoImg"/>
                      <span :style="{color: scope.row.cardFontColor}">{{scope.row.gradeName}}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="gradeCode"
                  label="等级编码">
                </el-table-column>
                <el-table-column
                  prop=""
                  label="等级类型">
                  <template slot-scope="scope">
                    {{scope.row.gradeType == 1? '常规卡': '特殊卡'}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop=""
                  label="移动">
                  <template slot-scope="scope">
                    <i :class="['icon-color', 'el-icon-upload2', scope.$index==0? 'disable': '']" @click="toUp(scope.$index,scope.row,cliqueTableData)"></i>
                    <i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index==0? 'disable':'']" @click="toPre(scope.$index,scope.row,cliqueTableData)"></i>
                    <i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == cliqueTableData.length-1?'disable':'']" @click="toNext(scope.$index,scope.row,cliqueTableData)"></i>
                    <i :class="['icon-color', 'el-icon-download', scope.$index == cliqueTableData.length-1?'disable':'']" @click="toBottom(scope.$index,scope.row,cliqueTableData)"></i>
                  </template>
                </el-table-column>
                <el-table-column
                  prop=""
                  label="操作">
                  <template slot-scope="scope">
                   <!--  <el-button
                      @click="editCliqueLevel(scope.$index,scope.row,cliqueTableData)"
                      type="text"
                      size="small">
                      编辑
                    </el-button> -->
                    <router-link :to="{path:'/editGroupGrade',query:{gradeId: scope.row.gradeId}}" class="edit-btn el-button--text">编辑</router-link>
                    <el-button class="m-l-10"
                      @click="delCliqueLevel(scope.$index,scope.row,cliqueTableData)"
                      type="text">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- end -->
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import topNav from 'components/nav/nav'
import cardCate from 'components/memberShip/card-cate' // 开卡策略

import { getRequest, postRequest, postForm } from '@/api/api';
export default {
  name: "memberCardSet",
  data() {
    return {
      navpath: [{
          name: '首页',
          path: ''
        },
        {
          name: '会员卡设置',
          path: ''
        }
      ],
      projectName: 'gic-clique', //当前项目名

      firstRadio: 0,

      // 信息对象
      cardCateInfo: {},

      // 会员模板
      memberTemp: [
        // {
        //   "systemFieldId": "k101",  //固定值
        //   "fieldName": "姓名",
        //   "fieldType": "0",  //字段类型（0：input，1：checkbox，2：radio 3:select 4:date 5:block）
        //   "fieldContent": "-1",  //选项值
        //   "fieldDescription": "请输入",  //提示文字
        //   "fieldEdited": 0,    //修改（0：不可修改，1：可修改）
        //   "sortNum": 1,    //排序值
        //   "isMult": "0",   //是否支持复合 例如宝宝信息可以多条记录（0：不支持，1：支持）
        //   "parentFieldId": "-1",  //组块id，选择组块时使用
        //   "isMust": "0",   //是否必填（0：不是，1：必填）
        //   "fieldCode": "member_name",   //系统级使用 会员field_code 用于映射会员表等字段
        //   "limitCountMin": "1",  //最小长度
        //   "limitCountMax": "10",   //最大长度
        //   "regularRule": "1111000", //0:intput使用前4位 4:date使用后2位 正则匹配项 顺序 中文、数字、字母、符号、年-月、年-月-日、邮箱  0表示不使用 1表示使用
        //   "modifyTimesLimit": -1,  //可修改次数（-1:无限制）
        //   "ruleContent": "[{'type':'checkbox','name':'中文', 'checked':'checked','isEdit':0},{'type':'checkbox','name':'数字', 'checked':'checked','isEdit':0},{'type':'checkbox','name':'字母', 'checked':'checked','isEdit':0},{'type':'checkbox','name':'符号', 'checked':'checked','isEdit':0}]",
        //   "allowEdit": "1000",   // DEFAULT '0000' COMMENT '是否可以编辑：0不可以，1可以；依次：提示语、输入规则、限制长度、选项',
        //   "modifyLimitFlag": "0",  //是否支持修改限制 ，0 否，1是
        //   "modifyLimitStatus": -1,   //修改限制范围：0 总数，1.每月，2.每年，-1 无限制
        //   "enterpriseIds": "null"  //未关联集团商户为null，关联集团商户为集团下企业id，逗号分隔
        // },
      ],

      // 开卡门店配置
      openCardForm: {
        wxOpenCardStoreSet: '0',
        posOpenCardStoreSet: '0'
      },
      // 第三方
      thirdForm: {
        switch: true
      },
      // 主门店
      mainStoreForm: {
        wxMainStoreSet: '0',
        posMainStoreSet: '0',
        openCardStoreEdit: true,
        openCardClerkEdit: true
      },

      // 归属修改权限
      belongAuthForm: {
        storeEdit: true,
        storeEditTimesType: '1',
        storeEditTimes: '',
        clerkEdit: true,
        clerkEditTimesType: '1',
        clerkEditTimes: '',

      },

      // 商户会员等级
      merchantTableData:[
        // {
        //   id: '0',
        //   enterpriseName: '达摩测试',
        //   gradeCount: '5',
        // },
        //  {
        //   id: '1',
        //   enterpriseName: '江南布衣信息中心jnby',
        //   gradeCount: '2',
        // }
      ],

      // 集团会员等级
      cliqueForm: {
        gradeUpModelSyncchange: false,  // 单商户独立计算下是否关联升级 1是 0否 (集团)
        gradeUpModel: '0',  // 等级升级模式 0单商户独立计算 1跨商户联合计算 (集团参数)
      },
      cliqueTableData:[
        // {
        //     "gradeId": "ff808081593917d9015939d92d060059",
        //     "gradeName": "普卡",
        //     "gradeCode": "01",
        //     "cardColor": "#000000",  //背景颜色
        //     "cardFontColor": "#ffffff",  //字体颜色
        //     "gradeType": 1  // 常规还是特殊卡 1常规 2特殊
        // },
        // {
        //     "gradeId": "ff808081593917d9015939d92d060059",
        //     "gradeName": "普卡",
        //     "gradeCode": "01",
        //     "cardColor": "#000000",  //背景颜色
        //     "cardFontColor": "#ffffff",  //字体颜色
        //     "gradeType": 2  // 常规还是特殊卡 1常规 2特殊
        // },
        // {
        //     "gradeId": "ff808081593917d9015939d92d060059",
        //     "gradeName": "普卡",
        //     "gradeCode": "01",
        //     "cardColor": "#000000",  //背景颜色
        //     "cardFontColor": "#ffffff",  //字体颜色
        //     "gradeType": 2  // 常规还是特殊卡 1常规 2特殊
        // }
      ],
      logoImg: "",   //企业logo
    }
  },
  created() {
    // this.selectReplayStyle()
  },
  methods: {

    // 路由跳转
    changeRoute(route) {
      this.$router.push(route);
    },

    // 开卡门店配置 等 radio change
    changeRadio(e,tag,flag) {
      var that = this
      console.log(e,tag)

      that.saveSet(tag,e)

      // 判断归属门店修改次数
      if (!!flag && flag=='store') {
        if (e == 2) {
          that.belongAuthForm.clerkEditTimesType = '2'
          that.saveSet('12',2)
        }
        if (e == 3) {
          that.belongAuthForm.clerkEditTimesType = '3'
          that.saveSet('12',3)
        }
      }
    },

    saveSet(type,value) {
      var that = this
      var para = {
        type: type,
        typeValue: value
      }
      postRequest('/api-admin/modify-member-card-setting-flag',para)
      .then((res) => {
        var resData = res.data
        if (resData.errorCode == 0) {
          showMsg.showmsg('设置成功','success')
          if (type==2 && value == '0') {
            that.mainStoreForm.openCardClerkEdit = false
          }
          return;
        }

        errMsg.errorMsg(resData)

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

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

    // 第三方等 switch change
    changeSwitch(e,num) {
      var that = this

      // 开卡
      if (num == 2 && !e) {
        console.log(e)
        that.saveSet(2,0)
        that.saveSet(3,0)

        return;
      }
      if (num == 3 && e && !that.mainStoreForm.openCardStoreEdit) {

        showMsg.showmsg('开卡选择服务门店停用时不允许修改','warning')
        that.mainStoreForm.openCardClerkEdit = false
        return;
      }

      // 修改服务门店
      if (num == 4 && e && !that.belongAuthForm.clerkEdit) {
         showMsg.showmsg('修改专属导购停用时不允许修改','warning')
         that.belongAuthForm.storeEdit = false
        return;
      }
      if (num == 4 && !e ) {
        that.belongAuthForm.storeEditTimesType = '1'
        that.changeRadio(1,11)
      }

      // 修改专属导购
      if (num == 5 && !e) {
        var v = e==true? 1:0
        that.saveSet(num,0)
        that.belongAuthForm.storeEdit = false
        that.saveSet(4,0)
        return;
      }
      var v = e==true? 1:0
      that.saveSet(num,v)
    },

    // input
    changeInput(e,num,tag) {
      var that = this
      e =  !!parseInt(String(e).replace(/[^\d]/g,''))? parseInt(String(e).replace(/[^\d]/g,'')): '0';
      that.belongAuthForm.storeEditTimes = !!parseInt(String(that.belongAuthForm.storeEditTimes).replace(/[^\d]/g,''))? parseInt(String(that.belongAuthForm.storeEditTimes).replace(/[^\d]/g,'')) : 0;
      that.belongAuthForm.clerkEditTimes = !!parseInt(String(that.belongAuthForm.clerkEditTimes).replace(/[^\d]/g,''))? parseInt(String(that.belongAuthForm.clerkEditTimes).replace(/[^\d]/g,'')) : 0;
      if (that.belongAuthForm.storeEditTimes > that.belongAuthForm.clerkEditTimes) {
        that.$message.error({
          duration: 1000,
          message: "修改服务门店次数必须小于修改专属导购次数"
        })
       return;
      }
      that.saveSet(num,e)
    },

    // 商户会员等级列表编辑
    editMerchant(index,row,obj) {
      var that = this
      console.log(index,row,obj)

      that.changeRoute('/memberGrade');

    },

    // 编辑集团
    editCliqueLevel(index,row,obj) {
      var that = this
      console.log(index,row,obj)

      that.changeRoute('/editGroupGrade');

    },

    // 新增集团等级
    addLevel() {
      var that = this

    },
    // 删除
    delCliqueLevel(index, row,obj) {
      var that = this
      console.log(index,row,obj)
      var para = {
        gradeId: row.gradeId,
        enterpriseId: '',
      }
      that.$confirm('确认删除吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          postRequest('/api-admin/delete-member-grade',para)
          .then((res) => {
            var resData = res.data
            if (resData.errorCode == 0) {

              showMsg.showmsg('删除成功','success')
              obj.splice(index,1)
              return;
            }
            errMsg.errorMsg(resData)

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

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

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

    // 修改集团升级模式
    changeCliqueUp(e){
      var that = this
      var para = {
        gradeUpModel: e
      }
      postRequest('/api-admin/modify-clique-grade-up-model',para)
      .then((res) => {
        var resData = res.data
        if (resData.errorCode == 0) {
          showMsg.showmsg('设置成功','success')
          return;
        }

        errMsg.errorMsg(resData)

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

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

    // 置顶 先删除后追加首部
    toUp(index, row,obj) {
      var that = this
      if (index == 0) {return;}
      console.log(index, row,obj)
      var newTable = JSON.parse(JSON.stringify(that.cliqueTableData))

      newTable.splice(index,1)
      newTable.unshift(row)
      console.log(newTable)

      // 保存设置
      that.setSort(row.gradeId,10)
      that.cliqueTableData = newTable;
    },
    // 向上
    toPre(index, row,obj) {
      var that = this
      if (index == 0) {return;}
      console.log(index, row,obj)
      var newTable = JSON.parse(JSON.stringify(that.cliqueTableData))
      var temp = {}
      temp = newTable[index-1]
      newTable[index-1] = row
      newTable[index] = temp
      // 保存设置
      that.setSort(row.gradeId,20)
      that.cliqueTableData = newTable;

    },
    // 向下
    toNext(index, row,obj) {
      var that = this
      if (index == obj.length-1) {return;}
      console.log(index, row,obj)
      var newTable = JSON.parse(JSON.stringify(that.cliqueTableData))
      var temp = {}
      temp = newTable[index+1]
      newTable[index+1] = row
      newTable[index] = temp
      // 保存设置
      that.setSort(row.gradeId,30)
      that.cliqueTableData = newTable;
    },
    //置底 先删除后追加尾部
    toBottom(index, row,obj) {
      var that = this
      if (index == obj.length-1) {return;}
      console.log(index, row,obj)

      var newTable = JSON.parse(JSON.stringify(that.cliqueTableData))

      newTable.splice(index,1)
      newTable.push(row)
      // 保存设置
      that.setSort(row.gradeId,40)
      that.cliqueTableData = newTable;
    },

    // 等级排序
    setSort(gradeId,type,enterpriseId) {
      var para = {
        gradeId: gradeId,
        sortType: type,
        // enterpriseId: enterpriseId
      }

      postRequest('/api-admin/sort-member-grade',para)
      .then((res) => {
        var resData = res.data
        if (resData.errorCode == 0) {

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

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

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

    // 获取会员卡设置信息
    getMemberSetInfo() {
      var that = this;

      getRequest('/api-admin/get-enterprise-grade-info',{})
      .then((res) => {
        var resData = res.data
        if (resData.errorCode == 0) {
          // 设置开卡策略信息
          var member = resData.result.memberSystem
          if (!!member&& !!Object.keys(member).length) {
            that.setCateInfo(member)
            that.cardCateInfo = that.setCateInfo(member)

            // 开卡门店配置
            that.openCardForm.wxOpenCardStoreSet = String(member.wxOpenCardStoreSet)
            that.openCardForm.posOpenCardStoreSet = String(member.posOpenCardStoreSet)

            // 第三方
            that.thirdForm.switch = member.ecommerceRelationFlag == 1? true:false

            // 主门店
            that.mainStoreForm.wxMainStoreSet = String(member.wxMainStoreSet)
            that.mainStoreForm.posMainStoreSet = String(member.posMainStoreSet)
            that.mainStoreForm.openCardStoreEdit = member.openCardStoreEdit == 1? true:false
            that.mainStoreForm.openCardClerkEdit = member.openCardClerkEdit == 1? true:false

            //归属修改权限
            that.belongAuthForm.storeEdit = member.storeEdit==1? true:false
            that.belongAuthForm.clerkEdit = member.clerkEdit==1? true:false
            that.belongAuthForm.storeEditTimesType = String(member.storeEditTimesType)  //1自定义次数 2 每月修改1次 3每年修改1次
            that.belongAuthForm.storeEditTimes = member. storeEditTimes    //自定义次数
            that.belongAuthForm.clerkEditTimesType = String(member.clerkEditTimesType)  //1自定义次数 2 每月修改1次 3每年修改1次
            that.belongAuthForm.clerkEditTimes = member.clerkEditTimes  //自定义次数

            // 集团会员卡设置
            that.cliqueForm.gradeUpModel = String(member.gradeUpModel)
            that.cliqueForm.gradeUpModelSyncchange = member.gradeUpModelSyncchange == 1? true:false
          }

          // 商户会员等级
          if (!!resData.result.CountList && !!resData.result.CountList.length) {
            that.merchantTableData = resData.result.CountList
          }

          // 卡面
          that.logoImg = resData.result.logoImg
          if (!!resData.result.List && !!resData.result.List.length) {
            that.cliqueTableData = resData.result.List
          }

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

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

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

    // 设置开卡策略
    setCateInfo(item) {
      var that = this
      item.cardCreateType = String(item.cardCreateType)
      item.cardNoStatus = String(item.cardNoStatus)
      item.cardNoTimeType = !!item.cardNoTimeType? String(item.cardNoTimeType) : '0'
      item.cardBegin = !!item.cardBegin&&item.cardBegin!='null'? String(item.cardBegin): ''
      item.prefixKey = String(item.prefixKey)
      item.suffixKey = String(item.suffixKey)
      item.sex = !!item.sex? item.sex:0
      item.usePrefix = item.usePrefix ==1? true: false
      item.useSuffix = item.useSuffix ==1? true: false
      item.gradeDescribe = item.gradeDescribe
      item.memberSystemId = item.memberSystemId
      return item;
    },

    // // 获取模板信息
    getTempInfo() {
      var that = this
      var para = {

      }
      postRequest('/api-admin/get-card-field-template-detail',para)
      .then((res) => {
        console.log( res.data)
        var resData = res.data
        if (resData.errorCode == 0) {

          var data = resData.result
          data.forEach(function(ele,index){
            if (ele.fieldType == 2) {
              ele.fieldContent = JSON.parse(ele.fieldContent.replace(/'/g, '"'))
            }

          })
          console.log(data)
          that.memberTemp = data
          // showMsg.showmsg('设置成功','success')
          return;
        }
        errMsg.errorMsg(resData)

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

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },
  },
  components: {
    topNav,
    cardCate
  },
  mounted() {
    var that = this;
    that.getMemberSetInfo()
    that.getTempInfo()
  }
}

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

.attention-wrap {
  .item-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 30px;
    span {
      display: inline-block;
      width: 80px;
    }
  }

  /* 模板 */
  .phone-container{
    margin-top:40px;
  }
  .phone-view{
    background: url(../../../assets/iphone.png) no-repeat;
    background-size: 100%;
    width: 410px;
    height: 740px;
    margin: 0 20px;
    position: relative;
  }

  .phone-show-content{
    width: 330px;
    height: 537px;
    position:absolute;
    left:41px;
    top: 83px;
    overflow-y: auto;
  }

  .block {
    margin-bottom: 2px;
  }

  .block-head {
    width: 100%;
    background: #f5f5f8;
    padding: 0;
    height: 46px;

    .opencard-item-title {
      line-height: 46px;
      padding-left: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

  .opend-card-item {
    height: 46px;
    line-height: 46px;
    background: #fff;
    border-bottom: 1px solid #e7e7eb;
    font-size: 14px;
    position: relative;

    &.sex::after {
      content: '';
      width: 100%;
      height: 100%;
      z-index: 2;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .opend-card-group-title {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }

  .opend-card-item {
    height: 46px;
    line-height: 46px;
    background: #fff;
    border-bottom: 1px solid #e7e7eb;
  }

  .phone-list-item{
    height: 44px;
    line-height: 44px;
    background: #fff;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .item-title {
    width: 100px;
    float: left;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    &.item-title-prewrap {
      line-height: 15px;
      word-break: break-all;
      white-space: pre-wrap;
      padding-top: 9px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

  .el-icon-upload2 {
    font-size: 22px;
    cursor: pointer;
  }

  .el-icon-download {
    font-size: 22px;
    cursor: pointer;
  }

  i.icon-color {
    color: #606266;
  }
  i.disable {
    color: #e6e6e6;
    cursor: not-allowed;
  }

  .cell-body {
    padding: 24px 32px;
    margin-bottom: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /deep/ .el-form {
      .el-form-item:nth-child(1) {
        /*margin-top: 30px;*/
      }

      .el-form-item:last-child {
        /*margin-bottom: 0;*/
      }
    }
  }

  .add-level {
    width: 100%;
    margin: 15px 0 22px 0;
    text-align: right;
  }

  .card-cell {
    display: flex;
    width: 250px;
    padding: 10px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-left: 5px;
    }
  }

  .el-input {
    width: 60px;
    margin: 0 10px;
  }

  .el-form-item {
    /deep/.el-form-item__label {
      line-height: 1;
      padding-top: 13px;
    }
  }

  .member-cell {
    background: #fff;
    padding: 0;
  }

  .title-group {
    position: relative;
    border-bottom: 1px solid #e7e7eb;
    padding: 20px 0 15px 32px;
  }
  .open-card-title{
    font-size: 16px;
    font-weight: 700;
    /*padding:5px 0;*/
  }
  .open-card-descript{
    font-size:13px;
    color:#828282;
    padding:5px 0;
  }
}

</style>
