<template>
  <div class="bg-white md:min-w-bodySet mx-auto home">
    <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor pb-8">
      <div class="w-bodySet mx-auto pt-14">
        <div class="w-11/12 mx-auto relative">
          <div class="absolute top-0 z-0">
            <svg-icon iconClass="homeBanner" width="1371px" height="568px" />
          </div>
          <div class="w-1/2 pl-36 py-36 relative z-10">
            <div class="text-4xl font-semibold text-headerMain">
              区块链协同溯源+商城
              <div class="pt-2"></div>追溯商品全流程
            </div>
            <div
              class="text-base text-contentMain mt-5 leading-7"
            >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
            <div class="flex flex-row mt-6">
              <!-- <MainButton size="large" text="立即体验" /> -->
              <MainButton
                size="large"
                text="预约演示"
                theme="second"
                @click="dialogFormVisible = true"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ref="wrapper">
      <div class="bar bg-mainBlue text-white text-sm py-3">
        <div class="w-bodySet mx-auto">
          <div class="flex flex-row justify-center px-12">
            <div class="flex flex-row items-center border-r border-borderGray w-1/3 justify-center">
              <svg-icon iconClass="document" class="w-9 h-9 pr-3" />
              <span>
                链上存证
                <span class="pr-2"></span> 防止篡改
              </span>
            </div>
            <div class="flex flex-row items-center border-r border-borderGray w-1/3 justify-center">
              <svg-icon iconClass="suyuan" class="w-9 h-9 pr-3" />
              <span>
                数字通证
                <span class="pr-2"></span>追溯源头
              </span>
            </div>
            <div class="flex flex-row items-center w-1/3 justify-center">
              <svg-icon iconClass="data" class="w-9 h-9 pr-3" />
              <span>
                数据验真
                <span class="pr-2"></span>真实可靠
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="tab w-bodySet mx-auto px-60">
        <div class="text-center mt-14" :class="styleClass.mainHeader">多样化溯源类型，全面满足企业需求</div>
        <div
          class="mx-auto flex flex-row mt-12 justify-center text-center rounded-lg text-systemCardText px-7"
        >
          <div
            :class="[styleClass.homeTab, currentNav == NAV_EVENT.NAV1 ? 'border-r border-mainBlue text-mainBlue' : '']"
            class="rounded-l-lg border-l"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV1)"
          >数据存证</div>
          <div
            :class="[styleClass.homeTab, currentNav == NAV_EVENT.NAV2 ? ' border-r border-mainBlue text-mainBlue' : '']"
            class="border-l"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV2)"
          >协同溯源</div>
          <div
            :class="[styleClass.homeTab, currentNav == NAV_EVENT.NAV3 ? 'border-r border-mainBlue text-mainBlue' : '']"
            class="border-l"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV3)"
          >接口存证</div>
          <div
            :class="[styleClass.homeTab, currentNav == NAV_EVENT.NAV4 ? 'border-r border-mainBlue text-mainBlue' : '']"
            class="border-l"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV4)"
          >区块链商城</div>
          <div
            :class="[styleClass.homeTab, currentNav == NAV_EVENT.NAV5 ? ' border-mainBlue text-mainBlue' : '']"
            class="rounded-r-lg border-r border-l"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV5)"
          >区块链验真</div>
        </div>
        <div class="pannel mx-auto cursor-default">
          <TabCard :data="nav[currentNav]">
            <template #dataProve v-if="currentNav == 0">
              <div class="flex flex-row w-1/2 mb-6">
                <div class="w-2/3">
                  <div class="flex flex-row items-center">
                    <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                    <div class="text-contentMain text-xs">支持各类型电子数据</div>
                  </div>
                  <div class="flex flex-row items-center mt-6">
                    <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                    <div class="text-contentMain text-xs">灵活可控满足各类需求</div>
                  </div>
                </div>
                <div class="w-1/2">
                  <div class="flex flex-row items-center">
                    <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                    <div class="text-contentMain text-xs">透明安全稳定可靠</div>
                  </div>
                  <div class="flex flex-row items-center mt-6">
                    <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                    <div class="text-contentMain text-xs">扫码查验链上数据</div>
                  </div>
                </div>
              </div>
            </template>
          </TabCard>
        </div>
      </div>
      <div class="bg-gray-100 pt-10 pb-14">
        <div class="w-bodySet mx-auto px-60">
          <div class="pb-4" :class="styleClass.mainHeader">专业专注 安全高效 全方位追求极致</div>
          <div class="flex flex-wrap justify-between items-center">
            <div v-for="item in characteristics" :key="item.id" class="w-1/3 p-4">
              <CharCard :data="item" />
            </div>
          </div>
        </div>
      </div>
      <div class="system py-20 cursor-default">
        <div :class="styleClass.mainHeader" class="font-medium">系统灵活易用，满足个性化管理需求</div>
        <div class="text-base text-gray-600 text-center pt-5 py-16">打造行业领先价值</div>

        <div
          v-for="(item,index) in systems"
          :key="item.id"
          class="w-full overflow-hidden"
          :ref="setItemRef"
        >
          <systemCard :data="item" :isActive="isActive(index)" />
        </div>
      </div>
      <div class="solution w-bodySet mx-auto text-center">
        <div class="bg-mainBlue mx-52 py-8 mb-16">
          <div class="text-2xl font-medium text-white cursor-default">立即定制专业级解决方案</div>
          <button
            class="bg-white text-mainBlue mt-4 text-sm py-2 px-4 rounded-lg"
            @click="dialogFormVisible = true"
          >立即免费定制</button>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" width="30rem" destroy-on-close>
      <div class="text-center text-xl font-semibold text-gray-800">免费定制需求</div>
      <el-form ref="form" :model="state.form" label-width="120px" :rules="rules">
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="state.form.companyName" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="您的名字" prop="userName">
          <el-input v-model="state.form.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="您的电话/手机" prop="phone">
          <el-input v-model="state.form.phone" placeholder="请输入您的电话或手机号"></el-input>
        </el-form-item>
        <el-form-item label="您的诉求" prop="appeal" :autosize="{ minRows: 3, maxRows: 3 }">
          <el-input v-model="state.form.appeal" type="textarea" placeholder="请输入您的需求"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <button type="button" @click="handleSubmit" :class="btnStyle" :disabled="!isValid">确定</button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
import styleClass from '@/assets/style/style.module.css';

import MainButton from '@/components/mainButton.vue';
import TabCard from '@/components/tabCard.vue';
import CharCard from '@/components/charCard.vue';
import systemCard from '@/components/systemCard.vue';
import { ElForm, ElFormContext, ElMessage } from "element-plus"

import nav from "@/context/provenanceType"
import characteristics from '@/context/characteristics';
import systems from '@/context/system';

import { createAppeal } from "@/service/AppealService"

import _ from 'lodash'

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})


/* handle tab switch */
enum NAV_EVENT {
  NAV1,
  NAV2,
  NAV3,
  NAV4,
  NAV5
}

let currentNav = ref(0)
const handleTabSwitch = (type: NAV_EVENT) => {
  switch (type) {
    case NAV_EVENT.NAV1:
      currentNav.value = 0
      break
    case NAV_EVENT.NAV2:
      currentNav.value = 1
      break
    case NAV_EVENT.NAV3:
      currentNav.value = 2
      break
    case NAV_EVENT.NAV4:
      currentNav.value = 3
      break
    case NAV_EVENT.NAV5:
      currentNav.value = 4
      break
  }
}

const navItem = computed(() => {
  return nav[currentNav.value]
})

/* handle solution */
let dialogFormVisible = ref(false)

const validatePhone = (rule: any, value: string, callback: any) => {
  /* 手机校验 */
  const phoneReg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
  /* 座机校验 */
  const telReg = /0\d{2,3}\d{7,8}/
  if (value.startsWith('0')) {
    const phone = value.replace(/\s|-/g, "");//去除横线和空格
    if (!telReg.test(phone))
      callback(new Error('请输入正确的座机号'))
    else callback()
  } else {
    const phone = value.replace(/\s/g, "");//去除空格
    if (!phoneReg.test(value)) {
      callback(new Error('请输入正确的手机号'))
    } else callback()
  }
}

const rules = {
  companyName: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: 'blur',
    },
    {
      min: 4,
      max: 30,
      message: '请输入企业名称，4-30位',
      trigger: 'blur',
    },
  ],
  userName: [
    {
      required: true,
      message: '请输入您的名字',
      trigger: 'blur',
    },
    {
      min: 2,
      max: 10,
      message: '请输入您的名字，2-10位',
      trigger: 'blur',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入您的电话或手机号，座机请加区号',
      trigger: 'blur',
    },
    { validator: validatePhone, trigger: 'blur' }
  ],
  appeal: [
    {
      required: true,
      message: '请输入您的需求',
      trigger: 'blur',
    },
    {
      min: 1,
      max: 100,
      message: '请输入您的需求，100字内',
      trigger: 'blur',
    },
  ]
}

const state = reactive({
  form: {
    companyName: '',
    userName: '',
    phone: '',
    appeal: ''
  }
})

/* 校验及提交 */
const form = ref()
const isValid = ref(false)

/* 校验 */
watch(() => _.cloneDeep(state.form), (newForm, oldForm) => {
  let hasEmptyAttr = false
  Object.keys(newForm).forEach(key => {
    if (!newForm[key]) {
      hasEmptyAttr = true
      isValid.value = false
    } else {
      /* 单值校验 */
      if (newForm[key] != oldForm[key]) {
        form.value.validateField(key, (errorMessage: string) => {
          console.log(errorMessage);
        })
      }
    }
  })
  if (!hasEmptyAttr) {
    form.value.validate((valid: boolean) => {
      isValid.value = valid
    })
  }
}, {
  deep: true
})

const btnStyle = computed(() => {
  return isValid.value ? 'validBtn' : 'invalidBtn'
})

const handleSubmit = () => {
  if (isValid.value) {
    const { userName, companyName, phone, appeal } = state.form
    createAppeal({
      contacts: userName,
      company_name: companyName,
      phone: phone.replace(/\s|-/g, ""),
      content: appeal
    }).then((ret) => {
      if (ret.code == 200) {
        ElMessage({
          message: '已收到您的定制需求！',
          type: 'success',
        })
        form.value.resetFields()
        dialogFormVisible.value = false
      }
    })
  }
}

/* 控制system card样式 */
let itemRefs: Array<any> = []
const setItemRef = (el: any) => {
  if (el) {
    itemRefs.push(el)
  }
}

let offSetTop = ref(0)

const isActive = computed(() => {
  let top = 0
  return (index: number) => {
    switch (index) {
      case 0:
        top = 1500
        break;
      case 1:
        top = 2200
        break;
      case 2:
        top = 2900
        break;
      case 3:
        top = 3600
        break;
    }
    return offSetTop.value >= top ? true : false
  }
})

const handleScroll = (e: Event): void => {
  const target: HTMLDocument = e.target as HTMLDocument;
  offSetTop.value = target.scrollingElement?.scrollTop as number;
  console.log(offSetTop.value);

}

window.addEventListener("scroll", handleScroll);

</script>
<style scoped>
.el-form {
  width: 80%;
  margin: auto;
}
.el-form /deep/ .el-form-item {
  display: block;
}
.el-form /deep/.el-form-item__label {
  color: #1f292d;
  font-size: 0.875rem;
}

.invalidBtn {
  width: 100%;
  border: none;
  background: #a7c3ff;
  color: white;
}

.validBtn {
  width: 100%;
  border: none;
  background: #409eff;
  color: white;
}


.home /deep/.el-dialog {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  height: 40.6rem;
  position: absolute;
}
</style>



