<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <!-- <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="app类型 安卓 ios">
          <a-input placeholder="请输入app类型 安卓 ios" v-decorator="['appType', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用类型   ： 1 Android 应用下载，2： Android 网页游戏，3： iOS 应用下载， 4：iOS 网页游戏">
          <a-input placeholder="请输入应用类型   ： 1 Android 应用下载，2： Android 网页游戏，3： iOS 应用下载， 4：iOS 网页游戏" v-decorator="['platform', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用标记">
          <a-input placeholder="请输入应用标记" v-decorator="['appVersion', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用名称">
          <a-input placeholder="请输入应用名称" v-decorator="['appName', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用包名">
          <a-input placeholder="请输入应用包名" v-decorator="['packageName', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="上传文件到服务器返回地址">
          <a-input placeholder="请输入上传文件到服务器返回地址" v-decorator="['file', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="上传图片到服务器返回地址">
          <a-input placeholder="请输入上传图片到服务器返回地址" v-decorator="['imageUrl', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="输入应用下载地址">
          <a-input placeholder="请输入输入应用下载地址" v-decorator="['url', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="登录人id">
          <a-input placeholder="请输入登录人id" v-decorator="['loginId', {}]" />
        </a-form-item>
		
      </a-form>
    </a-spin>-->
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-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="showAndroid">
          <a-form @submit="handleSubmit" :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="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="showUpload"
              :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="showUploadFile"
              :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="showDownLoad"
              label="下载链接"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用链接" v-model="downloadUrl" />
            </a-form-item>

            <a-form-item
              label="应用包名"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写包名称，如com.smile.gifmaker" v-model="packageName" />
            </a-form-item>

            <a-form-item
              label="应用名称"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用名称" v-model="appName" />
            </a-form-item>

            <a-form-item
              label="上传图标"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <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>
            </a-form-item>

            <a-form-item
              label="应用标记"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用标记，必填且不可重复，如快手-5.6.1.66" v-model="appVersion" />
            </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>
        </a-form-item>

        <a-form-item v-if="showIOS">
          <a-form @submit="submitIOS" :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="platform">
                <a-radio value="3">应用下载</a-radio>
                <a-radio value="4">网页游戏</a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item
              v-if="showDownLoad"
              label="填写链接"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用下载地址" v-model="downloadUrl" />
            </a-form-item>

            <a-form-item
              label="应用名称"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用名称" v-model="appName" />
            </a-form-item>
            <a-form-item
              label="应用标记"
              :labelCol="{xs: {span: 24},sm: {span: 5}}"
              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
            >
              <a-input placeholder="请填写应用标记，必填且不可重复，如快手-5.6.1.66" v-model="appVersion" />
            </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>
        </a-form-item>
      </a-form>
    </a-card>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

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

export default {
  name: 'KuaiShouCreateAppTemplateModal',
  components: {
    UploadToAli
  },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/kuaishou/kuaiShouCreateAppTemplate/add',
        edit: '/kuaishou/kuaiShouCreateAppTemplate/edit'
      },

      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'
      }
    }
  },
  created() {},
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    add(sign) {
      this.edit({})
      this.appType = 'android'
    },
    edit(record, sign) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.appType = record.appType
      this.platform = record.platform
      this.appVersion = record.appVersion
      this.appName = record.appName
      this.packageName = record.packageName
      this.file = record.file
      this.imageUrl = record.imageUrl
      this.url = record.url
      this.loginId = record.loginId
        // this.$nextTick(() => {
        //   this.form.setFieldsValue(
        //     pick(
        //       (this.appType = record.appType),
        //       (this.platform = record.platform),
        //       (this.appVersion = record.appVersion),
        //       (this.appName = record.appName),
        //       (this.packageName = record.packageName),
        //       (this.file = record.file),
        //       (this.imageUrl = record.imageUrl),
        //       (this.url = record.url),
        //       (this.loginId = record.loginId),
        //       this.model,
        //       // 'appType',
        //       // 'platform',
        //       // 'appVersion',
        //       // 'appName',
        //       // 'packageName',
        //       // 'file',
        //       // 'imageUrl',
        //       // 'url',
        //       // 'loginId'
        //     )
        //   )
        // })
      if (sign == 'add') {
        this.appType = 'android'
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化

          console.log(formData)
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    changePlatform() {
      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 = '3'
      }
    },
    changeShowUpload() {
      if (this.uploadType == '1') {
        this.showUploadFile = true
        this.showDownLoad = false
      } else {
        this.showUploadFile = false
        this.showDownLoad = true
      }
    },
    changeShowUploadType() {
      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(e) {
      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.visible = false
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let params = {}
          if (this.uploadType == '1') {
            if (this.file != '') {
              params.file = this.file
            }
          } else if (this.uploadType == '2') {
            params.url = this.downloadUrl
          }
          if (this.imageUrl != '') {
            params.imageUrl = this.imageUrl
          }
          params.platform = this.platform
          params.appType = this.appType
          params.packageName = this.packageName
          params.appName = this.appName
          params.appVersion = this.appVersion
          params.loginId = this.userInfo().id
          console.log(params)
          postAction(this.url.insertTemplateUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              this.loadData()
              alert('创建应用成功')
              //   location.reload();
            } else {
              alert(res.message)
            }
          })
        }
      })
    },

    submitIOS(e) {
      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.visible = false
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let params = {}
          params.appType = this.appType
          params.platform = this.platform
          params.url = this.downloadUrl
          params.appName = this.appName
          params.appVersion = this.appVersion
          params.loginId = this.userInfo().id
          console.log(params)
          postAction(this.url.insertTemplateUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              alert('广告组模板创建成功')
              //   location.reload();
            } else {
              alert(res.message)
            }
          })
        }
      })
    },

    onChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
</style>