<template>
  <div class="view">
    <!-- 背景 -->
    <div
      id="background"
      :style="`transform: translateX(${translateDistance})`"
    ></div>
    <!-- logo -->
    <h1 id="logo"></h1>
    <!-- 头部导航 -->
    <div id="nav">
      <a href="#" id="nav_iPhone" @click.stop="downloadAppStore">
        <div id="nav_iPhone_img"></div>
      </a>
      <a
        href="http://xfappht.crgx.net/profile/upload/2023/09/01/xf_app_2023090101_20230901163308A004.apk"
        id="nav_android"
      >
        <div id="nav_android_img"></div>
      </a>
      <div id="nav_QRCode">
        <div id="nav_QRCode_img"></div>
        <div id="nav_QRCode_hover">
          <div id="nav_QRCode_hover_border">
            <div id="nav_QRCode_hover_img"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="pages">
      <div v-show="current == 0" class="page">
        <div
          class="table_data"
          :class="[current == 0 ? 'tableIn' : 'tableOut']"
        >
          <h2 class="table_title">消防维保助手私有化租用价格表</h2>
          <a
            href="https://xfwbtg.crgx.net/xfwb_quotation.pdf"
            download="消防维保公网报价单.pdf"
            class="table_download"
          >
            <img
              class="imgdown"
              src="../assets/images/download.png"
              alt="下载"
            />
            点击下载查看完整报价
          </a>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              textAlign: 'center',
            }"
            @cell-mouse-enter="handleCellMouseEnter"
            @cell-mouse-leave="rowCurrent = 0"
          >
            <el-table-column
              prop="index"
              label="序号"
              align="center"
              width="60"
            >
              <template #default="{ row }">
                <span
                  class="table_text"
                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
                  >{{ row.index }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="产品名称"
              align="center"
              width="180"
              prop="productName"
            >
              <template #default="{ row }">
                <el-popover placement="top-start" trigger="hover">
                  <span style="max-width: 600px">{{ row.productName }}</span>
                  <span
                    slot="reference"
                    class="table_text"
                    :style="{
                      color: row.index == rowCurrent ? '#000' : '#fff',
                    }"
                    >{{ row.productName }}</span
                  >
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="quantity"
              align="center"
              label="数量"
              width="60"
            >
              <template #default="{ row }">
                <span
                  class="table_text"
                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
                  >{{ row.quantity }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="130">
              <template #default="{ row }">
                <span
                  class="table_text"
                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
                  >{{ row.unitPrice }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="总价" width="130">
              <template #default="{ row }">
                <span
                  class="table_text"
                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
                  >{{ row.totalPrice }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="参数" align="center" prop="params">
              <template #default="{ row }">
                <el-popover placement="top-start" trigger="hover">
                  <div style="max-width: 600px">{{ row.params }}</div>
                  <span
                    slot="reference"
                    class="table_text"
                    :style="{
                      color: row.index == rowCurrent ? '#000' : '#fff',
                    }"
                    >{{ row.params }}</span
                  >
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="180"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <span
                  class="table_text"
                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
                  >{{ row.remark }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-show="current == 1" class="page" id="page_download">
        <div
          class="img"
          :class="[
            current == 1 ? 'animateDownloadHandIn' : 'animateDownloadHandOut',
          ]"
          id="page_download_hand"
        ></div>
        <div id="page_download_show">
          <div id="page_download_show_top">
            <div
              id="page_download_text"
              :class="[
                current == 1
                  ? 'animateDownloadTextIn'
                  : 'animateDownloadTextOut',
              ]"
            >
              消防维保助手
              <div>即时同步新地标规范，强制约束规范填写</div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 2" class="page" id="page_function1">
        <div id="page_function1_text">
          <h1
            id="page_function1_text_title"
            :class="[
              current == 2 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            维保原始记录电子化
          </h1>
          <h2
            id="page_function1_text_sub"
            :class="[
              current == 2 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            实时记录，远程可查。精心打磨，只为你极速体验。
          </h2>
        </div>
        <div id="page_function1_show">
          <div id="page_function1_show_top">
            <div id="page_function1_book">
              <div
                id="page_function1_book_page3"
                :class="[
                  current == 2
                    ? 'animateDownloadTextIn'
                    : 'animateDownloadTextOut',
                ]"
              ></div>
              <div
                id="page_function1_book_page2"
                :class="[
                  current == 2
                    ? 'animateDownloadHandIn'
                    : 'animateDownloadHandOut',
                ]"
              ></div>
              <div
                id="page_function1_book_page1"
                :class="[
                  current == 2
                    ? 'animateFunction1BookPage1In'
                    : 'animateFunction1BookPage1Out',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 3" class="page" id="page_function2">
        <div id="page_function2_text">
          <h1
            id="page_function2_text_title"
            :class="[
              current == 3 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            电子签名
          </h1>
          <h2
            id="page_function2_text_sub"
            :class="[
              current == 3 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            甲乙双方共通约束，省时省力节约时间
          </h2>
        </div>
        <div id="page_function2_show">
          <div id="page_function2_show_top">
            <div id="page_function2_book">
              <div
                id="page_function2_book_06"
                :class="[
                  current == 3
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              ></div>
              <div
                id="page_function2_book_05"
                :class="[
                  current == 3
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              ></div>
              <div
                id="page_function2_book_04"
                :class="[
                  current == 3
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                传统手写
              </div>
              <div
                id="page_function2_book_03"
                :class="[
                  current == 3
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                智能签名
              </div>
              <div
                id="page_function2_book_01"
                :class="[
                  current == 3
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                VS
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 4" class="page" id="page_function3">
        <div id="page_function3_text">
          <h1
            id="page_function3_text_title"
            :class="[
              current == 4 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            资质证明
          </h1>
          <h2
            id="page_function3_text_sub"
            :class="[
              current == 4 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            已取得著作权证书，放心使用
          </h2>
        </div>
        <div id="page_function3_show">
          <div id="page_function3_show_top">
            <div id="page_function3_talk">
              <div
                id="page_function3_book"
                :class="[
                  current == 4
                    ? 'animateFunction3BookIn'
                    : 'animateFunction3BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 5" class="page" id="page_function3">
        <div id="page_function3_text">
          <h1
            id="page_function3_text_title"
            :class="[
              current == 5 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            随时打印
          </h1>
          <h2
            id="page_function3_text_sub"
            :class="[
              current == 5 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            纸质文档随时打印，按需留档
          </h2>
        </div>
        <div id="page_function5_show">
          <div id="page_function5_show_top">
            <div id="page_function5_talk">
              <div
                id="page_function5_book"
                :class="[
                  current == 5
                    ? 'animateFunction3BookIn'
                    : 'animateFunction3BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 6" class="page" id="page_function4">
        <div id="page_function4_text">
          <h1
            id="page_function4_text_title"
            :class="[
              current == 6 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            联系我们
          </h1>
          <h2
            id="page_function4_text_sub"
            :class="[
              current == 6 ? 'animateTextTitleIn' : 'animateTextTitleOut',
            ]"
          >
            <p>广西世纪创软信息技术有限公司</p>
            <p>邮箱：weiyi@crgx.net</p>
            <p>非©广西消防救援总队出品</p>
          </h2>
        </div>
        <div id="page_function4_show">
          <div id="page_function4_show_top">
            <div id="page_function4_talk">
              <div
                id="page_function4_show_title"
                :class="[
                  current == 6 ? 'animateFunction4In' : 'animateFunction4In',
                ]"
              >
                广西壮族自治区南宁市青秀万达银座520室
              </div>
              <div
                id="page_function4_book"
                :class="[
                  current == 6
                    ? 'animateFunction4BookIn'
                    : 'animateFunction4BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 左右箭头 -->
    <div
      v-show="current !== 6"
      id="arrow_right"
      @click="toggleCurrent(current + 1)"
    >
      <div id="arrow_right_height"></div>
    </div>
    <div
      v-show="current !== 0"
      id="arrow_left"
      :class="{ animateBaseIn: current !== 0, animateBaseOut: current === 0 }"
      @click="toggleCurrent(current - 1)"
    >
      <div id="arrow_left_height"></div>
    </div>
    <!-- 按钮 -->
    <div id="pageControl">
      <div
        v-for="(item, index) in 7"
        :key="item"
        :class="{ activeControl: current == index }"
        class="pageControl"
        id="pageControl_button"
        @click="toggleCurrent(index)"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomePage",
  data() {
    return {
      current: 0,
      rowCurrent: 0,
      translateDistance: "0%",
      tableData: [
        {
          index: 1,
          productName:
            "维保助手后台端服务（电脑端）（包含公司端、工程师端、后台监管端）",
          quantity: 1,
          unit: "年",
          unitPrice: "￥80,000.00",
          totalPrice: "￥80,000.00",
          params:
            "企业管理功能：管理产品注册入驻的消防技术服务机构，包含：公司名称、省、市、县、地址、营业执照代码、审核状态查询，可对注册的技术服务机构信息进行管理、对企业增删改查，人员管理：管理产品中入驻的人员信息、包含：姓名、邮箱、性别、出生日期、证件号码、手机号码、审核状态查询；及增删改查、证书管理：对产品中可选择性证书；证书类型、证书名称、级别进行管理包含：证书类型、证书名称、证书级别进行筛选查询及增删改查；消防 app：管理 app 版本及发布 app 更新；可对 app 版本进行增删改查、企业人员管理：对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告管理：包含发布通知公告，电脑端、安卓端、小程序端、苹果手机端接收；包含对公告标题、操作人员、类型、公告状态条件查询、用户管理模块：分级分权用户管理模块，可对用户账号、用户昵称、openid、邮箱、手机号、状态、创建时间进行查询，对用户进行增删改查；角色管理模块、配置产品内用户角色，对角色进行增删改查、包含角色名称、权限字符、角色状态、创建时间进行查询；、菜单管理：管理人员权限菜单模块，包含：菜单名称、状态查询、对菜单进行进行增删改查。部门管理模块：用户部门管理、用于管理系统操作部门权限区分；包哈；部门名称、状态查询、对部门进行增删改查、岗位管理：用户岗位管理，用于管理系统岗位、进行权限区分、包含：岗位编码、岗位名称、状态查询，对岗位进行增删改查；字典管理：对系统参数进行管理，包含字典名称、字典类型、状态、创建时间进行查询；参数设置：用于管理系统参数，包含参数名称、参数键名、系统内置、创建时间查询，对参数增删改查；日志管理：对系统的操作进行日志查询、登录日志：对系统用户登录记录进行查询、系统监控：在线用户：对系统在线用户进行查询、定时任务：系统定时任务设定，对系统执行定时任务、包含对任务名称、任务组名、任务状态进行查询，包含对任务的增删改查、缓存监控：对系统 redis 版本进行展示监控、查询内存消耗、缓存列表：输出缓存列表内容配置缓存内容、维保工具箱：维保系统配置、对维保系统进行配置，包含系统名称、类型、版本号配置查询，对维保系统进行增删改查；检查项目配置：对维保系统检查项目进行配置，对项目名称、项目英文名称、排序、合并行数、是否展示项目名称进行查询，可对维保检查项目进行增删改查。",
          remark:
            "版权租用单价 1 年期（必选项），包含 2022 年发布新地标原始记录表内容",
        },
        {
          index: 2,
          productName: "小程序端（包含公司端、工程师端、监管端）",
          quantity: 1,
          unit: "年",
          unitPrice: "￥50,000.00",
          totalPrice: "￥50,000.00",
          params:
            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
          remark: "版权租用单价 1 年期",
        },
        {
          index: 3,
          productName: "安卓app 端（包含公司端、工程师端、监管端）",
          quantity: 1,
          unit: "年",
          unitPrice: "￥50,000.00",
          totalPrice: "￥50,000.00",
          params:
            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
          remark: "版权租用单价 1 年期",
        },
        {
          index: 4,
          productName: "苹果app 端（包含公司端、工程师端、监管端）",
          quantity: 1,
          unit: "年",
          unitPrice: "￥50,000.00",
          totalPrice: "￥50,000.00",
          params:
            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
          remark: "版权租用单价 1 年期",
        },
        {
          index: 5,
          productName: "鸿蒙端app",
          quantity: 1,
          unit: "年",
          unitPrice: "￥50,000.00",
          totalPrice: "￥50,000.00",
          params:
            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息",
          remark: "版权租用单价 1 年期",
        },
        {
          index: 6,
          productName: "维护维保服务",
          quantity: 1,
          unit: "年",
          unitPrice: "￥50,000.00",
          totalPrice: "￥50,000.00",
          params:
            "维护维保服务，故障处理，应用答疑，bug 修复，不包含新增功能项，包含全端",
          remark:
            "维护维保服务，故障处理，应用答疑，bug 修复，不包含新增功能项，包含全端",
        },
      ],
    };
  },
  methods: {
    toggleCurrent(index) {
      this.translateDistance = `-${index * 7.3}%`;
      if (index === 6) {
        this.translateDistance = `-3400px`;
      }
      this.current = index;
    },
    handleCellMouseEnter({ index }) {
      this.rowCurrent = index;
    },
    downloadAppStore() {
      this.$message({
        message: "ios版本正在开发中",
        type: "info",
      });
    },
  },
};
</script>

<style scoped>
/*最外层透明*/
:deep(.el-table) {
  background-color: transparent;
}
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}
:deep(.el-table th) {
  background-color: transparent;
}
:deep(.el-table tr) {
  background-color: transparent;
}
:deep(.el-table td) {
  background-color: transparent;
}

.table_data {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s;
}
.tableIn {
  -webkit-animation: tableIn 0.6s;
  animation: tableIn 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
.tableOut {
  -webkit-animation: tableOut 0.6s;
  animation: tableOut 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes tableIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tableOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.table_title {
  font-family: download;
  text-align: left;
  color: white;
  font-weight: 500;
  font-size: 120%;
  text-align: center;
  border: 1px solid #fff;
  margin: 0;
  padding: 10px;
  border-bottom: 0;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.table_download {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: download;
  text-align: left;
  color: white;
  font-weight: 500;
  font-size: 100%;
  text-align: center;
  border: 1px solid #fff;
  padding: 10px;
  border-bottom: 0;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  text-decoration: none;
}
.imgdown {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.table_text {
  font-family: download;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: left;
  color: white;
  width: 100%;
  height: 40px;
  font-size: 90%;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
</style>