<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 v-model="deliveryRange">
            <a-radio-button value="DEFAULT">默认</a-radio-button>
            <a-radio-button value="UNION">穿山甲</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="投放目标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group @change="onChangeDeliveryTarget" v-model="deliveryTarget">
            <a-radio-button value="CONVERSION">转化量</a-radio-button>
            <a-radio-button value="CLICK">点击量</a-radio-button>
            <a-radio-button value="VIEW">展示量</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
          v-if="showDownloadMode"
          label="下载类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group @change="onChangeDownloadMode" v-model="downloadMode">
            <a-radio-button value="android">安卓下载</a-radio-button>
            <a-radio-button value="IOS">IOS下载</a-radio-button>
          </a-radio-group>
        </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
          label="下载链接"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select
            v-model="urlId"
            style="width: 300px">
            <a-select-option v-for="url in urlList" :key="url.id" :value="url.id">{{url.name}}</a-select-option>
          </a-select>
        </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="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="name"></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,
        urlList:[],
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this),
        id:null,
        name:'',
        urlId:null,
        convertApiIdList:{},
        downloadMode:'android',
        confirmLoading: false,
        showDownloadMode:true,
        deliveryRange:'DEFAULT',
        deliveryTarget:'CONVERSION',
        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',
          urllist: '/ctop/bytedanceUrlInfo/list'
        }
      }
    },
    created: function () {
      this.refreshUrl("android");
    },
    methods: {
      refreshUrl(value){
        let params = {};
        params.pageSize = '1000';
        params.type = value;
        getAction(this.url.urllist, params).then((res) => {
          if (res.success) {
            this.urlList = res.result.records
          }
        });
      },
      // handler
      handleCancel () {
        this.close()
      },
      onChangeDownloadMode(){
        this.urlId = null;
        this.refreshUrl(this.downloadMode);
      },
      add () {
        this.edit({
          id:null,
          urlId:null,
          downloadMode:'android',
          showDownloadMode:true,
          name:'',
          urlList:[],
          confirmLoading: false,
          deliveryRange:'DEFAULT',
          deliveryTarget:'CONVERSION',
          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'
        });
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.id = record.id;
        this.deliveryTarget = record.deliveryTarget;
        this.downloadType = record.downloadType;
        this.downloadUrl = record.downloadUrl;
        this.externalUrl = record.externalUrl;
        this.convertTarget = record.convertTarget;
        this.packageName = record.packageName;
        this.openUrlStatus = record.openUrlStatus;
        this.openUrlCreateMode = record.openUrlCreateMode;
        this.redirectUrl = record.redirectUrl;
        this.name = record.name;
        this.deliveryRange = record.deliveryRange;
        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;
        }
        if(this.deliveryTarget == 'a'){
          this.showConvertTarget = true;
        }else {
          this.showConvertTarget = false;
        }
        if(this.openUrlStatus=='disabled'){
          this.showOpenUrlCreateMode = false;
          this.showToAppUrl = false;
        }else{
          this.showOpenUrlCreateMode = true;
          this.showToAppUrl = 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.deliveryTarget = this.deliveryTarget;
            params.downloadType = this.downloadType;
            params.downloadMode = this.downloadMode;
            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;
            params.name = this.name;
            params.deliveryRange = this.deliveryRange;
            params.urlId = this.urlId;
            console.log(params);
            postAction(this.url.insertUrl,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);
      },
      onChangeDownloadType(value){
        console.log(value);
        this.urlId = null;
        if(this.downloadType == 'DOWNLOAD_URL'){
          this.downloadMode = 'android';
          this.showDownloadUrl = true;
          this.showExternalUrl = false;
          this.showPackageName=true;
          this.showOpenUrlStatus=false;
          this.showDownloadMode=true;
          this.refreshUrl(this.downloadMode);
        }else{

          this.showDownloadUrl = false;
          this.showExternalUrl = true;
          this.showPackageName=false;
          this.showOpenUrlStatus=true;
          this.showDownloadMode=false;
          this.refreshUrl("page");
        }
      },
      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>