<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="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="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <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="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input placeholder="请输入网址或从之前网站选择"/>
      </a-form-item>

      <a-form-item
        v-if="showExternalUrl"
        label="链接地址"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input placeholder="请输入网址或从之前网站选择"/>
      </a-form-item>

      <a-form-item
        v-if="showConvertTarget"
        label="转化目标"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input placeholder="请输入网址或从之前网站选择"/>
      </a-form-item>

      <a-form-item
        label="应用包名"
        v-if="showPackageName"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input v-model="packageName"></a-input>
      </a-form-item>

      <a-form-item
        label="直达链接"
        v-if="showOpenUrlStatus"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <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="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <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="{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>
  export default {
    name: 'BaseForm',
    data() {
      return {
        deliveryTarget:'a',
        packageName:'',
        downloadType:'DOWNLOAD_URL',
        showDownloadUrl:true,
        showExternalUrl:false,
        showConvertTarget:true,
        showPackageName:true,
        showOpenUrlStatus:false,
        openUrlStatus:'disabled',
        redirectUrl:'',
        showToAppUrl:false,
        showOpenUrlCreateMode:false,
        openUrlCreateMode:'hand_create',
        // form
        form: this.$form.createForm(this),

      }
    },
    methods: {

      // handler
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            // eslint-disable-next-line no-console
            console.log('Received values of form: ', values)
          }
        })
      },
      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>