<template>
  <div class="info-page">
    <div class="page-title">{{ getPageValue(data).reminder }}</div>
    <div class="page-content">
      <div class="content-item" v-for="item_1 in getPageValue(data).content" :key="item_1.index">
        <div class="iteminner">{{ item_1.header }}</div>
        <div
          :class="
            item_1.type === 2
              ? item_1.type === 3
                ? 'iteminner red pl30'
                : 'iteminner red'
              : item_1.type === 3
                ? 'iteminner pl30'
                : 'iteminner'
          "
          v-for="item_2 in item_1.inner"
          :key="item_2"
        >
          <span
            class="file-word"
            @click="downLoadFileFun(item_2)"
            v-if="item_2.includes('《') && item_2.includes('》')"
            >{{ item_2 }}</span
          >
          <span class="nomal-word" v-else>{{ item_2 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const props = defineProps({
  data: {
    type: String,
    default: '机器人',
  },
});
const env = import.meta.env;

// 机器人 动画 有限元 工业设计 公差
// 1正常 2标红 3缩进
const demandTypeInfo = ref<any>({
  机器人: {
    name: '机器人仿真',
    reminder: '机器人仿真登记提醒:',
    content: [
      {
        index: 1,
        header: '(1)、',
        inner: ['若不清楚本待办需求如何填写，请看', '《填写指导书》', '；'],
        type: 1,
      },
      {
        index: 2,
        header: '(2)、',
        inner: ['必须使用最新的', '《机器人动作说明书模板》', '填写后作为附件上传；'],
        type: 1,
      },
      {
        index: 3,
        header: '(3)、',
        inner: ['请参考填写指导书，不规范填写或附件上传资料不规范将驳回'],
        type: 2,
      },
    ],
  },
  有限元: {
    name: '有限元仿真',
    reminder: '有限元仿真登记提醒',
    content: [
      {
        index: 1,
        header: '(1)、',
        inner: ['若不清楚本待办需求如何填写，请看', '《填写指导书》', ';'],
        type: 1,
      },
    ],
  },
  动画: {
    name: '动画',
    reminder: '动画仿真登记提醒：',
    content: [
      {
        index: 1,
        header: '(1)、',
        inner: ['若不清楚本待办需求如何填写，请看', '《填写指导书》', ';'],
        type: 1,
      },
      {
        index: 2,
        header: '(2)、',
        inner: ['待办类型制作时长说明（需求时间参考）：'],
        type: 1,
      },
      {
        index: 3,
        header: '',
        inner: ['工艺动画、所有产品线：标准时长：24H'],
        type: 3,
      },
      {
        index: 4,
        header: '',
        inner: ['工位动画、RF COA LS产品线：标准时长：16H'],
        type: 3,
      },
      {
        index: 5,
        header: '',
        inner: ['工位动画、除RF COA LS产品线外：标准时长：4H'],
        type: 3,
      },
      {
        index: 6,
        header: '',
        inner: ['整机动画、RF COA LS SST产品线：标准时长：104H'],
        type: 3,
      },
      {
        index: 7,
        header: '',
        inner: ['整机动画、除RF COA LS SST产品线外：标准时长：50H'],
        type: 3,
      },
      {
        index: 8,
        header: '',
        inner: ['外观渲染、SST产品线：标准时长：40H'],
        type: 3,
      },
      {
        index: 9,
        header: '',
        inner: ['外观渲染、除SST产品线外：标准时长：8H'],
        type: 3,
      },
      {
        index: 10,
        header: '',
        inner: ['MG动画、所有产品线：标准时长：104H'],
        type: 3,
      },
      {
        index: 11,
        header: '',
        inner: ['厂房立库动画动画、所有产品线：标准时长：104H'],
        type: 3,
      },
      {
        index: 12,
        header: '(3)、',
        inner: ['将参考资料、3D同步上传至附件。'],
        type: 1,
      },
      {
        index: 13,
        header: '(4)、',
        inner: ['必须将', '《动画制作交接资料点检表》', '填写后作为附件上传'],
        type: 1,
      },
    ],
  },
  工业设计: {
    name: '工业设计',
    reminder: '外观设计登记提醒：',
    content: [
      {
        index: 1,
        header: '(1)、',
        inner: ['若不清楚本待办需求如何填写，请看', '《填写指导书》', '；'],
        type: 1,
      },
      {
        index: 2,
        header: '(2)、',
        inner: ['待办类型说明：'],
        type: 1,
      },
      {
        index: 3,
        header: '',
        inner: [
          '     渲染：在不改变三维模型结构的情况下，模拟产品真实材质，通过调整光线、色彩、角度等参数，重新渲染达到自己期望的效果图（2天）只保留需渲染的3D即可，多余零件请清除',
        ],
        type: 1,
      },
      {
        index: 4,
        header: '',
        inner: [
          '     渲染+贴标：在满足渲染效果图的基础上，对其表面做元素贴图设计，例：logo的位置尺寸约束、vI元素设计（3天）',
        ],
        type: 1,
      },
      {
        index: 5,
        header: '',
        inner: [
          '     工业设计：通过解读设备的功能结构，结合美学、CMF（颜色、材质、工艺）及人机工程学设计产品外观，结合多种工具绘制模型并渲染效果图（14天）',
        ],
        type: 1,
      },
      {
        index: 6,
        header: '(3)、',
        inner: ['需要做工业设计则填写', '《工业设计填写要求模板》', '后作为附件上传；'],
        type: 1,
      },
      {
        index: 7,
        header: '(4)、',
        inner: ['将参考资料、3D同步上传至附件。'],
        type: 1,
      },
    ],
  },
  公差: {
    name: '公差',
    reminder: '',
    content: [],
  },
});

const getPageValue = (str: string) => {
  console.log(str, 'strstrstrstr');

  let data: any = {
    name: '',
    reminder: '',
    content: [],
  };

  if (str) {
    for (const key in demandTypeInfo.value) {
      console.log(key, 'key');

      if (str.includes(key)) {
        // pageValue.value = demandTypeInfo.value[key];
        data = demandTypeInfo.value[key];
      }
    }
  }

  return data;
};

// 根据文件名称下载文件
const downLoadFileFun = (name: any) => {
  console.log(name, 'name');
  ElMessage.success('文件下载中请稍后!');
  const url = `${env.VITE_API_STATIC_FILE}/${name.replace('《', '').replace('》', '')}.docx`;
  // const url = `${env.VITE_API_STATIC_FILE}/测试word.docx`;
  window.open(url);
};
</script>

<style lang="scss" scoped>
.info-page {
  width: 100%;
  border-bottom: 1px solid rgb(220, 223, 230);
  margin-bottom: var(--padding-medium);

  .page-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .page-content {
    width: 100%;

    .content-item {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 5px 0;

      .iteminner {
        .file-word {
          cursor: pointer;
          color: var(--el-color-primary);
          padding: 0 5px;
        }
      }
    }
  }

  .red {
    color: var(--el-color-danger);
  }

  .pl30 {
    // padding-left: 30px;
    text-indent: 30px;
  }
}
</style>
