<template>
  <view class="container">
    <uni-section title="交付物清单" type="line">
    </uni-section>
    <view style="padding:1px 5px 5px 5px;">
      <uni-collapse v-model="outcomeIds">
        <uni-collapse-item title-border="none" style="border:1px #ebeef5 solid;margin-bottom:5px;"
          v-for="outcome in outcomeList" :key="outcome.id">
          <template v-slot:title>
            <view style="display: flex;position: relative;">
              <view class="card-header">
                <view class="header-box">
                  <view class="header-box-title">{{ outcome.name }}</view>
                </view>
                <view>
                  <uni-tag :text="outcomeStatus(outcome.status!)?.label" :inverted="true" style=""
                    :custom-style='"padding:2px 4px;font-size:10px;font-weight:bolder;border: 1px solid transparent;background:" + tagColor(outcomeStatus(outcome.status!)!.color).bg + ";color:" + tagColor(outcomeStatus(outcome.status!)!.color).color'>
                  </uni-tag>
                </view>
              </view>
            </view>
          </template>

          <view class="font-size-sm collapse-content">
            <text class="subtitle font-size-base">计划交付时间：<text class="paragraph font-size-sm">{{
              outcome.plan_time }}</text></text>
          </view>
          <view class="font-size-sm collapse-content">
            <text class="subtitle font-size-base">完成交付时间：<text class="paragraph font-size-sm">{{
              outcome.completed_at || '-' }}</text></text>

          </view>
          <view class="font-size-sm collapse-content" v-if="outcome.showProgress">
            <text class="subtitle font-size-base">
              文件下载中：
            </text>
            <custom-progress :value="outcome.progress" style="min-width: 250px" :stroke-width="16"></custom-progress>
          </view>
          <view class="card-actions" v-if="outcome.uploaded">
            <view class="card-actions-item">
              <view style="display: flex; align-items: center;" @click="startDownloadFileItem(outcome)">
                <uni-icons type="download" size="18" color="#007aff"></uni-icons>
                <text class="card-actions-item-text">下载附件</text>
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getDownloadOutcomeUrl, getOutcomeList, removeOutcome } from '@/api/project-center/outcome';
import { OutcomeStatusList } from '@/enums/api';
import customProgress from '@/components/cu-progress/index.vue'
import { Outcome } from '@/types/outcome';
import { tagColor } from '@/utils'
import { downloadFile, saveFile } from '@/api/base/client';


const outcomeList = ref<Outcome[]>([])
const outcomeIds = ref<string[]>([])

// 根据交付物状态获取对应样式标签
const outcomeStatus = (status: number) => {
  return OutcomeStatusList.find(item => item.status === status)
}


const getOutcomes = async (task_id: string) => {
  const { list } = await getOutcomeList({
    draft: false,
    task_id
  })
  outcomeList.value = list
  setTimeout(() => {
    outcomeIds.value = outcomeList.value.map((_item, index) => index.toString())
  }, 500)
}

// 监听进度条
const onProgressResult = (e: UniApp.OnProgressDownloadResult | UniApp.OnProgressUpdateResult, outcome: Outcome) => {
  outcome.showProgress = true
  outcome.progress = e.progress
}



const startDownloadFileItem = async (outcome: Outcome) => {
  uni.showActionSheet({
    itemList: ['分享到好友', '添加到收藏'],
    success: async (res: UniApp.ShowActionSheetRes) => {
      await downloadFileItem(outcome, res.tapIndex)
    }
  });

}

// 下载文件
const downloadFileItem = async (outcome: Outcome, sheetIndex: number) => {
  try {
    const { url } = await getDownloadOutcomeUrl({
      id: outcome.id,
    })
    const { savedFilePath } = await downloadFile({ url, downloadProgress: onProgressResult, otherParams: outcome })
    await saveFile(savedFilePath, outcome.filename, sheetIndex)
    outcome.showProgress = false
    outcome.progress = 0
  } catch (_e) {
    outcome.showProgress = false
    outcome.progress = 0
  }
}


onLoad((options) => {
  getOutcomes(options?.task_id as string)
  uni.setNavigationBarTitle({ title: `${options?.task_name}-交付物` })
})


</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style lang="less" scoped>
.container {
  margin: 5px;
  background: #fff;
  min-height: calc(100vh - 88rpx);
}

:deep(.is-text-box) {
  display: none;
}

.slot-check-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  width: 45px;
  margin-right: 10px;
}


.slot-check-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  align-items: center;
  /* height: 45px; */
}

.slot-check-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.slot-check-title {
  display: flex;
  font-size: 14px;
  color: #3b4144;
}

.slot-check-subtitle {
  display: flex;
  padding-top: 6px;
  font-size: 12px;
  color: #999
}

.slot-check-desc {
  color: #999;
  font-size: 12px;
  text-overflow: ellipsis;
  text-align: right;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  white-space-collapse: collapse;

}

.tag-container {
  max-width: 210px;
  display: flex;
  flex-wrap: wrap;
}

.tag-container__item {
  padding: 0 6px 6px 0;
  white-space: nowrap;

}

.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 35px;
  border-top: 1px #EBEEF5 solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  font-size: 12px;
  color: #999;
}

.card-header {
  display: flex;
  flex: 1;
  border-bottom: 1px #ebeef5 solid;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  overflow: hidden;

  .header-box {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    overflow: hidden;

    .header-box-title {
      font-size: 14px;
      color: #3b4144;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.collapse-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  padding: 5px 10px;
}

.font-size-base {
  font-size: 24rpx;
}

.paragraph {
  color: #b2a9a6;
  font-weight: 600;
}

.subtitle {
  color: #b2a9a6;
}


.ribbon-wrapper {
  width: 71px;
  height: 51px;
  overflow: hidden;
  position: absolute;
  left: 0
}

.ribbon {
  font: bold 15px Sans-Serif;
  line-height: 10px;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
  position: relative;
  padding: 3px 0;
  left: -20px;
  top: 5px;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
}

.ribbon:before,
.ribbon:after {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px;
}

.ribbon:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 100%;
}

.ribbon:after {
  content: '';
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
}

.ribbon-add {
  background-color: #4cd964;
}

.ribbon-modify {
  background-color: #f0ad4e;
}

.ribbon-remove {
  background-color: #dd524d;
}

.ribbon-sub-add {
  background-color: #aff0b5;
}

.ribbon-sub-modify {
  background-color: #fff7e8;
}

.ribbon-sub-remove {
  background-color: #ffece8;
}
</style>