<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭">
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form">
      <a-form-item
        label="推广目的"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select v-model="promotionPurpose"  style="width: 300px" @change="promotionPurposeChange">
          <a-select-option v-for="purpose in promotionPurposeList" :key="purpose.itemText" :value="purpose.itemValue">{{purpose.itemText}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="广告组预算"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
          <a-radio-button value="BUDGET_MODE_INFINITE">不限</a-radio-button>
          <a-radio-button value="BUDGET_MODE_DAY">按预算</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="日预算"
        v-if="showBudgetDaily"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input v-model="budgetDaily" style="width: 70%"></a-input>元
      </a-form-item>

      <a-form-item
        label="广告组名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input v-model="campaignName"></a-input>
      </a-form-item>

      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
      </a-form-item>
    </a-form>
  </a-card>
  </a-modal>
</template>

<script>
  import {deleteAction, postAction, getAction,httpAction} from '@/api/manage'
  import moment from "moment"
  export default {
    name: 'ByteDanceCampaignTemplateModal',
    data() {
      return {
        id:null,
        confirmLoading: false,
        title: "操作",
        visible: false,
        model: {},
        promotionPurpose:'APP',
        promotionPurposeList: {},
        showBudgetDaily:false,
        campaignName:'应用推广_'+moment(new Date()),
        campaignBudget:'BUDGET_MODE_INFINITE',
        budgetDaily:0,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        form: this.$form.createForm(this),
        url: {
          dictListUrl: 'toutiao/dictitem/list',
          insertTemplateUrl:'template/campaign/insert'
        }
      }
    },
    methods: {
      add() {
        this.edit({
          id:null,
          confirmLoading: false,
          title: "操作",
          visible: false,
          promotionPurpose:'APP',
          promotionPurposeList: {},
          showBudgetDaily:false,
          campaignName:'应用推广_'+moment(new Date()),
          campaignBudget:'BUDGET_MODE_INFINITE',
          budgetDaily:0
        });
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.id=record.id;
        this.name=record.name;
        this.promotionPurpose = record.promotionPurpose;
        this.campaignBudget = record.campaignBudget;
        this.budgetDaily = record.budgetDaily;
        this.campaignName = record.campaignName;
        if(this.campaignBudget == 'BUDGET_MODE_INFINITE'){
          this.showBudgetDaily = false;
        }else{
          this.showBudgetDaily = true;
        }
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.id = this.id;
            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){
                if(null!=this.id){
                  this.$message.success("广告组模板修改成功");
                }else{
                  this.$message.success("广告组模板创建成功");
                }
                this.$emit('ok');
                this.close();
              }else{
                this.$message.error(res.message);
              }
            });
          }
        })
      },
      onChange(value) {
        console.log(value);
      },
      showBudgetStatusChange(){
        if(this.campaignBudget == 'BUDGET_MODE_INFINITE'){
          this.showBudgetDaily = false;
        }else{
          this.showBudgetDaily = true;
        }
      },
      handleCancel() {
        this.close()
      },
      promotionPurposeChange(value){
        console.log(value);
        if(this.promotionPurpose == 'APP'){
          this.campaignName = '应用推广_'+moment(new Date());
        }
        if(this.promotionPurpose == 'LINK'){
          this.campaignName = '销售线索收集_'+moment(new Date());
        }
        if(this.promotionPurpose == 'DPA'){
          this.campaignName = '产品目录推广_'+moment(new Date());
        }
        if(this.promotionPurpose == 'LINK'){
          this.campaignName = '销售线索收集_'+moment(new Date());
        }
        if(this.promotionPurpose == 'GOODS'){
          this.campaignName = '商品推广_'+moment(new Date());
        }
        if(this.promotionPurpose == 'STORE'){
          this.campaignName = '门店推广_'+moment(new Date());
        }
        if(this.promotionPurpose == 'AWEME'){
          this.campaignName = '抖音号推广_'+moment(new Date());
        }
        if(this.promotionPurpose == 'SHOP'){
          this.campaignName = '电商店铺推广_'+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>
