<template>
  <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-select
          v-model="accountId"
          showSearch
          showArrow
          allowClear
          placeholder="选择需创建的快手账户"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="userAccount in accountList" :key="userAccount.accountId"
                           :value="userAccount.accountId">{{userAccount.authName}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <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 v-model="downloadUrl" placeholder="请填写应用链接"/>
          </a-form-item>


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

          <a-form-item
            label="应用名称"
            :labelCol="{xs: {span: 24},sm: {span: 5}}"
            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
            <a-input v-model="appName" placeholder="请填写应用名称"/>
          </a-form-item>
          <a-form-item
            label="应用标记"
            :labelCol="{xs: {span: 24},sm: {span: 5}}"
            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
            <a-input v-model="appVersion" placeholder="请填写应用标记，必填且不可重复，如快手-5.6.1.66"/>
          </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>
</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',
        }
      }
    },
    methods: {
      ...mapGetters(["nickname", "avatar", "userInfo"]),
      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.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.accountId = this.accountId;
            if (this.imageUrl != '') {
              params.imageUrl = this.imageUrl;
            }
            if (this.platform == '2') {
              params.url = this.downloadUrl;
            } else {
              if (this.uploadType == '1') {
                if (this.file != '') {
                  params.file = this.file;
                }
              } else if (this.uploadType == '2') {
                params.url = this.downloadUrl;
              }
            }
            params.platform = this.platform;
            params.uploadType = this.uploadType;
            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) {
                alert("创建应用成功");
              } 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.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.accountId = this.accountId;
            params.appType = this.appType;
            params.platform = this.platform;
            params.uploadType = '2';
            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("广告组模板创建成功");
              } else {
                alert(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>
