<template>
  <div style="height:100%">
    <div class="dtf-setting-page">
      <!-- 返回按钮 -->
      <div class="page-top">
        <el-button icon="el-icon-arrow-left" @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>
  </div>
</template>

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

export default {
  name: "dtf-setting",
  data() {
    return {
      // 表单配置，可从本地配置文件读取初始化
      form: { ...getDTFSetting() },
      activeName: getProductType()
    };
  },
  mounted() {
    // 页面加载读取本地配置回填表单
    this.loadLocalConfig();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push({ name: "design-dtf" });
    },
    // 读取本地配置
    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() {
      if (
        this.form.autoLayoutType == "60" &&
        this.form.overWidthMode === "biggerSize"
      ) {
        this.$confirm(
          "由于排版设置中选择“按更大规格排版”仅适用于40+2，选60时，默认超60的规格不排版",
          "提示",
          {
            confirmButtonText: "确定",
            type: "warning"
          }
        ).then(() => {
          this.$message.success("排版设置保存成功！");
        });
      } else {
        this.$message.success("排版设置保存成功！");
      }
      setDTFSetting({ ...this.form });
    },
    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;
  }
}
</style>
