<template>
  <view class="account_safe" :style="vuex_theme">
    <view class="avatar">
      <u-image
        @click="show = true"
        width="190rpx"
        height="190rpx"
        shape="circle"
        :src="
          avatarUrl
            ? `${vuex_ossUrlPubilc}/${avatarUrl}`
            : '/static/img/my/default_avatar.png'
        "
      />
    </view>

    <view class="cell top">
      <u-cell-group>
        <u-cell
          title="登录账号"
          :isLink="true"
          url="/pages/main/my/editAccount/editAccount"
          arrow-direction="right"
          :rightIconStyle="{ fontSize: '26rpx' }"
          :title-style="{ color: '#909097', fontSize: '28rpx' }"
        >
          <text slot="value" class="u-slot-value">{{ accountName }}</text>
        </u-cell>
        <u-cell
          title="姓名"
          arrow-direction="right"
          :rightIconStyle="{ fontSize: '26rpx' }"
          :title-style="{ color: '#909097', fontSize: '28rpx' }"
        >
          <text slot="value" class="u-slot-value">{{ teacherName }}</text>
        </u-cell>
        <u-cell
          title="手机号"
          :isLink="true"
          url="/pages/main/my/editMobile/editMobile"
          arrow-direction="right"
          :rightIconStyle="{ fontSize: '26rpx' }"
          :title-style="{ color: '#909097', fontSize: '28rpx' }"
        >
          <text slot="value" class="u-slot-value">{{ getPhone }}</text>
        </u-cell>
        <u-cell
          title="工号"
          arrow-direction="right"
          :rightIconStyle="{ fontSize: '26rpx' }"
          :title-style="{ color: '#909097', fontSize: '28rpx' }"
        >
          <text slot="value" class="u-slot-value">{{ jobNumber }}</text>
        </u-cell>
        <u-cell
          title="院系专业"
          arrow-direction="right"
          :rightIconStyle="{ fontSize: '26rpx' }"
          :title-style="{ color: '#909097', fontSize: '28rpx' }"
        >
          <view slot="value">
            <view v-for="(item, index) in departmentName" v-bind:key="index">{{item.departmentName ? `${item.departmentName}/${item.name}` : item.name}}</view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <u-action-sheet
      :actions="list"
      @select="chooseImg"
      :show="show"
    ></u-action-sheet>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";

import { getOssInitApi, updateAvatarUrlApi } from "@/config/api.js";

import { replaceTextToStar } from "@/common/commonUtil.js";

export default {
  data() {
    return {
      show: false,
      list: [
        {
          name: "拍照",
        },
        {
          name: "从手机相册选择",
        },
      ],
      ossInit: {},
      picList: [],
    };
  },

  onLoad() {
    getOssInitApi({
      uploadFileType: "other",
    }).then((res) => {
      this.ossInit = res;
    });
  },

  computed: {
    ...mapState({
      wxAvatarUrl: (state) =>
        state.vuex_weixinUserInfo.avatarUrl
          ? state.vuex_weixinUserInfo.avatarUrl
          : "",
      avatarUrl: (state) =>
        state.vuex_user.teacher.avatarUrl
          ? state.vuex_user.teacher.avatarUrl
          : "",
      accountName: (state) =>
        state.vuex_user.username ? state.vuex_user.username : "",
      teacherName: (state) =>
        state.vuex_user.teacher.name ? state.vuex_user.teacher.name : "",
      jobNumber: (state) =>
        state.vuex_user.teacher.number ? state.vuex_user.teacher.number : "",
      departmentName: (state) => {
        let departments = [];
        if (state.vuex_user.teacher.departments) {
          departments = [...state.vuex_user.teacher.departments];
        }
        if (state.vuex_user.teacher.professionals) {
          departments = [
            ...departments,
            ...state.vuex_user.teacher.professionals,
          ];
        }
        return departments;
      },
      getPhone(state) {
        let phone = state.vuex_user.phone;
        return phone ? replaceTextToStar(phone) : "";
      },
    }),
  },

  methods: {
    ...mapActions("user", {
      getUserInfo: "getUserInfo",
    }),

    chooseImg(item) {
      var _this = this;
      console.log(item);
      if (item.name == "拍照") {
        //拍照
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera"], //从相机选择
          success: function (res) {
            console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
            _this.picList = res.tempFilePaths;
            _this.uploadImages();
          },
        });
      } else if (item.name == "从手机相册选择") {
        //相册
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album"], //从相册选择
          success: function (res) {
            console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
            _this.picList = res.tempFilePaths;
            _this.uploadImages();
          },
        });
      }
    },

    uploadImages() {
      //上传图片
      var _this = this;
      console.log("begin", this.picList);

      let formdata = {};
      if (this.ossInit.uploadType == "minio") {
        formdata = {
          bucket: _this.ossInit.bucket,
          dir: _this.ossInit.dir,
          fileName:
            `${_this.ossInit.dir}${new Date().getTime()}/` + "${filename}",
          accessId: _this.ossInit.accessId,
          policy: _this.ossInit.policy,
        };
      } else {
        formdata = {
          key: `${_this.ossInit.dir}${new Date().getTime()}/` + "${filename}",
          // 'key': `${_this.ossInit.dir}${new Date().getTime()}`,
          action: `${_this.ossInit.host}`,
          OSSAccessKeyId: _this.ossInit.accessId,
          policy: _this.ossInit.policy,
          signature: _this.ossInit.signature,
          callback: _this.ossInit.callback,
        };
      }
      for (var i = 0; i < this.picList.length; i++) {
        uni.uploadFile({
          url: _this.ossInit.host,
          filePath: _this.picList[i],
          name: "file",
          formData: formdata,
          success: (uploadFileRes) => {
            console.log("--", uploadFileRes);

            let avatarObj = JSON.parse(uploadFileRes.data);
            _this.avatarUrl = avatarObj.object;

            updateAvatarUrlApi({
              id: this.vuex_user.teacher.id,
              avatarUrl: avatarObj.object,
            }).then((data) => {
              if (data) {
                _this.getUserInfo();
              }
            });
          },
          fail: (error) => {
            console.log("-error-", error);
          },

          complete: (res) => {
            this.show = false;
          },
        });
      }
    },

    link(type) {
      switch (type) {
        case "account":
          this.$u.route("/pages/student/my/edit-account/edit-account");
          break;

        case "password":
          this.$u.route("/pages/student/my/edit-password/edit-password");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.account_safe {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  padding: 20rpx 0 0 0;

  .avatar {
    width: 190rpx;
    margin: 0 auto;
    padding: 50rpx 0;
  }

  .top {
    margin: 0 0 20rpx 0;
  }

  .cell {
    background-color: #ffffff;

    .u-slot-value {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #202131;
    }
  }

  .cell /deep/ .u-cell {

    .u-cell__value {
      font-size: 34rpx;
      color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>