<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="promotionPurposeChange" v-model="promotionPurpose">
          <a-radio-button v-for="purpose in promotionPurposeList" :key="purpose.itemText" :value="purpose.itemValue">
            {{purpose.itemText}}
          </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-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-model="budgetDaily" style="width: 70%"></a-input>元
      </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
        :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"
  export default {
    name: 'BaseForm',
    data() {
      return {
        promotionPurpose:'APP',
        promotionPurposeList: {},
        showBudgetDaily:false,
        campaignName:'APP_'+moment(new Date()),
        campaignBudget:'UNLIMITED',
        budgetDaily:0,
        form: this.$form.createForm(this),
        url: {
          dictListUrl: 'toutiao/dictitem/list',
          insertTemplateUrl:'toutiao/campaign/template/insert'
        }
      }
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.promotionPurpose = this.promotionPurpose;
            params.campaignBudget = this.campaignBudget;
            params.budgetDaily = this.budgetDaily;
            params.campaignName = this.campaignName;
            console.log(params)
            postAction(this.url.insertTemplateUrl,params).then((res)=>{
              console.log(res)
              if(res.success){
                alert("广告组模板创建成功");
              }
            });
          }
        })
      },
      onChange(value) {
        console.log(value);
      },
      showBudgetStatusChange(){
        if(this.campaignBudget == 'UNLIMITED'){
          this.showBudgetDaily = false;
        }else{
          this.showBudgetDaily = true;
        }
      },
      promotionPurposeChange(){
        this.campaignName = this.promotionPurpose +'_'+moment(new Date());
      }
    },
    created: function () {
      //出价方式
      let params = {};
      params.dictId = '181afbae847dd3bc7e27795d89538c9c';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.promotionPurposeList = res.result.records
        }
      });

    }
  }
</script>
