import { defineComponent, ref } from 'vue';
import {
  chain_options,
  filterChainObj,
} from '@/constants/UnifiedManagementChain';
import SelectSvg from '/public/images/svg/filter/select.svg';
import ChainSearch from '/public/images/svg/filter/chainSearch.svg';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import './index.less';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  setup(props) {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const ChainImgIndex = ref(0);
    const ChainObj = ref<any>({});
    const chain = useChain();
    const chainName = ref('');
    // 弹窗是否打开
    const DialogVisible = ref<boolean>(false);
    let Scopedchain = '';
    if (typeof route.params.chain == 'string') {
      Scopedchain = route.params.chain;
    }
    if (route.params.chain) {
      let Obj = filterChainObj('name', Scopedchain, true);
      if (Obj) {
        ChainObj.value = Obj;
        chainName.value = ChainObj.value.name;
        ChainImgIndex.value = Obj.index;
        chain.value = Obj.value;
      }
    } else {
      ChainObj.value = filterChainObj('value', chain.value, true);
    }
    const ChangeDialog = () => {
      //   DialogVisible.value = !DialogVisible.value;
    };
    const onVisibleChange = (visible: any, e: any) => {
      DialogVisible.value = visible;
    };
    // 关闭弹窗
    const ClosePopup = () => {
      DialogVisible.value = false;
    };
    // 切换事件
    const selectChange = (v: string) => {
      ChainObj.value = filterChainObj('value', v, true);
      // 当前链保存到本地
      window.localStorage.setItem('chain', v);
      chain.value = ChainObj.value.value;
      chainName.value = ChainObj.value.name;
      ChainImgIndex.value = ChainObj.value.index;
      // 跳转路由
      router.push({
        path: `/${ChainObj.value.name}/1`,
      });
      ClosePopup();
    };
    // 弹窗内容
    const popupContent = () => {
      return (
        <div class="custom-chose-chain-content">
          <div class="search-box">
            <t-input
              placeholder={t('Search.search')}
              prefixIcon={() => <ChainSearch></ChainSearch>}
            ></t-input>
          </div>
          <div class="chain-box-body narrow-scrollbar">
            {chain_options.map((item: any) => (
              <div
                class="chain-box"
                onClick={selectChange.bind(this, item.value)}
              >
                <img src={item.img} alt="" />
                <span>{item.fullName}</span>
              </div>
            ))}
          </div>
        </div>
      );
    };
    return () => (
      <t-popup
        placement="bottom-left"
        trigger="click"
        v-model:visible={DialogVisible.value}
        content={popupContent}
        onVisibleChange={onVisibleChange}
      >
        <div class="custom-chose-chain-box" onClick={ChangeDialog}>
          <img
            src={chain_options[ChainImgIndex.value].img}
            alt=""
            class="left-icon"
          />
          <span class="current-chain-text">{chainName.value}</span>
          <span class="right-icon">
            <ChevronDownIcon
              class={[
                'select-icon',
                DialogVisible.value ? 'active' : '',
                DialogVisible.value
                  ? 't-fake-arrow--active'
                  : 't-fake-arrow--leave',
              ]}
            ></ChevronDownIcon>
          </span>
        </div>
      </t-popup>
    );
  },
});
