<template>
  <div class="setMember blindDateUsersListEdit">
    <div class="head-title">
      <span @click="goUrl" class="blue point">用户管理</span> / 用户编辑
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
        <el-form-item label="用户">
          <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
          <div class="app-image" :style="{backgroundImage:'url(' + addMsg.Photo + ')',backgroundSize:'cover'}"
            v-if="addMsg.Photo!=''"></div>
          <img src="../../assets/img/default.png" style="width:80px;height:80px" alt="" v-if="addMsg.Photo==''">
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="addMsg.Name" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="WechatNo">
          <el-input v-model="addMsg.WechatNo" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select style="width:293px;" size="small" v-model="addMsg.MemberGrade" placeholder="请选择活动区域">
            <el-option label="普通用户" :value="0"></el-option>
            <el-option v-for="(item,index) in options" :key="index" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级">
          <el-select size="small" v-model="addMsg.SuperiorId" :filter-method="ChangeListName" filterable
            placeholder="请选择">
            <el-option label="总部" :value="0"></el-option>
            <el-option v-for="item in tableData" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" v-if="mall_userInfo.TenantId==1 &&  mall_userInfo.MallBaseId==1">
          <el-select size="small" v-model="addMsg.PostId" placeholder="请选择">
            <el-option label="无" :value="0"></el-option>
            <el-option label="领队导游" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加入黑名单">
          <el-switch v-model="addMsg.Blacklist" active-color="#409EFF" :active-value="1" :inactive-value="0">
          </el-switch>
          <span class="tip">加入黑名单后，用户将无法下单</span>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="addMsg.ContactWay" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addMsg.Moblie" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="照片墙(多张)" prop="AlbumList">
          <p style="color:#c9c9c9;margin-bottom: 12px;">
            照片墙至少2张
          </p>
          <div class="nav_Main" style="width: 500px;">
            <div class="nav_IconContent">
              <draggable v-model="addMsg.AlbumList">
                <div v-for="(item, index) in addMsg.AlbumList" :key="index"
                  style="margin-right: 20px; position: relative; ">
                  <div class="colapp-image" :style="{
                                  backgroundImage: 'url(' + item + ')'
                                }"></div>
                  <el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close" circle>
                  </el-button>
                </div>
              </draggable>
            </div>
            <div @click="openChangeDig(2)" class="add-image-btn 2222">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="addMsg.Sex" :label="1">男</el-radio>
          <el-radio v-model="addMsg.Sex" :label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="体重" prop="Weight" class="is-required">
          <el-input v-model="addMsg.Weight" style="width:478px" size="small" :min="0" type="number" placeholder="请输入体重">
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="身高" prop="Height" class="is-required">
          <el-input v-model="addMsg.Height" style="width:478px" size="small" :min="0" type="number" placeholder="请输入身高">
            <template slot="append">cm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="生日" prop="Birthday">
          <el-date-picker v-model="addMsg.Birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学历">
          <el-radio v-model="addMsg.EducationType" v-for="(x,y) in EducationList" :key="y" :label="x.Id">{{x.Name}}
          </el-radio>
        </el-form-item>
        <el-form-item label="婚姻">
          <el-radio v-model="addMsg.Marriage" v-for="(x,y) in MarriageList" :key="y" :label="x.Id">{{x.Name}}</el-radio>
        </el-form-item>
        <el-form-item label="房产">
          <el-radio v-model="addMsg.HouseInfo" v-for="(x,y) in HouseList" :key="y" :label="x.Id">{{x.Name}}</el-radio>
        </el-form-item>
        <el-form-item label="车产">
          <el-radio v-model="addMsg.CarInfo" v-for="(x,y) in CarInfoList" :key="y" :label="x.Id">{{x.Name}}</el-radio>
        </el-form-item>
        <el-form-item label="年收入">
          <el-radio v-model="addMsg.YearMoneyType" v-for="(x,y) in yearMoneyList" :key="y" :label="x.Id">{{x.Name}}
          </el-radio>
        </el-form-item>
        <el-form-item label="是否显示用户资料">
          <el-switch v-model="addMsg.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0">
          </el-switch>
          <span class="tip">关闭后，用户将无法显示</span>
        </el-form-item>
        <el-form-item label="可查看微信次数">
          <el-input v-model="addMsg.LookTimes" style="width:478px" size="small" :min="0" type="number"
            placeholder="请输入次数">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="所属分组">
          <el-select v-model="addMsg.BelongGroupIdList" multiple style="width: 478px">
            <el-option v-for="item in groupArray" :key="item.GroupId" :label="item.GroupName" :value="item.GroupId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="现据地">
          <el-cascader v-model="position2" @change="gejigguan2" :placeholder="addressName2" :options="provinceList"
            @active-item-change="handleItemChange" :props="props" style="width: 478px"></el-cascader>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="addMsg.RealName" style="width:478px" size="small" :min="0" type="text"
            placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="addMsg.IDCardNo" style="width:478px" size="small" :min="0" maxlength="18" type="number"
            placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="职业类型">
          <el-input v-model="addMsg.Industry" style="width:478px" size="small" placeholder="教育行业、旅游行业"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校">
          <el-input v-model="addMsg.SchoolInfo" style="width:478px" size="small" placeholder="请输入学校"></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-cascader v-model="position" @change="gejigguan" :placeholder="addressName" :options="provinceList"
            @active-item-change="handleItemChange" :props="props" style="width: 478px"></el-cascader>
        </el-form-item>
        <el-form-item label="自我描述">
          <el-input v-model="addMsg.About" maxlength="500" show-word-limit style="width:478px" size="small"
            placeholder="请输入关于自己" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="家庭背景">
          <el-input v-model="addMsg.FamilyInfo" style="width:478px" size="small" placeholder="请输入家庭背景" type="textarea"
            maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="业余爱好">
          <el-input v-model="addMsg.Hobby" style="width:478px" size="small" placeholder="请输入业余爱好" type="textarea"
            maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="曾经旅游过的地方">
          <el-input v-model="addMsg.ActivityRegion" style="width:478px" size="small" placeholder="请输入曾经旅游过的地方"
            type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="理想的另一半是什么样的">
          <el-input v-model="addMsg.HopeYou" style="width:478px" size="small" placeholder="希望心中的TA是一个什么样的人"
            type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="期待的未来生活是怎样的">
          <el-input v-model="addMsg.OtherInfo" style="width:478px" size="small" placeholder="希望心中的TA是一个什么样的人"
            type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="最喜欢的一本书及原因">
          <el-input v-model="addMsg.LikeBook" style="width:478px" size="small" placeholder="请输入最喜欢的一本书及原因"
            type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="最喜欢的电影及原因">
          <el-input v-model="addMsg.LikeTV" style="width:478px" size="small" placeholder="请输入最喜欢的电影及原因" type="textarea"
            maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="欣赏爱情">
          <el-input v-model="addMsg.IdealLove" style="width:478px" size="small" placeholder="请输入欣赏哪对名人的爱情，原因是什么"
            type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="发帖权利" v-if="addMsg.BaseInfoId>0">
          <el-radio v-model="addMsg.IsFaTie" :label="1">开启</el-radio>
          <el-radio v-model="addMsg.IsFaTie" :label="0">关闭</el-radio>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addMsg.Remark" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="修改备注名">
          <el-input v-model="addMsg.AliasName" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <span>{{addMsg.CreateDate}}</span>
        </el-form-item>
      </el-form>

    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" :IsMultiple="imgType==2?true:false"></ChooseImg>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import draggable from "vuedraggable"
  export default {
    components: {
      ChooseImg,
      draggable
    },
    data() {
      return {
        changeState: false,
        addMsg: {
          Id: '',
          SuperiorId: '',
          MemberGrade: '',
          ContactWay: '',
          Remark: '',
          AliasName: '',
          PostId: 0, //职位
          IsShow: 1, //默认显示
        },
        val: '',
        value: '',
        total: 0,
        rules: {
          WechatNo: [{
            required: true,
            message: '请输入微信号',
            trigger: 'blur'
          }],
          Photo: [{
            required: true,
            message: '请选择用户头像',
            trigger: 'blur'
          }],
          Name: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
          Weight: [{
            pattern: /^\+?[1-9]\d*$/,
            message: '体重大于0',
            trigger: 'blur'
          }],
          Height: [{
            pattern: /^\+?[1-9]\d*$/,
            message: '身高大于0',
            trigger: 'blur'
          }],
          Birthday: [{
            required: true,
            message: '请输入生日',
            trigger: 'blur'
          }],
          YearMoney: [{
            pattern: /^\+?[1-9]\d*$/,
            message: '年收入大于0',
            trigger: 'blur'
          }],
          AlbumList: [{
            type: 'array',
            required: true,
            message: '请选择照片墙',
            trigger: 'change'
          }],
        },
        UserId: '',
        userInfo: {},
        msg: {
          pageIndex: 1,
          pageSize: 20,
          Name: '',
          Source: 0,
          MemberGrade: 0,
          Id: 0,
          Moblie: ''
        },
        mall_userInfo: {}, //用户信息
        tableData: [],
        options: [],
        imgType: 1,
        EducationList: [], //学历
        MarriageList: [], //婚姻
        HouseList: [], //房子情况
        CarInfoList: [], //车子情况
        yearMoneyList: [], //年收入
        position: [],
        position2: [],
        addressName: '请选择籍贯',
        addressName2: '请选择个人定位',
        provinceList: [], //省市县列表
        provinceList2: [], //省市县列表
        props: {
          value: 'value',
          children: 'cities'
        },
        groupArray:[] //可查看分组
      };
    },
    created() {
      this.mall_userInfo = JSON.parse(localStorage.mall_userInfo)
      this.GetEducationTypeEnumList() //学历
      this.GetMarriageEnumList() //婚姻
      this.GetHouseInfoEnumList() //房子情况
      this.GetCarInfoEnumList() //车子情况
      this.getPosition(null) //地址的请求
      this.getYearMoneyType() //获取年收入的枚举
      this.getgroupList() //获取用户分组

      if (this.$route.query.UserId) {
        this.UserId = this.$route.query.UserId;
        this.getData()
        this.getList();
        this.getMemberGradeList()
      }
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addMsg.Height == '') {
              this.Error('身高不能为空');
              return
            }
            if (this.addMsg.Weight == '') {
              this.Error('体重不能为空');
              return
            }

            if (this.addMsg.AlbumList.length < 2) {
              this.Error('照片墙至少为2张');
              return
            }
            this.apipost("/api/Miai/SetMemberUserInfoForHT", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.goUrl();
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      handleSelect(item) {},
      ChangeListName(val) {
        this.msg.Name = val;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.apipost("/api/user/GetMemberUserDropDownList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
          }
        })
      },
      getMemberGradeList() {
        this.loading = true;
        this.apipost("/api/user/GetMemberGradeList", {
          Grade: 0,
          Name: '',
          Enabled: 1
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.options = res.data.data
          }
        })
      },
      querySearch(queryString, cb) {

      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.Photo = url
        }
        if (this.imgType == 2) {
          let that = this;
          msg.forEach(item => {
            this.addMsg.AlbumList.push(that.getIconLink(item.url));
          })
        }
        if (this.imgType == 3) {
          let url = this.getIconLink(msg.url)
          this.addMsg.IDCard = url
        }
        if (this.imgType == 4) {
          let url = this.getIconLink(msg.url)
          this.addMsg.IDCardBack = url
        }
        this.changeState = false;
      },
      goUrl() {
        this.$router.push({
          name: 'blindDateUsersList',
          query: {
            blank: "y"
          }
        });
      },
      getData() {
        this.apipost("/api/Miai/GetMemberUserInfo", {
          UserId: this.UserId
        }, res => {
          this.addMsg = res.data.data;
          this.msg.Name = this.addMsg.SuperiorName;
          if (res.data.data.Province > 0) {
            this.position = [res.data.data.Province, res.data.data.City, res.data.data.District]
            this.addressName = res.data.data.PName + '/' + res.data.data.CName + '/' + res.data.data.DName
          }
          if (res.data.data.DWProvince > 0) {
            this.position2 = [res.data.data.DWProvince, res.data.data.DWCity, res.data.data.DWDistrict]
            this.addressName2 = res.data.data.DWPName + '/' + res.data.data.DWCName + '/' + res.data.data.DWDName
          }

          if (this.addMsg.AlbumList == null) {
            this.addMsg.AlbumList = []
          }
          if (this.addMsg.Age == '') {
            this.addMsg.Age = 0
          }
          this.getPosition(this.position2) //地址的请求
        })
      },
      getPosition(val, cb) {
        let vm = this; //查询省市县
        let params = {};
        if (!val) { //初始化加载 获取所有省份数据
          params = {
            Id: 1
          }
        } else if (val.length === 1) { //加载二级  获取市级数据
          params = {
            Id: val[0]
          }
        } else { //加载3级   获取县级数据
          params = {
            Id: val[1]
          }
        }

        this.apipost("/api/Destination/GetChildList", params, res => {
          if (res.data.resultCode == 1) {
            if (!val) { //初始化加载   查询省份数据
              vm.provinceList = res.data.data.map((e) => {
                return {
                  value: e.ID,
                  label: e.Name,
                  cities: []
                }
              });
            } else if (val.length === 1) { //加载二级    查询该省下市级数据
              vm.provinceList.map((item) => {
                if (item.value === val[0]) {
                  item.cities = res.data.data.map((e) => {
                    return {
                      value: e.ID,
                      label: e.Name,
                      cities: []
                    }
                  })
                }
              })
            } else { //加载3级   查询该省市下县级数据
              vm.provinceList.map((item) => {
                if (item.value === val[0]) {
                  item.cities.map((value) => {
                    if (value.value === val[1]) {
                      value.cities = res.data.data.map((e) => {
                        return {
                          value: e.ID,
                          label: e.Name
                        }
                      })
                    }
                  })
                }
              })
            }
            cb && cb(res);
          } else {
            // this.Info(res.data.message);
          }
        })

      },
      handleItemChange(val) {
        this.getPosition(val)
      },
      ClearCarouse(index) {
        this.addMsg.AlbumList.splice(index, 1);
      },
      gejigguan(val) {

        this.addMsg.Province = val[0];
        this.addMsg.City = val[1];
        this.addMsg.District = val[2];
        this.provinceList.map(x => {
          if (x.value == val[0]) {
            this.addMsg.PName = x.label
            x.cities.map(j => {
              if (j.value == val[1]) {
                this.addMsg.CName = j.label
                j.cities.map(z => {
                  if (z.value == val[2]) {
                    this.addMsg.DName = z.label
                  }
                })
                return
              }
            })
            return
          }
        })
      },
      gejigguan2(val) {
        this.addMsg.DWProvince = val[0];
        this.addMsg.DWCity = val[1];
        this.addMsg.DWDistrict = val[2];
      },
      GetEducationTypeEnumList() { //学历
        this.apipost("/api/Miai/GetEducationTypeEnumList", {}, (res) => {
          this.EducationList = res.data.data;
        });
      },
      GetMarriageEnumList() { //婚姻
        this.apipost("/api/Miai/GetMarriageEnumList", {}, (res) => {
          this.MarriageList = res.data.data;
        });
      },
      GetHouseInfoEnumList() { //房子情况
        this.apipost("/api/Miai/GetHouseInfoEnumList", {}, (res) => {
          this.HouseList = res.data.data;
        });
      },
      GetCarInfoEnumList() { //车子情况
        this.apipost("/api/Miai/GetCarInfoEnumList", {}, (res) => {
          this.CarInfoList = res.data.data;
        });
      },
      getYearMoneyType() { //年收入
        this.apipost("/api/Miai/GetYearMoneyTypeEnumList", {}, (res) => {
          this.yearMoneyList = res.data.data;
        });
      },
      //获取分组下来列表
      getgroupList() {
        this.apipost("/api/User/GetMemberGroupList", {}, res => {
          if (res.data.resultCode == 1) {
            this.groupArray = res.data.data;
          }
        });
      }
    },
    mounted() {

    }
  };

</script>
<style>
  .blindDateUsersListEdit .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .blindDateUsersListEdit .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .setMember .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .setMember .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .setMember .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .setMember .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .setMember .el-form-item {
    position: relative;
  }

  .blindDateUsersListEdit .blue {
    color: #409EFF;

  }

  .blindDateUsersListEdit .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .blindDateUsersListEdit .nav_Main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .blindDateUsersListEdit .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .blindDateUsersListEdit .nav_IconContent div>div {
    display: inline-block;
  }

  .blindDateUsersListEdit .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }

  .blindDateUsersListEdit .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

  .blindDateUsersListEdit .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

</style>
