<template>
  <view class="page">
    <view class="back_bar">
      <BackBar title="资质证书" />
    </view>
    <view class="card">
      <view class="cell border">
        <view class="label">证书名称</view>
        <input
          v-model="rowData.name"
          type="text"
          class="input_box"
          placeholder="请输入证书名称"
          placeholder-style="color:#A9AAB5;text-align: right;font-size:30rpx;"
        />
      </view>
      <view class="cell">
        <view class="label">证书图片</view>
        <view class="rowData-content">
          <wd-img
            width="100rpx"
            height="100rpx"
            :src="rowData.url ? rowData.url : `${OSS_URL}/duxueshi/default_certificate.png`"
            mode=""
            class="photo_img"
            @click="handlePreview"
          >
          </wd-img>
          <image :src="arrow" mode="" class="arrow" @click="() => popupRef.open()"></image>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="footer-btn" @click="submit">保存</button>
    </view>
    <!-- 弹出框选项 -->
    <view class="picker_box">
      <uni-popup ref="popupRef" is-mask-click animation type="bottom">
        <view class="popup_box">
          <view class="header_title"> 选择上传方式 </view>
          <view class="method_list">
            <view v-for="i in pickList" :key="i.type" class="item" @click="chooseUploadMethod(i)">
              {{ i.name }}
            </view>
          </view>
          <view class="popup-footer">
            <button class="cancel-btn" @click="clsoePopup">取消</button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { uploadFile } from '@/api/modules/inspector';
import { onShow, onHide } from '@dcloudio/uni-app';
import { usepersonalStoreHook } from '@/store/inspector';
const OSS_URL = import.meta.env.VITE_OSS_HOST;

const arrow = `${OSS_URL}/iconfont/down_arrow.png`;
const formStore = usepersonalStoreHook();
const rowData = ref<anyObj>({});
const popupRef = ref();
const pickList = ref([
  {
    name: '从相册选择',
    type: 1,
    sourceType: 'album',
  },
  {
    name: '拍照上传',
    type: 2,
    sourceType: 'camera',
  },
]);
function add() {}
const clsoePopup = () => {
  popupRef.value.close();
};
// 预览
function handlePreview() {
  if (!rowData.value.url) return;
  uni.previewImage({
    urls: [rowData.value.url],
    current: 0,
  });
}
function chooseUploadMethod(i: any) {
  popupRef.value.close();
  uni.chooseImage({
    count: 1, // 最多可以选择的图片张数
    sizeType: ['compressed', 'original'], // original 原图，compressed 压缩图，默认二者都有
    sourceType: [i.sourceType], // album 从相册选图，camera 使用相机，默认二者都有
    success: async res => {
      uni.showLoading({
        title: '上传中...',
      });
      const { code, data } = await uploadFile(res.tempFiles[0]);
      uni.hideLoading();
      if (code === 200) {
        rowData.value.url = data.filePath;
      } else {
        uni.showToast({
          title: '上传失败，请重试',
        });
      }
    },
    fail: err => {
      // 图片接口调用失败的回调函数
      console.log('chooseImage fail', err);
    },
  });
}

// 删除图片
function deleteImg(i: number) {
  rowData.value.qualification.splice(i, 1);
}

// 保存
function submit() {
  if (!rowData.value.name || !rowData.value.url) {
    uni.showToast({
      title: '请先完善证书信息再保存',
    });
  }
  if (formStore.index !== -1) {
    formStore.form.qualification[formStore.index] = rowData.value;
  } else {
    formStore.form.qualification.push(rowData.value);
  }
  formStore.SET_QUALIFICATION(formStore.form.qualification);
  uni.navigateBack({
    delta: 1,
  });
}
onShow(() => {
  if (formStore.index !== -1) {
    rowData.value = { ...formStore.form.qualification[formStore.index] };
  }
});
onHide(() => {
  // formStore.SET_QUALIFICATION(rowData.value);
});
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  .back_bar {
    margin-bottom: 30rpx;
  }
  box-sizing: border-box;
  .card {
    border-radius: 20rpx;
    background: #fff;
    padding: 10rpx 0;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .input_box {
      text-align: right;
      width: 420rpx;
      font-size: 30rpx;
      color: rgba(51, 51, 51, 1);
      line-height: 42rpx;
    }
    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .rowData-content {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .arrow {
          margin-left: 10rpx;
          width: 30rpx;
          height: 30rpx;
          transform: rotate(-90deg);
        }
      }
      .left {
        display: flex;
        align-items: center;

        .name {
          color: #0a1f13;
          font-size: 30rpx;
          margin-left: 20rpx;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .edit {
          margin-right: 20rpx;
        }
      }
    }
    .cell:not(:last-child) {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f6f6f6;
    }
    .cell:not(:first-child) {
      padding-top: 30rpx;
    }
  }
  .placeholder {
    color: #a9aab5;
    text-align: right;
    font-size: 30rpx;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  height: 122rpx;
  width: 100vw;
  left: 0;
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  .footer-btn {
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
.picker_box {
  .popup-footer {
    display: flex;
    justify-content: center;
    padding: 16rpx 0;
    box-sizing: border-box;
    border-top: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancel-btn {
    width: 440rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 20rpx;
    background: #efefff;
    color: #615dff;
    font-family: 'PingFang SC';
    font-size: 30rpx;
    font-weight: 500;
  }
  .popup_box {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;

    .header_title {
      margin: 30rpx 0 0 30rpx;
      color: rgba(51, 51, 51, 0.8);
      font-size: 32rpx;
      font-weight: 500;
      text-align: left;
    }

    .method_list {
      text-align: center;
      padding: 0 54rpx;

      .item {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f6f6f6;
        font-weight: 400;
        height: 45rpx;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}
</style>
