<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的',
    navigationBarBackgroundColor: '#c08e10',
  },
}
</route>
<template>
  <view class="containe">
    <!-- 渐变色 -->
    <view class="top-content">
      <view class="user-box flex">
        <!-- 左边 -->
        <view class="flex">
          <!-- 头像更换 -->
          <wd-img-cropper
            v-model="show"
            :img-src="src"
            @confirm="handleConfirm"
            @cancel="handleCancel"
          ></wd-img-cropper>
          <view class="profile imgs content">
            <view v-if="!imgSrc" @click="upload" class="mt-4">
              <wd-icon name="fill-camera" custom-class="img-icon" font-size="28px"></wd-icon>
            </view>
            <wd-img
              v-if="imgSrc"
              round
              width="140rpx"
              height="140rpx"
              :src="imgSrc"
              mode="aspectFit"
              custom-class="profile-img"
              @click="upload"
            />
          </view>
          <!-- <image src="../../static/logo.png" mode="scaleToFill" class="imgs" /> -->
          <view class="user-text pt-4">
            <text>好闪闪</text>
            <view>牧场-兽医部-技术员</view>
          </view>
        </view>
        <!-- 右边 -->
      </view>
    </view>
    <!-- 工具 -->
    <view class="px-4">
      <view class="tool px-4 pt-2 pb-2">
        <view class="title">工具栏</view>
        <view class="tool-box">
          <view class="tool-item" v-for="(item, index) in workList" :key="index">
            <i class="iconfont icon" :class="item.icon"></i>
            <view class="mt-1 center">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 个人信息 -->
    <view class="user-tool px-4 pt-1 pb-1 flex mb-2" v-for="(item, index) in userList" :key="index">
      <view>
        <i class="iconfont icon" :class="item.img"></i>
        <text class="rg-title">{{ item.name }}</text>
      </view>
      <navigator :url="item.url">
        <wd-icon name="arrow-right" color="#8e8e8e" size="22px"></wd-icon>
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

defineOptions({
  name: 'Home',
})

const workList = ref([
  { id: 1, name: '消息', icon: 'icon-xiaoxi1' },
  { id: 2, name: '工作日志', icon: 'icon-rizhiguanli' },
])

const userList = ref([
  {
    id: 1,
    name: '修改密码',
    img: 'icon-xiugaimima',
    url: '/pages/editPassword/editPassword',
  },
  {
    id: 2,
    name: '联系客户',
    img: 'icon-lianxikefu',
    url: '/pages/editPassword/editPassword',
  },
  {
    id: 3,
    name: '意见反馈',
    img: 'icon-yijianfankui1',
    url: '/pages/feedBack/feedBack',
  },
  {
    id: 4,
    name: '服务条款',
    img: 'icon-fuwutiaokuan1',
    url: '/pages/serviceText/serviceText',
  },
])

// 头像
const src = ref<string>('')
const imgSrc = ref<string>('')
const show = ref<boolean>(false)

function upload() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths[0]
      src.value = tempFilePaths
      show.value = true
    },
  })
}
function handleConfirm(event) {
  const { tempFilePath } = event
  imgSrc.value = tempFilePath
  const file = dataURLtoFile(tempFilePath, 'tu.jpeg')
  console.log(file, 'file')
}

//将base64格式图片转换为文件形式
// ajax请求，用formdata进行传输，file为上面由base64转的file。
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}

function imgLoaderror(res) {
  console.log('加载失败', res)
}
function imgLoaded(res) {
  console.log('加载成功', res)
}
function handleCancel(event) {
  console.log('取消', event)
}
onMounted(() => {})

onLoad(() => {})
</script>

<style lang="scss" scoped>
::v-deep .wd-img-cropper__footer,
.wd-img-cropper__footer--button[data-v-d9f3c9d7] {
  bottom: 70px !important;
}
::v-deep .wd-icon,
.wd-icon.data-v-d4a8410a {
  font-size: 32px;
}
.icon {
  display: inline-block;
  margin: 0 auto;
  font-size: 32px !important;
  color: #d4a017;
}
.containe {
  font-size: 28rpx;
  color: #333;
}
.top-content {
  height: 340rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  color: #fbeed8;
  text-align: center;
  // background: linear-gradient(to bottom, #d4a017, #f6c986);
  background: linear-gradient(180deg, #c08e10 0%, #d4a017 50%, #e3b655 100%);
}
.user-box {
  justify-content: space-between;
  width: 100;
  padding-left: 40rpx;
  margin-top: 100rpx;
  .imgs {
    width: 140rpx;
    height: 140rpx;
    margin-right: 20rpx;
    // background: #fff;
    background-color: #323233;
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .user-text {
    font-size: 28rpx;
    color: #fff;
    text-align: left;
  }
}
.tool {
  position: relative;
  top: -80rpx;
  font-size: 28rpx;
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}
.title {
  padding-bottom: 10rpx;
  margin-bottom: 20rpx;
  font-size: 32rpx;
  font-weight: 450;
  border-bottom: 1px dotted #eee;
}

.tool-item {
  width: 22%;
  padding: 10rpx 0;
  margin-right: 14rpx;
  margin-bottom: 10rpx;
  // border: 1px solid red;
  text-align: center;
}
.tool-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.user-tool {
  justify-content: space-between;
  height: 80rpx;
  margin-bottom: 1rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  background-color: #fff;
  border-bottom: 1px dotted #f5f5f5;
}
.rg-title {
  position: relative;
  top: -10rpx;
  left: 14rpx;
}
</style>
