<template>
  <div class="bg-white md:min-w-bodySet mx-auto">
    <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor">
      <div class="w-bodySet mx-auto pt-24">
        <div :style="{ backgroundImage: `url(${getImgUrl('banner')})` }" class="bg-cover">
          <div class="w-1/2 pl-36 py-36">
            <div class="text-4xl font-semibold text-headerMain">
              区块链协同溯源+商城
              <br />追溯商品全流程
            </div>
            <div
              class="text-base text-contentMain mt-5"
            >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
            <div class="flex flex-row mt-6">
              <!-- <MainButton size="large" text="立即体验" /> -->
              <div></div>
              <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="flex flex-row w-8/12 mx-auto justify-around">
          <div class="flex flex-row items-center border-r border-indigo-600">
            <svg-icon iconClass="document" class="w-9 h-9 pr-3" />
            <span class="pr-36">链上存证 防止篡改</span>
          </div>
          <div class="flex flex-row items-center border-r border-indigo-600">
            <svg-icon iconClass="suyuan" class="w-9 h-9 pr-3" />
            <span class="pr-36">数字通证 追溯源头</span>
          </div>
          <div class="flex flex-row items-center">
            <svg-icon iconClass="data" class="w-9 h-9 pr-3" />
            <span class="pr-36">数据验真 真实可靠</span>
          </div>
        </div>
      </div>
      <div class="tab">
        <div class="text-center mt-14" :class="styleClass.mainHeader">多样化溯源类型，全面满足企业需求</div>
        <div
          class="w-6/12 mx-auto flex flex-row mt-12 justify-center text-center border border-gray-200 rounded-lg"
        >
          <div
            :class="styleClass.homeTab"
            class="rounded-l-lg"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV1)"
          >数据存证</div>
          <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV2)">协同溯源</div>
          <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV3)">接口存证</div>
          <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV4)">区块链商城</div>
          <div
            :class="styleClass.homeTab"
            class="rounded-r-lg"
            @mouseenter="handleTabSwitch(NAV_EVENT.NAV5)"
          >区块链验真</div>
        </div>
        <div class="pannel w-6/12 mx-auto cursor-default">
          <TabCard :data="nav[currentNav]">
            <template #dataProve v-if="currentNav == 0">
              <div class="flex flex-row w-1/2">
                <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-gray-400 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-gray-400 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-gray-400 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-gray-400 text-xs">定制查询条件</div>
                  </div>
                </div>
              </div>
            </template>
          </TabCard>
        </div>
      </div>
      <div class="bg-gray-100 pt-10 pb-14">
        <div class="w-7/12 mx-auto">
          <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 in systems" :key="item.id">
          <systemCard :data="item" />
        </div>
      </div>
      <div class="solution w-6/12 bg-mainBlue mx-auto text-center 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>
    <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"></el-input>
        </el-form-item>
        <el-form-item label="您的名字" prop="userName">
          <el-input v-model="state.form.userName"></el-input>
        </el-form-item>
        <el-form-item label="您的电话/手机" prop="phone">
          <el-input v-model="state.form.phone"></el-input>
        </el-form-item>
        <el-form-item label="您的诉求" prop="appeal">
          <el-input v-model="state.form.appeal" autosize type="textarea"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="handleSubmit">确定</el-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"


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',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入您的电话或手机号，座机请加区号',
      trigger: 'blur',
    },
    { validator: validatePhone, trigger: 'blur' }
  ],
  appeal: [
    {
      required: true,
      message: '请输入您的需求',
      trigger: 'blur',
    },
  ]
}

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

const form = ref()

const handleSubmit = () => {
  form.value.validate((valid: boolean) => {
    if (valid) {
      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
        }
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

/* 修改header UI */
// const wrapper = ref()

// onMounted(() => {
//   window.addEventListener('scroll', handleScroll)
// })
// const handleScroll = () => {
//   const rect = wrapper.value.getBoundingClientRect().top;
//   if (rect == 0) {
//     console.log(rect, 0);

//   }
// }

</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;
}
.el-button{
  width: 100%;
}
</style>

