<template>
  <div>
    <el-form label-width="180px">
      <el-form-item label="是否享受会员功能" size="small">
        <el-switch :active-value="1" :inactive-value="2" v-model="addMsg.EnjoyMember" @change="memberChange">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否单独设置会员价" size="small">
        <el-switch :active-value="1" :inactive-value="2" v-model="addMsg.SeparateSetMember" @change="memberChange">
        </el-switch>
      </el-form-item>
      <el-form-item v-if="addMsg.SeparateSetMember == 1 && configMemberList.length == 0" label="会员价设置">
        <el-button @click="CommonJump('setMember')" size="small" type="danger">如需设置请先添加会员</el-button>
      </el-form-item>

      <el-form-item v-if="addMsg.SeparateSetMember== 1&&addMsg.SpecificationPriceList.length>0" label="会员价设置">
        <template v-for="(rootItem,rootIndex) in addMsg.GroupList">
          <div class="app-attr" :key="rootIndex">
            <div class="box">
              <div style="display:inline-block;">
                <el-tag type="danger">{{rootItem.People_Num}}人团</el-tag>
              </div>
              <el-form-item style="display:inline-block">
                <el-input style="width:500px;position:relative;top:5px" size="small" v-model="setMsg.memberinput"
                  placeholder="请输入内容">
                  <el-select slot="prepend" style="width:130px" v-model="setMsg.memberVal" size="small">
                    <el-option v-for="(item, index) in configMemberList" :label="item.Name" :value="item.Grade"
                      :key="index">
                    </el-option>
                  </el-select>
                  <el-button @click="HySet" slot="append">确定</el-button>
                </el-input>
              </el-form-item>
            </div>
            <el-table ref="table" border style="width: 100%" :data="rootItem.MemberpriceList"
              @selection-change="TbaleSelectionChange">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <template v-for="(item, index) in addMsg.SpecificationList">
                <el-table-column :key="index+'16'" :label="item.Name" width="100">
                  <template slot-scope="scope">
                    <span v-if="index == index2" v-for="(item2, index2) in scope.row.AttrList" :key="index2+'17'">
                      {{ scope.row.AttrList[index2].SVName }}
                    </span>
                  </template>
                </el-table-column>
              </template>
              <template v-for="(item, index) in configMemberList">
                <el-table-column :key="index+'18'" :label="item.Name">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.GradeMemberPriceList[index].MemberPrice" @keyup.native="checkPrice(scope.row.GradeMemberPriceList[index],'MemberPrice')" size="small"></el-input>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    props: ['SpecificationPriceList', 'SpecList', "addMsg"],
    data() {
      return {
        //会员配置数组
        configMemberList: [],
        //批量设置
        setMsg: {
          memberinput: "", //会员价设置输入
          memberVal: '', //会员类型下拉
        },
        memberList: [], //列表数据
      };
    },
    watch: {
      'SpecificationPriceList': {
        immediate: true,
        handler: function (val, oldval) {
          if (val != oldval) {

            if (this.addMsg.SpecificationPriceList && this.addMsg.SpecificationPriceList.length > 0) {
              if (this.addMsg.SpecificationPriceList[0].MemberpriceList && this.addMsg.SpecificationPriceList[0]
                .MemberpriceList.length > 0) {
                this.addMsg.SpecificationPriceList.forEach(item => {
                  var obj = {
                    People_Num: item.People_Num,
                    GradeMemberList: item.MemberpriceList,
                  };
                  this.addMsg.MemberpriceList.push(obj);
                })

              } else {
                this.memberChange();
              }
            }
          }
        }
      },
    },
    methods: {
      //数据改变
      memberChange() {
        if (this.addMsg.SeparateSetMember == 1) {
          this.addMsg.GroupList.forEach((rootItem, rootIndex) => {
            rootItem.MemberpriceList = [];
            rootItem.StepPriceList.forEach(subItem => {
              var memObj = {
                AttrList: JSON.parse(JSON.stringify(subItem.AttrList)),
                Id: 0,
                Name: 0,
                SpecificationSort: JSON.parse(JSON.stringify(subItem.SpecificationSort)),
                GradeMemberPriceList: [],
              };
              this.configMemberList.forEach(childItem => {
                memObj.GradeMemberPriceList.push({
                  MemberGrade: childItem.Id,
                  MemberPrice: 0
                });
              });
              rootItem.MemberpriceList.push(memObj)
            })
          });
          this.$forceUpdate();
        } 
      },
      //获取系统配置的会员列表
      getConfigMemberList() {
        let qMsg = {
          Grade: 0,
          Name: "",
          Enabled: 1
        };
        this.apipost("/api/user/GetMemberGradeList", qMsg, res => {
          if (res.data.resultCode == 1) {
            this.configMemberList = res.data.data;
          }
        });
      },
      HySet() {

      },
      TbaleSelectionChange() {

      }
    },
    mounted() {
      this.getConfigMemberList();
    }
  };

</script>
