<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="名称">
          <a-input placeholder="请输入链接名称信息" v-model="name" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="链接类型">
          <a-radio-group v-model="urlType" @change="typeChange">
            <a-radio-button value="android">安卓下载</a-radio-button>
            <a-radio-button value="IOS">IOS下载</a-radio-button>
            <a-radio-button value="page">落地页</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="链接地址">
          <a-input placeholder="请输入链接地址" v-model="setUrl" />
        </a-form-item>
        <a-form-item
          v-if="showPackageName"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用包名">
          <a-input placeholder="请输入应用包名" v-model="packageName" />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {deleteAction, postAction, getAction,httpAction} from '@/api/manage'
  export default {
    name: "BytedanceUrlInfoModal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        name:'',
        urlType:'android',
        setUrl:'',
        packageName:'',
        showPackageName:true,
        id:null,
        url: {
          add: "/ctop/bytedanceUrlInfo/add",
          edit: "/ctop/bytedanceUrlInfo/edit",
          insertOrUpdate: 'template/link/insert',
        },
      }
    },
    created () {
    },
    methods: {
      add () {
        this.edit({
          name:'',
          urlType:'android',
          setUrl:'',
          packageName:'',
          showPackageName:true
        });
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.id = record.id;
        this.name = record.name;
        this.setUrl = record.url;
        this.urlType = record.type;
        this.packageName = record.packageName;
        if(this.urlType == 'page'){
          this.showPackageName = false;
        }else{
          this.showPackageName = true;
        }
      },
      typeChange(){
        if(this.urlType == 'page'){
          this.showPackageName = false;
        }else{
          this.showPackageName = true;
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            let params = {};
            params.id = this.id;
            params.name = this.name;
            params.url = this.setUrl;
            params.type = this.urlType;
            params.packageName = this.packageName;
            console.log(params);
            postAction(this.url.insertOrUpdate,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);
              }
            });
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>