<template>
  <div class="shopStylebox">
    <a-form layout="inline">
      <a-row :gutter="5">
        <a-col :span="24">
          <a-form-item label="显示方式">
            <a-radio-group
              name="radioGroup"
              v-model="activeId"
              @change="handleActiveId"
            >
              <a-radio
                :value="item.globalType"
                v-for="(item, index) in styleList"
                :key="index"
              >
                <i
                  class="radioGroupColorSpan"
                  :style="'background:' + item.globalBg1"
                ></i>
                <i
                  class="radioGroupColorSpan"
                  :style="'background:' + item.globalBg2"
                ></i>
                <i
                  class="radioGroupColorSpan"
                  :style="'background:' + item.PageColor"
                ></i>
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="5">
        <a-col :span="24">
          <a-form-item label="当前风格示例" class="globalImgFormItem">
            <div class="globalImgBox">
              <img
                class="globalImg"
                :src="decAxios.decImgDomain(null, styleShopImg)"
              />
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="dec-bottom-fixed">
      <a-button type="primary" @click="save">保存</a-button>
      <a-button @click="reBack">返回</a-button>
    </div>
    <div class="dec-loading" v-show="loading">
      <div class="ant-spin ant-spin-spinning">
        <span class="ant-spin-dot ant-spin-dot-spin">
          <i class="ant-spin-dot-item"></i>
          <i class="ant-spin-dot-item"></i>
          <i class="ant-spin-dot-item"></i>
          <i class="ant-spin-dot-item"></i>
        </span>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: "shopStyle",
  props: ["config"],
  data() {
    return {
      loading: false,
      decAxios: this.config.decAxios,
      styleList: [],
      activeStyleList: [],
      activeId: 1,
      id: "",
    };
  },
  computed: {
    styleShopImg() {
      return this.styleList.length > 0
        ? this.styleList.find(
            (item) => `${item.globalType}` === `${this.activeId}`
          ).styleShopImg
        : "";
    },
  },
  created() {
    if (!this.config || (this.config && !this.config.decAxios)) {
      this.$message.error("缺失配置文件，请联系管理人员");
      return;
    }
    this.getList();
  },
  methods: {
    // 调取全店风格的列表接口
    getList() {
      this.decAxios.getShopStyleList().then(({ result, success }) => {
        if (success) {
          this.styleList = result;
          this.getActiveShopStyleList();
        }
      });
    },
    // 获取每次选中的数据
    getActiveShopStyleList() {
      this.decAxios.getActiveShopStyleList().then(({ result, success }) => {
        this.loading = false;
        if (success) {
          if (result && result.length > 0) {
            this.id = result[0].id;
            this.activeId = result[0].globalType || 1;
          }
        }
      });
    },
    // 保存
    save() {
      let info = this.styleList.find(
        (item) => `${this.activeId}` === `${item.globalType}`
      );
      if (Object.keys(info).length > 0) {
        info = JSON.parse(JSON.stringify(info));
      }
      info.id = this.id;
      this.decAxios.getShopSave(info).then(({ success, message }) => {
        if (success) {
          this.$message.success(message);
        } else {
          this.$message.error(message);
        }
        this.getActiveShopStyleList();
      });
    },
    handleActiveId(_r) {},
    reBack() {
      if (this.$router) {
        this.$router.go(-1);
      }
    },
  },
};
</script>
