<template>
  <div class="exp-form">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="workId" name="1">
        <van-field
          v-model="workflow.workId"
          readonly
        />
      </van-collapse-item>

      <van-collapse-item title="流程名称" name="101">
        <van-field
          v-model="formData.flowName"
          label="流程名称"
          placeholder="请输入流程名称"
          readonly
        />
      </van-collapse-item>

      <van-collapse-item title="基础信息" name="2">
        <van-cell-group inset>
          <van-field
            v-model="formData.applicant"
            label="申请人"
            placeholder="请输入申请人"
          />
          <van-field
            v-model="formData.department"
            label="所属部门"
            placeholder="请选择所属部门"
            readonly
            is-link
            @click="showDeptPicker = true"
          />
          <van-field
            v-model="formData.applyDate"
            label="申请日期"
            placeholder="请选择日期"
            readonly
            is-link
            @click="showDatePicker = true"
          />
        </van-cell-group>
      </van-collapse-item>

      <van-collapse-item title="合同信息" name="3">
        <div class="contract-list">
          <van-cell-group inset>
            <van-cell
              v-for="(contract, index) in contractList"
              :key="index"
              :title="contract.name"
              :label="contract.desc"
            >
              <template #value>
                <div class="contract-value">
                  <span class="amount">￥{{ contract.amount }}</span>
                  <span class="date">{{ contract.date }}</span>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </van-collapse-item>

      <van-collapse-item title="合同行" name="4">
        <div class="contract-items">
          <van-button type="primary" size="small" @click="addContractItem">
            添加合同行
          </van-button>
          <van-empty v-if="!formData.contractItems.length" description="暂无合同行" />
          <template v-else>
            <div v-for="(item, index) in formData.contractItems" :key="index" class="contract-item">
              <van-cell-group inset>
                <van-field v-model="item.name" label="名称" placeholder="请输入名称" />
                <van-field v-model="item.amount" label="金额" type="number" placeholder="请输入金额" />
              </van-cell-group>
              <van-button type="danger" size="small" @click="removeContractItem(index)">删除</van-button>
            </div>
          </template>
        </div>
      </van-collapse-item>

      <van-collapse-item title="收款方式" name="5">
        <van-radio-group v-model="formData.paymentMethod">
          <van-cell-group inset>
            <van-cell title="现金">
              <template #right-icon>
                <van-radio name="cash" />
              </template>
            </van-cell>
            <van-cell title="银行转账">
              <template #right-icon>
                <van-radio name="bank" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-collapse-item>

      <van-collapse-item title="文件上传" name="6">
        <van-uploader
          v-model="formData.fileList"
          :max-count="5"
          multiple
          :before-read="beforeRead"
        />
      </van-collapse-item>

      <van-collapse-item title="文件预览" name="7">
        <PdfViewer
          v-if="pdfUrl"
          :pdf-url="pdfUrl"
        />
        <van-empty v-else description="暂无文件" />
      </van-collapse-item>
    </van-collapse>

    <van-popup v-model:show="showDatePicker" position="bottom">
      <van-date-picker
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>

    <van-popup v-model:show="showDeptPicker" position="bottom">
      <van-picker
        :columns="deptColumns"
        @confirm="onDeptConfirm"
        @cancel="showDeptPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { UploaderFileListItem, UploaderBeforeRead } from 'vant'
import { showToast } from 'vant'
import PdfViewer from '@/components/pdf-viewer.vue'

defineOptions({
  name: 'ExpForm'
})

import {
		useWorkflowStore
	} from "@/stores/workflow"
const workflow = useWorkflowStore()

const activeNames = ref(['1'])
const showDatePicker = ref(false)
const showDeptPicker = ref(false)

interface DeptColumn {
  text: string
  value: string
}

const deptColumns: DeptColumn[] = [
  { text: '信息技术部', value: '信息技术部' },
  { text: '人力资源部', value: '人力资源部' },
  { text: '财务部', value: '财务部' },
  { text: '市场部', value: '市场部' }
]

interface ContractItem {
  name: string
  amount: string | number
}

interface FormData {
  flowName: string
  applicant: string
  department: string
  applyDate: string
  contractType: string
  contractNo: string
  contractAmount: string | number
  contractItems: ContractItem[]
  paymentMethod: string
  fileList: UploaderFileListItem[]
}

const formData = reactive<FormData>({
  flowName: '合同审批流程',
  applicant: '',
  department: '',
  applyDate: '',
  contractType: '',
  contractNo: '',
  contractAmount: '',
  contractItems: [],
  paymentMethod: 'bank',
  fileList: []
})

function onDateConfirm(date: Date) {
  formData.applyDate = date.toLocaleDateString()
  showDatePicker.value = false
}

function onDeptConfirm(value: DeptColumn) {
  formData.department = value.text
  showDeptPicker.value = false
}

function addContractItem() {
  formData.contractItems.push({
    name: '',
    amount: ''
  })
}

function removeContractItem(index: number) {
  formData.contractItems.splice(index, 1)
}

const beforeRead: UploaderBeforeRead = (file) => {
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    showToast('文件大小不能超过 2MB!')
    return false
  }
  return true
}

interface Contract {
  name: string
  desc: string
  amount: string
  date: string
}

const contractList: Contract[] = [
  {
    name: '软件开发合同',
    desc: '包含系统设计、开发、测试和部署',
    amount: '280,000',
    date: '2024-03-15'
  },
  {
    name: '技术服务合同',
    desc: '提供为期一年的技术支持和维护服务',
    amount: '120,000',
    date: '2024-03-18'
  },
  {
    name: '设备采购合同',
    desc: '服务器及网络设备采购',
    amount: '450,000',
    date: '2024-03-20'
  },
  {
    name: '培训服务合同',
    desc: '技术团队培训及认证服务',
    amount: '80,000',
    date: '2024-03-22'
  }
]

// PDF 预览相关
const pdfUrl = ref('http://172.16.7.51:10028/horizon-workflow-boot/file/preview?fileId=123456')
</script>

<style lang="scss" scoped>
.exp-form {
  background: #f7f8fa;
  padding-bottom: 20px;
}

.contract-items {
  padding: 10px;

  .van-button {
    margin-bottom: 10px;
  }
}

.contract-item {
  margin-bottom: 10px;
  position: relative;

  .van-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

:deep(.van-cell-group) {
  margin-bottom: 8px;
}

:deep(.van-uploader) {
  padding: 10px;
}

.contract-list {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  &::-webkit-scrollbar {
    width: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: #dcdee0;
    border-radius: 2px;
  }
  
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

.contract-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  
  .amount {
    color: #ee0a24;
    font-weight: bold;
  }
  
  .date {
    font-size: 12px;
    color: #969799;
    margin-top: 4px;
  }
}

.pdf-preview {
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style> 