<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div>
            <el-form ref="form" label-width="100px" :model="form" size="medium">
              <el-form-item
                :label="__('是否启用引导')"
                label-width="150px"
                prop="advertisement_open"
              >
                <el-radio-group v-model="form.advertisement_open" size="medium">
                  <el-radio
                    v-for="(item, index) in advertisement_opens"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                :label="__('引导图')"
                label-width="150px"
                prop="advertisement_image"
              >
                <el-upload
                  ref="advertisement_image"
                  accept="image/*"
                  :action="action"
                  :auto-upload="true"
                  :before-upload="BeforeUpload"
                  :data="params"
                  :file-list="advertisement_imageList"
                  list-type="picture-card"
                  :on-remove="RemoveUpload"
                  :on-success="handleAvatarSuccess"
                  style="width: 150px;height: 267px;border: 1px dashed #d9d9d9;display: flex"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <div class="image_font">{{ __('尺寸 ： 750 x 1334') }}</div>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getList, doEdit } from '@/api/base/config'
  import { URL } from '@/config'
  import { getToken } from '@/utils/token'
  import { mapGetters } from 'vuex'

  export default {
    name: 'Advertisement',
    components: {},
    data() {
      return {
        params: {
          authorization: '',
        },
        advertisement_imageList: [],
        form: {
          advertisement_image: '',
          advertisement_open: null,
        },
        action: URL.action,
        advertisement_opens: [
          {
            label: this.__('是'),
            value: '1',
          },
          {
            label: this.__('否'),
            value: '0',
          },
        ],
      }
    },
    computed: {
      ...mapGetters({
        token: 'user/token',
      }),
    },
    created() {
      this.fetchData()
      this.params.authorization = getToken()
    },
    methods: {
      handleAvatarSuccess(res, file, fileList) {
        file.url = res.data.media_url
        this.advertisement_imageList.push(file)
      },
      BeforeUpload(file) {
        this.headers = {
          Authorization: 'Bearer ' + this.token,
        }
        const imageSize = file.size / 1024 / 1024 < 5 //上传图片大小不超过1M
        if (!imageSize) {
          this.$message.error('上传封面大小不能超过 5MB!')
        }
        return imageSize
      },
      RemoveUpload(file, fileList) {
        this.advertisement_imageList = fileList
      },

      __,
      async fetchData() {
        const { data } = await getList()
        this.form.advertisement_open = data.advertisement_open
        let _advertisement_image = data.advertisement_image
        if (_advertisement_image) {
          const imageList = _advertisement_image.split(',')
          imageList.forEach((item) => {
            this.advertisement_imageList.push({
              url: item,
            })
          })
        }
      },
      handleEdit() {
        if (this.advertisement_imageList.length) {
          this.form.advertisement_image = this.advertisement_imageList
            .map((obj, index) => {
              return obj.url
            })
            .join(',')
        }
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.form),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload--picture-card{
    width: 150px;
    height: 267px;
    line-height: 267px;
  }

  .el-upload-list--picture-card {
    display: flex;
  }

  .el-upload--picture-card i {
    width: 150px;
  }



  .el-upload-list--picture-card .el-upload-list__item {
    width: 150px;height: 267px;
  }
}
</style>
