<template>
  <div class="userinfo">
    <div class="section">
      <div class="form">
        <div class="form-item avatar">
          <h2>头像</h2>
          <div class="form-item__right">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar" :src="userInfo.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'"></image>
            </button>
          </div>
        </div>
        <div class="form-item">
          <h2>昵称</h2>
          <div class="form-item__right">
            <input placeholder="请输入昵称" type="nickname" v-model="userInfo.nickName" />
          </div>
        </div>
        <div class="form-item">
          <h2>手机号</h2>
          <div class="form-item__right">
            <input placeholder="请输入手机号" type="number" maxlength="11" v-model="userInfo.phone" />
          </div>
        </div>
        <div class="form-item">
          <h2>所在小区</h2>
          <picker :range="list" mode="multiSelector" @columnchange="columnchange" @change="onChange">
            <div class="form-item__right">
              <span :style="{color: userInfo.sssq ? '#333' : '#999'}">{{ userInfo.sssq ? userInfo.sssq + '-' + userInfo.szxq : '请输入所在小区' }}</span>
              <image class="right" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ContentRightArrow@2x.png" />
            </div>
          </picker>
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="save">提交</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '设置',
    name: 'UserInfo',
    data () {
      return {
        sqList: [],
        xqList: [],
        userInfo: {},
        list: [
          [], []
        ],
        communityList: [],
        currIndex: 0
      }
    },

    computed: {
      ...mapState(['user'])
    },

    onLoad () {
      this.userInfo = {
        ...this.user
      }
      this.$dict.load(['tfx_sssq', 'tfx_szxq']).then(() => {
        this.sqList = this.$dict.getDict('tfx_sssq')
        this.xqList = this.$dict.getDict('tfx_szxq')
      })

      this.getInfo()
    },

    methods: {
      getInfo () {
        this.$instance.post('/api/publicDictionaryClassification/tree?type=0', null, {
          withoutToken: true
        }).then(res => {
          if (res.code === 0) {
            const villageList = res.data.map(v => v.name)
            this.communityList = res.data.map(v => {
              return v.children.map(v => v.name)
            })

            this.list[0] = villageList
            this.list[1] = this.communityList[0]
          }
        })
      },

      onChange (e) {
        this.$set(this.userInfo, 'sssq', this.list[0][e.detail.value[0]])
        this.$set(this.userInfo, 'szxq', this.list[1][e.detail.value[1]])
      },

      columnchange (e) {
        if (e.detail.column === 0) {
          this.$set(this.list, '1', this.communityList[e.detail.value])
        }
      },

      save () {
        if (!this.userInfo.avatarUrl) {
          return this.$toast('请上传头像')
        }

        if (!this.userInfo.nickName) {
          return this.$toast('请输入昵称')
        }

        if (!this.userInfo.phone) {
          return this.$toast('请输入手机号')
        }

        if (!this.userInfo.sssq) {
          return this.$toast('请选择所在社区')
        }

        if (!this.userInfo.szxq) {
          return this.$toast('请选择所在小区')
        }
        this.$loading()
        this.$instance.post('/api/appwechatuser/update-nickName', null, {
          params: {
            ...this.userInfo
          }
        }).then(res => {
          if (res.code === 0) {
            this.$toast('保存成功')

            uni.$emit('updateUserInfo')

            setTimeout(() => {
              wx.navigateBack()
            }, 600)
          }
        })
      },

      onChooseAvatar (e) {
        this.$loading()
        uni.uploadFile({
          url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? '/api' : '') + '/file/add',
          filePath: e.detail.avatarUrl,
          name: 'file',
          header: {
            'Content-Type': 'multipart/form-data',
            Authorization: uni.getStorageSync('token'),
          },
          success: (res) => {
            const data = JSON.parse(res.data)

            if (data.code === 0) {
              this.$set(this.userInfo, 'avatarUrl', data.data[0].split(';')[0])
            } else {
              this.$toast(data.msg)
            }
          },
          complete: () => {
            this.$nextTick(() => {
              this.$hideLoading()
            })
          }
        })
      },

      uploadImg () {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .userinfo {
    .btn {
      margin-top: 180rpx;
    }

    .section {
      background: #fff;

      &:first-child {
        margin-bottom: 20rpx;
      }

      & > h2 {
        position: relative;
        height: 98rpx;
        line-height: 98rpx;
        padding: 0 50rpx;
        color: #363636;
        border-bottom: 1rpx solid #e9e9e9;
        font-size: 34rpx;

        &:after {
          position: absolute;
          left: 30rpx;
          top: 50%;
          z-index: 1;
          width: 5rpx;
          height: 50rpx;
          background: #fd2c21;
          content: ' ';
          transform: translateY(-50%);
        }
      }

      .avatar-wrapper {
        padding: 0;
        width: 120px!important;
        height: 120px!important;
        border-radius: 50%;
        margin: 0;

        image {
          width: 120px;
          height: 120px;
        }
      }

      .form {
        .form-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 88rpx;
          padding: 0 30rpx;
          border-bottom: 1rpx solid #e9e9e9;

          &:last-child {
            border: none;
          }

          h2 {
            color: #4e4e4e;
            font-size: 30rpx;
          }

          &.avatar {
            height: 160rpx;

            .avatar-img {
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }
          }

          .form-item__right {
            display: flex;
            align-items: center;

            input {
              width: 500rpx;
              text-align: right;
              font-size: 30px;
            }

            span {
              max-width: 400px;
              color: #4e4e4e;
              font-size: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }

            .right {
              width: 32px;
              height: 32px;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
</style>
