<template>

  <a-form-model
    ref="ruleBasicForm"
    :model="basicForm"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="interfaceName" label="接口名称 :" prop="interfaceName">
      <a-input v-model="basicForm.interfaceName"/>
    </a-form-model-item>
    <a-form-model-item ref="targetName" label="目标系统:" prop="targetName">
      <a-select v-model="basicForm.targetName" placeholder="请选择目标系统" @change="targetNameChange">
        <a-select-option v-for="(item, index) in targetNameArr" :key="index" :value="item.id">
          {{ item.targetName }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item ref="targetAddress" label="分发URL地址:" prop="targetAddress">
      <a-input v-model="basicForm.targetAddress"/>
    </a-form-model-item>
    <a-form-model-item ref="distributionWay" label="接口类型:" prop="distributionWay">
      <a-select v-model="basicForm.distributionWay" @change="disWay">
        <a-select-option value="0">
          Web Service
        </a-select-option>
        <a-select-option value="1">
          RESTful
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item v-if="disModeVisible" ref="distributionMode" label="请求方式:" prop="distributionMode">
      <a-select v-model="basicForm.distributionMode" >
        <a-select-option value="0">
          POST
        </a-select-option>
        <a-select-option value="1">
          GET
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item
      ref="distributionNum"
      label="单次分发数量上限:"
      prop="distributionNum"
      extra="请填写200~2000之间数字">
      <a-input-number
        id="inputNumber"
        :max="2000"
        :min="200"
        v-model="basicForm.distributionNum"/>
    </a-form-model-item>
    <a-form-model-item ref="distributionType" label="分发类型:" prop="distributionType">
      <a-radio-group v-model="basicForm.distributionType">
        <a-radio value="0">
          全量分发
        </a-radio>
        <a-radio value="1">
          增量分发
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <!-- 0:无;1;AES;2RSA -->
    <a-form-model-item ref="encryptionMode" label="传输加密:" prop="encryptionMode">
      <a-select v-model="basicForm.encryptionMode">
        <a-select-option value="0">
          无
        </a-select-option>
        <a-select-option value="1">
          AES
        </a-select-option>
        <a-select-option value="2">
          RSA
        </a-select-option>

      </a-select>
    </a-form-model-item>

  </a-form-model>
</template>

<script type="text/ecmascript-6">
import { getTargetName } from '@/api/interfaceManager/interfaceManager'

	export default {
		props: {

		},
		data() {
			return {
				labelCol: { span: 8 },
				wrapperCol: { span: 12 },
				other: '',
				basicForm: {
					interfaceName: '',
					targetName: '',
          targetId: '',
          distributionMode: '0',
					targetAddress: '',
					distributionNum: 200,
					distributionType: '0',
          encryptionMode: '',
          distributionWay: ''
				},
        disModeVisible: false,
				rules: {
					interfaceName: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
					targetAddress: [{ required: true, message: '请输入分发URL地址', trigger: 'blur' }],
					distributionWay: [{ required: true, message: '请选择接口类型', trigger: 'blur' }],
					distributionMode: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
          distributionNum: [
            { required: true, message: '请输入单次分发数量上限', trigger: 'blur' }
            // { min: 200, max: 2000, message: '请填写200~2000之间数字', trigger: 'blur' }
          ]
				},
        targetNameArr: [],
				submitType: null
			}
		},
    mounted() {
      this.getTargetNameArr()
    },
		methods: {
      targetNameChange(e) {
        this.basicForm.targetId = e
      },
      disWay(e) {
        if (e === '0') {
          this.disModeVisible = false
        } else if (e === '1') {
          this.disModeVisible = true
        }
          console.log('e>>>>>>>>>>>', e)
      },
      // 目标系统
      getTargetNameArr() {
        const params = { pageNum: 1, pageSize: null }
        getTargetName(params).then((res) => {
          if (res.code === 200) {
            const resRows = res.rows
            resRows.forEach((item) => {
              var obj = {}
              obj.targetName = item.targetName
              obj.id = item.id
              this.targetNameArr.push(obj)
            })
          }
          // console.log('目标系统:', res.rows)
        })
      },
      // 子组件校验表单
      validataBasicForm() {
        var flag = false
				this.$refs.ruleBasicForm.validate(valid => {
					if (valid) {
						// console.log('成功！！')
            flag = true
					} else {
						console.log('error submit!!')
						flag = false
					}
				})
        return flag
			}

		}
	}
</script>

<style scoped>

</style>
