<template>
  <div>
    <a-modal
      title="添加应用"
      :visible="application"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width="600px"
    >
      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <a-form :form="form">
          <a-form-item
            label="设备类型"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group v-model="appType" @change="changePlatform">
              <a-radio-button value="android">安卓</a-radio-button>
              <a-radio-button value="ios">IOS</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <!-- <a-form-item v-if="appType == 'android'"> -->
          <a-form-item
            label="推广类型"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group v-model="platform" @change="changeShowUploadType">
              <a-radio value="1">应用下载</a-radio>
              <a-radio value="2">网页游戏</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="上传应用"
            v-if="appType == 'android' && platform == '1'"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group v-model="uploadType" @change="changeShowUpload">
              <a-radio-button value="1">本地上传</a-radio-button>
              <a-radio-button value="2">填写链接</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="上传文件"
            v-if="appType == 'android' && uploadType == '1' && platform == '1'"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <upload-to-ali
              v-model="file"
              :customDomain="customDomain"
              preview
              :region="region"
              :bucket="bucket"
              :accept="acceptVideo"
              :max="10"
              :size="1024000"
              :accessKeyId="accessKeyId"
              :accessKeySecret="accessKeySecret"
            ></upload-to-ali>
          </a-form-item>

          <a-form-item
            v-if="uploadType == '2' || appType == 'ios' || platform == '2'"
            label="下载链接"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-input
              placeholder="请填写应用链接"
              v-decorator="[
                'downloadUrl',
                {
                  rules: [{ required: true, validator: handleConfirmValue }]
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="应用包名"
            v-if="appType == 'android'"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-input
              v-decorator="[
                'packageName',
                {
                  rules: [{ required: true, message: '请填写正确的应用包名称' }]
                }
              ]"
              placeholder="请填写包名称，如com.smile.gifmaker"
            />
          </a-form-item>

          <a-form-item
            label="应用名称"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-input
              v-decorator="[
                'appName',
                {
                  rules: [{ required: true, message: '请填写应用名称' }]
                }
              ]"
              placeholder="请填写应用名称"
            />
          </a-form-item>

          <a-form-item
            v-if="appType == 'android'"
            label="上传图标"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
          >
            <upload-to-ali
              v-model="imageUrl"
              :customDomain="customDomain"
              preview
              :region="region"
              :bucket="bucket"
              :accept="acceptVideo"
              :max="10"
              :size="1024000"
              :accessKeyId="accessKeyId"
              :accessKeySecret="accessKeySecret"
            ></upload-to-ali>
            <span>请上传png/jpg/jpeg图片，尺寸450*450，小于100KB</span>
          </a-form-item>

          <a-form-item
            label="应用标记"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-input
              v-decorator="[
                'appVersion',
                {
                  rules: [{ required: true, message: '请填写应用标记' }]
                }
              ]"
              placeholder="请填写应用标记，必填且不可重复，如快手-5.6.1.66"
            />
          </a-form-item>
          <!-- <a-form-item>
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button htmlType="submit" type="primary">提交</a-button>
              <a-button style="margin-left: 8px">保存</a-button>
            </a-form-item>
          </a-form-item> -->
        </a-form>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { deleteAction, postAction, getAction } from '@/api/manage'
import UploadToAli from '@femessage/upload-to-ali'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'BaseForm',
  components: {
    UploadToAli
  },
  data() {
    return {
      accountId: '',
      accountList: {},
      appType: 'android', //设备类型
      platform: '1', //应用类型   ： 1 Android 应用下载，2： Android 网页游戏，3： iOS 应用下载， 4：iOS 网页游戏
      uploadType: '1', //上传类型 1 本地上传 2 填写链接
      appVersion: '', //应用标记
      appName: '', // 应用名称
      packageName: '', //应用包名
      file: '', // 上传文件
      imageUrl: '', // 上传图标链接链接
      downloadUrl: '', //下载链接
      showUploadFile: true,
      showDownLoad: false,
      showUpload: true,
      showAndroid: true,
      showIOS: false,
      customDomain: '',
      acceptVideo: '/*.apk,/*.png,/*.jpg,/*.jpeg,/*.mp4',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      form: this.$form.createForm(this),
      url: {
        insertTemplateUrl: '/kuaishou/kuaiShouCreateAppTemplate/insert',
        userAllocationList: '/ctop/userAllocation/list'
      },
      application: false,
      confirmLoading: false
    }
  },
  methods: {
    handleOk() {
      this.handleSubmit()
    },
    handleCancel() {
      this.form.resetFields()
      this.imageUrl = ''
      this.file = ''
      this.platform = '1'
      this.application = false
    },
    showApplication() {
      this.application = true
    },
    handleConfirmValue(rule, value, callback) {
      if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
        callback()
      } else {
        callback('链接不能为空且开头为http://或https://')
      }
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    changePlatform() {
      this.form.resetFields()
      if (this.appType == 'android') {
        this.showAndroid = true
        this.showIOS = false
        this.platform = '1'
      } else {
        this.showAndroid = false
        this.showIOS = true
        this.showDownLoad = true
        this.platform = '1'
      }
    },
    changeShowUpload() {
      this.form.resetFields()
      if (this.uploadType == '1') {
        this.showUploadFile = true
        this.showDownLoad = false
      } else {
        this.showUploadFile = false
        this.showDownLoad = true
      }
    },
    changeShowUploadType() {
      this.form.resetFields()
      if (this.platform == '2') {
        this.showUpload = false
        this.showUploadFile = false
        this.showDownLoad = true
        this.uploadType = '1'
      } else {
        this.showUpload = true
        this.showUploadFile = true
        this.showDownLoad = false
      }
    },

    handleSubmit() {
      //   console.log('设备类型：' + this.appType)
      //   console.log('应用类型：' + this.platform)
      //   console.log('上传类型：' + this.uploadType)
      //   console.log('应用标记：' + this.appVersion)
      //   console.log('应用名称：' + this.appName)
      //   console.log('包名称：' + this.packageName)
      //   console.log('文件地址：' + this.file)
      //   console.log('图片地址：' + this.imageUrl)
      //   e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log('Received values of form: ', values)
        if (!err) {
          let params = {}
          params.accountId = localStorage.getItem('accountId')
          if (this.appType == 'android') {
            if (this.imageUrl != '') {
              params.imageUrl = this.imageUrl
            }
            if (this.platform == '2') {
              params.url = values.downloadUrl
            } else {
              if (this.uploadType == '1') {
                if (this.file != '') {
                  params.file = this.file
                }
              } else if (this.uploadType == '2') {
                params.url = values.downloadUrl
              }
            }
            params.platform = this.platform
            params.uploadType = values.uploadType
            params.appType = 'android'
            params.packageName = values.packageName
            params.appName = values.appName
            params.appVersion = values.appVersion
            params.loginId = this.userInfo().id
          } else {
            params.appType = 'ios'
            params.platform = this.platform
            params.uploadType = '2'
            params.url = values.downloadUrl
            params.appName = values.appName
            params.appVersion = values.appVersion
            params.loginId = this.userInfo().id
          }

          console.log(params)
          postAction(this.url.insertTemplateUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success('创建成功')
              this.handleCancel()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },

    onChange(value) {
      console.log(value)
    }
  },
  created: function() {
    let params = {}
    params.pageSize = '1000'
    params.mediaId = '2'
    params.userId = this.userInfo().id
    getAction(this.url.userAllocationList, params).then(res => {
      if (res.success) {
        this.accountList = res.result.records
      }
    })
  }
}
</script>
