<script setup name=''>
import { reactive, ref } from 'vue'
import store from '@/store'
import { fileFormatVerification, handleFileSuccess, handleFilePreview, fileTypes, fileDesc } from '@/utils/uploadAction.js'

// import basicInfo from '../../projectStoreManage/projectStore/projectDetail/components/basicInfo.vue'
const ruleForm = reactive({
    desc: '',
    attachment: []
  }),
  btnVisible = ref(true),
  ruleFormRef = ref(),
  confirmAndSigning = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        btnVisible.value = false
      } else {
        console.log('error submit!', fields)
      }
    })
  },
  rules = reactive({
    desc: [
      { required: true, message: '请填写意见', trigger: 'blur' }
    ],
    attachment: [
      { required: true, message: '请上传附件', trigger: 'blur' }
    ]
  }),
  uploadUrl = store.dictStore.uploadUrl
</script>

<template>
  <el-card class="box-card">
    <div class="flex justify-center ProjectTitle">
      <span>XXXXX项目预审申请单</span>
    </div>
    <div class="flex justify-between ProjectTitleInfo">
      <span>项目编号：xxxxxxxxx</span><span>2033-11-11</span>
    </div>
    <!-- <basic-info v-if="activeName==='基本信息'" :detail-data="detailData" /> -->
    <el-descriptions
      class="mt-20"
      title="项目基本信息"
      :column="2"
      border
    >
      <el-descriptions-item
        label="项目名称"
        span="2"
        width="200px"
      >
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item label="是否临时增补">
        181000000002234234234234234342342222
      </el-descriptions-item>
      <el-descriptions-item
        label="是否一地创新全省共享项目"
        width="200px"
      >
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="项目负责人">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="负责人手机号">
        Suz33123123123232323232323232323423121hou
      </el-descriptions-item>
      <el-descriptions-item label="项目联系人">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="项目联系人手机">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="建设单位">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="建设单位统一社会信用代码">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="项目类型">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="是否首次新建">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="预算年度">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="建设起止时间">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item
        label="四大体系"
        span="2"
      >
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="是否数字化改革项目">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="综合业务领域">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item
        label="立项依据"
        span="2"
      >
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="是否上云">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="云类型">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item
        label="项目简介"
        span="2"
      >
        Suzhou
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="mt-20"
      title="资金申报情况"
      :column="2"
      border
    >
      <el-descriptions-item
        label="申报金额"
        span="2"
        width="200px"
      >
        koo343434riookami
      </el-descriptions-item>
      <el-descriptions-item label="自有资金">
        181000003232323200022222
      </el-descriptions-item>
      <el-descriptions-item
        label="政府投资-本级财政资金"
        width="200px"
      >
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="政府投资-上级补助资金">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="银行贷款">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item
        label="其它资金"
        span="2"
      >
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="2023年计划投资（万元）">
        1810000000022222
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="mt-20"
      title="资金分配情况"
      :column="2"
      border
    >
      <el-descriptions-item
        label="软件开发"
        width="200px"
      >
        koorioo323232kami
      </el-descriptions-item>
      <el-descriptions-item
        label="云资源-硬件购置"
        width="200px"
      >
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="第三方服务">
        Suzhou
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="mt-20"
      title="年度支付计划"
      :column="2"
      border
    >
      <el-descriptions-item
        label="年度支付金额"
        span="2"
        width="200px"
      >
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item label="自有资金">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item
        label="政府投资-本级财政资金"
        width="200px"
      >
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="政府投资-上级补助资金">
        1810000000022222
      </el-descriptions-item>
      <el-descriptions-item label="银行贷款">
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item label="其它资金">
        1810000000022222
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="mt-20"
      title="备注"
      :column="2"
      border
    >
      <el-descriptions-item
        label="备注"
        span="2"
        width="200px"
      >
        kooriookami
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="mt-20"
      title="单位意见"
      :column="2"
      border
    >
      <el-descriptions-item
        span="2"
        width="200px"
      >
        <template #label>
          <div class="cell-item">
            本级主管单位意见（盖章）
          </div>
        </template>
        kooriookami
        <el-button
          v-if="btnVisible"
          type="primary"
          plain
          class="float-right"
        >选择印章</el-button>
        <el-button
          v-if="btnVisible"
          type="danger"
          plain
          class="float-right"
        >删除印章</el-button>
        <div class="seal">
          <img
            src=""
            alt="印章"
          />
          <div v-if="!btnVisible" class="flex flex-col"><span>意见：同意</span><span>日期：2024年11月14日</span></div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        label="上级主管单位意见（盖章）"
        span="2"
        width="200px"
      >
        <template #label>
          <div class="cell-item">
            上级主管单位意见（盖章）
          </div>
        </template>
        1810000000022222
        <el-button
          type="primary"
          plain
          class="float-right"
        >选择印章</el-button>
        <el-button
          type="danger"
          plain
          class="float-right"
        >删除印章</el-button>
      </el-descriptions-item>
      <el-descriptions-item
        label="{本地区大数据局的名称}意见（盖章）"
        span="2"
        width="200px"
      >
        <template #label>
          <div class="cell-item">
            本地区大数据局的名称}意见（盖章）
          </div>
        </template>
        Suzhou
        <el-button
          type="primary"
          plain
          class="float-right"
        >选择印章</el-button>
        <el-button
          type="danger"
          plain
          class="float-right"
        >删除印章</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <div class="occupation"></div>
  </el-card>
  <el-card class="foot-card">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item
        label="意见："
        prop="desc"
      >
        <el-input
          v-model="ruleForm.desc"
          placeholder="请输入"
          type="textarea"
        />
      </el-form-item>
      <el-form-item
        label="附件"
        prop="attachment"
      >
        <el-upload
          v-model:file-list="ruleForm.attachment"
          class="w-full"
          :action="uploadUrl"
          :on-success="res => handleFileSuccess(res, ruleForm.attachment, true)"
          :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
          :accept="fileTypes.map(i=>`.${i}`).join(',')"
          :limit="1"
          :on-preview="handleFilePreview"
        >
          <el-button
            type="primary"
            plain
          >选择文件</el-button>
          <template #tip>
            <div class="el-upload__tip">
              支持{{ fileDesc }}文件
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="confirmAndSigning(ruleFormRef)"
        >
          确认签署
        </el-button>
        <el-button>返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style lang='less' scoped>
.box-card{
.ProjectTitle{
  font-size: 20px;
  font-weight: 500;
}
.ProjectTitleInfo{
  color: rgba(0,0,0,0.65);;
}
.cell-item{
  height: 120px;
  display: flex;
  align-items: center;
}
.seal{
  float: right;
  display: flex;
  align-items: center;
  img{
    width: 100px;
    height: 100px;
    background-color: #bfc;
  }
}
.occupation{
  width: 1px;
  height: 210px;
}
}
.foot-card{
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
