<script setup>
import { ref } from "vue";
import lockClosed from "@/static/images/lockdfd@2x.png";
import lockOpen from "@/static/images/lock4@2x.png";
import { liveStore } from "@/stores/live/index.js";
import xButton from '@/components/x-button/index.vue'
import tangPopup from './tangPopup.vue'
import {goodStore} from "@/stores/goods/index.js";

const { quoteStatus, changeStatus,show,auctionData ,getSocketData} = liveStore();
const {pageRef} = goodStore();
const showTang=ref(false)
const openOne=()=>{
  showTang.value=true
}

</script>

<template>
  <div class="bg-white w-60px rounded-l-4px overflow-hidden">
    <!-- 拍品信息 -->
    <x-button @click="openOne">
      <div  class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
        <div>拍品</div>
        <div>({{auctionData?.artwork?.index}}/{{pageRef.itemCount??0}})</div>
      </div>
    </x-button>
    <tangPopup v-model:show="showTang"></tangPopup>
    <!-- 出价开关 -->
    <x-button @click="changeStatus">
      <div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center">
        <div class="mb-1">
          <img
              :src="quoteStatus ? lockClosed : lockOpen"
              class="w-16px h-21px"
              alt="锁图标"
          />
        </div>
        <div :class="quoteStatus ? 'text-gray-500' : 'text-blue-600'" class="text-10px transition-colors duration-200">
          {{ quoteStatus ? '关闭出价' : '开启出价' }}
        </div>
      </div>
    </x-button>
    <!-- 支付 -->
    <x-button @click="show = true">
      <div class="w-60px h-60px text-center  flex flex-col justify-center items-center text-yellow-600">
        <div class="text-10px">RMB</div>
        <div class="text-12px">5,000</div>
        <div class="text-10px">去支付</div>
      </div>
    </x-button>

  </div>
</template>