<template>
  <div class="p-6" v-loading="pageLoading">
    <div class="header">
      <p>详情</p>
    </div>

    <el-card shadow="hover">
      <div class="title">项目信息</div>

      <div class="form-data">
        <el-form label-width="160" ref="projectFormRef" :model="form">
          <el-row justify="space-evenly">
            <el-col :span="6">
              <el-form-item label="项目编号：" prop="duty">
                <el-input disabled v-model="form.productSn" placeholder="请输入项目编号" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="项目名称：" prop="duty">
                <el-input disabled v-model="form.productName" placeholder="此处输入项目名称" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="space-evenly">
            <el-col :span="6">
              <el-form-item label="项目类型：" prop="duty">
                <el-select disabled v-model="form.productType" placeholder="此处选择项目类型" clearable>
                  <el-option v-for="dict in project_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="项目规模：" prop="duty">
                <el-input disabled v-model="form.productScale" placeholder="此处输入项目规模">
                  <template #append>
                    <span>万</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="space-evenly">
            <el-col :span="6">
              <el-form-item label="项目单位：" prop="duty">
                <el-input disabled v-model="form.productUnit" placeholder="请输入项目单位" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="联系人：" prop="duty">
                <el-input disabled v-model="form.unitBy" placeholder="此处输入联系人" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="start">
            <el-col :offset="4" :span="6">
              <el-form-item label="联系电话：" prop="duty">
                <el-input disabled v-model="form.unitConcat" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :offset="4" :span="16">
              <el-form-item label="项目简介：" prop="duty">
                <el-input
                  :rows="5"
                  maxlength="500"
                  show-word-limit
                  type="textarea"
                  disabled
                  v-model="form.productBrief"
                  placeholder="请输入项目简介,包括项目背景、项目目标、实施计划等。"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :offset="4" :span="16">
              <el-form-item label="项目立项审批文件：" prop="duty">
                <FileOrImage
                  v-if="fileList.length != 0"
                  v-for="item in fileList"
                  :data="item"
                  :isEdit="false"
                  width="120px"
                  :dataList="[item]"
                  height="100px"
                  objectFit="cover"
                >
                </FileOrImage>
                <el-empty v-else description="暂无数据" />
              </el-form-item>
            </el-col>
          </el-row>

          <div class="form-buttons">
            <el-button type="info" @click="jumpBack">返回</el-button>
          </div>
        </el-form>
      </div>
    </el-card>

    <el-card shadow="hover" style="margin-top: 2vh">
      <div class="title">评审信息</div>

      <div class="review-infolist">
        <div class="review-item" v-for="item in form.phaseVoList">
          <p>评审阶段：{{ item_stage[parseInt(item.reviewSn) - 1].label }}</p>
          <p>评审时间：{{ item.reviewTime }}</p>
          <p>评审地点：{{ item.reviewPlace }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getProject, addProject, updateProject } from '@/api/project/review';
import { ProjectVO, ProjectForm, ProjectQuery } from '@/api/project/review/types';
import FileOrImage from '@/components/FileOrImage/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { project_type } = toRefs<any>(proxy?.useDict('project_type'));
const { item_stage } = toRefs<any>(proxy?.useDict('item_stage'));
const buttonLoading = ref(false);
const pageLoading = ref(false);
const projectFormRef = ref<ElFormInstance>();
const router = useRouter();
const route = useRoute();
const fileList = ref([]);

//获取数据
const getData = async (pid) => {
  // console.log(`getData`);
  // console.log(`pid`, pid);

  const res = await getProject(pid).finally(() => {
    pageLoading.value = false;
  });

  if (res.code == 200) {
    Object.assign(form.value, res.data);
    fileList.value = res.data.productDataUrl?.split(',') || [];
    return;
  }
};

/** 返回 */
const jumpBack = () => {
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    proxy?.$router.replace('/project/review');
  });
};

const initForm: ProjectForm = {
  //初始表单
  productSn: '',
  productName: '',
  productType: '',
  productScale: '',
  productUnit: '',
  unitBy: '',
  unitConcat: '',

  productBrief: '',
  productDataUrl: ''
};
const form = ref({ ...initForm });

onActivated(() => {
  if (route.query.id) {
    getData(route.query.id);
  }
});

onMounted(() => {
  if (route.query.id) {
    getData(route.query.id);
  }
});
</script>

<style scoped lang="scss">
.p-6 {
  position: relative;
  // padding-bottom: 1vh;
}

:deep(.el-upload) {
  width: 51.5vw;
}

.form-buttons {
  margin: 0 auto;
  width: 20%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  transform: translateX(-30%);
  left: 50%;
  bottom: 1.5vh;

  .el-button {
    width: 6vw;
  }
}

.switch {
  position: absolute;
  left: -7vw;
  top: 2.2vh;
  color: #36d;
  cursor: pointer;
}

.switch:hover {
  text-decoration: underline;
}

.el-empty {
  margin: 0 auto;
}

.review-infolist {
  margin-top: 1vh;
  .review-item {
    margin-left: 2vw;
    background-color: rgba(0, 0, 0, 0.1);
    margin-bottom: 1vh;
    width: 25vw;
    border-radius: 5px;
    padding: 1vh 1.2vw;
    p {
      margin: 0;
      font-size: 14px;
    }
  }
}
.title {
  position: relative;
  padding-left: 1vw;
  font-size: 1.2rem;
}
.title::before {
  content: '';
  width: 5px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  background-color: #36d;
}
</style>
