<template>
  <div class="p-6" v-loading="pageLoading">
    <div class="header">
      <el-page-header @back="jumpBack">
        <template #content>
          <span class="text-large font-600 mr-3"> {{ form.productName }} </span>
        </template>
      </el-page-header>
    </div>

    <div class="form-data">
      <el-form label-width="100" 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.productScale" 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.productUnit" placeholder="请输入项目单位" />
            </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.unitBy" placeholder="此处输入联系人" />
            </el-form-item>
          </el-col>

          <el-col :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"
                v-for="item in fileList"
                :data="item"
                :isEdit="false"
                width="120px"
                :dataList="[item]"
                height="100px"
                o
                bjectFit="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>

    <div class="time-line">
      <el-timeline style="max-width: 100vw">
        <el-timeline-item> {{ item_stage[0]?.label }}阶段 </el-timeline-item>
        <el-timeline-item v-if="stage1" placement="top" center>
          <div class="expert-list">
            <div class="card-left">
              <p>{{ stage1.reviewTime }}</p>
              <p>抽取立项评审专家</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover" v-for="item in stage1.zjkExpertList">
                <div class="expert-left">
                  <img v-if="item?.photograph != null" :src="item.photograph" alt="" />
                  <img v-else src="@/assets/images/avatar.png" alt="" />
                </div>
                <div class="expert-right">
<!--                  <p>{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>-->
                  <p v-if="item">{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>

                  <div class="tags">
                    <el-tag v-if="item.workArr?.[0] && perform_work_type[item.workArr[0]]" type="primary">
                      {{ perform_work_type[item.workArr[0]]?.label || '' }}
                    </el-tag>
                    <el-tag v-if="item.workArr?.[1] && perform_work_type[item.workArr[1]]" type="warning">
                      {{ perform_work_type[item.workArr[1]]?.label || '' }}
                    </el-tag>
                    <el-tag v-if="item.workArr?.[2] && perform_work_type[item.workArr[2]]" type="success">
                      {{ perform_work_type[item.workArr[2]]?.label || '' }}
                    </el-tag>
                  </div>

                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item v-if="stage1 && stage1.productSummarizeTime != '' && stage1.zjkProductSummarizeVoList" placement="top" center>
          <div class="file-list">
            <div class="card-left">
              <p>{{ stage1.productSummarizeTime }}</p>
              <p>立项评审总结</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover">
                <div class="title">{{ form.productName }} - 立项总结</div>
                <div class="file">
                  <p>附件资料：</p>
                  <div v-for="item in stage1.zjkProductSummarizeVoList">
                    <FileOrImage
                      v-for="file in JSON.parse(item.attachment)"
                      :fileName="file.name"
                      :data="file.url"
                      :isEdit="false"
                      width="110px"
                      height="100px"
                      objectFit="cover"
                    >
                    </FileOrImage>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>
        <el-timeline-item> {{ item_stage[1]?.label }}阶段 </el-timeline-item>

        <el-timeline-item v-if="stage2" placement="top" center>
          <div class="expert-list">
            <div class="card-left">
              <p>{{ stage2.reviewTime }}</p>
              <p>抽取招标评审专家</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover" v-for="item in stage2.zjkExpertList">
                <div class="expert-left">
                  <img v-if="item?.photograph != null" :src="item.photograph" alt="" />
                  <img v-else src="@/assets/images/avatar.png" alt="" />
                </div>
                <div class="expert-right">
<!--                  <p>{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>-->
                  <p v-if="item">{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>

<!--                  <div class="tags">
                    <el-tag v-if="item.workArr && item.workArr[0] && perform_work_type[item.workArr[0]]" type="primary">{{
                      item.workArr &&  perform_work_type[item.workArr[0]] ? perform_work_type[item.workArr[0]].label : ''
                    }}</el-tag>
                    <el-tag v-if="item.workArr && item.workArr[1] && perform_work_type[item.workArr[1]]" type="warning">{{
                      item.workArr &&  perform_work_type[item.workArr[1]] ? perform_work_type[item.workArr[1]].label : ''
                    }}</el-tag>
                    <el-tag v-if="item.workArr && item.workArr[2] && perform_work_type[item.workArr[2]]" type="success">{{
                      item.workArr &&  perform_work_type[item.workArr[2]] ? perform_work_type[item.workArr[2]].label : ''
                    }}</el-tag>
                  </div>-->
                  <div class="tags" v-if="item && Array.isArray(item.workArr)">
                    <el-tag
                      v-if="perform_work_type[item.workArr[0]]"
                      type="primary"
                    >
                      {{ perform_work_type[item.workArr[0]]?.label || '' }}
                    </el-tag>
                    <el-tag
                      v-if="perform_work_type[item.workArr[1]]"
                      type="warning"
                    >
                      {{ perform_work_type[item.workArr[1]]?.label || '' }}
                    </el-tag>
                    <el-tag
                      v-if="perform_work_type[item.workArr[2]]"
                      type="success"
                    >
                      {{ perform_work_type[item.workArr[2]]?.label || '' }}
                    </el-tag>
                  </div>


                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item v-if="stage2 && stage2.productSummarizeTime != '' && stage2.zjkProductSummarizeVoList" placement="top" center>
          <div class="file-list">
            <div class="card-left">
              <p>{{ stage2.productSummarizeTime }}</p>
              <p>招标评审总结</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover">
                <div class="title">{{ form.productName }} - 招标总结</div>
                <div class="file">
                  <p>附件资料：</p>
                  <div v-for="item in stage2.zjkProductSummarizeVoList">
                    <FileOrImage
                      v-for="file in JSON.parse(item.attachment)"
                      :fileName="file.name"
                      :data="file.url"
                      :isEdit="false"
                      width="110px"
                      height="100px"
                      objectFit="cover"
                    >
                    </FileOrImage>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item> {{ item_stage[2]?.label }}阶段 </el-timeline-item>

        <el-timeline-item v-if="stage3" placement="top" center>
          <div class="expert-list">
            <div class="card-left">
              <p>{{ stage3.reviewTime }}</p>
              <p>抽取初验评审专家</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover" v-for="item in stage3.zjkExpertList">
                <div class="expert-left">
                  <img v-if="item?.photograph != null" :src="item.photograph" alt="" />
                  <img v-else src="@/assets/images/avatar.png" alt="" />
                </div>
                <div class="expert-right">
<!--                  <p>{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>-->
                  <p v-if="item">{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>

                  <div class="tags">
                    <el-tag v-if="item.workArr && item.workArr[0]" type="primary">{{
                     /* item.workArr ? perform_work_type[item.workArr[0]].label : ''*/
                        item?.workArr?.length && perform_work_type[item.workArr[0]]
                          ? perform_work_type[item.workArr[0]].label
                          : ''

                      }}</el-tag>
                    <el-tag v-if="item.workArr && item.workArr[1]" type="warning">{{
                      /*item.workArr ? perform_work_type[item.workArr[1]].label : ''*/
                        item?.workArr?.length && perform_work_type[item.workArr[1]]
                          ? perform_work_type[item.workArr[1]].label
                          : ''

                      }}</el-tag>
                    <el-tag v-if="item.workArr && item.workArr[2]" type="success">{{
                      /*item.workArr ? perform_work_type[item.workArr[2]].label : ''*/
                      item?.workArr?.length && perform_work_type[item.workArr[2]]
                        ? perform_work_type[item.workArr[2]].label
                        : ''

                      }}</el-tag>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item v-if="stage3 && stage3.productSummarizeTime != '' && stage3.zjkProductSummarizeVoList" placement="top" center>
          <div class="file-list">
            <div class="card-left">
              <p>{{ stage3.productSummarizeTime }}</p>
              <p>初验评审总结</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover">
                <div class="title">{{ form.productName }} - 初验总结</div>
                <div class="file">
                  <p>附件资料：</p>
                  <div v-for="item in stage3.zjkProductSummarizeVoList">
                    <FileOrImage
                      v-for="file in JSON.parse(item.attachment)"
                      :fileName="file.name"
                      :data="file.url"
                      :isEdit="false"
                      width="110px"
                      height="100px"
                      objectFit="cover"
                    >
                    </FileOrImage>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item> {{ item_stage[3]?.label }}阶段 </el-timeline-item>
        <el-timeline-item v-if="stage4" placement="top" center>
          <div class="expert-list">
            <div class="card-left">
              <p>{{ stage4.reviewTime }}</p>
              <p>抽取终验评审专家</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover" v-for="item in stage4.zjkExpertList">
                <div class="expert-left">
                  <img v-if="item?.photograph != null" :src="item.photograph" alt="" />
                  <img v-else src="@/assets/images/avatar.png" alt="" />
                </div>
                <div class="expert-right">
                  <p v-if="item">{{ item.workUnit }}<el-divider direction="vertical" />{{ item.expertName }}</p>

                  <div class="tags">
                    <el-tag v-if="item.workArr && item.workArr[0] && perform_work_type[item.workArr[0]]" type="primary">
                      {{ perform_work_type[item.workArr[0]].label }}
                    </el-tag>
                    <el-tag v-if="item.workArr && item.workArr[1] && perform_work_type[item.workArr[1]]" type="warning">
                      {{ perform_work_type[item.workArr[1]].label }}
                    </el-tag>
                    <el-tag v-if="item.workArr && item.workArr[2] && perform_work_type[item.workArr[2]]" type="success">
                      {{ perform_work_type[item.workArr[2]].label }}
                    </el-tag>

                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>

        <el-timeline-item v-if="stage4 && stage4.productSummarizeTime && stage4.zjkProductSummarizeVoList" placement="top" center>
          <div class="file-list">
            <div class="card-left">
              <p>{{ stage4.productSummarizeTime }}</p>
              <p>终验评审总结</p>
            </div>
            <div class="card-right">
              <el-card shadow="hover">
                <div class="title">{{ form.productName }} - 终验总结</div>
                <div class="file">
                  <p>附件资料：</p>
                  <div v-for="item in stage4.zjkProductSummarizeVoList">
                    <FileOrImage
                      v-for="file in JSON.parse(item.attachment)"
                      :fileName="file.name"
                      :data="file"
                      :isEdit="false"
                      width="110px"
                      height="100px"
                      objectFit="cover"
                    >
                    </FileOrImage>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-timeline-item>
        <el-timeline-item> 结束 </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getProject, getProjectDetail } from '@/api/project/fullView';
import { ProjectForm } from '@/api/project/maintain/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 { perform_work_type } = toRefs<any>(proxy?.useDict('perform_work_type'));
const buttonLoading = ref(false);
const pageLoading = ref(false);
const projectFormRef = ref<ElFormInstance>();
const router = useRouter();
const route = useRoute();
const fileList = ref([]);
const activities = [
  {
    content: 'Event start',
    timestamp: '2018-04-15'
  },
  {
    content: 'Approved',
    timestamp: '2018-04-13'
  },
  {
    content: 'Success',
    timestamp: '2018-04-11'
  }
];
const stage1 = ref({
  productSummarizeTime: '',
  reviewSn: '',
  reviewTime: '',
  zjkExpertList: [],
  zjkProductSummarizeVoList: []
});
const stage2 = ref({
  productSummarizeTime: '',
  reviewSn: '',
  reviewTime: '',
  zjkExpertList: [],
  zjkProductSummarizeVoList: []
});
const stage3 = ref({
  productSummarizeTime: '',
  reviewSn: '',
  reviewTime: '',
  zjkExpertList: [],
  zjkProductSummarizeVoList: []
});
const stage4 = ref({
  productSummarizeTime: '',
  reviewSn: '',
  reviewTime: '',
  zjkExpertList: [],
  zjkProductSummarizeVoList: []
});
//获取数据
const getData = async (pid) => {
  pageLoading.value = true;
  // console.log(`getData`);
  // console.log(`pid`, pid);

  const detailRes = await getProjectDetail(pid).finally(() => {
    pageLoading.value = false;
  });

  Object.assign(form.value, detailRes.data);
  console.log(detailRes);
  fileList.value = detailRes.data.productDataUrl ? detailRes.data.productDataUrl.split(',') : [];

  const res = await getProject({ productId: pid }).finally(() => {
    pageLoading.value = false;
  });
  let data = res.data.map((e) => {
    return {
      ...e,
      zjkExpertList:
        e.zjkExpertList?.map((el) => {
          if (!el || !el.performWorkId) return el;
          return {
            ...el,
            workArr:
              el.performWorkId.split(',')?.map((e_id) => {
                return parseInt(e_id) - 1;
              }) || []
          };
        }) || []
    };
  });


  stage1.value = data.filter((v) => v.reviewSn == '1')[0];
  stage2.value = data.filter((v) => v.reviewSn == '2')[0];
  stage3.value = data.filter((v) => v.reviewSn == '3')[0];
  stage4.value = data.filter((v) => v.reviewSn == '4')[0];

};

/** 取消按钮 */
const cancel = () => {
  form.value = { ...initForm };
  projectFormRef.value?.resetFields();
  router.back();
};

/** 返回 */
const jumpBack = () => {
  router.back();
};

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;
}

.form-data {
  margin-top: 2vh;
}

.time-line {
  .expert-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .card-left {
      width: 15%;
      text-align: center;
      border-radius: 10px;
      border: 0.5px dashed rgba(0, 0, 0, 0.5);
    }

    .card-right {
      width: 83%;
      display: flex;
      flex-flow: row wrap;

      .el-card {
        width: 32%;
        margin-right: 10px;
        margin-bottom: 1vh;

        :deep(.el-card__body) {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;
        }

        .expert-left {
          width: 20%;

          img {
            width: 100%;
          }
        }

        .expert-right {
          margin-left: 1vw;

          p {
            margin: 0;
            margin-bottom: 2vh;
          }

          .tags {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            span{
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }

  .file-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .card-left {
      width: 15%;
      text-align: center;
      border-radius: 10px;
      border: 0.5px dashed rgba(0, 0, 0, 0.5);
    }

    .card-right {
      width: 83%;
      display: flex;
      flex-flow: row wrap;

      .el-card {
        width: 100%;
        margin-right: 10px;

        .title {
          position: relative;
          padding-left: 1vw;
          font-size: 14px;
        }

        .title::before {
          content: '';
          width: 5px;
          height: 20px;
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 3px;
          background-color: #36d;
        }

        .file {
          p {
            margin: 0;
          }
          display: flex;
          margin-top: 1vh;
        }

        :deep(.el-card__body) {
          width: 100%;
        }

        .expert-left {
          width: 20%;

          img {
            width: 100%;
          }
        }

        .expert-right {
          margin-left: 1vw;

          p {
            margin: 0;
            margin-bottom: 2vh;
          }

          .tags {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
