<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.widthStrategy">
            <el-radio :label="1">自动缩小素材，适配烫画模宽度</el-radio>
            <el-radio :label="2">超出排版宽度不排版</el-radio>
            <el-radio :label="3">超出排版宽度，使用更大规格排版</el-radio>
          </el-radio-group>
        </div>

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

        <div class="setting-group">
          <div class="group-title">自动排版设置</div>
          <el-radio-group v-model="form.autoLayoutStrategy">
            <el-radio :label="1">40+2</el-radio>
            <el-radio :label="2">60</el-radio>
            <el-radio :label="3">不执行自动排版</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 { setDTFSetting, getDTFSetting } = require("@/server/utils/store");
const { pathMap } = require("@/config/index.js");
import debounce from "lodash/debounce";
export default {
  name: "dtf-setting",
  data() {
    return {
      // 表单配置，可从本地配置文件读取初始化
      form: {},
      isInitLoad: true
    };
  },
  mounted() {
    // 页面加载读取本地配置回填表单
    this.loadLocalConfig();
    this.debounceSaveConfig = debounce(() => {
      this.saveConfig();
    }, 300);
  },
  watch: {
    form: {
      handler() {
        console.log(999);
        if (this.isInitLoad) return;
        this.debounceSaveConfig();
      },
      deep: true
    }
  },
  beforeDestroy() {
    // 组件销毁清除防抖，防止内存泄漏
    this.debounceSaveConfig.cancel();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push({ name: "design-dtf" });
    },
    // 读取本地配置
    async loadLocalConfig() {
      this.isFist = true;
      try {
        const { data } = await this.$api.post(pathMap["productionConfig"]);
        this.form = { ...getDTFSetting(), ...data };

        setDTFSetting({ ...this.form });

        this.$nextTick(() => (this.isInitLoad = false));
      } catch (error) {
        console.log(error);
      }
    },
    // 选择文件夹弹窗
    selectFolder() {
      ipcRenderer.removeAllListeners("select-folder-result");
      ipcRenderer.send("request-select-folder", this.form.downloadDir);
      ipcRenderer.once("select-folder-result", (_, path) => {
        if (path) {
          this.form = {
            ...this.form,
            downloadDir: path
          };
        }
      });
      // console.log("selectFolder", this.form);
    },
    // 保存配置到本地文件
    async saveConfig() {
      console.log(999);

      if (this.form.autoLayoutStrategy == 2 && this.form.widthStrategy == 3) {
        await this.$confirm(
          "由于排版设置中选择“按更大规格排版”仅适用于40+2，选60时，默认超60的规格不排版",
          "提示",
          {
            confirmButtonText: "确定",
            type: "warning"
          }
        );
      }
      await this.$api.post(pathMap["productionConfigUpdate"], this.form);
      setDTFSetting({ ...this.form });
      console.log(getDTFSetting());
      console.log(this.form);

      this.$message.success("排版设置保存成功！");
    }
  }
};
</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>
