<template>
  <div>
    <el-form ref="form" :model="form">
      <el-card class="box-card">
        <span><h3>PC Banner</h3></span>
        <el-form-item
          :label="__('Banner Html')"
          label-width="150px"
          prop="index_banner_pc_html"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-input
            v-model="form.index_banner_pc_html"
            :autosize="{ minRows: 2, maxRows: 15 }"
            clearable
            :placeholder="__('请输入更灵活的html内容')"
            :style="{ width: '100%' }"
            type="textarea"
          />
        </el-form-item>

        <el-form-item
          :label="__('是否启用')"
          label-width="150px"
          prop="index_banner_pc_enable"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-radio v-model="form.index_banner_pc_enable" label="1">
            {{ __('开启') }}
          </el-radio>
          <el-radio v-model="form.index_banner_pc_enable" label="0">
            {{ __('关闭') }}
          </el-radio>
        </el-form-item>

        <el-button
          class="form-sub-btn"
          icon="el-icon-s-tools"
          style="
          "
          type="primary"
          @click="handleEdit"
        >
          {{ __('修改') }}
        </el-button>
      </el-card>

      <el-card class="box-card">
        <h3>{{ __('PC首页弹窗') }}</h3>
        <el-form-item
          :label="__('弹窗图片')"
          label-width="150px"
          prop="index_pop_pc_img"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-upload
            ref="index_pop_pc_img"
            :action="action"
            :before-upload="BeforeUpload"
            class="avatar-uploader"
            :data="params"
            :on-success="
              (value) => handleAvatarSuccess('index_pop_pc_img', value)
            "
            :show-file-list="false"
          >
            <img
              v-if="form.index_pop_pc_img"
              class="avatar"
              :src="form.index_pop_pc_img"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item
          :label="__('弹窗网址')"
          label-width="150px"
          prop="index_pop_pc_url"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-input
            v-model="form.index_pop_pc_url"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('弹窗编号')"
          label-width="150px"
          prop="index_pop_pc_index"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-input
            v-model="form.index_pop_pc_index"
            clearable
            :placeholder="__('1.修复BUG1;2.修复bug2;')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('是否启用')"
          label-width="150px"
          prop="index_pop_pc_enable"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-radio v-model="form.index_pop_pc_enable" label="1">
            {{ __('开启') }}
          </el-radio>
          <el-radio v-model="form.index_pop_pc_enable" label="0">
            {{ __('关闭') }}
          </el-radio>
        </el-form-item>

        <el-button
          class="form-sub-btn"
          icon="el-icon-s-tools"
          style="
          "
          type="primary"
          @click="handleEdit"
        >
          {{ __('修改') }}
        </el-button>
      </el-card>

      <el-card class="box-card">
        <h3>{{ __('手机首页弹窗') }}</h3>
        <el-form-item
          :label="__('弹窗图片')"
          label-width="150px"
          prop="index_pop_wap_img"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-upload
            ref="index_pop_wap_img"
            :action="action"
            :before-upload="BeforeUpload"
            class="avatar-uploader"
            :data="params"
            :on-success="
              (value) => handleAvatarSuccess('index_pop_wap_img', value)
            "
            :show-file-list="false"
          >
            <img
              v-if="form.index_pop_wap_img"
              class="avatar"
              :src="form.index_pop_wap_img"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item
          :label="__('弹窗网址')"
          label-width="150px"
          prop="index_pop_wap_url"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-input
            v-model="form.index_pop_wap_url"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>


        <el-form-item
          :label="__('是否启用')"
          label-width="150px"
          prop="index_pop_wap_enable"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-radio v-model="form.index_pop_wap_enable" label="1">
            {{ __('开启') }}
          </el-radio>
          <el-radio v-model="form.index_pop_wap_enable" label="0">
            {{ __('关闭') }}
          </el-radio>
        </el-form-item>

        <el-button
          class="form-sub-btn"
          icon="el-icon-s-tools"
          style="
          "
          type="primary"
          @click="handleEdit"
        >
          {{ __('修改') }}
        </el-button>
      </el-card>
    </el-form>
  </div>
</template>

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

  export default {
    name: 'Site',
    // eslint-disable-next-line vue/no-unused-components
    components: { VabQuill },

    data() {
      return {
        params: {
          authorization: '',
        },
        action: URL.action,
        form: {
          index_banner_pc_html: undefined,
          index_banner_pc_enable: true,
          index_pop_pc_enable: 0,
          index_pop_pc_img: undefined,
          index_pop_pc_url: undefined,
          index_pop_pc_index: undefined,
          app_ios_last_version: undefined,
          picture_upload_index_pop_wap_img: undefined,
          index_pop_wap_img: undefined,
          index_pop_wap_url: undefined,
          index_pop_wap_enable: 0,
        },
      }
    },
    created() {
      this.params.authorization = getToken()
      this.fetchData()
    },
    methods: {
      __,

      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      handleAvatarSuccess(name, res) {
        this.form[name] = res.data.media_url
      },

      async fetchData() {
        const { data } = await getList()
        this.form = {
          index_banner_pc_html: data.index_banner_pc_html,
          index_banner_pc_enable: data.index_banner_pc_enable,
          index_pop_pc_url: data.index_pop_pc_url,
          index_pop_pc_index: data.index_pop_pc_index,
          index_pop_pc_enable: data.index_pop_pc_enable,
          picture_upload_index_pop_wap_img:
            data.picture_upload_index_pop_wap_img,

          index_pop_pc_img: data.index_pop_pc_img,
          index_pop_wap_img: data.index_pop_wap_img,
          index_pop_wap_url: data.index_pop_wap_url,
          index_pop_wap_enable: data.index_pop_wap_enable,
        }
      },
      handleEdit() {
        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>
  .image_font {
    color: #979898;
    font-size: 14px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
