<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="推广目的"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group @change="typeChange" v-model="type" buttonStyle="solid">
          <!-- <a-radio-button
            v-for="purpose in typeList"
            :key="purpose.itemText"
            :value="purpose.itemValue"
          >{{purpose.itemText}}</a-radio-button> -->
          <a-radio-button value="2">提升应用安装</a-radio-button>
          <a-radio-button value="3">获取电商下单</a-radio-button>
          <a-radio-button value="4">推广品牌活动</a-radio-button>
          <a-radio-button value="5">收集销售线索</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="计划名称"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input v-model="campaignName"></a-input>
      </a-form-item>

      <a-form-item
        label="单日预算"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
          <a-radio-button value="UNLIMITED">不限</a-radio-button>
          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="预算金额"
        v-if="showBudgetDaily"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input
          v-decorator="[
            'dayBudget',
            { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] }
          ]"
          placeholder="不小于500，不超过100000000，仅支持输入自然数"
          type="number"
          style="width: 70%"
        ></a-input
        >元
      </a-form-item>

      <!-- <a-form-item
        v-if="showApp"
        label="目标应用"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-model="appId"
          showSearch
          allowClear
          placeholder="选择应用目标"
          optionFilterProp="children"
          style="width: 600px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id"
            >{{ appModel.appName }}&#12288;&nbsp;&#12288;{{ appModel.appType }}&#12288;&#12288;
            {{ appModel.appVersion }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="showUrlType"
        label="转化类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group v-model="urlType">
          <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
        v-if="showChannelType"
        label="转化类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group v-model="channelType">
          <a-radio-button value="1">填写链接</a-radio-button>
          <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        v-if="showRedirect"
        label="链接地址"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input v-model="redirectUrl"></a-input>
      </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-card>
</template>

<script>
import { deleteAction, postAction, getAction } from '@/api/manage'
import moment from 'moment'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'BaseForm',
  data() {
    return {
      promotionName: '',
      type: '2',
      typeList: {},
      appList: {},
      showBudgetDaily: false,
      campaignName: '提升应用安装_' + moment(new Date()),
      campaignBudget: 'UNLIMITED',
      dayBudget: 0,
      appId: '0', //应用目标
      showApp: true,
      redirectUrl: '', // 链接地址
      showRedirect: false,
      urlType: '1',
      showUrlType: false,
      channelType: '1',
      showChannelType: false,

      form: this.$form.createForm(this),
      url: {
        dictListUrl: 'toutiao/dictitem/list',
        appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
        insertTemplateUrl: '/kuaishou/batch/campaignCreate'
      }
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    handleConfirmValue(rule, value, callback) {
      if (value == '' || value < 500 || value >= 100000000) {
        callback('请输入正确预算金额')
      }
      callback()
    },

    handleConfirmAppId(rule, value, callback) {
      if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
        callback('请选择目标应用')
      }
      callback()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let params = {}
          params.type = this.type
          //   params.campaignBudget = this.campaignBudget
          params.dayBudget = this.campaignBudget == 'UNLIMITED' ? 0 : values.dayBudget
          params.campaignName = this.campaignName
          params.accountId = localStorage.getItem('accountId')
          console.log(params)

          postAction(this.url.insertTemplateUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success('创建成功')
              this.nextStep(res.result)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    onChange(value) {
      console.log(value)
    },
    showBudgetStatusChange() {
      if (this.campaignBudget == 'UNLIMITED') {
        this.showBudgetDaily = false
        this.dayBudget = 0
      } else {
        this.showBudgetDaily = true
        this.dayBudget = ''
      }
    },
    typeChange() {
      if (this.type == 2) {
        this.promotionName = '提升应用安装'
        this.showApp = true
        this.showRedirect = false
        this.showUrlType = false
        this.showChannelType = false
      }
      if (this.type == 3) {
        this.promotionName = '获取电商下单'
        this.showApp = false
        this.showRedirect = true
        this.showUrlType = true
        this.showChannelType = false
      }
      if (this.type == 4) {
        this.promotionName = '推广品牌活动'
        this.showApp = false
        this.showRedirect = true
        this.showUrlType = false
        this.showChannelType = false
      }
      if (this.type == 5) {
        this.promotionName = '收集销售线索'
        this.showApp = false
        this.showRedirect = true
        this.showUrlType = false
        this.showChannelType = true
      }
      this.campaignName = this.promotionName + '_' + moment(new Date())
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    nextStep() {
      this.$emit('nextStep')
    }
  },
  activated: function() {
    // //出价方式
    // let params = {}
    // params.dictId = '181afbae847dd3bc7e27795d8958956'
    // params.pageSize = '1000'
    // getAction(this.url.dictListUrl, params).then(res => {
    //   if (res.success) {
    //     this.typeList = res.result.records
    //   }
    // })
    // // 应用列表
    // //出价方式
    // let params2 = {}
    // params2.loginId = this.userInfo().id
    // params2.pageSize = '1000'
    // getAction(this.url.appListUrl, params).then(res => {
    //   if (res.success) {
    //     this.appList = res.result.records
    //     console.log(this.appList)
    //   }
    // })
  }
}
</script>
