<template>
  <div
    ><el-dialog
      v-model="dialogTableVisible"
      :modal="false"
      :show-close="false"
      draggable
      :append-to-body="false"
      :destroy-on-close="true"
      @close="closeDialog"
    >
      <template #header>
        <div style="position: relative">
          <div class="dialog-header">{{ editShop.name }}</div>
          <img
            src="~@/assets/icons/slide-right.png"
            alt=""
            class="dialog-return"
            @click="closeDialog"
          />
        </div>
      </template>
      <div class="config-content">
        <div>
          <div class="uploader-title">缩略图</div>
          <el-upload
            class="pic-uploader"
            list-type="picture-card"
            :action="
              editShop.thumbnail
                ? '/skyeye-admin-api/homepageConfig/updateWorkshopPicture'
                : '/skyeye-admin-api/homepageConfig/uploadWorkshopPicture'
            "
            :show-file-list="false"
            :with-credentials="true"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :data="
              editShop.thumbnail
                ? { workshopId: editShop.id, deleteFileName: thumbnailChange }
                : { workshopId: editShop.id }
            "
            :headers="getHeaders()"
          >
            <img v-if="editShop.thumbnail" :src="editShop.thumbnail" class="avatar" />
            <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
            <div v-else>
              <el-icon class="avatar-upload-icon" size="24px"><Plus /></el-icon>
              <div class="uploader-config-text">上传照片</div>
            </div>
          </el-upload>
          <div class="upload-config-tip">只支持.jpg格式</div>
          <div style="display: flex; text-align: center"
            ><img src="~@/assets/icons/warn.png" style="width: 14px; height: 14px" alt="" />
            <div class="upload-notice">上传车间内部情况的视频流截图</div></div
          >

          <!-- <div class="upload-tips">备注：车间内部情况的视频流截图</div> -->
        </div>
        <hr />
        <div>
          <div class="content-title"
            ><div class="uploader-title">填充</div>
            <el-icon class="refresh-right"><RefreshRight /></el-icon
          ></div>
          <div class="color-select"
            ><el-color-picker
              v-model="editShop.bgColor"
              show-alpha
              size="small"
              color-format="rgb"
            /><div class="color-content">{{ showColor[0] }}&emsp;{{ showColor[1] }}</div></div
          >
        </div>
        <hr />
        <div>
          <div class="content-title"
            ><div class="uploader-title">文字</div>
            <el-icon class="refresh-right"><RefreshRight /></el-icon
          ></div>
          <div style="display: flex">
            <el-select
              v-model="editShop.fontSize"
              class="fontsize-select"
              style="width: 50px"
              size="small"
            >
              <el-option
                v-for="(item, index) in fontSizeList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <div class="color-fontsize-select"
              ><el-color-picker v-model="editShop.fontColor" color-format="hex" size="small" /><div
                class="color-fontSize-content"
                >{{ editShop.fontColor }}</div
              ></div
            >
          </div>
          <hr />
          <div>
            <!-- //这里要变选值 -->
            <div class="content-title"><div class="uploader-title">布局</div> </div>
            <div class="layout-set">
              <img
                src="~@/assets/icons/layout-left.png"
                alt=""
                @click="posAdj(LabelPositionEnum.LEFT)"
                style="margin-right: 19px; cursor: pointer"
                :class="{ active: editShop.posType === LabelPositionEnum.LEFT }"
              />
              <img
                src="~@/assets/icons/layout-right.png"
                alt=""
                @click="posAdj(LabelPositionEnum.RIGHT)"
                style="margin-right: 17px; cursor: pointer"
                :class="{ active: editShop.posType === LabelPositionEnum.RIGHT }"
              />
              <img
                src="~@/assets/icons/layout-top.png"
                alt=""
                style="cursor: pointer"
                @click="posAdj(LabelPositionEnum.TOP)"
                :class="{ active: editShop.posType === LabelPositionEnum.TOP }"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="save-dialog-wrapper">
        <el-button type="primary" class="save-dialog" @click="saveWorkshopConfig">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { Plus, RefreshRight } from '@element-plus/icons-vue';
  import { ElMessage } from 'element-plus';
  import { colorRGB2Hex } from '@/utils';
  import useMapEditor, { LabelPositionEnum, MapWorkShopInfoItem } from '../stores/useMapEditor';
  import { storeToRefs } from 'pinia';
  import { cloneDeep } from 'lodash-es';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';
  import { useUserStore } from '@/store/modules/user';

  const userStore = useUserStore();
  const getHeaders = () => {
    return { Satoken: userStore.getToken, Tenantid: userStore.getTenantId };
  };

  const mapEditor = useMapEditor();
  const { addedShops, showShops, activeShopId } = storeToRefs(mapEditor);

  const globSetting = useGlobSetting();

  const editShop = computed(() => {
    const val =
      showShops.value.find((item) => {
        return item.id === Number(activeShopId.value);
      }) || ({} as MapWorkShopInfoItem);
    return val;
  });

  const thumbnailChange = computed(() => {
    return editShop.value.thumbnail?.replace(globSetting.imgUrl!, '');
  });

  const emit = defineEmits(['onClose', 'transformerChange']);

  const showColor = computed(() => colorRGB2Hex(editShop.value!.bgColor));
  const dialogTableVisible = ref(false);

  const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('请上传jpg格式的图片!');
      return false;
    }
    return true;
  };

  const handleAvatarSuccess = (e) => {
    editShop.value.thumbnail = urlJoin(globSetting.imgUrl!, e.data);
  };

  const openDialog = () => {
    dialogTableVisible.value = !dialogTableVisible.value;
  };

  const closeDialog = () => {
    dialogTableVisible.value = false;
    showShops.value = cloneDeep(addedShops.value);
    emit('onClose', true);
  };

  const posAdj = (pos: LabelPositionEnum) => {
    editShop.value.posType = pos;
    emit('transformerChange');
  };

  const fontSizeList = Array.from({ length: 11 }, (_, index) => index + 10);

  const saveWorkshopConfig = () => {
    addedShops.value = cloneDeep(showShops.value);
    closeDialog();
  };

  defineExpose({ openDialog, closeDialog });
</script>

<style lang="scss" scoped>
  :deep(.el-dialog) {
    width: 271px !important;
    height: 800px !important;
    position: absolute;
    right: 0px;
    top: -10px;
  }

  .dialog-header {
    font-size: 16px;
  }
  .dialog-return {
    position: absolute;
    right: -10px;
    top: 0px;
    cursor: pointer;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    display: none;
  }

  .drawer-box {
    width: 251px;
    height: 711px;
  }

  :deep(.el-upload--picture-card) {
    margin-left: 50px;
    width: 104px;
    height: 104px;
  }
  .pic-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    width: 104px;
    height: 104px;
    cursor: pointer;
    margin-left: 0px;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .uploader-title {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .avatar {
    width: 104px;
    height: 104px;
    object-fit: contain;
  }

  .el-icon.avatar-upload-icon {
    font-size: 18px;
    color: black;
    width: 104px;
    height: 104px;
    text-align: center;
    margin-top: -60px;
    margin-bottom: 10px;
  }

  .uploader-config-text {
    margin-top: -45px;
    margin-left: 26px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.88);
  }
  .upload-config-tip {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    margin-left: -20px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .upload-notice {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    margin-left: 4px;
    margin-bottom: 16px;
  }

  .content-title {
    display: flex;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .refresh-right {
    margin-left: 4px;
    margin-top: 2px;
  }

  .color-select {
    display: flex;
    margin-left: 34px;
    margin-bottom: 16px;
  }
  .color-content {
    width: 120px;
    height: 24px;
    line-height: 24px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.04);
  }

  .fontsize-select {
    margin-left: 34px;
  }
  .color-fontSize-content {
    width: 74px;
    height: 24px;
    line-height: 24px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.04);
  }

  .color-fontsize-select {
    display: flex;
    margin-bottom: 16px;
  }
  .layout-set {
    width: 156px;
    height: 24px;
    background: #f5f5f5;
    border-radius: 2px;
    margin-left: 34px;
    display: flex;
  }

  .save-dialog-wrapper {
    margin-top: 40px;
    text-align: center;
  }

  .active {
    background-color: #cbcdce;
  }
</style>
