import { defineComponent } from 'vue';
import './index.less';
import CustomCountDown from '../CountDown';
import OpenSvg from '@/assets/svg/raffle/open.svg';
import { useFoxDialog } from '@/store/dialog';
export default defineComponent({
  setup(props) {
    const testImg = new URL('@/assets/img/test.png', import.meta.url).href;
    const testTime = 60000000;
    const { $state: foxDialog } = useFoxDialog();
    return () => (
      <div class="custom-card-detail">
        <div class="detail-head">
          <div class="detail-head-img">
            <img src={testImg} alt="" />
          </div>
          <div class="detail-head-content">
            <div class="title">5人抽奖一人必中</div>
            <div class="count-down-box">
              <div class="label">购买倒计时</div>
              <div class="value">
                <CustomCountDown time={testTime}></CustomCountDown>
              </div>
            </div>
            <div class="price-and-buynum">
              <div class="price-box">
                <div class="label">价格</div>
                <div class="value">200 RESDAO</div>
              </div>
              <div class="price-box margin">
                <div class="label">当前购买人数</div>
                <div class="value">0/5</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="price-and-prize">
              <div>
                <span>你将花费：</span>
                200 RESDAO
              </div>
              <div>
                <span class="text2">中奖可获得：</span>
                600 RESDAO
              </div>
            </div>
            <div class="content-wallet-tooltip">
              <button class="connect-wallet">连接钱包</button>
              <span class="text">提示：一次只能购买一次</span>
              <div class="open-link">
                <OpenSvg></OpenSvg>
              </div>
            </div>
          </div>
        </div>
        <div class="content-line"></div>
        <div class="custom-Rules">
          <div class="title">规则</div>
          <div class="value"></div>
        </div>
      </div>
    );
  },
});
