<template>
  <div class="osAddVip">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">会员卡管理</span>
        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
        <span>会员卡编辑</span>
      </div>
    </div>
    <div class="el-card__body" style="background-color: white; padding: 0px;margin-top: 20px">
      <el-form :model="msg" style="padding:0 20px;" :rules="rules" ref="msg" label-width="160px" size="small">
        <div class="form-body">
          <el-form-item label="会员卡名称" prop="Name" class="is-required">
            <el-input v-model="msg.Name" />
          </el-form-item>
          <el-form-item label="会员卡图标" prop="CardBagIco" class="is-required">
            <button class="el-button el-button--default el-button--small" @click="openChangeDig()">
              选择图标
            </button>
            <div class="img_yuan inputM_l">
              <img v-if="msg.CardBagIco=='' || msg.CardBagIco==null" src="../../assets/img/setup/default_img.png" alt="">
              <img v-else :src="msg.CardBagIco" alt="">
            </div>
          </el-form-item>
          <el-form-item label="加入领券中心">
            <el-switch :active-value="1" :inactive-value="0" v-model="msg.PickupCenter">
            </el-switch>
          </el-form-item>
          <el-form-item label="门店">
            <el-select style="width:636px;" v-model="storeCheck" multiple placeholder="请选择">
              <el-option v-for="item in StoreList" :key="item.Id" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="有效期范围" class="is-required" >
            <el-date-picker @input="daterangeChange" style="padding: 3px 10px;width: 450px;height: 32px"
                            v-model.trim="msg.value" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" value-format="yyyy-MM-dd" align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="会员卡描述">
            <div style="line-height:normal;">
              <UE :defaultMsg="msg.Describe" :config="config" ref="ue" :IsMultiple="true"></UE>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-button type="primary" style="margin: 12px 0" size="small" @click="preserve('msg')" :loading="loading">保存
    </el-button>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
  </div>
</template>

<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from '@/components/global/UE.vue'

  export default {
    name: "osAddVip",
    components: {
      ChooseImg,
      UE,

    },
    data() {
      return {
        msg: {
          ID: 0,
          Name: '',
          Describe: '',
          PickupCenter: 0,
          StartDate: '',
          EndDate: '',
          SmallShopId: 0, //微店id
          IsZanYangUse: 0,
          StoreIds: '', //	店铺id
          CardBagIco:'',
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
        },
        checkedkeys: [], //默认选中的
        huiyuan: false,
        zhongxin: true,
        checked: true,
        loading: false,
        activeName: 'first',
        commoditylist: [], //商品的list
        changeState: false,
        rules: {
          Name: [{
            required: true,
            message: "会员卡名称不能为空",
            trigger: "blur"
          }],



          CardBagIco: [{
            required: true,
            message: "请选择会员卡图标",
            trigger: "blur"
          }],

          value: [{
            type: 'array',
            required: true,
            message: '会员卡有效期不能为空',
            trigger: 'change'
          }

          ]
        },
        cityOptions: [],
        checkAll: false,
        isIndeterminate: false,
        category: false,
        AppointList: [], //指定商品分类
        defaultProps: {
          children: 'ChildList',
          label: 'Name'
        },
        eData: {},

        tableData: [],
        loading_t: false,
        count: 0,
        multipleSelection: [],
        AppointList2: [],
        SmallShopMsg: {
          Name: '',
        },
        storeCheck: [], //门店多选
        StoreList: [], //门店下拉
      }
    },
    created() {
      this.getStoreList();

      if (this.$route.query.ID) {
        this.msg.ID = this.$route.query.ID;
        this.getData()
      }

    },
    methods: {
      //获取门店下拉
      getStoreList() {
        this.apipost("/api/MContent/GetStoresList", {}, res => {
          if (res.data.resultCode == 1) {
            this.StoreList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },

      getData(){
        this.apipost("/api/Reserve/GetCardBagDetail", {
          ID: this.msg.ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.msg = res.data.data;
            this.msg.value = [];

              this.msg.value.push(res.data.data.StartDate.replace("T", " "))
              this.msg.value.push(res.data.data.EndDate.replace("T", " "))

            this.storeCheck=[];
            if(this.msg.StoreIds!=0){
              var cked = this.msg.StoreIds.split(',');
              cked.forEach(x=>{
                this.storeCheck.push(parseInt(x));
              })
            }

          } else {
            this.Error(res.data.message);
          }
        })
      },


      cancel() {
        this.$router.go(-1)
      },

      // 数组去重
      unique(arr) {
        for (var i = 0, len = arr.length; i < len; i++) {
          for (var j = i + 1, len = arr.length; j < len; j++) {
            if (arr[i].Id === arr[j].Id) {
              arr.splice(j, 1);
              j--; // 每删除一个数j的值就减1
              len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
            }
          }
        }
        return arr;
      },

      daterangeChange(e) {
        let _this = this
        if (e == null) {
          _this.msg.value = []
        } else {

          _this.$nextTick(() => {
            _this.$set(_this.msg, "value", [e[0], e[1]]);
          });
        }
        _this.$forceUpdate();


      },



      preserve(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.msg.value.length > 0) {
              this.msg.StartDate = this.msg.value[0];
              this.msg.EndDate = this.msg.value[1];
            } else {
              this.Error('会员卡有效期不能为空')
              return false
            }
            this.msg.Describe = this.$refs.ue.getUEContent();

            this.loading = true
            if (this.storeCheck.length == 0) {
              this.msg.StoreIds = 0;
            } else {
              this.msg.StoreIds = this.storeCheck.join(',');
            }
            this.apipost("/api/Reserve/AddOrUpdateCardBag", this.msg, res => {
              this.loading = false
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                // this.$router.go(-1); //返回上一层
                this.$router.push('/osVipList');
              } else {
                this.Info(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },

      getObjById(list, id) {
        if (!list instanceof Array) {
          return null
        }
        //遍历数组
        for (let i in list) {
          let item = list[i]
          if (item.Id === id) {
            return item
          } else {
            //查不到继续遍历
            if (item.ChildList) {
              let value = this.getObjById(item.ChildList, id)
              //查询到直接返回
              if (value) {
                return value
              }
            }
          }
        }
      },


      openChangeDig() {
        this.changeState = true;
        // setTimeout(() => {
        //   this.$refs.mychild.InitData();
        // }, 10)
      },
      SelectId(msg) {
        this.changeState = false;
        this.msg.CardBagIco = this.getIconLink(msg.url);
      },

    },
    mounted() {

    }
  }

</script>

<style>
  .osAddVip .form-box {
    background: #fff;
    padding: 20px 50% 20px 0;
    margin-top: 10px;
  }

  .osAddVip .el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .osAddVip .img_yuan {
    width: 80px;
    height: 80px;
    margin-top: 5px;
    position: relative;
  }

  .osAddVip .img_yuan img {
    width: 100%;
    height: 100%;
  }

  .osAddVip .el-date-editor .el-range__icon {
    line-height: 24px;
  }

  .osAddVip .el-date-editor .el-range-separator {
    line-height: 24px;

  }

  .osAddVip .el-date-editor .el-range__close-icon {
    line-height: 24px;

  }

  .osAddVip .el-form-item__label {
    padding: 0 20px 0 0;
  }

  .osAddVip .form-body {
    background-color: #fff;
    padding: 10px 50% 10px 20px;
    min-width: 1000px;
  }

  .osAddVip .splist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .osAddVip .app-image {
    width: 50px;
    height: 50px;
    border-radius: 0%;
    background-position: center center;
  }

</style>
