<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div>
            <el-form
              ref="uploadForm"
              label-width="100px"
              :model="uploadForm"
              size="medium"
            >
              <el-form-item
                v-if="false"
                :label="__('图片文件大小')"
                label-width="150px"
                prop="image_max_filesize"
              >
                <el-input
                  v-model="uploadForm.image_max_filesize"
                  clearable
                  :placeholder="
                    __(
                      '当前服务器环境，最大允许上传 50 MB 的文件(1024 KB = 1MB)。'
                    )
                  "
                  :style="{ width: '100%' }"
                >
                  <template slot="append">KB</template>
                </el-input>
              </el-form-item>
              <el-form-item
                :label="__('默认图片')"
                label-width="150px"
                prop="default_image"
                required
              >
                <el-upload
                  ref="default_image"
                  :action="action"
                  :before-upload="BeforeUpload"
                  :data="params"
                  :on-success="
                    (value) => handleAvatarSuccess('default_image', value)
                  "
                  :show-file-list="false"
                  style="
                    width: 100px;
                    height: 100px;
                    border: 1px dashed #d9d9d9;
                  "
                >
                  <el-image
                    v-if="uploadForm.default_image"
                    fit="fill"
                    :src="uploadForm.default_image"
                    style="width: 100px; height: 100px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="image_font">255 * 256</div>
              </el-form-item>
              <el-form-item
                :label="__('图片扩展名')"
                label-width="150px"
                prop="image_allow_ext"
              >
                <el-transfer
                  v-model="uploadForm.image_allow_ext"
                  :data="media_allow_exts"
                  :titles="['未选择', '已选择']"
                />
              </el-form-item>
              <el-form-item
                :label="__('音频扩展名')"
                label-width="150px"
                prop="vedio_allow_ext"
              >
                <el-transfer
                  v-model="uploadForm.vedio_allow_ext"
                  :data="media_allow_exts"
                  :titles="['未选择', '已选择']"
                />
              </el-form-item>
              <el-form-item
                :label="__('文档扩展名')"
                label-width="150px"
                prop="file_allow_ext"
              >
                <el-transfer
                  v-model="uploadForm.file_allow_ext"
                  :data="media_allow_exts"
                  :titles="['未选择', '已选择']"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="uploadEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('设置OSS平台') }}</span>
            </div>
            <div>
              <el-form
                ref="ossForm"
                label-position="left"
                label-width="100px"
                :model="ossForm"
                :rules="ossRules"
                size="medium"
              >
                <el-form-item
                  :label="__('OSS平台')"
                  label-width="150px"
                  prop="upload"
                >
                  <el-radio-group v-model="ossForm.upload" size="medium">
                    <el-radio
                      v-for="(item, index) in uploadOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="__(item.value)"
                    >
                      {{ __(item.label) }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="ossEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('阿里云') }}</span>
            </div>
            <div>
              <el-form
                ref="aliyunForm"
                label-width="100px"
                :model="aliyunForm"
                :rules="aliyunRules"
                size="medium"
              >
                <el-form-item
                  :label="__('服务地址')"
                  label-width="150px"
                  prop="aliyun_regionid"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_regionid"
                    clearable
                    :placeholder="__('请输入阿里云 regionId')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="accessKeyId"
                  label-width="150px"
                  prop="aliyun_app_id"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_app_id"
                    clearable
                    :placeholder="__('请输入单行文本accessKeyId')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="secretAccessKey"
                  label-width="150px"
                  prop="aliyun_secret_id"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_secret_id"
                    clearable
                    :placeholder="__('请输入secretAccessKey')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="endpoint"
                  label-width="150px"
                  prop="aliyun_endpoint"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_endpoint"
                    clearable
                    placeholder="bucket name"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('bucket name')"
                  label-width="150px"
                  prop="aliyun_bucket"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_bucket"
                    clearable
                    :placeholder="__('请输入bucket name')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="aliyunEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('腾讯云') }}</span>
          </div>
          <div>
            <el-form
              ref="tengxunForm"
              label-width="100px"
              :model="tengxunForm"
              :rules="tengxunRules"
              size="medium"
            >
              <el-form-item
                label="APP ID"
                label-width="150px"
                prop="tengxun_app_id"
              >
                <el-input
                  v-model="tengxunForm.tengxun_app_id"
                  clearable
                  :placeholder="__('请输入APP ID')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="secretId"
                label-width="150px"
                prop="tengxun_secret_id"
              >
                <el-input
                  v-model="tengxunForm.tengxun_secret_id"
                  clearable
                  :placeholder="__('请输入secretId')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="secretKey"
                label-width="150px"
                prop="tengxun_secret_key"
              >
                <el-input
                  v-model="tengxunForm.tengxun_secret_key"
                  clearable
                  :placeholder="__('请输入secretKey')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="region"
                label-width="150px"
                prop="tengxun_region_region"
              >
                <el-input
                  v-model="tengxunForm.tengxun_region_region"
                  clearable
                  :placeholder="__('请输入region')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>

              <el-form-item
                label="endpoint"
                label-width="150px"
                prop="tengxun_endpoint"
              >
                <el-input
                  v-model="tengxunForm.tengxun_endpoint"
                  clearable
                  :placeholder="__('请输入腾讯云访问域名')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>

              <el-form-item
                :label="__('默认上传目录')"
                label-width="150px"
                prop="tengxun_default_dir"
              >
                <el-input
                  v-model="tengxunForm.tengxun_default_dir"
                  clearable
                  :placeholder="__('请输入默认上传目录')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('bucket name')"
                label-width="150px"
                prop="tengxun_bucket_name"
              >
                <el-input
                  v-model="tengxunForm.tengxun_bucket_name"
                  clearable
                  :placeholder="__('请输入bucket name')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="tengxunEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('自建服务器') }}</span>
          </div>
          <div>
            <el-form
              ref="selfForm"
              label-width="100px"
              :model="selfForm"
              :rules="selfRules"
              size="medium"
            >
              <el-form-item
                :label="__('服务器URL')"
                label-width="150px"
                prop="self_upload_url"
              >
                <el-input
                  v-model="selfForm.self_upload_url"
                  clearable
                  :placeholder="__('请输入服务器URL')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="secretId"
                label-width="150px"
                prop="self_upload_key"
              >
                <el-input
                  v-model="selfForm.self_upload_key"
                  clearable
                  :placeholder="__('请输入secretId')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="selfEdit"
            >
              {{ __('修改') }}
            </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 { getToken } from '@/utils/token'
import { URL } from '@/config'

export default {
  name: 'Upload',
  components: {},
  data() {
    return {
      action: URL.action,
      params: {
        authorization: '',
      },
      media_allow_exts: [
        {
          label: 'png',
          key: 0,
          value: '.png',
        },
        {
          label: 'jpg',
          key: 1,
          value: '.jpg',
        },
        {
          label: 'jpeg',
          key: 2,
          value: '.jpeg',
        },
        {
          label: 'gif',
          key: 3,
          value: '.gif',
        },
        {
          label: 'bmp',
          key: 4,
          value: '.bmp',
        },
        {
          label: 'flv',
          key: 5,
          value: '.flv',
        },
        {
          label: 'swf',
          key: 6,
          value: '.swf',
        },
        {
          label: 'mkv',
          key: 7,
          value: '.mkv',
        },
        {
          label: 'avi',
          key: 8,
          value: '.avi',
        },
        {
          label: 'rm',
          key: 9,
          value: '.rm',
        },
        {
          label: 'rmvb',
          key: 10,
          value: '.rmvb',
        },
        {
          label: 'mpeg',
          key: 11,
          value: '.mpeg',
        },
        {
          label: 'mpg',
          key: 12,
          value: '.mpg',
        },
        {
          label: 'ogg',
          key: 13,
          value: '.ogg',
        },
        {
          label: 'ogv',
          key: 14,
          value: '.ogv',
        },
        {
          label: 'mov',
          key: 15,
          value: '.mov',
        },
        {
          label: 'wmv',
          key: 16,
          value: '.wmv',
        },
        {
          label: 'mp4',
          key: 17,
          value: '.mp4',
        },
        {
          label: 'webm',
          key: 18,
          value: '.webm',
        },
        {
          label: 'mp3',
          key: 19,
          value: '.mp3',
        },
        {
          label: 'wav',
          key: 20,
          value: '.wav',
        },
        {
          label: 'mid',
          key: 21,
          value: '.mid',
        },
        {
          label: 'rar',
          key: 22,
          value: '.rar',
        },
        {
          label: 'zip',
          key: 23,
          value: '.zip',
        },
        {
          label: 'tar',
          key: 24,
          value: '.tar',
        },
        {
          label: 'gz',
          key: 25,
          value: '.gz',
        },
        {
          label: '7z',
          key: 26,
          value: '.7z',
        },
        {
          label: 'bz2',
          key: 27,
          value: '.bz2',
        },
        {
          label: 'cab',
          key: 28,
          value: '.cab',
        },
        {
          label: 'iso',
          key: 29,
          value: '.iso',
        },
        {
          label: 'doc',
          key: 30,
          value: '.doc',
        },
        {
          label: 'docx',
          key: 31,
          value: '.docx',
        },
        {
          label: 'xls',
          key: 32,
          value: '.xls',
        },
        {
          label: 'xlsx',
          key: 33,
          value: '.xlsx',
        },
        {
          label: 'ppt',
          key: 34,
          value: '.ppt',
        },
        {
          label: 'pptx',
          key: 35,
          value: '.pptx',
        },
        {
          label: 'pdf',
          key: 36,
          value: '.pdf',
        },
        {
          label: 'txt',
          key: 37,
          value: '.txt',
        },
        {
          label: 'md',
          key: 38,
          value: '.md',
        },
        {
          label: 'xml',
          key: 39,
          value: '.xml',
        },
        {
          label: 'apk',
          key: 40,
          value: '.apk',
        },
        {
          label: 'wgt',
          key: 41,
          value: '.wgt',
        },
      ],
      uploadForm: {
        image_max_filesize: null,
        default_image: null,
        image_allow_ext: [], // 图片扩展名集合
        vedio_allow_ext: [], // 音频扩展名集合
        file_allow_ext: [], // 文档扩展名集合
      },
      ossForm: {
        upload: null,
      },
      aliyunForm: {
        aliyun_regionid: null,
        aliyun_app_id: null,
        aliyun_secret_id: null,
        aliyun_endpoint: null,
        aliyun_bucket: null,
      },
      tengxunForm: {
        tengxun_app_id: null,
        tengxun_secret_id: null,
        tengxun_secret_key: null,
        tengxun_region_region: null,
        tengxun_endpoint: null,
        tengxun_default_dir: null,
        tengxun_bucket_name: null,
      },
      selfForm: {
        self_upload_url: null,
        self_upload_key: null,
      },
      ossRules: {
        upload: [
          {
            required: true,
            message: '单选框组不能为空',
            trigger: 'change',
          },
        ],
      },
      aliyunRules: {
        aliyun_regionid: [
          {
            required: true,
            message: '请输入单行文本regionid',
            trigger: 'blur',
          },
        ],
        aliyun_app_id: [
          {
            required: true,
            message: '请输入单行文本accessKeyId',
            trigger: 'blur',
          },
        ],
        aliyun_secret_id: [
          {
            required: true,
            message: '请输入secretAccessKey',
            trigger: 'blur',
          },
        ],
        aliyun_endpoint: [
          {
            required: true,
            message: 'bucket name',
            trigger: 'blur',
          },
        ],
        aliyun_bucket: [
          {
            required: true,
            message: '请输入bucket name',
            trigger: 'blur',
          },
        ],
      },
      tengxunRules: {
        tengxun_app_id: [
          {
            required: true,
            message: '请输入APP ID',
            trigger: 'blur',
          },
        ],
        tengxun_secret_id: [
          {
            required: true,
            message: '请输入secretId',
            trigger: 'blur',
          },
        ],
        tengxun_secret_key: [
          {
            required: true,
            message: '请输入secretKey',
            trigger: 'blur',
          },
        ],
        tengxun_region_region: [
          {
            required: true,
            message: '请输入region',
            trigger: 'blur',
          },
        ],
        tengxun_endpoint: [
          {
            required: true,
            message: '请输入endpoint',
            trigger: 'blur',
          },
        ],
        tengxun_default_dir: [
          {
            required: true,
            message: '请输入默认上传目录',
            trigger: 'blur',
          },
        ],
        tengxun_bucket_name: [
          {
            required: true,
            message: '请输入bucket_name',
            trigger: 'blur',
          },
        ],
      },
      selfRules: {
        self_upload_url: [
          {
            required: true,
            message: '请输入服务器URL',
            trigger: 'blur',
          },
        ],
        self_upload_key: [
          {
            required: true,
            message: '请输入secretId',
            trigger: 'blur',
          },
        ],
      },
      uploadOptions: [
        {
          label: this.__('不使用'),
          value: '1',
        },
        {
          label: this.__('阿里云'),
          value: '2',
        },
        {
          label: this.__('腾讯云'),
          value: '4',
        } /*
          {
            label: this.__('七牛云'),
            value: '3',
          },
          {
            label: this.__('自建服务器'),
            value: '5',
          },*/,
      ],
    }
  },
  created() {
    this.params.authorization = getToken()
    this.fetchData()
  },
  methods: {
    handleAvatarSuccess(name, res) {
      this.uploadForm[name] = res.data.media_url
    },
    BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    __,
    async fetchData() {
      const { data } = await getList()
      this.uploadFormInit(data)
      if (data.upload) this.ossForm.upload = data.upload
      this.aliyunFormInit(data)
      this.tengxunFormInit(data)
      this.selfFormInit(data)
    },
    selfFormInit(data) {
      this.selfForm = {
        self_upload_url: data.self_upload_url,
        self_upload_key: data.self_upload_key,
      }
    },
    tengxunFormInit(data) {
      this.tengxunForm = {
        tengxun_app_id: data.tengxun_app_id,
        tengxun_secret_id: data.tengxun_secret_id,
        tengxun_secret_key: data.tengxun_secret_key,
        tengxun_region_region: data.tengxun_region_region,
        tengxun_endpoint: data.tengxun_endpoint,
        tengxun_default_dir: data.tengxun_default_dir,
        tengxun_bucket_name: data.tengxun_bucket_name,
      }
    },
    aliyunFormInit(data) {
      this.aliyunForm = {
        aliyun_regionid: data.aliyun_regionid,
        aliyun_app_id: data.aliyun_app_id,
        aliyun_secret_id: data.aliyun_secret_id,
        aliyun_endpoint: data.aliyun_endpoint,
        aliyun_bucket: data.aliyun_bucket,
      }
    },
    uploadFormInit(data) {
      this.uploadForm.image_max_filesize = data.image_max_filesize
      this.uploadForm.default_image = data.default_image
      let that = this
      let image = data.image_allow_ext
      if (image) {
        let exts = image.split(',')
        exts.forEach((ext) => {
          this.media_allow_exts.forEach((media_ext) => {
            if (media_ext.value === ext) {
              that.uploadForm.image_allow_ext.push(media_ext.key)
            }
          })
        })
      }
      let vedio = data.vedio_allow_ext
      if (vedio) {
        let exts = vedio.split(',')
        exts.forEach((ext) => {
          this.media_allow_exts.forEach((media_ext) => {
            if (media_ext.value === ext) {
              that.uploadForm.vedio_allow_ext.push(media_ext.key)
            }
          })
        })
      }
      let file = data.file_allow_ext
      if (file) {
        let exts = file.split(',')
        exts.forEach((ext) => {
          this.media_allow_exts.forEach((media_ext) => {
            if (media_ext.value === ext) {
              that.uploadForm.file_allow_ext.push(media_ext.key)
            }
          })
        })
      }
    },
    uploadEdit() {
      this.$refs['uploadForm'].validate(async (valid) => {
        if (valid) {
          let uploadForm = Object.assign({}, this.uploadForm)
          uploadForm.image_allow_ext = this.handleMediaAllowExt(
            this.uploadForm.image_allow_ext
          )
          uploadForm.vedio_allow_ext = this.handleMediaAllowExt(
            this.uploadForm.vedio_allow_ext
          )
          uploadForm.file_allow_ext = this.handleMediaAllowExt(
            this.uploadForm.file_allow_ext
          )
          const { msg, status } = await doEdit({
            param: JSON.stringify(uploadForm),
          })

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
    handleMediaAllowExt(selectedExtKeys) {
      let exts = []
      let mediaAllowExts = this.media_allow_exts
      selectedExtKeys.forEach((key) => {
        exts.push(mediaAllowExts[key].value)
      })
      return exts.toString()
    },
    ossEdit() {
      this.$refs['ossForm'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit({
            param: JSON.stringify(this.ossForm),
          })

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
    aliyunEdit() {
      this.$refs['aliyunForm'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit({
            param: JSON.stringify(this.aliyunForm),
          })

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
    tengxunEdit() {
      this.$refs['tengxunForm'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit({
            param: JSON.stringify(this.tengxunForm),
          })

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
    selfEdit() {
      this.$refs['selfForm'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit({
            param: JSON.stringify(this.selfForm),
          })

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 255px;
  height: 256px;
  line-height: 256px;
  text-align: center;
}

.image_font {
  color: #979898;
  font-size: 14px;
}
</style>
