<template>
  <div style="height:100%">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="DTG生产" name="DTG"> /></el-tab-pane>
      <el-tab-pane label="DTF生产" name="DTF">
        <div class="dtf-file-page">
          <!-- 返回按钮 -->
          <div class="page-top">
            <el-button icon="el-icon-arrow-left" text @click="goBack">
              返回
            </el-button>
          </div>

          <el-card class="file-card">
            <template #header>
              <div class="card-header">
                <span>下载文件夹</span>
              </div>
            </template>

            <div class="file-breadcrumb">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                  ><a style="vertical-align: middle;"
                    ><img src="../../assets/computer.png" alt="" width="18"/></a
                ></el-breadcrumb-item>

                <el-breadcrumb-item><a>活动管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <div class="file-content">
              <div v-for="value in 100" :key="value" class="imgBox">
                <img
                  src="../../assets/file.png"
                  alt=""
                  width="80"
                  height="80"
                />
                <div>test</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const { ipcRenderer } = require("electron");
const { getProductType, setProductType } = require("@/server/utils/store");

export default {
  name: "dtfFileDownLoad",

  data() {
    return {
      // 表单配置，可从本地配置文件读取初始化
      form: {
        // 素材超宽处理：autoScale / skip / biggerSize
        overWidthMode: "autoScale",
        // 最大素材数模式：batch / custom
        maxPicMode: "batch",
        // 自定义素材数量
        customPicNum: 30,
        // 自动排版规格 40+2 / 60 / none
        autoLayoutType: "none",
        // 默认下载目录
        downloadDir: "C:\\Users\\95487\\Desktop\\Test_JMGZ_260530021.png"
      },
      activeName: getProductType()
    };
  },
  mounted() {
    // 页面加载读取本地配置回填表单
    this.loadLocalConfig();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push({
        name: "design"
      });
    },
    // 读取本地配置
    async loadLocalConfig() {
      ipcRenderer.send("read-layout-config");
      ipcRenderer.once("layout-config-data", (_, cfg) => {
        if (cfg) {
          this.form = Object.assign({}, this.form, cfg);
        }
      });
    },
    // 选择文件夹弹窗
    selectFolder() {
      ipcRenderer.send("request-select-folder");
      ipcRenderer.once("select-folder-result", (_, path) => {
        if (path) this.form.downloadDir = path;
      });
    },
    // 保存配置到本地文件
    saveConfig() {
      ipcRenderer.send("save-layout-config", this.form);
      this.$message.success("排版设置保存成功！");
    },
    tabClick(tab) {
      if (tab.name == "DTG") this.goBack();
      setProductType(tab.name);
    }
  }
};
</script>

<style lang="less" scoped>
.dtf-file-page {
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.page-top {
  margin-bottom: 12px;
}
::v-deep.file-card {
  width: 100%;
  height: calc(100% - 90px);
  .file-breadcrumb {
    padding: 10px 20px;
    background-color: #f3f3f3;
  }
  .el-card__body {
    padding: 0;
    height: 100%;
  }
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
}
.file-group {
  margin-bottom: 24px;
}
.group-title {
  font-size: 20px;
  color: #303133;
  margin-bottom: 10px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.custom-num-row {
  display: flex;
  align-items: center;
}
.dir-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-wrap {
  margin-top: 30px;
  text-align: left;
}

.el-radio-group {
  .el-radio {
    padding: 10px 0;
    font-size: 18px;
  }
}
::v-deep {
  .el-tabs {
    height: 100%;
    border-bottom: none;
  }
  .el-tabs__header {
    margin: 0;
    background-color: #c6c6c6;
    // height: 20px;
  }
  .el-tabs__header .el-tabs__item {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    // border-bottom: none;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
    background-color: #243151;
    color: #fff;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: none;
  }
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #fff;
    // background-color: #5b647c;
  }
}
.file-content {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: max-content;
  gap: 10px;
  padding: 20px;
  overflow-y: auto;
  height: calc(100% - 150px);
  .imgBox {
    text-align: center;
  }
}
.el-breadcrumb {
  font-size: 18px;
}
</style>
