<template>
  <view class="page">
    <view class="back_bar">
      <BackBar title="资质证书" />
    </view>
    <view class="card">
      <view v-for="(item, index) of list" :key="index" class="cell border">
        <view class="left">
          <wd-img
            width="100rpx"
            height="100rpx"
            :src="item.url ? item.url : `${OSS_URL}/duxueshi/default_certificate.png`"
            radius="10rpx"
            @click="handlePreview(item.url)"
          ></wd-img>
          <text class="name">{{ item.name }}</text>
        </view>
        <view class="right">
          <wd-img
            class="edit"
            width="30rpx"
            color="#A9AAB5"
            height="30rpx"
            :src="edit"
            @click="jumpPage('/pages/inspector/personalData/certificateAdd', index)"
          ></wd-img>
          <wd-icon
            name="delete-thin"
            color="#A9AAB5"
            size="30rpx"
            @click="removeItem(index)"
          ></wd-icon>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="footer-btn" @click="jumpPage('/pages/inspector/personalData/certificateAdd')">
        添加证书
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import { usepersonalStoreHook } from '@/store/inspector';
import edit from '@/static/svg/edit-icon.svg';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const formStore = usepersonalStoreHook();
const list = ref<any>([]);
function removeItem(index: number) {
  list.value.splice(index, 1);
}
// 预览
function handlePreview(url: string) {
  if (!url) return;
  uni.previewImage({
    urls: [url],
    current: 0,
  });
}
function add() {}
function jumpPage(url: string, index?: number) {
  formStore.SET_INDEX(index ?? -1);
  uni.navigateTo({
    url: url,
  });
}
onShow(() => {
  list.value = formStore.form.qualification;
});
onHide(() => {
  formStore.SET_QUALIFICATION(list.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;

    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .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;
    }
  }
}
.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 {
    margin: auto;
    width: 440rpx;
    height: 90rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 600;
  }
}
</style>
