<template>
  <div>
    <ClientOnly>
      <t-dialog
        :visible="visible"
        @close="closeDialog"
        placement="center"
        :closeBtn="false"
        :cancelBtn="null"
        :confirmBtn="null"
      >
        <template #header>
          <div class="header-box">
            <span>{{ $t('Customized.SmartAlerts') }}</span>
            <div class="icon" @click="closeDialog">
              <closeSvg></closeSvg>
            </div>
          </div>
        </template>
        <template #body>
          <div class="body-box">
            <transition name="fade">
              <div class="body-header" v-if="closeHeader">
                定制开发：智能警报可根据用户的需求进行定制开发，详情请
                <span @click="JoinUs(tgUrl)">{{
                  $t('Customized.Contact')
                }}</span>
                了解。
                <div class="icon" @click="closeHeader = false">
                  <close2Svg></close2Svg>
                </div>
              </div>
            </transition>
            <div class="reset-box">
              <t-button>
                <template #icon>
                  <ResetSvg class="icon"></ResetSvg>
                </template>
                {{ $t('Customized.reset') }}</t-button
              >
            </div>
            <t-form
              ref="SmartFrom"
              :showErrorMessage="false"
              class="Smart-form"
              label-width="150px"
              colon
              :data="formData"
              label-align="right"
            >
              <t-form-item :label="$t('Customized.range')" class="filter-item">
                <div class="chain-select-box">
                  <QuestionMarkSvg class="icon"></QuestionMarkSvg>
                  <t-select
                    v-model="formData.chain"
                    @change="selectChange"
                    :popup-props="{ overlayClassName: 'select_chain_box' }"
                  >
                    <template #prefixIcon>
                      <img :src="chain_options[curSelectImg].img" alt="" />
                    </template>
                    <t-option
                      v-for="item in chain_options"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    >
                      <div class="item-box">
                        <div class="img-box">
                          <img :src="item.img" alt="" />
                        </div>
                        <div>{{ item.label }}</div>
                      </div>
                    </t-option>
                  </t-select>
                </div>
                <div class="time-select-box">
                  <QuestionMarkSvg class="icon"></QuestionMarkSvg>
                  <t-select
                    v-model="formData.time"
                    :popup-props="{ overlayClassName: 'select_time_box' }"
                  >
                    <t-option
                      v-for="item in TIME_RANGE_OPTIONS"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    >
                      <div class="item-box">
                        <div class="img-box"></div>
                        <div>{{ item.label }}</div>
                      </div>
                    </t-option>
                  </t-select>
                </div>
                <div class="price-range-select-box">
                  <QuestionMarkSvg class="icon"></QuestionMarkSvg>
                  <t-switch
                    class="pre-switch2"
                    v-model="formData.isRise"
                    size="large"
                    :label="['+', '-']"
                  ></t-switch>
                  <t-select
                    v-model="formData.range"
                    :popup-props="{ overlayClassName: 'select_time_box' }"
                  >
                    <t-option
                      v-for="item in PRICE_RANGE_OPTIONS"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    >
                      <div class="item-box">
                        <div class="img-box"></div>
                        <div>{{ item.label }}</div>
                      </div>
                    </t-option>
                  </t-select>
                </div>
              </t-form-item>
              <t-form-item :label="$t('Customized.Single')" class="filter-item">
                <div class="chain-select-box">
                  <QuestionMarkSvg class="icon"></QuestionMarkSvg>
                  <t-select
                    v-model="formData.chain2"
                    @change="selectChange2"
                    :popup-props="{ overlayClassName: 'select_chain_box' }"
                  >
                    <template #prefixIcon>
                      <img :src="chain_options[curSelectImg2].img" alt="" />
                    </template>
                    <t-option
                      v-for="item in chain_options"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    >
                      <div class="item-box">
                        <div class="img-box">
                          <img :src="item.img" alt="" />
                        </div>
                        <div>{{ item.label }}</div>
                      </div>
                    </t-option>
                  </t-select>
                </div>
                <div class="price-range-select-box">
                  <QuestionMarkSvg class="icon"></QuestionMarkSvg>
                  <t-select
                    v-model="formData.volume"
                    :popup-props="{ overlayClassName: 'select_time_box' }"
                  >
                    <t-option
                      v-for="item in VOLUME_OPTIONS"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    >
                      <div class="item-box">
                        <div class="img-box"></div>
                        <div>{{ item.label }}</div>
                      </div>
                    </t-option>
                  </t-select>
                </div>
              </t-form-item>
              <t-form-item
                :label="$t('Customized.NotificationMethod')"
                class="filter-item"
              >
                <div class="input-fa">
                  <div class="ding-input">
                    <DingSvg class="icon"></DingSvg>
                    <t-input placeholder="输入钉钉号" align="center"></t-input>
                  </div>
                  <div class="ding-input">
                    <TGSvg class="icon"></TGSvg>
                    <t-input
                      placeholder="输入TG用户名@"
                      align="center"
                    ></t-input>
                  </div>
                  <div class="ding-input">
                    <discordSvg class="icon"></discordSvg>
                    <t-input
                      placeholder="输入Discord账号"
                      align="center"
                    ></t-input>
                  </div>
                  <div class="ding-input">
                    <emailSvg class="icon"></emailSvg>
                    <t-input placeholder="输入邮箱号" align="center"></t-input>
                  </div>
                  <div class="ding-input">
                    <phoneSvg class="icon"></phoneSvg>
                    <t-input placeholder="输入手机号" align="center"></t-input>
                  </div>
                </div>
              </t-form-item>
            </t-form>
            <div class="submit-box">
              <t-button
                @click="JoinUs(tgUrl)"
                class="custom_button_back_border"
                >{{ $t('Customized.submit') }}</t-button
              >
            </div>
            <div class="Contact-we" @click="JoinUs(tgUrl)">
              <CustomerSvg></CustomerSvg>
              <span>{{ $t('Customized.Contact') }}</span>
            </div>
          </div>
        </template>
      </t-dialog>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
import closeSvg from '/public/images/svg/filter/close.svg';
import close2Svg from '/public/images/svg/filter/close2.svg';
import ResetSvg from '/public/images/svg/filter/reset.svg';
import DingSvg from '/public/images/svg/filter/ding.svg';
import TGSvg from '/public/images/svg/filter/tg.svg';
import discordSvg from '/public/images/svg/filter/discord.svg';
import emailSvg from '/public/images/svg/filter/email.svg';
import phoneSvg from '/public/images/svg/filter/phone.svg';
import CustomerSvg from '/public/images/svg/filter/Customer.svg';
import {
  TIME_RANGE_OPTIONS,
  PRICE_RANGE_OPTIONS,
  VOLUME_OPTIONS,
} from '@/constants/token';
import {
  chain_options,
  filterChainObj,
} from '@/constants/UnifiedManagementChain';
import QuestionMarkSvg from '/public/images/svg/filter/QuestionMark.svg';
import { tgUrl } from '@/utils/open';
const props = defineProps({
  visible: Boolean,
});
// 当前链
const chain = useChain();
const formData = reactive({
  chain: chain.value,
  chain2: chain.value,
  time: '',
  range: '5-20',
  isRise: true,
  mode: '',
  Account: '',
  volume: '',
});
const JoinUs = (url: string) => {
  window.open(url);
};
const closeHeader = ref(true);
let CurChain = filterChainObj('value', chain.value, true);
const curSelectImg = ref(CurChain.index);
const curSelectImg2 = ref(CurChain.index);
// select改变同时改变图片
const selectChange = (v: string) => {
  let curList = filterChainObj('value', v, true);
  // 切换图片
  curSelectImg.value = curList.index;
  // 切换filter数据
  formData.chain = curList.value;
};
const selectChange2 = (v: string) => {
  let curList = filterChainObj('value', v, true);
  curSelectImg2.value = curList.index;
  // 切换filter数据
  formData.chain2 = curList.value;
};
const emit = defineEmits(['close']);
const closeDialog = () => {
  emit('close', false);
};
</script>

<style lang="less">
@import '@/style/flex.less';
.select_time_box {
  .t-popup__content {
    .dja();
    .t-select__dropdown-inner {
      width: 100%;
      .t-select__list {
        width: 100%;
        .t-select-option {
          width: 100%;
          .dja();
        }
      }
    }
  }
  .t-popup {
    width: 140px;
  }
  .item-box {
    .dja();
  }
}
</style>
<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
:deep(.t-dialog) {
  padding: 0;
  border-radius: 4px;
  width: 820px;
  .t-dialog__header {
    width: 100%;
    height: 50px;
    padding: 0;
    border-bottom: 1px solid rgb(183, 183, 183);
    box-sizing: border-box;
    .t-dialog__header-content {
      width: 100%;
      .header-box {
        padding: 0 12px;
        .icon {
          float: right;
          cursor: pointer;
        }
      }
    }
  }
  .t-dialog__body {
    padding: 0;
    .body-box {
      position: relative;
      .body-header {
        width: 100%;
        height: 45px;
        background: var(--td-brand-color-btn-1);
        .dja();
        position: relative;
        span {
          color: var(--td--main-btn-color-1);
          cursor: pointer;
        }
        .icon {
          position: absolute;
          right: 6px;
          top: 0;
          cursor: pointer;
        }
      }
      // 动画
      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .fade-enter-active,
      .fade-leave-active {
        transition: all 0.6s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
        opacity: 0;
        height: 0;
      }
      .reset-box {
        height: 50px;
        .dja(flex-end,center);
        padding-right: 20px;
        .t-button {
          background: var(--td-brand-color-btn-1);
          border: none;
          --ripple-color: rgb(230, 230, 244);
          color: @td-Search-info-color-1;
          .icon {
            margin-right: 6px;
            fill: var(--td-brand-color-icon-1);
          }
        }
      }
      .Smart-form {
        padding-left: 20px;
        .t-form__label {
          min-height: 40px;
          .da();
        }
        .chain-select-box {
          .da();
          .icon {
            cursor: pointer;
          }
        }
        .time-select-box,
        .price-range-select-box {
          .da();
          margin-left: 20px;
          .icon {
            cursor: pointer;
          }
          .t-input__inner {
            text-align: center;
          }
        }
        .price-range-select-box {
          .t-input__wrap {
            width: 140px;
          }
          .pre-switch2 {
            margin-left: 6px;
            min-width: 43px;
            background: var(--td--main-btn-color-1) !important;
            .dja();
            .t-switch__content {
              font-size: @font-size-base;
            }
          }
        }
        .input-fa {
          display: flex;
          flex-wrap: wrap;
          row-gap: 12px;
          :nth-child(2),
          :nth-child(3),
          :nth-child(5) {
            margin-left: 12px;
          }
          .ding-input {
            .dja();
            .t-input__wrap {
              height: 40px;
              width: 170px;
              margin-left: 4px;
              .t-input {
                height: 100%;
              }
            }
          }
        }
      }
      .submit-box {
        height: 100px;
        width: 100%;
        .dja();
        .t-button {
          width: 180px;
          height: 36px;
        }
      }
      .Contact-we {
        position: absolute;
        right: 20px;
        bottom: 12px;
        cursor: pointer;
        .dja();
        span {
          padding-left: 8px;
          color: var(--td--main-btn-color-1);
        }
      }
    }
  }
}
</style>
