<template>
  <div class="picture-management">
    <div class="set">
      <div class="title">
        <div class="name">同步商品图片</div>
        <div class="tips">(同步后显示最新的商品图片)</div>
      </div>
      <img @click="syncFoodImg" class="img" src="../../static/image/update.png" alt="">
    </div>
    <div class="set">
      <div class="title">
        <div class="name">订单详情显示出商品图片</div>
        <div class="tips">(在订单详情的商品显示图片，方便制作时确认)</div>
      </div>
      <el-switch @change="changeShowFoodImg" v-model="showFoodImg" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999">
      </el-switch>
    </div>
  </div>
</template>

<script>
import { getConfig, updateConfig, syncFoodImg } from "../api/setting.js";
export default {
  name: "pictureManagement",
  data() {
    return {
      showFoodImg: 0,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getConfig();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.showFoodImg = res.data.showFoodImg;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    changeShowFoodImg() {
      updateConfig({ showFoodImg: this.showFoodImg }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "修改成功！",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.getConfig();
      });
    },
    syncFoodImg() {
      syncFoodImg().then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "正在同步！",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped  type="text/css">
.picture-management {
  .set {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    .title {
      display: flex;
      align-items: center;
      .name {
        font-size: 14px;
      }
      .tips {
        font-size: 12px;
        color: #999;
      }
    }
    .img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
}
</style>