<template>
  <view>
    <u-navbar title="个人信息"></u-navbar>
    <view class="flex-col group">
      <view class="flex-col section_2">
        <view class="flex-col">
          <view class="justify-between headerImg flex-center">
            <text class="text_15">头像</text>
            <u-avatar
              @click="chooseAvatar"
              :src="$u.http.config.imgUrl + form.head"
              class="image_2"
            ></u-avatar>
            <!-- <ima
                src="/static/common/img/row_right.png"
                class="image_3"
              /> -->
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">用户名</text>
          <u-input
            class="input"
            :type="'text'"
            :border="false"
            :maxlength="8"
            v-model="form.userName"
            placeholder="请输入"
            inputAlign="right"
          />
        </view>
        <view class="list-row">
          <text class="text_15">真实姓名</text>
          <u-input
            :type="'text'"
            :border="false"
            v-model="form.name"
            placeholder="请输入"
            :disabled="form.name != ''"
            inputAlign="right"
          />
        </view>
        <view class="list-row">
          <text class="text_15">性别</text>
          <view class="item-row">
            <view class="input-cover" @click="sex = true"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              placeholder="请选择"
              v-model="form.sex"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">出生日期</text>
          <view class="item-row">
            <view class="input-cover" @click="birthdays = true"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              v-model="form.birthday"
              placeholder="请选择出生日期"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">手机号码</text>
          <u-input
            class="input"
            :type="'number'"
            :border="false"
            v-model="form.phone"
            disabled
            inputAlign="right"
          />
        </view>
        <view class="list-row">
          <text class="text_15">籍贯</text>
          <view class="item-row">
            <view class="input-cover" @click="NativePlace = true"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              placeholder="请选择"
              v-model="form.NativePlace"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">现居地</text>
          <view class="item-row">
            <view class="input-cover" @click="address = true"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              placeholder="请选择"
              v-model="form.residence"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">详细地址</text>
          <u-input
            class="input"
            :type="'text'"
            :border="false"
            v-model="form.address"
            placeholder="请输入"
            inputAlign="right"
          />
        </view>
        <view class="list-row" v-if="![0].includes(vuex_user.userType)">
          <text class="text_15">工作领域</text>
          <view class="item-row">
            <view class="input-cover" @click="WorkArea = true"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              placeholder="请选择"
              v-model="form.WorkArea"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
        <view class="list-row">
          <text class="text_15">兴趣爱好</text>
          <view class="item-row">
            <view class="input-cover" @click="selectHobby"></view>
            <u-input
              class="input"
              :type="'text'"
              :border="false"
              placeholder="请选择"
              v-model="form.hobby"
              disabled
              inputAlign="right"
            />
            <image src="/static/common/img/row_right.png" class="image-right" />
          </view>
        </view>
      </view>
      <view style="height: 100rpx; width: 100%"></view>
      <view class="btn-box">
        <view class="flex-col items-center button" @click="save">
          <text>保存</text>
        </view>
        <!-- <view class="flex-col items-center button_1" @click="goHome">
          <text>取消</text>
        </view> -->
      </view>
    </view>
    <!-- 地址 -->
    <u-picker
      mode="region"
      v-model="address"
      :area-code="addressId"
      @confirm="selectAddress"
    ></u-picker>
    <!-- 性别 -->
    <u-select
      v-model="sex"
      mode="single-column"
      :default-value="sexId"
      :list="sexList"
      @confirm="selectSex"
    ></u-select>
    <!-- 出生日期 -->
    <u-picker
      mode="time"
      v-model="birthdays"
      :end-year="EndYear"
      :default-time="birthdaysId"
      @confirm="selectBirthdays"
    ></u-picker>
    <!-- 籍贯 -->
    <u-picker
      mode="region"
      v-model="NativePlace"
      :area-code="NativePlaceId"
      @confirm="selectNativePlace"
    ></u-picker>
    <!-- 工作领域 -->
    <u-select
      v-model="WorkArea"
      mode="single-column"
      :default-value="WorkAreaId"
      :list="WorkAreaList"
      @confirm="selectWorkArea"
    ></u-select>
    <!-- 提示 -->
    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // input 样式
      /* inputStyle: {
        lineHeight: "0.5rem",
        height: "0.5rem",
        width: "2rem",
      }, */
      sex: false, //性别选择框的显示/隐藏
      sexList: [
        //性别选择框内容
        { label: "男", value: "0" },
        { label: "女", value: "1" },
      ],
      sexId: [0], //记录选择的性别进行数据复现
      address: false, //现居地址选择框的显示/隐藏
      addressId: [11, 1101, 110101], //记录选择的现居地址进行数据复现
      birthdays: false, //出生日期选择框的显示/隐藏
      birthdaysId: "", //记录选择的出生日期进行数据复现
      EndYear: 2022, //出生日期选择框的最大年份
      NativePlace: false, //籍贯选择框的显示/隐藏
      NativePlaceId: [11, 1101, 110101], //记录选择的籍贯进行数据复现
      WorkArea: false, //工作领域选择框的显示/隐藏
      WorkAreaId: [0], //记录选择的工作领域进行数据复现
      //工作领域选择框内容
      WorkAreaList: [
        { label: "在校生", value: "1" },
        { label: "计算机/互联网/通信/电子", value: "2" },
        { label: "销售/客服", value: "3" },
        { label: "会计/金融/银行/保险", value: "4" },
        { label: "生产/营运/采购/物流", value: "5" },
        { label: "建筑/房地产", value: "6" },
        { label: "设计/市场/媒体/广告", value: "7" },
        { label: "人事/行政/高级管理", value: "8" },
        { label: "教育/培训", value: "9" },
        { label: "生物/制药/化工/医疗", value: "10" },
        { label: "咨询/法律/科研", value: "11" },
        { label: "服务业", value: "12" },
        { label: "政府机构/翻译/其他", value: "13" },
      ],
      form: {
        head: "",
        workFieldId: "",
        userName: "admin",
        name: "管理员",
        sex: "男",
        nativeProvince: "", //籍贯省
        nativeCity: "", //籍贯市
        nativeArea: "", //籍贯区
        nHomProvince: "", //现居省
        nHomCity: "", //现居市
        nHomArea: "", //现居区
        residence: "", //现居地
        birthday: "", //出生日期
        phone: "", //手机号
        NativePlace: "",
        address: "",
        WorkArea: "",
        hobby:"",
        list:[]
      },
    };
  },
  onLoad() {
    this.EndYear = new Date().getFullYear();
    Object.assign(this.form, this.vuex_user);
    this.form.list = this.vuex_user_hobby
    if (this.form.birthday != "0001-01-01 00:00:00") {
      this.form.birthday = this.form.birthday.slice(0, 10);
    } else {
      this.form.birthday = "";
    }
    this.form.NativePlace =
      this.form.nativeProvince +
      "-" +
      this.form.nativeCity +
      "-" +
      this.form.nativeArea;
    this.form.residence =
      this.form.nHomProvince +
      "-" +
      this.form.nHomCity +
      "-" +
      this.form.nHomArea;
    if (this.form.NativePlace == "null-null-null") {
      this.form.NativePlace = "";
    }
    if (this.form.residence == "null-null-null") {
      this.form.residence = "";
    }
    
  },
  onShow(){
    if(this.vuex_user_hobby){
      const selectedIds = this.vuex_user_hobby.map(item => {
        return {lableId:item.lableId}
      });
      this.$u.vuex("vuex_hobby", selectedIds);
      this.form.hobby = this.vuex_user_hobby.map(item => item.lableName).join('、')
    }
  },
  created() {
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      this.form.head = path;
      var file = this.common.base64toFile(path, new Date().getTime());
      if (file.type.indexOf("image") < 0) {
        // this.$tips("请选择图片", "error");
        this.$refs.uToast.show({
          title: "请选择图片",
          type: "error",
        });
        return false;
      }
      uni.uploadFile({
        url: this.$u.http.config.baseUrl + "/app/User/UserHead",
        file: file,
        fileType: "image",
        header: {
          Authorization: "Bearer " + this.vuex_token,
        },
        complete: (res) => {
          this.$u.apiList
            .GetUser({
              userId: this.vuex_user.id,
            })
            .then((res) => {
              this.$u.vuex("vuex_user", res);
              this.form.head = this.vuex_user.head;
            });
          // this.form.head = JSON.parse(res.data).data;
        },
      });
    });
    this.getWorkFile();
  },

  methods: {
    // 头像裁剪
    chooseAvatar() {
      // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 200,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: "jpg",
        },
      });
    },
    //获取工作领域
    getWorkFile() {
      this.$u.apiList.GetWorkFile().then((res) => {
        this.WorkAreaList = res.map((item) => {
          return {
            label: item.workFieldName,
            value: item.id,
          };
        });
        let data = this.WorkAreaList.find((item) => {
          return item.value == this.form.workFieldId;
        });
        this.form.WorkArea = data.label;
        this.form.workFieldId = data.value;
      });
    },
    // 提示
    tips(title, type, time) {
      this.$refs.uToast.show({
        title: title ? title : "",
        type: type ? type : "success",
        duration: time ? time + "" : "1000",
      });
    },
    // 保存
    save() {
      var data = this.form;
      data.id = this.vuex_user.id;
      data.list = this.vuex_hobby
      var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g"); //真实姓名
      var reg1 = new RegExp("^[\u4E00-\u9FA5A-Za-z0-9]+$", "g");
      if (data.userName === "" || !reg1.test(data.userName)) {
        this.tips("用户名格式不正确", "error");
        return;
      }
      if (data.name === "" || !reg.test(data.name)) {
        this.tips("请输入正确的真实姓名", "error");
        return;
      }
      if (data.sex === "" || data.sex === null) {
        this.tips("请选择性别", "error");
        return;
      }
      if (data.birthday === "" || this.isBirthday(data.birthday)) {
        this.tips("请选择正确出生日期", "error");
        return;
      }
      // reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
      // if (data.phone === "" || !reg.test(data.phone)) {
      //   this.tips("请输入正确的手机号码", "error");
      //   return;
      // }
      if (data.NativePlace === "") {
        this.tips("请选择籍贯", "error");
        return;
      }
      if (data.residence === "" || data.residence === null) {
        this.tips("请选择现居地", "error");
        return;
      }
      if (data.address === "" || data.address === null) {
        this.tips("请输入详细地址", "error");
        return;
      }
      if (data.WorkArea === ""&&![0].includes(this.vuex_user.userType)) {
        this.tips("请选择工作领域", "error");
        return;
      }
      this.$u.apiList.UpdateUser(data).then((res) => {
        /* uni.showToast({
          title: "修改成功",
          duration: 2000,
        }); */
        this.$refs.uToast.show({
          title: "修改成功",
          type: "success",
        });
        setTimeout(() => {
          this.$u.route({
            url: "pages/my/mySeting/mySeting",
          });
        }, 1000);
      });
    },
    // 盘判断出生日期
    isBirthday(data) {
      return new Date(data) >= new Date();
    },
    // 选择工作领域
    selectWorkArea(e) {
      this.form.WorkArea = e[0].label;
      this.form.workFieldId = e[0].value;
    },
     // 选择兴趣爱好
     selectHobby() {
      this.$u.route({
        url: "pages/my/myDetails/myInterest",
      });
    },
    // 选择籍贯
    selectNativePlace(e) {
      this.form.nativeProvince = e.province.label;
      this.form.nativeCity = e.city.label;
      this.form.nativeArea = e.area.label;
      this.form.NativePlace =
        e.province.label + "-" + e.city.label + "-" + e.area.label;
      var arr = [];
      //   - 0 是转化为隐式转换为数组类型
      arr.push(e.province.value - 0);
      arr.push(e.city.value - 0);
      arr.push(e.area.value - 0);
      this.NativePlaceId = arr;
    },
    // 选择出生日期
    selectBirthdays(e) {
      this.form.birthday = e.year + "-" + e.month + "-" + e.day;
      this.birthdaysId = e.year + "-" + e.month + "-" + e.day;
    },
    //   选择性别
    selectSex(e) {
      this.form.sex = e[0].label;
      this.sexId = [parseInt(e[0].value)];
    },
    //   选择地址
    selectAddress(e) {
      this.form.nHomProvince = e.province.label;
      this.form.nHomCity = e.city.label;
      this.form.nHomArea = e.area.label;
      this.form.residence =
        e.province.label + "-" + e.city.label + "-" + e.area.label;
      var arr = [];
      //   - 0 是转化为隐式转换为数组类型
      arr.push(e.province.value - 0);
      arr.push(e.city.value - 0);
      arr.push(e.area.value - 0);
      this.addressId = arr;
    },
    goHome() {
      this.$u.route({
        url: "pages/my/mySeting/mySeting",
      });
    },
    //返回上一级
    router() {
      this.$u.route({
        url: "pages/my/mySeting/mySeting",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  width: 100vw;
  flex: 1 1 auto;
  overflow-y: auto;
}
.section_2 {
  width: calc(100% - 60rpx);
  margin: 0.1rem auto 0.5rem;
  border-radius: 40rpx;
  background: #fff;
  padding: 40rpx;
}
.image-right {
  width: 12rpx;
  height: 20rpx;
  margin-left: 20rpx;
  // margin-top: 5rpx;
}
.text_15 {
  width: 200rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.9);
}

.button_1,
.button {
  padding: 0.13rem 0;
  color: rgb(255, 255, 255);
  font-size: 0.15rem;
  line-height: 0.14rem;
  letter-spacing: 0.03rem;
  white-space: nowrap;
  background-color: #3cb5fb;
  border-radius: 0.3rem;
  width: 3.1rem;
  margin: 0 auto;
  z-index: 999;
}
.list-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  border-bottom: 2rpx solid #f6f8f9;
  &:last-of-type {
    border-bottom: none;
  }
}
.item-row {
  display: flex;
  width: 380rpx;
  align-items: center;
  position: relative;
}

.input-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.flex-center {
  height: 120rpx;
  display: flex;
  align-items: center;
}
// 按钮
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
</style>
