<template>
  <el-dialog v-model="dialogVisible" draggable destroy-on-close :show-close="false" class="dialog"
    :fullscreen="isFullScreen" width="70%">
    <template #header="{ close }">
      <div class="my-header">
        <div class="my-header-left">{{ dialogTitle }}</div>
        <div class="my-header-right">
          <span @click="fullScreen">
            <Icon :icon="isFullScreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
          </span>
          <span @click="close">
            <el-icon>
              <Close />
            </el-icon>
          </span>
        </div>
      </div>
    </template>
    <div class="left">
      <SPuUploadImg v-model="picUrl" :disabled="isDetail" />
      <p v-if="picUrl.length == 0">请上传logo</p>
      <el-tabs v-model="activeTabName" @tab-click="handleTabClick" tab-position="left" class="child-tabs">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.component" />
      </el-tabs>
    </div>
    
    <div class="right">
      <component :is="CurrentComponent" :id="OperationsId" ref="ComponentRef" :isDetail="isDetail" :openType="openType" :propFormData="initialData" />
    </div>
    <div style="clear: both;"></div>
    <template #footer v-if="!isDetail && !mobile">
      <div class="footer">
        <div v-for="(button, index) in buttonActions" :key="index">
          <el-button :type="button.type" v-if="openType == '编辑' || (openType == '新增' && button.isAdd)" @click="button.action">
            {{ button.name }}
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineAsyncComponent, defineEmits } from 'vue';
import { ElDialog, ElTabs, ElTabPane } from 'element-plus';
import { Close } from '@element-plus/icons-vue'

defineOptions({ name: 'ZxDialog' })
//全屏/取消全屏弹窗
const isFullScreen = ref(false)
const fullScreen = () => {
  isFullScreen.value = !isFullScreen.value
}
const props = defineProps({
  tabs: Array,
  initialComponent: String,
  id: Number,
  dialogTitle: String,
  isDetail: Boolean,
  openType:String,
  initialData: Object,
  buttonActions: Array,
});

// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)

const ComponentRef  = ref()


let OperationsId = ref(props.id);

const dialogVisible = ref(false);
const activeTabName = ref(props.initialComponent);
const CurrentComponent = ref(null);

const modules = import.meta.glob('@/views/**/components/*.vue');
watch(activeTabName, (newVal) => {
  const comp = modules[`/src/${newVal}.vue`]
  if (newVal) {
    comp().then((myModule) => {
      CurrentComponent.value = myModule.default
    })
  }
}, { immediate: true });
// 检测id
watch(() => props.id, (newId) => {
  OperationsId.value = newId;
});
let picUrl = ref("");
// 如果是新增，清空logo
watch(() => props.openType, (newVal) => {
  if (newVal == '新增') {
    picUrl.value = '';
  }
});

const updateInitialData = inject('updateInitialData');
// 监听logo上传，一旦上传，更新父组件数据
watch(() => picUrl.value, (newVal) => {
  updateInitialData.value.logoUrl = newVal;
});
// 监听图片加载
 watch(() => props.initialData,(newVal) => {
  picUrl.value=newVal.logoUrl;
});


function handleTabClick(tab) {
  activeTabName.value = tab.name;
}

defineExpose({ dialogVisible,ComponentRef });  
</script>



<style type="text/css">

.el-dialog__body {
  padding: unset;
}

.dialog .el-card__body {
  padding: 0 20px 20px 0;
}

.dialog .el-dialog__headerbtn {
  top: 0px;
  line-height: 60px;
}

.dialog .el-dialog__headerbtn:hover {
  background-color: #ef6b6b;
}

.dialog .el-dialog__headerbtn:hover .el-dialog__close {
  color: #fff;
}

.dialog .el-dialog__header {
  padding: 0;
  margin: 0
}
.el-tabs--left .el-tabs__item.is-left
{
  justify-content: center;
}
.el-tabs--left .el-tabs__header.is-left{
  margin-right: 0;
  width:100%;
  text-align: center;
  
}
.el-tabs__nav {
  width: 100%;
  justify-content: center;
  /* justify-content:unset */
}
.el-tabs--left .el-tabs__nav-wrap.is-left{
  margin:0
}
</style>

<style lang="scss" scoped>
.left {
  width: 106px;
  float:left;
  position: relative;
  p{
    position: absolute;
    top: 40px;
    margin: 0;
    left: 18px;
    color: var(--el-color-danger)
  }
  
}

.child-tabs {
  border-top: 2px solid #e4e7ef;
  margin-top: -7px;
}



::v-deep .child-tabs .el-tabs__item {
  width: 106px;
  justify-content: center;
}


.right {
  padding: 10px 0 60px;
  border-left: 2px solid #e4e7ee;
  margin-left: -2px;
  float: left;
  width: calc(100% - 120px);
  padding-left: 10px;
  max-height:600px;
  min-height:600px;
  overflow:auto;
  position: relative;
}

.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e4e7ee;

  &-left {
    // font-weight: bold;
    // font-size: 1rem;
    padding: 1rem;
    // padding-bottom: 10px
  }

  &-right {
    span {
      width: 55px;
      height: 55px;
      display: inline-block;
      line-height: 55px;
      text-align: center;
      cursor: pointer;
    }

    span:first-child:hover {
      background-color: #f6f6f6;
      // color: white
    }

    span:last-child:hover {
      background-color: #ef6b6b;
      color: white
    }
  }
}
.footer{
  //border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  div{
    margin-right: 10px;
  }
}
</style>