<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-setting-page">
          <!-- 返回按钮 -->
          <div class="page-top">
            <el-button icon="el-icon-arrow-left" text @click="goBack">
              返回
            </el-button>
          </div>

          <el-card class="setting-card">
            <template #header>
              <div class="card-header">
                <i
                  class="el-icon-setting"
                  style="color: #568cf9;font-size: 24px;margin-right: 8px;"
                ></i>
                <span>DTF排版设置</span>
              </div>
            </template>

            <div class="setting-group">
              <div class="group-title">素材超排版宽度时:</div>
              <el-radio-group v-model="form.overWidthMode">
                <el-radio label="autoScale"
                  >自动缩小素材，适配烫画模宽度</el-radio
                >
                <el-radio label="skip">超出排版宽度不排版</el-radio>
                <el-radio label="biggerSize"
                  >超出排版宽度，使用更大规格排版</el-radio
                >
              </el-radio-group>
            </div>

            <div class="setting-group">
              <div class="group-title">单张排版最大素材数:</div>
              <el-radio-group v-model="form.maxPicMode">
                <el-radio label="batch">批次素材数</el-radio>
                <div class="custom-num-row">
                  <el-radio label="custom">自定义素材数(建议数量30):</el-radio>
                  <el-input
                    v-model.number="form.customPicNum"
                    placeholder="请输入素材数"
                    style="width: 180px; margin-left: 8px"
                    :disabled="form.maxPicMode !== 'custom'"
                  />
                </div>
              </el-radio-group>
            </div>

            <div class="setting-group">
              <div class="group-title">自动排版设置</div>
              <el-radio-group v-model="form.autoLayoutType">
                <el-radio label="40+2">40+2</el-radio>
                <el-radio label="60">60</el-radio>
                <el-radio label="none">不执行自动排版</el-radio>
              </el-radio-group>
            </div>

            <div class="setting-group">
              <div class="group-title">下载文件目录</div>
              <div class="dir-input-row">
                <el-input v-model="form.downloadDir" readonly style="flex: 1">
                  <template slot="prepend">素材默认下载位置:</template>
                </el-input>
                <el-button
                  icon="el-icon-folder-opened"
                  @click="selectFolder"
                ></el-button>
              </div>
            </div>

            <div class="btn-wrap">
              <el-button type="primary" @click="saveConfig">保存设置</el-button>
            </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: "dtfSetting",
  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-setting-page {
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.page-top {
  margin-bottom: 12px;
}
.setting-card {
  width: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
}
.setting-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;
}
.setting-card {
  ::v-deep {
    .el-card__header {
      border-bottom: none;
    }
    .el-card__body {
      padding: 10px 200px;
    }
  }
}
.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;
  }
}
</style>
