<template>
  <!-- 是自己的任务 且该任务有交付物 才显示提交组件 -->
  <view class="bg-white px-2 rounded-md relative" @longpress.prevent="showMask = true">
    <!-- 插件名称输入和提交 -->
    <view class="flex item-center justify-between py-2">
      <view class="flex-1">
        <view v-if="deliver.deliverName" class="relative inline-block">
          {{ deliver.deliverName }}
          <u-badge
            size="mini"
            :is-dot="true"
            style="transform: translate3d(2em, -1em, 0)"
            v-show="!deliver.details || !deliver.details.length"
          ></u-badge>
        </view>
      </view>

      <!-- 提交 -->
      <u-button
        type="primary"
        size="mini"
        @click="submit"
        class="self-center"
        :disabled="submitState"
        :ripple="true"
        :loading="submitBtnLoading"
      >
        提交
      </u-button>

      <!-- 查看提交历史的按钮 -->
      <u-icon name="arrow-right" class="ml-3" @click="openDeliverHistory"></u-icon>
    </view>

    <!-- 插件上传方式 -->
    <view>
      <view class="link-box">
        <u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接" class="input"></u-input>
      </view>
      <view class="mt-3">
        <u-button size="mini" :plain="true" type="primary" class="mr-3" @click="paste">粘贴</u-button>
        <u-button size="mini" :plain="true" type="primary" class="mr-3" @click="uploadFile">文件</u-button>
        <u-button size="mini" :plain="true" type="primary" class="mr-3" @click="uploadPhoto">拍照</u-button>
      </view>
    </view>

    <!-- 编辑和删除的遮罩层 -->
    <view class="mask flex items-center justify-center bg-grey" v-show="showMask" @click="showMask = false">
      <view class="bg-yellow-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click.stop="showEditModal = true">
        修改
      </view>
      <view class="bg-red-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click.stop="showDeleteModal = true">
        删除
      </view>
      <!-- 删除的二次提示modal -->
      <u-modal v-model="showDeleteModal" :content="content" :show-cancel-button="true" @confirm="confirmDelete"></u-modal>
    </view>

    <!-- 编辑交付物标题的modal -->
    <u-mask :show="showEditModal" @click="showEditModal = false">
      <view class="modal-content-wrap" @click.stop>
        <view class="modal-content-head">交付物标题名称</view>
        <view class="modal-content-body">
          <u-input :border="true" placeholder="请输入交付物名称" v-model="newInputRef"></u-input>
        </view>

        <view class="modal-content-foot">
          <view class="cancel" @click="showEditModal = false">取消</view>
          <view class="confirm" @click="confirmEditDeliverName">确定</view>
        </view>
      </view>
    </u-mask>

    <!-- 插件审核人员选择 -->
    <Reviewer ref="reviewerRef" />
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import { useStore } from 'vuex';
import { UPLOAD_URL } from '@/config/index';
import { UPLOAD_EXTENSION } from '@/config/deliver';

const deliver = inject('deliver');
const task = inject('task');
const store = useStore();
const emits = defineEmits(['upload-success', 'edit-success']);

const reviewerRef = ref(null);
const submitBtnLoading = ref(false);
const linkValue = ref(''); // 链接的值
const showMask = ref(false); // 编辑和删除页面
const showEditModal = ref(false); // 编辑交付物标题的modal
const newInputRef = ref(''); // 修改的插件名的值
const showDeleteModal = ref(false); // 删除二次提示的modal
const content = '是否确定删除';
const showBadge = ref(false); // u-badge的显示与隐藏

// 判断提交按钮的状态
const submitState = computed(() => !linkValue.value);
const projectId = computed(() => store.getters['project/projectId']);

// 验证提交的交付物信息格式
function validateDeliverForm(checkedCheckers) {
  const reg = /[a-zA-z]+:\/\/[^\s]*/;
  if (!reg.test(linkValue.value)) {
    // 显示toast信息
    uni.$ui.showToast('请输入正确的链接');
    return false;
  }
  // 没有检查人 提示选择检查人
  if (!checkedCheckers || !checkedCheckers.length) {
    uni.$ui.showToast('请选择检查人');
    return false;
  }
  return true;
}

// 提交交付物信息
async function submit() {
  const { checkedCheckers } = reviewerRef.value; // 拿到选择检查人组件中选中的检查人

  // 提交前的验证
  if (!validateDeliverForm(checkedCheckers)) return;
  submitBtnLoading.value = true; // 显示loading
  // 验证成功后进行请求
  try {
    const checkerList = [];
    checkedCheckers.forEach(item => {
      checkerList.push(item.memberId);
    });
    const param = {
      projectId: projectId.value,
      deliverId: deliver.value.deliverId,
      fileList: [linkValue.value],
      checkerList,
    };
    await uni.$u.api.submitDeliverInfo(param);
    uni.$ui.showToast('提交交付物信息成功');
    resetControlState(); // 重置控件的初始状态
    emits('upload-success');
  } catch (error) {
    console.log('error: ', error);
    uni.$ui.showToast('提交交付物信息失败');
  }
}

// 重置控件的初始状态
function resetControlState() {
  submitBtnLoading.value = false; // 隐藏loading
  linkValue.value = ''; // 清空输入框内容
  reviewerRef.value.collapsed = true; // 折叠检查人面板
}

// 查看历史记录
function openDeliverHistory() {
  const { deliverId } = deliver.value;
  // console.log(deliverId)
  uni.navigateTo({ url: `/pages/submitLog/submitLog?deliverId=${deliverId}` });
}

// 粘贴上传
function paste() {
  uni.getClipboardData({
    success(res) {
      linkValue.value = res.data;
    },
  });
}

// 文件上传
async function uploadFile() {
  // #ifdef APP-PLUS
  uni.$ui.showToast('APP暂不支持上传文件');
  // #endif

  // #ifdef H5
  try {
    const data = await uni.$upload.chooseAndUpload(UPLOAD_URL, {}, UPLOAD_EXTENSION, 'files');
    // console.log(data[0]);
    linkValue.value = data[0].visitUrl;
  } catch (error) {
    console.error('error: ', error);
  }
  // #endif
}

// 拍照上传
function uploadPhoto() {
  uni.$ui.hideLoading();
  let timer = null;
  clearTimeout(timer);
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 从相册选择
    success: res => {
      if (!timer) {
        timer = setTimeout(() => {
          uni.$ui.showLoading('正在上传...');
          timer = null;
        }, 800);
      }
      const { tempFilePaths } = res;
      uni.uploadFile({
        url: UPLOAD_URL, // 仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: 'files',
        formData: {},
        success: res => {
          clearTimeout(timer);
          uni.$ui.hideLoading();
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            linkValue.value = data.data[0].visitUrl;
          }
        },
        fail: error => {
          clearTimeout(timer);
          uni.$ui.hideLoading();
          console.error('error', error);
        },
      });
    },
  });
}

// 确定修改交付物名称
async function confirmEditDeliverName() {
  if (!newInputRef.value) {
    uni.$ui.showToast('输入不能为空');
  }
  try {
    const param = {
      projectId: projectId.value,
      taskId: task.id,
      deliverName: newInputRef.value,
    };
    await uni.$u.api.editDeliverName(param);
    //  uni.$ui.showToast('修改交付物名称成功');
    emits('edit-success');
    // 请求成功 才会清空 请求失败保留
    showEditModal.value = false;
    showMask.value = false;
    showBadge.value = false;
    newInputRef.value = '';
  } catch (error) {
    console.error('error: ', error);
    uni.$ui.showToast('修改交付物名称失败');
  }
}

// 二次确认后删除
async function confirmDelete() {
  try {
    showDeleteModal.value = true;
    deliverRef.value = false;
    await uni.$u.api.deleteDeliver();
    uni.$ui.showToast('删除交付物成功');
  } catch (error) {
    console.error('error: ', error);
    uni.$ui.showToast('删除交付物失败');
  }
}
</script>
