<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="投放目标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group @change="onChangeDeliveryTarget" v-model="deliveryTarget">
            <a-radio-button value="a">转化量</a-radio-button>
            <a-radio-button value="b">点击量</a-radio-button>
            <a-radio-button value="c">展示量</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="下载方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group @change="onChangeDownloadType" v-model="downloadType">
            <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
            <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="下载链接"
          v-if="showDownloadUrl"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入网址或从之前网站选择" v-model="downloadUrl"/>
        </a-form-item>

        <a-form-item
          v-if="showExternalUrl"
          label="链接地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入网址或从之前网站选择" v-model="externalUrl"/>
        </a-form-item>

        <a-form-item
          v-if="showConvertTarget"
          label="转化目标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入网址或从之前网站选择" v-model="convertTarget"/>
        </a-form-item>

        <a-form-item
          label="应用包名"
          v-if="showPackageName"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-model="packageName"></a-input>
        </a-form-item>

        <a-form-item
          label="直达链接"
          v-if="showOpenUrlStatus"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group @change="onChangeOpenUrlStatus" v-model="openUrlStatus">
            <a-radio-button value="disabled">不启用</a-radio-button>
            <a-radio-button value="enabled">启用</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="直达链接生成方式"
          v-if="showOpenUrlCreateMode&&showOpenUrlStatus"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-model="openUrlCreateMode">
            <a-radio-button value="auto_create" disabled>自动生成</a-radio-button>
            <a-radio-button value="hand_create">手动生成</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="跳转app链接"
          v-if="showToAppUrl&&showOpenUrlStatus"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-model="redirectUrl"></a-input>
        </a-form-item>
        <a-form-item
          label="模板名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-model="templateName"></a-input>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {deleteAction, postAction, getAction} from '@/api/manage'
  import $ from 'jquery'
  import moment from 'moment';
  export default {
    name: 'BytedanceDeliveryTargetTemplateModal',
    data() {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        templateName:'',
        confirmLoading: false,
        form: this.$form.createForm(this),
        deliveryTarget:'a',
        packageName:'',
        downloadType:'DOWNLOAD_URL',
        downloadUrl:'',
        externalUrl:'',
        convertTarget:'',
        showDownloadUrl:true,
        showExternalUrl:false,
        showConvertTarget:true,
        showPackageName:true,
        showOpenUrlStatus:false,
        openUrlStatus:'disabled',
        redirectUrl:'',
        showToAppUrl:false,
        showOpenUrlCreateMode:false,
        openUrlCreateMode:'hand_create',
        url: {
          dictListUrl: 'toutiao/dictitem/list',
          insertUrl:'template/deliverytarget/insert'
        }
      }
    },
    methods: {
      // handler
      handleCancel () {
        this.close()
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'accountId','advertiserId','deliveryTarget','downloadType','downloadUrl','externalUrl','convertTarget','packageName','openUrlStatus','openUrlCreateMode','redirectUrl','status'))
          //时间格式化
        });

      },
      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.deliveryTarget = this.deliveryTarget;
            params.downloadType = this.downloadType;
            params.downloadUrl = this.downloadUrl;
            params.externalUrl = this.externalUrl;
            params.convertTarget = this.convertTarget;
            params.packageName = this.packageName;
            params.openUrlStatus = this.openUrlStatus;
            params.openUrlCreateMode = this.openUrlCreateMode;
            params.redirectUrl = this.redirectUrl;
            console.log(params)
            postAction(this.url.insertUrl,params).then((res)=>{
              console.log(res)
              if(res.success){
                alert("投放目标-模板创建成功");
              }
            });
          }
        })
      },
      onChange(value) {
        console.log(value);
      },
      onChangeDownloadType(value){
        console.log(value);
        if(this.downloadType == 'DOWNLOAD_URL'){
          this.showDownloadUrl = true;
          this.showExternalUrl = false;
          this.showPackageName=true;
          this.showOpenUrlStatus=false;

        }else{
          this.showDownloadUrl = false;
          this.showExternalUrl = true;
          this.showPackageName=false;
          this.showOpenUrlStatus=true;
        }
      },
      onChangeDeliveryTarget(value){
        console.log(value);
        if(this.deliveryTarget == 'a'){
          this.showConvertTarget = true;
        }else {
          this.showConvertTarget = false;
        }
      },
      onChangeOpenUrlStatus(){
        if(this.openUrlStatus=='disabled'){
          this.showOpenUrlCreateMode = false;
          this.showToAppUrl = false;
        }else{
          this.showOpenUrlCreateMode = true;
          this.showToAppUrl = true;
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>