<!-- 在用软件详情 -->
<script name="SoftwareInfoDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IReviewReport } from '../review/software-review'
import type { IRevisionApply } from '../revision/software-revision'
import type { IChangeLog, ISoftwareInfo } from './software-info'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { UploadFile } from '@/api/file'
import { detailSoftware, getSoftwareChangeLog, updateSoftwareInfo } from '@/api/resource/software'
import { getPhotoUrl } from '@/api/system/tool'

// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

const route = useRoute()
const router = useRouter()
const title = ref('')

const radioItems = ref([
  { name: '基本信息', value: 'software-basic' },
  { name: '变更记录', value: 'software-changeLog' },
])
const current = ref('')
const currentLabel = ref('')

const basicFormRef = ref()

const softwareInfo = ref<ISoftwareInfo>({
  id: '',
  reportNo: '',
  softwareName: '',
  softwareVersion: '',
  softwareDocument: '',
  functionDocument: '',
  sourceCode: '',
  dataValidationRecord: '',
  remark: '',
  createTime: '',
  createUserName: '',
})

const reviewList = ref<Array<IReviewReport>>([])
const revisionList = ref<Array<IRevisionApply>>([])
const changeList = ref<Array<IChangeLog>>([])

const reviewColumn = ref<TableColumn[]>([
  { text: '文件编号', value: 'reportNo', align: 'center', width: '180' },
  { text: '软件名称', value: 'softwareName', align: 'center' },
  { text: '版本号', value: 'softwareVersion', align: 'center', width: '120' },
  { text: '软件评审类型', value: 'reviewTypeStr', align: 'center', width: '160' },
  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
  { text: '申请时间', value: 'createTime', align: 'center', width: '180' },
])
const revisionColumn = ref<TableColumn[]>([
  { text: '文件编号', value: 'applyNo', align: 'center', width: '180' },
  { text: '软件名称', value: 'softwareName', align: 'center' },
  { text: '修订前版本号', value: 'softwareVersion', align: 'center', width: '280' },
  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
  { text: '申请时间', value: 'createTime', align: 'center', width: '180' },
])
const changeColumn = ref<TableColumn[]>([
  { text: '变更类型', value: 'changeType', align: 'center', width: '160' },
  { text: '创建人', value: 'createUserName', align: 'center', width: '120' },
  { text: '更新时间', value: 'updateTime', align: 'center', width: '180' },
  { text: '软件名称', value: 'softwareName', align: 'center' },
  { text: '版本号', value: 'softwareVersion', align: 'center', width: '120' },
  { text: '软件文档', value: 'softwareDocument', align: 'center', width: '180' },
  { text: '功能文档', value: 'functionDocument', align: 'center', width: '180' },
  { text: '源代码', value: 'sourceCode', align: 'center', width: '180' },
  { text: '数据验证记录', value: 'dataValidationRecord', align: 'center', width: '180' },
])

const documentFileUrl = ref<string>('')
const functionFileUrl = ref<string>('')
const sourceFileUrl = ref<string>('')
const validateFileUrl = ref<string>('')

const softwareInfoRules = ref({
  softwareDocument: [{ required: true, message: '软件文档不能为空，请选择一个文件上传', trigger: ['blur', 'change'] }],
  functionDocument: [{ required: true, message: '功能文档不能为空，请选择一个文件上传', trigger: ['blur', 'change'] }],
  sourceCode: [{ required: true, message: '源代码不能为空，请选择一个文件上传', trigger: ['blur', 'change'] }],
  dataValidationRecord: [{ required: true, message: '数据验证记录不能为空，请选择一个文件上传', trigger: ['blur', 'change'] }],
}) // 表单验证规则

// 逻辑
// 详情页的各个tab切换操作
const radioChangeHandler = (newVal: string | number | boolean) => {
  const radioTarget = radioItems.value.filter(item => item.name === newVal)
  if (radioTarget.length > 0) {
    currentLabel.value = radioTarget[0].name
    current.value = radioTarget[0].value
  }
  else {
    currentLabel.value = radioItems.value[0].name
    current.value = radioItems.value[0].value
  }
}

const resetForm = () => {
  sessionStorage.removeItem('sealInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

// 编辑
const updateById = () => {
  updateSoftwareInfo(softwareInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}

// 查询详情
const detail = (softwareId: string) => {
  detailSoftware({ id: softwareId }).then((res) => {
    if (res.code === 200) {
      softwareInfo.value = res.data
    }
  })
}

// 查询变更记录
const getChangeLogs = (softwareId: string) => {
  getSoftwareChangeLog({ id: softwareId }).then((res) => {
    if (res.code === 200) {
      reviewList.value = res.data.reviewReportList
      revisionList.value = res.data.revisionApplyList
      changeList.value = res.data.changeLogList
    }
  })
}

// 保存
const saveForm = async () => {
  if (!basicFormRef) { return }

  await basicFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        updateById()
      })
    }
  })
}

// 上传请求
const uploadSoftwareFile: any = (file: any, fileType: any) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      ElMessage.success('上传成功')
      softwareInfo.value[fileType] = res.data[0]
      loading.close()
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('上传失败')
  })
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  // 默认显示第一个tab内容
  current.value = radioItems.value[0].value
  currentLabel.value = radioItems.value[0].name

  switch (params.type) {
    case 'update':
      title.value = '在用软件详情（编辑）'
      id.value = params.id

      radioItems.value = [
        { name: '基本信息', value: 'software-basic' },
      ]

      detail(id.value)

      break
    case 'detail':
      title.value = '在用软件详情'
      id.value = params.id

      radioItems.value = [
        { name: '基本信息', value: 'software-basic' },
        { name: '变更记录', value: 'software-changeLog' },
      ]

      detail(id.value)
      getChangeLogs(id.value)
      break
    default:
      title.value = ''
      break
  }
}

watch(() => softwareInfo.value.softwareDocument, (newVal) => {
  if (newVal !== '') {
    getPhotoUrl(newVal).then((res) => {
      if (res.code === 200) {
        documentFileUrl.value = res.data
      }
    })
  }
})

watch(() => softwareInfo.value.functionDocument, (newVal) => {
  if (newVal !== '') {
    getPhotoUrl(newVal).then((res) => {
      if (res.code === 200) {
        functionFileUrl.value = res.data
      }
    })
  }
})

watch(() => softwareInfo.value.sourceCode, (newVal) => {
  if (newVal !== '') {
    getPhotoUrl(newVal).then((res) => {
      if (res.code === 200) {
        sourceFileUrl.value = res.data
      }
    })
  }
})

watch(() => softwareInfo.value.dataValidationRecord, (newVal) => {
  if (newVal !== '') {
    getPhotoUrl(newVal).then((res) => {
      if (res.code === 200) {
        validateFileUrl.value = res.data
      }
    })
  }
})

onMounted(async () => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button v-if="type !== 'detail'" type="primary" @click="saveForm()">
          保存
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
      </el-radio-group>

      <template v-if="current === 'software-basic'">
        <el-form ref="basicFormRef" :model="softwareInfo" :rules="softwareInfoRules" label-position="right" label-width="110px" border stripe>
          <el-row :gutter="24">
            <!-- 第一行 第一列 -->
            <el-col :span="6">
              <el-form-item label="软件评审报告">
                <el-input v-model="softwareInfo.reportNo" :disabled="true" />
              </el-form-item>
            </el-col>

            <!-- 第一行 第二列 -->
            <el-col :span="6">
              <el-form-item label="软件名称">
                <el-input v-model="softwareInfo.softwareName" :disabled="true" />
              </el-form-item>
            </el-col>

            <!-- 第一行 第三列 -->
            <el-col :span="6">
              <el-form-item label="版本号">
                <el-input v-model="softwareInfo.softwareVersion" :disabled="true" />
              </el-form-item>
            </el-col>

            <!-- 第一行 第四列 -->
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model="softwareInfo.createUserName" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="软件文档" prop="softwareDocument">
                <el-input v-model="softwareInfo.softwareDocument" type="hidden" />
                <el-link :href="documentFileUrl" :underline="false" target="_blank">
                  {{ softwareInfo.softwareDocument }}
                </el-link>

                <el-upload
                  :show-file-list="false"
                  :http-request="(params) => uploadSoftwareFile(params, 'softwareDocument')"
                  style="width: 50%; margin-left: 20px;"
                >
                  <el-button v-if="type !== 'detail'" type="primary">
                    <template v-if="softwareInfo.softwareDocument !== ''">
                      替换
                    </template>
                    <template v-else>
                      上传
                    </template>
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="功能文档" prop="functionDocument">
                <el-input v-model="softwareInfo.functionDocument" type="hidden" />
                <el-link :href="functionFileUrl" :underline="false" target="_blank">
                  {{ softwareInfo.functionDocument }}
                </el-link>

                <el-upload
                  :show-file-list="false"
                  :http-request="(params) => uploadSoftwareFile(params, 'functionDocument')"
                  style="width: 50%; margin-left: 20px;"
                >
                  <el-button v-if="type !== 'detail'" type="primary">
                    <template v-if="softwareInfo.functionDocument !== ''">
                      替换
                    </template>
                    <template v-else>
                      上传
                    </template>
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="源代码" prop="sourceCode">
                <el-input v-model="softwareInfo.sourceCode" type="hidden" />
                <el-link :href="sourceFileUrl" :underline="false" target="_blank">
                  {{ softwareInfo.sourceCode }}
                </el-link>

                <el-upload
                  :show-file-list="false"
                  :http-request="(params) => uploadSoftwareFile(params, 'sourceCode')"
                  style="width: 50%; margin-left: 20px;"
                >
                  <el-button v-if="type !== 'detail'" type="primary">
                    <template v-if="softwareInfo.sourceCode !== ''">
                      替换
                    </template>
                    <template v-else>
                      上传
                    </template>
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="数据验证记录" prop="dataValidationRecord">
                <el-input v-model="softwareInfo.dataValidationRecord" type="hidden" />
                <el-link :href="validateFileUrl" :underline="false" target="_blank">
                  {{ softwareInfo.dataValidationRecord }}
                </el-link>

                <el-upload
                  :show-file-list="false"
                  :http-request="(params) => uploadSoftwareFile(params, 'dataValidationRecord')"
                  style="width: 50%; margin-left: 20px;"
                >
                  <el-button v-if="type !== 'detail'" type="primary">
                    <template v-if="softwareInfo.dataValidationRecord !== ''">
                      替换
                    </template>
                    <template v-else>
                      上传
                    </template>
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="18">
              <el-form-item label="备注">
                <el-input v-model="softwareInfo.remark" :disabled="type === 'detail'" type="textarea" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template v-if="current === 'software-changeLog' && type === 'detail'">
        <table-container title="评审报告">
          <!-- 表格区域 -->
          <el-table :data="reviewList" :columns="reviewColumn" border stripe>
            <el-table-column align="center" label="序号" width="55" type="index" />
            <el-table-column v-for="col in reviewColumn" :key="col.value" :label="col.text" :align="col.align" :width="col.width">
              <template #default="scope">
                {{ scope.row[col.value] }}
              </template>
            </el-table-column>
          </el-table>
        </table-container>

        <table-container title="修订申请">
          <!-- 表格区域 -->
          <el-table :data="revisionList" :columns="revisionColumn" border stripe>
            <el-table-column align="center" label="序号" width="55" type="index" />
            <el-table-column v-for="col in revisionColumn" :key="col.value" :label="col.text" :align="col.align" :width="col.width">
              <template #default="scope">
                {{ scope.row[col.value] }}
              </template>
            </el-table-column>
          </el-table>
        </table-container>

        <table-container title="历史变更记录">
          <el-table :data="changeList" :columns="changeColumn" border stripe>
            <el-table-column align="center" label="序号" width="55" type="index" />
            <el-table-column v-for="col in changeColumn" :key="col.value" :label="col.text" :align="col.align" :width="col.width">
              <template #default="scope">
                {{ scope.row[col.value] }}
              </template>
            </el-table-column>
          </el-table>
        </table-container>
      </template>
    </detail-page>
  </app-container>
</template>