<template>
  <div class="operate">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="dialogForm"
      :label-width="120"
      :disabled="['audit', 'view'].includes(opts.type)"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="项目名称:" prop="projectName">
            <el-input
              v-model="form.projectName"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="项目整体介绍:" prop="projectOverview">
            <el-input
              v-model="form.projectOverview"
              type="textarea"
              resize="none"
              :rows="4"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="资料总大小:" prop="totalSize">
            <el-input
              :model-value="handleFileSize(form.totalSize)"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目资料数:" prop="fileNum">
            <el-input
              v-model="form.fileNum"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目启动时间:" prop="startTime">
            <el-input
              v-model="form.startTime"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自评完工时间:" prop="endTime">
            <el-input
              v-model="form.endTime"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="opts.type === 'transfer' || !!curRow.status">
        <el-col :span="12">
          <el-form-item label="资料接手角色:" prop="roleId">
            <el-select
              v-model="form.roleId"
              placeholder="请选择资料接手人"
              style="width: 100%"
            >
              <el-option
                v-for="item in roleList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { required } from '@/utils/validate-helper'
import {
  getProjectTransferRoleList,
  projectTransferAdd,
  projectTransferApprove
} from '@/api/document/projectTransfer'
import { handleFileSize } from '@/utils'
const { proxy } = getCurrentInstance()

const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  opts: {
    type: Object,
    default: () => ({})
  }
})
const { opts, curRow } = props
const emit = defineEmits(['close'])
const form = reactive({
  id: '',
  projectId: '',
  projectName: '',
  createBy: '',
  totalSize: '',
  fileNum: '',
  projectOverview: '',
  startTime: '',
  endTime: '',
  roleId: ''
})
const rules = reactive({
  roleId: required('资料交接角色')
})
const roleList = ref([])
const methed = {
  transfer: projectTransferAdd,
  audit: projectTransferApprove
}

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      const api = methed[opts.type]
      if(!api) return
      const res = await api(form)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      emit('close', { isRefresh: true })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getDetail = async () => {
  inheritAttr(curRow, form)
  if(form.roleId) form.roleId = form.roleId * 1
}

const getProjectTransferRoleListFn = async () => {
  const res = await getProjectTransferRoleList()
  if(res?.code !== 200) return
  roleList.value = res.data || []
}

onMounted(() => {
  getProjectTransferRoleListFn()
  if(curRow?.projectId) getDetail()
})

defineExpose({
  submit
})
</script>

<style lang="scss" scoped></style>