<template>
  <div class="weixin-style-page">
    <a-card title="背景设置">
      <h3>主题色选择</h3>
      <div class="content">
        <ColorPicker
          v-model="selectedColor"
          :color-list="colorList"
        ></ColorPicker>
      </div>
      <!-- <h3>背景图选择</h3>
      <div class="content">
        <a-upload
          action="//jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChange"
        >
          <div v-if="fileList.length < 1">
            <a-icon type="plus" />
            <div class="ant-upload-text">
              Upload
            </div>
          </div>
        </a-upload>
      </div> -->
    </a-card>

    <a-card title="主题样式选择">
      <a-radio-group
        v-model="selectedStyle"
      >
        <div class="style-content content">
          <label class="style-item">
            <img
              src="~imgs/default.png"
              class="img"
              :class="{active:selectedStyle==='default'}"
            >
            <a-radio
              value="default"
              style="margin-top:10px"
            >
              default
            </a-radio>
          </label>
        </div>
      </a-radio-group>
    </a-card>

    <div class="btns-wrap">
      <a-button
        type="primary"
        html-type="submit"
        @click="handleSubmit"
      >
        <a-icon type="save" /> 保存
      </a-button>
    </div>

    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
    >
      <img
        alt="example"
        style="width: 100%"
        :src="previewImage"
      >
    </a-modal>
  </div>
</template>

<script>
import { getWeixinTheme, setWeixinTheme, getWeixinColor } from '@/api/saleChannel/weixin'
import ColorPicker from '@/components/ColorPicker'

export default {
  components: {
    ColorPicker
  },
  created () {
    getWeixinTheme().then(res => {
      this.selectedColor = res.extraInfo.wx_color || '#ffa530'
      this.selectedStyle = res.extraInfo.wx_style || 'default'
    })

    getWeixinColor().then(res => {
      this.colorList = res.extraInfo.list
    })
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      selectedColor: '',
      selectedStyle: '',
      fileList: [],
      colorList: []
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    handleSubmit () {
      const params = {
        wx_color: this.selectedColor,
        wx_style: this.selectedStyle
      }
      setWeixinTheme(params).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.weixin-style-page {
  padding-top: 60px;
}
.content {
  padding: 20px 0;
}
.ant-card {
  margin-bottom: 20px;
}
.style-content {
  display: flex; width: 100%; text-align: center; justify-content: center; align-items: center;
  .title {
    display: block;margin-bottom: 10px;font-weight: bold;text-align: center;
  }
}
.style-item {
  display: flex; flex-direction: column;
  .img {
    width: 200px; transition: all 0.3s;
  }
  .img.active{
    box-shadow: 0 0 20px #0099a0;
  }
}

.btns-wrap{
  text-align: center;
}
</style>

<style lang="scss">
.weixin-style-page {
  .ant-radio-group {
    display: block;
  }
}

</style>
