<template>
  <view class="container">
    <uni-section class="mb-10" title="文件信息" type="line"></uni-section>
    <uni-list :border="true">
      <uni-list-item title="文件编号" :rightText="detail.doc?.id">
      </uni-list-item>
      <uni-list-item title="文件名称" :rightText="detail.doc?.filename" v-if="modifyParams.source === 0">
        <template #footer>
          <view style="width:100%">
            <EditorListItem style="width:100%" v-model="modifyParams.filename" placeholder="文件名称"
              :old-value="detail.doc?.filename" :not-allow-null="true" :components-type="ComponentsType.STRINGINPUT"
              @modify="handlerRenameDoc" />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="文件名称" :rightText="detail.doc?.filename" v-else>
      </uni-list-item>
      <uni-list-item title="文件类型" :rightText="detail.doc?.category_name">
      </uni-list-item>
      <uni-list-item title="所属项目" :rightText="detail.doc?.prj_name">
      </uni-list-item>
      <uni-list-item title="项目编号" :rightText="detail.doc?.prj_id">
      </uni-list-item>
      <uni-list-item title="上传日期" :rightText="detail.doc?.uploaded_at" />
      <uni-list-item title="上传员工" :rightText="detail.doc?.creator_name" />
      <uni-list-item title="文件大小" :rightText="formatBytesOptimized(detail.doc?.size)" />
      <uni-list-item title="是否归档">
        <template #footer>
          <view class="uni-list-item__extra" style="text-align: right;">
            <switch :checked="modifyParams.archived" @change="handlerArchiveDoc" />
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <view v-if="modifyParams.source === 0">
      <view style="margin-top: 20rpx;" v-if="!showCopyDocForm">
        <custom-button width="100%" type="filled" color="#007aff" @click="handlerCopyDoc()">复制文件</custom-button>
      </view>
      <view v-else>
        <uni-section class="mb-10" title="复制文件" type="line"></uni-section>
        <view style="padding:20rpx;background: #fff;">
          <uni-forms ref="formRef" :modelValue="copyFormData" :rules="rules" validateTrigger="submit"
            label-position="top">
            <uni-forms-item label="复制至目录" required label-width="90px" name="category_id">
              <view class="custom-select-class">
                <view class="custom-select-content">
                  <picker :value="copyFormData.category_index" :range="categories" range-key="name"
                    @change="handlerCategoryChange">
                    <text v-if="copyFormData.category_id">{{ category_name }}</text>
                    <text v-else style="color:#909399;font-size: 12px;">请选择复制至文件分类</text>
                  </picker>
                </view>
                <uni-icons :size="14" color="#909399" type="down" style=" padding: 0 5px;"></uni-icons>
              </view>
            </uni-forms-item>
          </uni-forms>
          <view style="margin-bottom: 10px;display: flex;">
            <custom-button width="100%" type="filled" color="#f2f3f5" style="flex:1;margin-right: 5px;;"  @click="handlerCancelCopy()"><text
                style="color: #606266;">取消</text></custom-button>
            <custom-button width="100%" type="filled" color="#007aff" style="flex:1" @click="handlerConfirmCopy()">确认</custom-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import EditorListItem from '@/components/editor-list-item/editor-list-item.vue'
import { archiveDocument, copyDocument, getDocumentDetail, renameDocument } from '@/api/project-center/document';
import { DocumentDetailResParams } from '@/types/document';
import { formatBytesOptimized } from '@/utils'
import { ComponentsType } from '@/enums/api'
import { getDocTypeList } from '@/api/base/base';
import { useEmitt } from '@/logics/mitt/useEmitt';

const formRef = ref()
const categories = ref<
  {
    id: string
    name: string
  }[]
>([])
const showCopyDocForm = ref(false)
const doc_id = ref()
const detail = reactive<{ doc?: DocumentDetailResParams }>({
  doc: undefined
}) // 


const modifyParams = ref<{ filename?: string, id?: string, archived?: boolean, source: number }>({
  source: 0 // 如果是 0 表示是项目详情页面跳转，1则是已归档页面跳转进入
})
const { emitter } = useEmitt()
const copyFormData = ref<{
  category_index?: number
  category_id?: string,
}>({

})

const rules = {
  // 对name字段进行必填验证
  category_id: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '分类不能为空',
      }
    ]
  }

}

const category_name = computed(() => {
  return categories.value.find(item => item.id === copyFormData.value.category_id)?.name
})

/**
 * 获取详情
 * @param customerId
 */
const getDetail = async () => {
  const docDetail = await getDocumentDetail({ id: doc_id.value })
  modifyParams.value.filename = docDetail.filename
  modifyParams.value.archived = docDetail.archived
  detail.doc = docDetail
}

// 文件重命名
const handlerRenameDoc = async () => {
  try {
    await renameDocument({ id: modifyParams.value.id!, filename: modifyParams.value.filename! })
    uni.showToast({
      title: '操作成功'
    })
  } catch (e) {
    modifyParams.value.filename = detail.doc?.filename
  }
}

// 文件归档
const handlerArchiveDoc = async () => {
  await archiveDocument({ id: modifyParams.value.id!, archive: !modifyParams.value.archived! })
  uni.showToast({
    title: '操作成功'
  })
  modifyParams.value.archived = !modifyParams.value.archived
  emitter.emit('get_doc_list')
}

const handlerCopyDoc = async () => {
  showCopyDocForm.value = true
  getType()
}

// 获取复制时分类选项
const handlerCategoryChange = (e: { detail: { value: number } }) => {
  const { value: index } = e.detail
  copyFormData.value.category_index = index;
  copyFormData.value.category_id = categories.value[index].id
}


// 取消重置密码
const handlerCancelCopy =  () => {
  copyFormData.value = {}
  formRef.value?.clearValidate()
  showCopyDocForm.value = false
}

// 确认复制
const handlerConfirmCopy = async () => {
  const isValid = await formRef.value?.validate()
  if (!isValid) {
    return
  }
  const { category_id } = copyFormData.value;
  await copyDocument({target: category_id!, id: detail.doc?.id!})
  uni.showToast({
    icon: 'success',
    title: '复制成功'
  })
  handlerCancelCopy()
  emitter.emit('get_doc_list')
}

const getType = async () => {
  const { list } = await getDocTypeList()
  categories.value = list.filter(item => item.allow_upload)
}



onLoad((option) => {
  doc_id.value = option?.id
  modifyParams.value.id = option?.id
  modifyParams.value.source = Number(option?.source)

});




onMounted(() => {
  getDetail()
})




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

}
</script>
<style scoped>
.container {
  padding: 0 5px 40px 5px;
}

:deep(.uni-list-item__content-note) {
  overflow-wrap: break-word;
}

:deep(.uni-list-item__content) {
  flex-direction: row;
  align-items: center;
  flex: 0 0 80px;
}

:deep(.uni-list-item__content-title) {
  font-size: 13px;
  color: #3b4144a8;
}

:deep(.uni-list-item__extra) {
  flex: 1 1 auto;
}

:deep(.uni-list-item__extra-text) {
  color: #5d5959;
  font-size: 13px;
  width: 200px;
  text-overflow: ellipsis;
  text-align: right;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  white-space-collapse: collapse;
}

.slot-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  width: 45px;
  background-color: rgb(201, 205, 212);
  border-radius: 4px;
  margin-right: 10px;
  height: 45px;
}


.slot-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 45px;
}

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

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

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

.slot-desc {
  font-size: 12px;
  color: #999;
  max-width: 200px;
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

}

:deep(.uni-section) {
  margin-top: 5px;
}

.custom-select-class {
  border-color: #e5e5e5;
  background-color: transparent;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.custom-select-content {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  line-height: 35px;
  padding-left: 10px;
  height: 35px;

}
</style>