<template>
  <div class="theme-right">
    <div class="title">主题设置</div>
    <div class="setting">
      <ul class="stem">
        <div class="stem-title">主题颜色</div>
        <li>
          <div>题干颜色</div>
          <ColorPicker
            :defaultColor="themeInfo.stem_color"
            @choiceColor="(e) => handlerColorPicker(e, 'stem_color')"
          />
        </li>
        <li>
          <div>答案颜色</div>
          <ColorPicker
            :defaultColor="themeInfo.answer_color"
            @choiceColor="(e) => handlerColorPicker(e, 'answer_color')"
          />
        </li>
        <li>
          <div>按钮颜色</div>
          <ColorPicker
            :defaultColor="themeInfo.button_color"
            @choiceColor="(e) => handlerColorPicker(e, 'button_color')"
          />
        </li>
        <li>
          <div>按钮文字颜色</div>
          <ColorPicker
            :defaultColor="themeInfo.button_text_color"
            @choiceColor="(e) => handlerColorPicker(e, 'button_text_color')"
          />
        </li>
      </ul>
      <div class="line"></div>
      <ul class="stem">
        <div class="stem-title">头图</div>
        <li>
          <div>显示头图</div>
          <a-switch
            v-model:checked="themeInfo.head_img_status"
            @change="handlerStatus('head_img_status')"
          ></a-switch>
        </li>
        <li>
          <div>
            上传头图
            <PopConfirm
              :text="`建议尺寸：1210*265px，安全区域404*265px<br>格式要求：JPEG、PNG、JPG和GIF<br>图片大小：2M以下`"
            />
          </div>
        </li>
        <li>
          <ImageCard
            v-if="themeInfo.head_img_url"
            :url="themeInfo.head_img_url"
            :type="0"
            :autoCropHeight="300"
            :autoCropWidth="750"
            :multiple="false"
            @remove="removeImg('head_img_url')"
            @changes="(url) => changeUpload(url, 'head_img_url')"
          />
          <ImageCard
            v-else
            :type="1"
            :isDes="false"
            :autoCropHeight="300"
            :autoCropWidth="750"
            :multiple="false"
            @changes="(url) => changeUpload(url, 'head_img_url')"
          />
        </li>
      </ul>
      <div class="line"></div>
      <ul class="stem">
        <div class="stem-title">LOGO</div>
        <li>
          <div>显示LOGO</div>
          <a-switch
            v-model:checked="themeInfo.logo_status"
            @change="handlerStatus('logo_status')"
          ></a-switch>
        </li>
        <li>
          <div>
            上传LOGO
            <PopConfirm
              text="建议尺寸：宽度100px，高度100px格式要求：JPEG、PNG、JPG和GIF图片大小：2M以下"
            />
          </div>
        </li>
        <li>
          <ImageCard
            v-if="themeInfo.logo_url"
            :url="themeInfo.logo_url"
            :autoCropHeight="100"
            :autoCropWidth="100"
            :type="0"
            :multiple="false"
            @remove="removeImg('logo_url')"
            @changes="(url) => changeUpload(url, 'logo_url')"
          />
          <ImageCard
            v-else
            :type="1"
            :autoCropHeight="100"
            :autoCropWidth="100"
            :multiple="false"
            :isDes="false"
            @changes="(url) => changeUpload(url, 'logo_url')"
          />
        </li>
        <li v-if="themeInfo.logo_status">LOGO位置</li>
        <li v-if="themeInfo.logo_status">
          <a-radio-group
            @change="
              (e) => {
                handlerRadio(e, 'logo_site');
              }
            "
            name="radioGroup"
            v-model:value="themeInfo.logo_site"
          >
            <a-radio :value="1">居左</a-radio>
            <a-radio :value="2">居中</a-radio>
            <a-radio :value="3">居右</a-radio>
          </a-radio-group>
        </li>
      </ul>
      <div class="line"></div>
      <ul class="stem">
        <div class="stem-title">背景</div>
        <li>
          <div>显示背景</div>
          <a-switch
            v-model:checked="themeInfo.background_status"
            @change="handlerStatus('background_status')"
          ></a-switch>
        </li>
        <li>
          <div>背景颜色</div>
          <ColorPicker
            :defaultColor="themeInfo.background_color"
            @choiceColor="(e) => handlerColorPicker(e, 'background_color')"
          />
        </li>
        <li>
          <div>
            上传背景
            <PopConfirm
              text="建议尺寸：宽度1920px，高度1080px格式要求：JPEG、PNG、JPG和GIF图片大小：2M以下"
            />
          </div>
        </li>
        <li>
          <ImageCard
            v-if="themeInfo.background_url"
            :url="themeInfo.background_url"
            :autoCropHeight="1080"
            :autoCropWidth="1920"
            :multiple="false"
            :type="0"
            @remove="removeImg('background_url')"
            @changes="(url) => changeUpload(url, 'background_url')"
          />
          <ImageCard
            v-else
            :type="1"
            :multiple="false"
            :autoCropHeight="1080"
            :autoCropWidth="1920"
            :isDes="false"
            @changes="(url) => changeUpload(url, 'background_url')"
          />
        </li>
        <li v-if="themeInfo.background_url">
          <div>透明度</div>
          <a-input-number
            v-model:value="themeInfo.background_transparency"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
            @change="handlerBTransparency"
          />
        </li>
        <li v-if="themeInfo.background_url">
          <div>显示方式</div>
          <a-radio-group
            v-model:value="themeInfo.background_site"
            @change="
              (e) => {
                handlerRadio(e, 'background_site');
              }
            "
            name="radioGroup"
          >
            <a-radio :value="1">平铺</a-radio>
            <a-radio :value="2">居中</a-radio>
          </a-radio-group>
        </li>
      </ul>
      <div class="line"></div>
      <div class="show">显示</div>
      <div class="checkbox-group">
        <div class="checkbox" v-for="(item, index) in optionList" :key="index">
          <div v-if="item.isInput" class="input-box">
            <a-input
              size="small"
              v-model:value="item.value"
              :maxlength="8"
              @blur="editButtonText(item)"
            />
          </div>
          <div v-else @change="handlerStatus(item.key, 'checked-box')">
            <a-checkbox class="custom-checkbox" v-model:checked="item.checked">{{ item.label }}</a-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useThemeInfo from "../../hooks/theme";
import PopConfirm from "../PopConfirm/index.vue";
import ColorPicker from "../ColorPicker/index.vue";
import { debounce } from "lodash-es";
import ImageCard from "@/views/planetDesign/Design/components/ImageCard.vue";
import { message } from "ant-design-vue";

const { store, optionList, themeInfo, headerImgInfo, apiPostThemeStyle } = useThemeInfo();

const handlerColorPicker = (e, key) => {
  themeInfo.value[key] = e.hex;
  apiPostThemeStyle();
};
const handlerStatus = (key, type) => {
  themeInfo.value[key] = type ? (themeInfo.value[key] ? 0 : 1) : themeInfo.value[key] ? 1 : 0;
  apiPostThemeStyle();
};
const changeUpload = (url, key) => {
  themeInfo.value[key] = url;
  if (themeInfo.value[key] && key === "background_url") {
    themeInfo.value.background_transparency = 100;
    themeInfo.value.background_color = "#FFFFFF";
  }
  if (!headerImgInfo.value.checked) {
    store.commit("common/HEADER_IMG_INFO", {
      checked: true,
      head_img_url: url,
    });
  }
  apiPostThemeStyle();
};
const removeImg = (key) => {
  themeInfo.value[key] = "";
  apiPostThemeStyle();
  if (key === "background_url") {
    themeInfo.value.background_transparency = 100;
  }
};
const handlerRadio = debounce((e, key) => {
  themeInfo.value[key] = e.target.value;
  apiPostThemeStyle();
}, 500);
const handlerBTransparency = debounce((e) => {
  themeInfo.value.background_transparency = e;
  apiPostThemeStyle();
}, 500);

// 编辑开始按钮和提交按钮文字
const editButtonText = (item) => {
  if (item.value) {
    themeInfo.value[item.key] = item.value;
  } else {
    message.error('按钮文字不能为空');
    themeInfo.value[item.key] = item.default;
  }
  apiPostThemeStyle();
};
</script>

<style lang="scss" scoped>
.theme-right::-webkit-scrollbar {
  width: 4px;
  // background-color: #ffffff;
}
.theme-right::-webkit-scrollbar-thumb {
  background-color: #D8D8D8;
  border-radius: 10px;
}
.theme-right {
  float: right;
  width: 290px;
  height: 100%;
  background: #fafafa;
  box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);
  overflow-y: auto;
  overflow-x: hidden;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
    margin: 27px 0 27px 20px;
  }
  .setting {
    width: 250px;
    // height: 1330px;
    background: #ffffff;
    border-radius: 6px;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid #fff;
    .stem {
      list-style: none;
      padding: 32px 20px 10px 20px;
      .stem-title {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #434343;
        margin-bottom: 10px;
      }
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #434343;
      }
    }
    .line {
      width: 220px;
      height: 1px;
      background: #f5f5f5;
      // margin: 0 15px 14px 15px;
      margin: 0 15px;
    }
    .show {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #434343;
      padding: 32px 20px 10px;
    }
    .checkbox-group {
      margin-left: 20px;
    }
    .checkbox {
      margin-bottom: 10px;

      .input-box {
        padding: 0 24px;
      }
    }
  }
}

::v-deep(.zs-color-picker-btn) {
  opacity: 0;
}
::v-deep(.zs-color-picker) {
  position: relative;
  right: 40px;
}
::v-deep(.zs-color-picker-btn) {
  width: 50px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}
::v-deep(.zs-color-picker-panel) {
  position: absolute;
  right: 30px;
}
</style>
