<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: 15}, sm: {span: 17} }">
        <a-select
          v-model="campaignId"
          showSearch
          placeholder="选择广告主模板"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="投放范围"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
        <a-radio-group v-model="deliveryRange">
          <a-radio-button value="default">默认</a-radio-button>
          <a-radio-button value="csj">穿山甲</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="选择用户定向模板"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
        <a-select
          v-model="userorentationId"
          showSearch
          placeholder="选择用户定向模板"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="1">默认</a-select-option>
          <!--<a-select-option v-for="userorentation in userorentationList" :key="userorentation.id" :value="userorentation.id">{{userorentation.name}}</a-select-option>-->
        </a-select>
      </a-form-item>

      <a-form-item
        label="选择预算与出价模板"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
        <a-select
          v-model="budgetId"
          showSearch
          placeholder="选择预算与出价模板"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option v-for="budget in budgetList" :key="budget.id" :value="budget.id">{{budget.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="选择投放目标模板"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
        <a-select
          v-model="deliverytargetId"
          showSearch
          placeholder="选择投放目标模板"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option v-for="deliverytarget in deliverytargetList" :key="deliverytarget.id" :value="deliverytarget.id">{{deliverytarget.name}}</a-select-option>
        </a-select>
      </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="templateName"></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 {
        headers: {
          authorization: 'authorization-text',
        },
        templateName:'',
        loading: false,
        campaignList: {},
        deliverytargetList:{},
        userorentationList:{},
        budgetList:{},
        deliveryRange:'default',
        campaignId:null,
        deliverytargetId:null,
        budgetId:null,
        userorentationId:null,
        form: this.$form.createForm(this),
        url: {
          dictListUrl: 'toutiao/dictitem/list',
          campaignListUrl:'/template/campaign/data/list',
          budgetTemplateListUrl:'/template/budget/list',
          deliverytargetTemplateListUrl:'/template/deliverytarget/list',
          userorentationTemplateListUrl:'/template/userorentation/list',
          insertUrl:'/template/advertiserplan/insert'
        }
      }
    },
    methods: {
      moment,
      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
      },
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);

            let params = {};
            params.campaignTemplateId = this.campaignId;
            params.deliveryRange = this.deliveryRange;
            params.userOrentationTemplateId = this.userorentationId;
            params.budgetTemplateId = this.budgetId;
            params.deliveryTargetTemplateId = this.deliverytargetId;
            params.name = this.templateName;

            console.log(params)
            postAction(this.url.insertUrl,params).then((res)=>{
              console.log(res)
              if(res.success){
                alert("预算模板创建成功");
              }
            });

          }
        })
      },
      onChange(value) {
        console.log(value)
      }
    },
    created: function () {
      let params = {};
      params.pageSize = '1000';
      postAction(this.url.campaignListUrl, params).then((res) => {
        if (res.success) {
          this.campaignList = res.result.records
        }
      });

      params = {};
      params.pageSize = '1000';
      postAction(this.url.budgetTemplateListUrl, params).then((res) => {
        if (res.success) {
          this.budgetList = res.result.records
        }
      });

      params = {};
      params.pageSize = '1000';
      postAction(this.url.deliverytargetTemplateListUrl, params).then((res) => {
        if (res.success) {
          this.deliverytargetList = res.result.records
        }
      });

      params = {};
      params.pageSize = '1000';
      postAction(this.url.userorentationTemplateListUrl, params).then((res) => {
        if (res.success) {
          this.userorentationList = res.result.records
        }
      });
    }
  }
</script>