<template>
  <div class="row relative height-100">
    <div class="col-9 fl-artwork-tabs absolute row"
         :class="[pageType === 'create' ? 'col-12' : '']">
      <template v-for="(tab, tabIdx) in rulerTabs"
                :key="tabIdx">
        <div v-if="tab.show?.includes(pageType) && calcItemVisible(tab.visible)"
             class="bg-black row justify-center align-center cursor color-white"
             :class="[
            state.activeTab === tab.type ? 'active-artwork-tab bg-764CF6' : '',
          ]"
             style="
            height: 35px;
            border-radius: 16px 16px 0 0;
            border: 1px solid #fff;
          "
             :style="{ minWidth: '110px' }"
             @click="handleTabClick(tab)">
          {{ tab.label }}
        </div>
      </template>
    </div>
    <div class="col-9 bg-fff overflow-auto"
         style="
        border-radius: 0px 16px 16px 16px;
        margin-left: auto;
        padding: 10px 20px;
        max-height: 800px;
      "
         :class="[pageType === 'create' ? 'col-12' : '']">
      <div class="row justify-between">
        <div class="col-8 row">
          <div class="font-18 fl-mx-sm"
               style="font-weight: bold">
            画作名称<span class="fl-ml-sm">{{ fatherData.ArtworkName }}</span>
          </div>
          <div class="font-18 fl-mx-sm"
               style="font-weight: bold">
            画家姓名<span class="fl-ml-sm">{{ fatherData.artistShowCount }}</span>
          </div>
          <div class="font-18 fl-mx-sm"
               style="font-weight: bold">
            商城编号<span class="fl-ml-sm">{{ fatherData.Tfnum }}</span>
          </div>
        </div>
        <img class="close-icon"
             src="@/assets/image/icon/close-tabs.png"
             @click="handleCloseModal" />
      </div>

      <artwork-basic v-if="state.activeTab === 'basic'"
                     :fatherData="fatherData"
                     :pageType="pageType"
                     @triggerCloseModal="handleCloseModal"></artwork-basic>

      <artwork-extra v-if="state.activeTab === 'extra'"
                     :fatherData="fatherData"
                     :pageType="pageType"></artwork-extra>

      <artwork-market v-if="state.activeTab === 'market'"
                      :fatherData="fatherData"
                      :pageType="pageType"></artwork-market>

      <artwork-digitizing v-if="state.activeTab === 'digitizing'"
                          :fatherData="fatherData"
                          :pageType="pageType"></artwork-digitizing>

      <artwork-tag v-if="state.activeTab === 'tag'"
                   :fatherData="fatherData"></artwork-tag>

      <artwork-authentication v-if="state.activeTab === 'authentication'"
                              :fatherData="fatherData"
                              :pageType="pageType"
                              :authimg="state.authimg"
                              @triggerGetAuthImg="handleGetAuthImg"></artwork-authentication>

      <artwork-warehousing v-if="state.activeTab === 'warehousing'"
                           :fatherData="fatherData"></artwork-warehousing>

      <artwork-copy-right v-if="state.activeTab === 'copyright'"
                          :fatherData="fatherData"></artwork-copy-right>
    </div>
    <div v-if="pageType !== 'create'"
         class="col-3"
         style="max-height: 755px">
      <fabric-image v-if="
          state.activeTab === 'authentication'
        "
                    :defaultVal="state.defaultAuthimg"
                    :imageList="state.authimg"
                    style="height: 30%"
                    :fatherData="fatherData"></fabric-image>
      <message-board :style="{
          height:
            state.activeTab === 'authentication'
              ? 'calc(70% - 16px)'
              : '100%',
        }"
                     :pageType="state.activeTab"
                     :fatherData="fatherData"></message-board>
    </div>
  </div>
</template>
<script setup>
import { CloseOutlined } from "@ant-design/icons-vue";
import { reactive, onMounted, getCurrentInstance, computed } from "vue";
const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
import artworkBasic from "./artwork/basic.vue";
import artworkExtra from "./artwork/extra.vue";
import artworkDigitizing from "./artwork/digitizing.vue";
import artworkTag from "./artwork/tag.vue";
import artworkMarket from "./artwork/marketnews.vue";
import artworkAuthentication from "./artwork/authentication.vue";
import artworkWarehousing from "./artwork/warehousing.vue";
import artworkCopyRight from "./artwork/copyright.vue";
import messageBoard from "./artwork/messageboard.vue";
import fabricImage from "./artwork/fabricimage.vue";
let props = defineProps({
  pageType: String,
  fatherData: Object,
});
const state = reactive({
  activeTab: "basic",
  tabs: [
    {
      label: "基础信息",
      type: "basic",
      show: ["create", "view"],
      visible: "r_artwork_view_basic_page",
    },
    {
      label: "补充数据",
      type: "extra",
      show: "view",
      visible: "r_artwork_view_extra_page",
    },
    {
      label: "市场",
      type: "market",
      show: "view",
      visible: "r_artwork_view_market_page",
    },
    {
      label: "数字化",
      type: "digitizing",
      show: "view",
      visible: "r_artwork_view_digit_page",
    },
    {
      label: "标签",
      type: "tag",
      show: "view",
      visible: "r_artwork_view_tag_page",
    },
    {
      label: "鉴证",
      type: "authentication",
      show: "view",
      visible: "r_artwork_view_auth_page",
    },
    {
      label: "仓储",
      type: "warehousing",
      show: "view",
      visible: "r_artwork_view_ware_page",
    },
    {
      label: "版权",
      type: "copyright",
      show: "view",
      visible: "r_artwork_view_copy_page",
    },
  ],
  authimg: [],
  defaultAuthimg: "",
});
const emit = defineEmits(["triggerCloseModal"]);
const rulerTabs = computed(() => {
  let arr = state.tabs.filter((item) => calcItemVisible(item.visible));
  state.activeTab = arr[0].type;
  return arr;
});
onMounted(() => { });
const handleTabClick = (tab) => {
  state.activeTab = tab.type;
};

const handleCloseModal = (needRefresh) => {
  emit("triggerCloseModal", needRefresh);
};
const handleGetAuthImg = (data) => {
  state.authimg = data.AuthImgData || [];
  state.defaultAuthimg = data.DigiArtImg;
};
const calcItemVisible = (ruler) => {
  if (ruler) {
    return $hadRule(ruler);
  }
  return true;
};
</script>
<style scoped>
.active-artwork-tab {
  height: 55px !important;
  animation: tabClass 1s;
  animation-fill-mode: forwards;
  background: #764cf6 !important;
}

@keyframes tabClass {
  100% {
    font-size: 18px;
  }
}
.fl-artwork-tabs {
  top: -55px;
  left: 0px;
  overflow: overlay;
  flex-wrap: nowrap;
  align-items: flex-end;
}
</style>
