<template>
  <div class="editAppoint">
    <div class="head-title">
      <span @click="CommonJump('appointList')" class="blue point">约会记录列表</span> / 编辑话题
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
        <el-form-item label="男方" class="is-required">
          <template v-if="JSON.stringify(manObj)!='{}'">
            <div class="peopleHead">
              <div><img :src="manObj.Photo" style="width:30px;height:30px;border-radius:50%;" /></div>
              <div style="margin-left:3px;">{{manObj.Name}}</div>
            </div>
          </template>
          <el-button type="primary" class="el-button--small" @click="addPeople(1)">选择男生</el-button>
        </el-form-item>
        <el-form-item label="女方" class="is-required">
          <template v-if="JSON.stringify(womanObj)!='{}'">
            <div class="peopleHead">
              <div><img :src="womanObj.Photo" style="width:30px;height:30px;border-radius:50%;" /></div>
              <div style="margin-left:3px;">{{womanObj.Name}}</div>
            </div>
          </template>
          <el-button type="danger" class="el-button--small" @click="addPeople(2)">选择女生</el-button>
        </el-form-item>
        <el-form-item label="时间" class="is-required" prop="Time">
          <el-date-picker v-model="addMsg.Time" size="small" type="datetime" format="yyyy-MM-dd hh:mm"
            value-format='yyyy-MM-dd hh:mm' placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地点" class="is-required" prop="Address">
          <el-input type="text" size="small" v-model="addMsg.Address"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="addMsg.Remark" :rows="5"></el-input>
        </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="isShowGoods" width="900px">
      <choicePeople ref="choicePeople" :isSingle="true" :Sex="Sex"></choicePeople>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowGoods=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
  import choicePeople from "../common/choicePeople.vue";
  export default {
    components: {
      choicePeople
    },
    data() {
      return {
        addMsg: {
          Id: 0,
          ManId: 0, //南方userid
          WoManId: 0, //女方userid
          Time: '', //时间
          Address: '', //地点
          Remark: '' //备注
        },
        rules: {
          Time: [{
            required: true,
            message: '请选择时间',
            trigger: 'blur'
          }],
          Address: [{
            required: true,
            message: '请填写地点',
            trigger: 'blur'
          }]
        },
        isShowGoods: false,
        Sex: 0,
        manObj: {},
        womanObj: {}
      };
    },
    created() {
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMsg.ManId==0){
                this.Error('请选择男方');
                return
            }
            if(this.addMsg.WoManId==0){
                this.Error('请选择女方');
                return
            }
            this.apipost("/api/Miai/SetMiaiDatingInfo", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('appointList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      //选择男生
      addPeople(num) {
        this.Sex = num;
        this.isShowGoods = true;
        this.$nextTick(() => {
          this.$refs.choicePeople.getList();
        })
      },
      getGoodsChoice() {
        var ckedArr = this.$refs.choicePeople.getChoicedGoods();
        if (this.Sex == 1) {
          this.manObj.Photo = ckedArr[0].Photo;
          this.manObj.Name = ckedArr[0].RealName;
          this.addMsg.ManId = ckedArr[0].UserId;
        } else {
          this.womanObj.Photo = ckedArr[0].Photo;
          this.womanObj.Name = ckedArr[0].RealName;
          this.addMsg.WoManId = ckedArr[0].UserId;
        }
        this.isShowGoods = false;
      }
    },
    mounted() {
      if(this.$route.query.arr){
        let obj =JSON.parse(decodeURIComponent(this.$route.query.arr));
        this.addMsg.Id = obj.Id;
        this.addMsg.ManId = obj.ManId;
        this.addMsg.WoManId = obj.WoManId;
        this.addMsg.Time = obj.Time;
        this.addMsg.Address = obj.Address;
        this.addMsg.Remark = obj.Remark;

        this.manObj.Photo = obj.ManPhoto;
        this.manObj.Name = obj.ManName;
        this.womanObj.Photo = obj.WoManPhoto;
        this.womanObj.Name = obj.WoManName;
      }
    }
  };

</script>
<style>
  .editAppoint .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .editAppoint .peopleHead {
    display: flex;
    align-items: center;
    float: left;
    margin-right: 20px;
    line-height: 0;
    margin-top: 6px;
  }

</style>
