<template>
  <div>
    <x-n-modal
      v-model:show="props.visible"
      style="width: 1200px"
      @update:show="toggleModal"
    >
      <n-tabs type="line" animated>
        <n-tab-pane name="oasis" tab="画展信息">
          <div class="info">
            <div class="info-title"></div>
            <div class="info-item">
              <div class="item-left">画展地点</div>
              <div class="item-right">{{ rowData.address }}</div>
            </div>
            <div class="info-item">
              <div class="item-left">画展人数</div>
              <div class="item-right">{{ rowData.artistCount }}</div>
            </div>
            <div class="info-item">
              <div class="item-left">画家姓名</div>
              <div class="item-right">{{ rowData.artistShowCount }}</div>
            </div>
            <div class="info-item">
              <div class="item-left">画家编号</div>
              <div class="item-right">
                {{ rowData.bind?.map((item) => item.artistNum).join(",") }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-left">画作数量</div>
              <div class="item-right">{{ rowData.artworkCount }}</div>
            </div>
            <div class="info-item">
              <div class="item-left">主持人</div>
              <div class="item-right">{{ rowData.compere }}</div>
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="the beatles" tab="画展详情">
          <n-space
            vertical
            style="
              display: flex;
              justify-content: center !important;
              align-items: center;
            "
          >
            <n-steps :current="stepList.length" status="process" vertical>
              <n-step
                :title="titleFun(item)"
                :key="item.lable"
                v-for="item in stepList"
              >
              </n-step>
            </n-steps>
          </n-space>
        </n-tab-pane>
      </n-tabs>
    </x-n-modal>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import { nodeList } from "@/api-norm/art-manage";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});
const stepList = ref([]);
const statusObj = {
  1: { lable: "待确认画家", color: "#FC6B40" },
  2: { lable: "待确认主持人", color: "#CB3C11" },
  3: { lable: "待确认润格", color: "#C31D3D" },
  4: { lable: "待核验", color: "#E23EA9" },
  5: { lable: "待画作出库", color: "#A01DA0" },
  6: { lable: "待画作入库", color: "#46299D" },
  7: { lable: "画展预备中", color: "#2080F0" },
  8: { lable: "已完成", color: "#18A058" },
};
const objToArraylFun = (rowData) => {
  const desiredEntries = Object.entries(statusObj).slice(
    0,
    rowData.exhibitionStatus
  );
  const desiredObj = Object.fromEntries(desiredEntries);
  return desiredObj;
};
const titleFun = (rowData) => {
  return h("div", [
    h(
      "span",
      {
        style: {
          fontSize: "14px",
          color: "#1F2225",
          marginRight: "10px",
        },
      },
      rowData.lable
    ),
    h(
      "span",
      {
        style: {
          fontSize: "12px",
          color: "#9EA4AA",
        },
      },
      "2020-09-18"
    ),
    h("a", {
      style: {
        fontSize: "14px",
        color: "#46299D",
        marginLeft: "10px",
      },
      onClick: () => handleBackPaintingInform(rowData),
    }),
  ]);
};
watch(
  () => props.visible,
  (newValue) => {
    if (newValue) {
      const desiredObj = objToArraylFun(props.rowData);
      console.log(desiredObj);
      for (const key in desiredObj) {
        stepList.value.push(desiredObj[key]);
      }
      console.log(stepList.value);
    }
  }
);
const emit = defineEmits(["update:visible"]);
const toggleModal = (value) => {
  emit("update:visible", value);
  stepList.value = [];
};
</script>

<style lang="scss" scoped>
:deep(.n-tabs-tab) {
  font-size: 20px;
  font-weight: bold !important;
}
.info {
  display: flex;
  flex-direction: column;
  gap: 25px;

  .info-item {
    display: flex;
    .item-left {
      width: 60px;
      font-size: 14px;
      color: #333639;
    }
    .item-right {
      margin-left: 50px;
    }
  }
}
.info-title {
  font-size: 18px;
  font-weight: bold !important;
}
:deep(.n-steps) {
  height: 500px;
}
</style>
