/**
* Created by HaijunZhang on 2019/4/28.
*/
<template>
  <common-wrapper code="network" :add-data="addData" ref="common" @vendorId="handleSearch" :elements="elements" :get-params="getParams" :item-data="retention" :disabled="disabled">
    <basic-form :model="addData.configs" ref="addForm" label-position="left">
      <el-divider></el-divider>
      <h5>配置信息</h5>
        <el-row>
          <el-col :span="12">
            <basic-form-item validate="required" label="负载均衡器类型：">
              <el-radio-group v-model="addData.configs.loadBalancerType" @change="selectType">
                <el-radio label="application">应用程序负载均衡器</el-radio>
                <el-radio label="network">网络负载均衡器</el-radio>
              </el-radio-group>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <basic-form-item label="名称：" prop="name" validate="required,awsName" require-message="仅允许a-z、A-Z、0-9和连字符">
              <el-input v-model="addData.configs.name" placeholder="仅允许a-z、A-Z、0-9和连字符"></el-input>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <basic-form-item validate="required" label="模式：">
              <el-radio-group v-model="addData.configs.scheme" @change="changeClassification">
                <el-radio label="internet-facing">面向Internet</el-radio>
                <el-radio label="internal">内部</el-radio>
              </el-radio-group>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <basic-form-item label="IP地址类型：" validate="required" require-message="请选择IP地址类型">
              <el-select v-model="addData.configs.ipAddressType" @change="changeIpAddressType" v-if="addData.configs.scheme === 'internet-facing'" placeholder="请选择IP地址类型">
                <el-option value="ipv4" label="ipv4"></el-option>
                <el-option value="dualstack" label="dualstack"></el-option>
              </el-select>
              <el-select v-model="addData.configs.ipAddressType" v-if="addData.configs.scheme === 'internal'" disabled>
                <el-option value="ipv4" label="ipv4" disabled></el-option>
              </el-select>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <basic-form-item label="侦听器：  " validate="required">
              <basic-table :data="dataList2" v-if="addData.configs.loadBalancerType === 'application'">
                <el-table-column label="负载均衡器协议" prop="protocol">
                  <template slot-scope="scope">
                    <el-select style="width: 50%" v-model="scope.row.protocol" @change="changeData1(scope.row.protocol, scope.$index)">
                      <el-option value="HTTP" label="HTTP"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="负载均衡器端口" prop="port">
                  <template slot-scope="scope">
                    <el-input style="width: 50%" v-model="scope.row.port"></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="200" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click.native.prevent="deleteRow(scope.$index, dataList2)"><i class="el-icon-delete"></i> 删除 </el-button>
                  </template>
                </el-table-column>
                <div slot="pagination"></div>
              </basic-table>
              <basic-table :data="dataList" v-if="addData.configs.loadBalancerType === 'network'">
                <el-table-column label="负载均衡器协议" prop="protocol">
                  <template slot-scope="scope">
                    <el-select style="width: 50%" v-model="scope.row.protocol" @change="changeData2(scope.row.protocol, scope.$index)">
                      <el-option value="TCP" label="TCP"></el-option>
                      <el-option value="TCP_UDP" label="TCP_UDP"></el-option>
                      <el-option value="UDP" label="UDP"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="负载均衡器端口" prop="port">
                  <template slot-scope="scope">
                    <el-input style="width: 50%" v-model="scope.row.port"></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="200" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click.native.prevent="deleteRow(scope.$index, dataList)"><i class="el-icon-delete"></i> 删除 </el-button>
                  </template>
                </el-table-column>
                <div slot="pagination"></div>
              </basic-table>
              <el-button style="margin-top: 10px" type="primary" @click="addRow">添加侦听器</el-button>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <basic-form-item label="VPC：" validate="required">
              <el-select @change="handleSubNets" v-model="vpcModel" value-key="vpcId" clearable>
                <el-option v-for="(item, index) in vpcList" :key="index" :label="item.vpcValue" :value="item"></el-option>
              </el-select>
            </basic-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <basic-form-item label="可用区：" validate="required">
              <el-row v-if="showNorth1a">
                <el-col :span="3">
                  <el-checkbox v-model="northA_checked">cn-north-1a</el-checkbox>
                </el-col>
                <el-col :span="21">
                  <el-row>
                    <el-select v-model="subNetValueA" style="width: 50%" @change="changePrivateAddressA" value-key="id" :disabled="!northA_checked">
                      <el-option v-for="(item, index) in cnNorth1AList" :key="index" :label="item.subNetValueA" :value="item"> </el-option>
                    </el-select>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row v-if="northA_checked" style="margin-top: 20px">
                    <el-col :span="2">IPv4地址</el-col>
                    <el-col :span="1">
                      <el-tooltip class="item" effect="dark" content="Virtual Private Cloud (VPC) 是品高云内您自己的逻辑隔离区域中的虚拟网络。请选择您为目标实例选择的同一 VPC。" placement="top">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internet-facing' && addData.configs.loadBalancerType === 'network'">
                      <el-select v-model="Ipv4_addressA" @change="hanldeElastic">
                        <el-option label="由AWS分配" value="BINGOCLOUDOS"></el-option>
                        <el-option label="选择弹性IP" value="IP"></el-option>
                      </el-select>
                      <el-select v-model="Ipv4_Elastic_Val_A" v-if="Ipv4_addressA == 'IP'" style="margin-top: 10px">
                        <el-option v-for="(item, index) in elasticList" :key="index" :label="item.publicIp + '(' + item.elasticIpUuid + ')'" :value="item.id"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internet-facing' && addData.configs.loadBalancerType === 'application'">
                      <el-row>
                        <span>由AWS分配</span>
                      </el-row>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internal' && addData.configs.loadBalancerType === 'network'">
                      <el-row>
                        <span>从CIDR分配{{ cidr }}</span>
                      </el-row>
                    </el-col>
                    <el-col v-if="addData.configs.scheme === 'internal' && addData.configs.loadBalancerType === 'application'" :span="21"> 从CIDR分配{{ cidr }} </el-col>
                    <el-col v-if="showIpv6 && addData.configs.loadBalancerType === 'application' && addData.configs.scheme === 'internet-facing' && addData.configs.ipAddressType == 'dualstack'">
                      <el-col :span="2">IPv6地址</el-col>
                      <el-col :span="1" style="margin-left: -40px">
                        <el-tooltip class="item" effect="dark" content="节点的 IPv6 地址从子网 CIDR 分配。" placement="top">
                          <i class="el-icon-info"></i>
                        </el-tooltip>
                      </el-col>
                      <el-col v-if="ipv6_cidr && addData.configs.loadBalancerType === 'application'" :span="8">{{ ipv6_cidr }}</el-col>
                      <el-col v-else :span="8">无</el-col>
                    </el-col>
                    <el-col v-if="showIpv6 && addData.configs.loadBalancerType === 'network' && addData.configs.scheme === 'internet-facing' && addData.configs.ipAddressType == 'dualstack'">
                      <el-col :span="2">IPv6地址</el-col>
                      <el-col :span="1" style="margin-left: -40px">
                        <el-tooltip class="item" effect="dark" content="节点的 IPv6 地址从子网 CIDR 分配。" placement="top">
                          <i class="el-icon-info"></i>
                        </el-tooltip>
                      </el-col>
                      <el-col v-if="ipv6_cidr" :span="8">
                        <el-select v-model="north1A_CIDR_value">
                          <el-option :label="'从CIDR分配' + ipv6_cidr" value="assign"></el-option>
                          <el-option :label="'从CIDR输入 IP' + ipv6_cidr" value="input"></el-option>
                        </el-select>
                        <basic-form-item v-if="addData.configs.ipAddressType == 'dualstack' && north1A_CIDR_value == 'input'" maxlength="64">
                          <el-input v-model="private_Ipv6_input_A" placeholder="IPv6地址"></el-input>
                        </basic-form-item>
                      </el-col>
                      <el-col v-if="ipv6_cidr && addData.configs.loadBalancerType === 'application'" :span="8">{{ ipv6_cidr }}</el-col>
                      <el-col v-if="!ipv6_cidr" :span="8">无</el-col>
                    </el-col>
                  </el-row>
                  <el-row v-if="classificationStatus && northA_checked && addData.configs.loadBalancerType === 'network'" style="margin: 10px 0 0 -28px">
                    <el-col :span="3">私有IPv4地址</el-col>
                    <el-col :span="8" style="margin-left: -40px">
                      <el-select v-model="north1A_CIDR_value">
                        <el-option :label="'从CIDR分配' + cidr" value="assign"></el-option>
                        <el-option :label="'从CIDR输入' + cidr" value="input"></el-option>
                      </el-select>
                      <basic-form-item v-if="addData.configs.ipAddressType == 'ipv4' && north1A_CIDR_value == 'input'" maxlength="64">
                        <el-input v-model="private_Ipv4_input_A" placeholder="私有IPv4地址"></el-input>
                      </basic-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row v-if="showNorth1B" :style="showNorth1a ? 'margin-top: 20px;' : ''">
                <el-col :span="3">
                  <el-checkbox v-model="northB_checked">cn-north-1b</el-checkbox>
                </el-col>
                <el-col :span="21">
                  <el-row>
                    <el-select v-model="subNetValueB" style="width: 50%" @change="changePrivateAddressB" value-key="id" :disabled="!northB_checked">
                      <el-option v-for="(item, index) in cnNorth1BList" :key="index" :label="item.subNetValueB" :value="item"></el-option>
                    </el-select>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row v-if="northB_checked" style="margin-top: 20px">
                    <el-col :span="2">IPv4地址</el-col>
                    <el-col :span="1">
                      <el-tooltip class="item" effect="dark" content="对于面向 Internet 的负载均衡器，节点的 IPv4 地址由 品高云 分配，您也可以选择您的其中一个弹性 IP 地址。对于内部负载均衡器，IPv4 地址从子网 CIDR 分配。" placement="top">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internet-facing' && addData.configs.loadBalancerType === 'network'">
                      <el-select v-model="Ipv4_addressB" @change="hanldeElastic">
                        <el-option label="由品高云分配" value="BINGOCLOUDOS"></el-option>
                        <el-option label="选择弹性IP" value="IP"></el-option>
                      </el-select>
                      <el-select v-model="Ipv4_Elastic_Val_B" v-if="Ipv4_addressB == 'IP'" style="margin-top: 10px">
                        <el-option v-for="(item, index) in elasticList" :key="index" :label="item.publicIp + '(' + item.elasticIpUuid + ')'" :value="item.id"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internet-facing' && addData.configs.loadBalancerType === 'application'">
                      <el-row>
                        <span>由AWS分配</span>
                      </el-row>
                    </el-col>
                    <el-col :span="8" v-if="addData.configs.scheme === 'internal' && addData.configs.loadBalancerType === 'network'">
                      <el-row>
                        <span>从CIDR分配{{ cidrB }}</span>
                      </el-row>
                    </el-col>
                    <el-col v-if="addData.configs.scheme === 'internal' && addData.configs.loadBalancerType === 'application'" :span="21"> 从CIDR分配{{ cidrB }} </el-col>
                    <el-col v-if="showIpv6 && addData.configs.scheme === 'internet-facing' && addData.configs.ipAddressType == 'dualstack'">
                      <el-col :span="2">IPv6地址</el-col>
                      <el-col :span="1" style="margin-left: -40px">
                        <el-tooltip class="item" effect="dark" content="节点的 IPv6 地址从子网 CIDR 分配。" placement="top">
                          <i class="el-icon-info"></i>
                        </el-tooltip>
                      </el-col>
                      <el-col v-if="ipv6_cidrB && addData.configs.loadBalancerType === 'network'" :span="8">
                        <el-select v-model="north1B_CIDR_value">
                          <el-option :label="'从CIDR分配' + ipv6_cidrB" value="assign"></el-option>
                          <el-option :label="'从CIDR输入 IP' + ipv6_cidrB" value="input"></el-option>
                        </el-select>
                        <basic-form-item v-if="addData.configs.ipAddressType == 'dualstack' && north1B_CIDR_value == 'input'" maxlength="64">
                          <el-input v-model="private_Ipv6_input_B" placeholder="IPv6地址"></el-input>
                        </basic-form-item>
                      </el-col>
                      <el-col v-if="ipv6_cidrB && addData.configs.loadBalancerType === 'application'" :span="8">{{ ipv6_cidrB }}</el-col>
                      <el-col v-if="!ipv6_cidrB" :span="8">无</el-col>
                    </el-col>
                  </el-row>
                  <el-row v-if="classificationStatus && northB_checked && addData.configs.loadBalancerType === 'network'" style="margin: 10px 0 0 -28px">
                    <el-col :span="3">私有IPv4地址</el-col>
                    <el-col :span="8" style="margin-left: -40px">
                      <el-select v-model="north1B_CIDR_value">
                        <el-option :label="'从CIDR分配' + cidrB" value="assign"></el-option>
                        <el-option :label="'从CIDR输入' + cidrB" value="input"></el-option>
                      </el-select>
                      <basic-form-item v-if="addData.configs.ipAddressType == 'ipv4' && north1B_CIDR_value == 'input'" maxlength="64">
                        <el-input v-model="private_Ipv4_input_B" placeholder="私有IPv4地址"></el-input>
                      </basic-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </basic-form-item>
          </el-col>
        </el-row>

        <el-row class="top_margin_border">
          <!-- <el-form :inline="true" v-if="addData.configs.loadBalancerType === 'application'">
          <el-form-item label="筛选条件：">
            <el-select v-model="safeOptions" @change="changeSafeGroup">
              <el-option label="VPC 安全组" value="vpc"></el-option>
              <el-option label="EC2 安全组" value="ec2"></el-option>
            </el-select>
          </el-form-item>
        </el-form> -->
        </el-row>
        <basic-form-item label-width="140px" label="安全组：  " validate="required" v-if="addData.configs.loadBalancerType === 'application'">
          <basic-table :data="safeTableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="groupUuid" label="安全组ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="remark" label="描述"></el-table-column>
            <div slot="pagination"></div>
          </basic-table>
        </basic-form-item>
    </basic-form>
  </common-wrapper>
</template>

<script>
import CommonWrapper from 'views/resource-apply/components/PublicCommonWrapper.vue';
import { add, element } from '../data/publicInit'
import { cloneDeep } from 'lodash-es'
import { getShoppingCartDetail } from 'services/system/shop_cart'
import { getTargetgroups, getTargets, getVpcData, getSubNetsList, getSafeTableData, getElasticIp } from 'services/platform/bingoCloudOS'

export default {
  components: { CommonWrapper },
  props: {
    type: {
      type: String
    },
    itemData: {
      type: [Object, Boolean]
    },
    disabled: {
      type: Boolean
    }
  },
  data () {
    return {
      elements: [{
        ...element,
        name: '负载均衡',
        serviceCode: 'network.bingoCloudOS.slb',
        main: true
      }
      ],
      addData: {
        ...cloneDeep(add),
        location: {
          ...add.location,
          vendorType: this.type
        },
        service: 'network.bingoCloudOS.slb',
        configs: {
          name: '',
          loadBalancerType: 'network',
          scheme: 'internet-facing',
          ipAddressType: 'ipv4',
          availabilityZones: []
        }
      },
      retention: false,
      // 订购所需
      detailTableData: [],
      tableData: [],
      params: {
        page: 1,
        rows: 9999
      },
      paramd: {
        page: 1,
        rows: 9999
      },
      publicParams: {
        page: 1,
        rows: 9999
      },
      safeTableParams: {
        page: 1,
        rows: 10
      },
      private_Ipv4_input_A: '',
      private_Ipv4_input_B: '',
      private_Ipv6_input_A: '',
      private_Ipv6_input_B: '',
      regionId: 'cn-north-1',
      tempStore: '',
      listeners: [],
      CheckPort: '',
      runStatePath: '/',
      runStateProtocol: 'HTTP',
      aimClassification: 'instance',
      aimGroupName: '',
      protocolVersion: 'HTTP1',
      aimPort: 80,
      aimProtocol: 'HTTP',
      protocol: '',
      classificationSelection: '',
      safeOptions: '',
      regionList: '',
      north1A_CIDR_value: 'assign',
      north1B_CIDR_value: 'assign',
      vpcList: [],
      vpcValue: '',
      vpcId: '',
      assignSafeRadio: 3, // 分配安全组单选
      input: '',
      classification: '',
      classificationStatus: false,
      dataList: [{ protocol: 'TCP', port: 80 }],
      dataList2: [{ protocol: 'HTTP', port: 80 }],
      northA_checked: false, // 控制cn-north-1a的选择框
      northB_checked: false, // 控制cn-north-1b的选择框
      showNorth1a: true,
      showNorth1B: true, // 是否显示cn-north-1b
      cnNorth1AList: [],
      cnNorth1BList: [],
      subNetValueA: '',
      subNetValueB: '',
      Ipv4_addressA: 'BINGOCLOUDOS',
      Ipv4_addressB: 'BINGOCLOUDOS',
      elasticList: [],
      Ipv4_Elastic_Val_A: '',
      Ipv4_Elastic_Val_B: '',
      zone: '',
      north1A_CIDR: '',
      north1B_CIDR: '',
      subNetList: [],
      cidr: '',
      cidrB: '',
      showIpv6: false,
      ipv6_cidr: '',
      ipv6_cidrB: '',
      safeTableData: [], // 安全组表格
      vpcModel: ''
    }
  },
  computed: {
    currentElement () {
      return this.elements[0]
    }
  },
  created () {
    if (this.itemData) {
      this.retention = this.itemData
      this.addData = cloneDeep(this.retention)
      const { elements } = this.retention
      const [first, ...others] = elements
      this.elements = [
        {
          ...element,
          ...first
        }
      ]
    } else if (this.$route.query.id) {
      getShoppingCartDetail(this.$route.query.id).then(data => {
        if (data.success) {
          this.retention = JSON.parse(data.data.inventory)
          this.addData = cloneDeep(this.retention)
          const { elements } = this.retention
          const [first, ...others] = elements
          this.elements = [
            {
              ...element,
              ...first
            }
          ]
        }
      })
    }
  },
  watch: {
    'addData.location.vendorType' () {
      this.$emit('type', this.addData.location.vendorType)
    },
    northB_checked(newVal, oldVal) {
      if (this.cnNorth1BList.length && newVal) {
        this.addData.configs.availabilityZones[1] = { sId: this.cnNorth1BList[0].id }
      } else {
        this.addData.configs.availabilityZones.pop()
      }
    }
  },
  methods: {
    getPostData () {
      let data = false
      data = this.$refs.common.handlePostData()
      return data
    },
    getParams () {
      let data = false;
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.dataList.length) {
            for (let i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].protocol == '选择协议' || this.dataList[i].port == '') {
                return this.$message.error('请填写侦听器相关信息')
              }
            }
          } else {
            return this.$message.error('至少添加一个侦听器')
          }
          if (this.addData.configs.availabilityZones.length <= 1 || this.northA_checked == false || this.northB_checked == false) {
            return this.$message.error('当前vpc不可用,必须指定至少两个子网')
          }
          if (this.Ipv4_addressA == 'IP' && this.Ipv4_addressB == 'IP' && this.Ipv4_Elastic_Val_A == this.Ipv4_Elastic_Val_B) return this.$message.error('弹性IP地址不可相同')
          if (this.addData.configs.loadBalancerType === 'network') {
            this.addData.configs.availabilityZones[0].loadBalancerAddresses = []
            this.addData.configs.availabilityZones[1].loadBalancerAddresses = []
            if (this.addData.configs.scheme === 'internet-facing' || (this.addData.configs.scheme === 'internal' && this.north1A_CIDR_value != 'input' && this.north1B_CIDR_value != 'input')) {
              this.addData.configs.availabilityZones[0].loadBalancerAddresses[0] = { eipId: this.Ipv4_Elastic_Val_A }
              this.addData.configs.availabilityZones[1].loadBalancerAddresses[0] = { eipId: this.Ipv4_Elastic_Val_B }
            }
            if (this.north1A_CIDR_value == 'input' && this.north1B_CIDR_value == 'input') {
              this.addData.configs.availabilityZones[0].loadBalancerAddresses[0] = { privateIPv4Address: this.private_Ipv4_input_A }
              this.addData.configs.availabilityZones[1].loadBalancerAddresses[0] = { privateIPv4Address: this.private_Ipv4_input_B }
              if (this.private_Ipv4_input_A && this.private_Ipv4_input_B && this.private_Ipv4_input_A == this.private_Ipv4_input_B) {
                return this.$message.error('输入的私有IPv4地址不能相同')
              }
            }
            if ((this.north1A_CIDR_value == 'input' && this.north1B_CIDR_value != 'input') || (this.north1A_CIDR_value != 'input' && this.north1B_CIDR_value == 'input')) {
              return this.$message.error('输入的私有Ipv4或Ipv6地址需同时存在')
            }
            if (this.addData.configs.ipAddressType == 'dualstack') {
              if (this.ipv6_cidr == null) {
                return this.$message.error('所选的子网必须具有IP地址类型所需的CIDR块')
              }
              if (this.north1A_CIDR_value == 'input' && this.north1B_CIDR_value == 'input') {
                this.addData.configs.availabilityZones[0].loadBalancerAddresses[0] = { iPv6Address: this.private_Ipv6_input_A }
                this.addData.configs.availabilityZones[1].loadBalancerAddresses[0] = { iPv6Address: this.private_Ipv6_input_B }
              }
            }
            this.dataList.forEach((item, index) => {
              if (index + 1 < this.dataList.length) {
                if (item.port == this.dataList[index + 1].port) return this.$message.error('端口号不能相同')
              }
            })
            data = {
              balancer: this.addData.configs,
              listeners: this.dataList,
              targetGroup: { id: this.tempStore }
            }
          } else {
            const safeGroup = []
            this.securityGroups.forEach(item => {
              safeGroup.push({ id: item.id })
            })
            if (safeGroup.length == 0) {
              return this.$message.error('至少选择一个安全组')
            }
            const newBalancer = JSON.parse(JSON.stringify(this.addData.configs))
            newBalancer.securityGroups = safeGroup
            data = {
              balancer: newBalancer,
              listeners: this.dataList2,
              targetGroup: { id: this.tempStore }
            }
          }
        }
      })
      return data;
    },
    selectType() {
      if (this.addData.configs.loadBalancerType === 'application') {
        this.listeners = this.dataList
      }
      if (this.addData.configs.loadBalancerType === 'network') {
        this.listeners = this.dataList
      }
      this.getData()
    },
    handleDetailSearch() {
      const params = [{ param: { tgId: this.tempStore[0] }, sign: 'EQ' }]
      this.paramd.params = JSON.stringify(params)
      this.getDetailData()
    },
    getDetailData() {
      getTargets(this.paramd).then(data => {
        if (data.success) {
          this.detailTableData = data.data.rows
          this.totald = data.data.total
        }
      })
    },
    handleSearch() {
      this.getData()
      this.getVpcList()
      this.hanldeElastic()
      this.params.params = this.$tools.handleSearchParam({
        vendorId: this.addData.location.vendorId,
        regionId: this.addData.location.region
      })
    },
    getData() {
      const targetGroupsParams = JSON.parse(JSON.stringify(this.publicParams))
      if (this.addData.configs.loadBalancerType === 'application') {
        targetGroupsParams.params = JSON.stringify([
          {
            param: {
              vendorId: this.addData.location.vendorId,
              loadBalancerUuids: '[]',
              vpcUuid: this.vpcId,
              regionId: this.addData.location.region
            },
            sign: 'EQ'
          },
          {
            param: {
              protocol: '"HTTP"'
            },
            sign: 'IN'
          }
        ])
      } else {
        const protocolData = JSON.parse(JSON.stringify(this.dataList))
        const isTCP = protocolData.every(item => {
          return item.protocol == 'TCP'
        })
        const isUDP = protocolData.every(item => {
          return item.protocol == 'UDP'
        })
        for (let i = 0; i < protocolData.length; i++) {
          if (isTCP) {
            this.protocol = '"TCP"'
          } else {
            this.protocol = '"TCP_UDP"'
          }
          if (isUDP) {
            this.protocol = '"UDP"'
          }
        }
        targetGroupsParams.params = JSON.stringify([
          {
            param: {
              vendorId: this.addData.location.vendorId,
              loadBalancerUuids: '[]',
              vpcUuid: this.vpcId,
              regionId: this.addData.location.region
            },
            sign: 'EQ'
          },
          {
            param: {
              protocol: this.protocol
            },
            sign: 'IN'
          }
        ])
      }
      getTargetgroups(targetGroupsParams).then(data => {
        if (data.success) {
          this.tableData = data.data.rows
          if (this.tableData.length) {
            this.tempStore = this.tableData[0].id
          } else {
            this.tempStore = ''
          }
          this.total = data.data.total
        }
      })
    },
    changeData1(name, index) {
      switch (name) {
        case 'HTTP':
          this.dataList2[index].port = 80
          break
        // case 'HTTPS':
        //   this.dataList2[index].port = 443
        //   break
      }
    },
    changeData2(name, index) {
      switch (name) {
        case 'TCP':
          this.dataList[index].port = 80
          break
        case 'TCP_UDP':
          this.dataList[index].port = 53
          break
        case 'UDP':
          this.dataList[index].port = 53
      }
      this.getData()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
      this.getData()
    },
    addRow() {
      if (this.addData.configs.loadBalancerType === 'network') {
        this.dataList.push({ protocol: '选择协议', port: '' })
      }
      if (this.addData.configs.loadBalancerType === 'application') {
        this.dataList2.push({ protocol: 'HTTP', port: 80 })
      }
    },
    changeClassification() {
      if (this.addData.configs.scheme === 'internal') {
        this.addData.configs.ipAddressType = 'ipv4'
        this.classificationStatus = true
      } else {
        this.addData.configs.ipAddressType = 'ipv4'
        this.classificationStatus = false
      }
    },
    goBack() {
      sessionStorage.setItem('platformId', this.serverId)
      this.$router.back(-1)
    },
    getVpcList() {
      const params = JSON.stringify([{ param: { regionId: this.addData.location.region, vendorId: this.addData.location.vendorId }, sign: 'EQ' }])
      const vpcParams = JSON.parse(JSON.stringify(this.publicParams))
      vpcParams.params = params
      getVpcData(vpcParams).then(data => {
        this.vpcList = data.data.rows
        this.vpcList.forEach((item, index) => {
          item.vpcValue = `${item.vpcId} (${item.cidr}) | ${item.name}`
        })
        this.vpcModel = this.vpcList[0]
        if (this.vpcList.length > 0) {
          this.handleSubNets()
          this.getSafeTableList()
          this.getData()
        }
      })
    },
    handleSubNets() {
      this.vpcId = this.vpcModel.vpcId
      this.Ipv4_addressA = 'BINGOCLOUDOS'
      this.Ipv4_addressB = 'BINGOCLOUDOS'
      this.getData()
      this.northA_checked = this.northB_checked = false
      const params = JSON.stringify([{ param: { networkId: this.vpcModel.id, vendorId: this.addData.location.vendorId }, sign: 'EQ' }])
      const subNetsParams = JSON.parse(JSON.stringify(this.publicParams))
      subNetsParams.params = params
      getSubNetsList(subNetsParams).then(data => {
        this.subNetList = data.data.rows
        if (this.addData.location.region == 'cn-north-1') {
          this.cnNorth1AList = this.subNetList.filter(item => item.zone == 'cn-north-1a')
        } else {
          this.cnNorth1AList = this.subNetList.filter(item => item.zone == 'cn-northwest-1a')
        }
        if (this.cnNorth1AList.length) {
          this.addData.configs.availabilityZones[0] = { sId: this.cnNorth1AList[0].id }
          this.cidr = this.cnNorth1AList[0].cidr
          this.ipv6_cidr = this.cnNorth1AList[0].ipv6Cidr
          this.showNorth1a = true
        } else {
          this.showNorth1a = false
        }
        this.cnNorth1BList = this.subNetList.filter(item1 => item1.zone == 'cn-north-1b')
        if (this.cnNorth1BList.length) {
          this.ipv6_cidrB = this.cnNorth1BList[0].ipv6Cidr
          this.cidrB = this.cnNorth1BList[0].cidr
          this.showNorth1B = true
        } else {
          this.showNorth1B = false
        }
        this.subNetList.forEach((item, index) => {
          this.zone = item.zone
          if ((item.zone == 'cn-north-1a' || item.zone == 'cn-northwest-1a') && (this.addData.configs.scheme === 'internet-facing' || this.addData.configs.scheme === 'internal')) {
            item.subNetValueA = `${item.subnetUuid} (${item.name})`
            this.subNetValueA = this.cnNorth1AList[0]
          } else {
            item.subNetValueB = `${item.subnetUuid} (${item.name})`
            this.subNetValueB = this.cnNorth1BList[0]
          }
        })
      })
    },
    // cn-north-1a下拉框触发事件
    changePrivateAddressA(e) {
      this.addData.configs.availabilityZones[0] = { sId: e.id }
      this.ipv6_cidr = e.ipv6Cidr
      this.cidr = e.cidr
    },
    // cn-north-1b下拉框触发事件
    changePrivateAddressB(e) {
      this.addData.configs.availabilityZones[1] = { sId: e.id }
      this.ipv6_cidrB = e.ipv6Cidr
      this.cidrB = e.cidr
    },
    changeIpAddressType(e) {
      if (e === 'ipv4') {
        this.showIpv6 = false
      } else {
        this.showIpv6 = true
      }
    },
    getSafeTableList() {
      this.safeTableParams.params = JSON.stringify([{ param: { vpcId: this.vpcModel.id, vendorId: this.addData.location.vendorId }, sign: 'EQ' }])
      getSafeTableData(this.safeTableParams).then(data => {
        this.safeTableData = data.data.rows
      })
    },
    handleSelectionChange(row) {
      this.securityGroups = row
    },
    // 选择弹性ip时获取
    hanldeElastic() {
      if (this.Ipv4_addressA == 'IP' || this.Ipv4_addressB == 'IP') {
        const params = JSON.stringify([
          { param: { regionId: this.addData.location.region, vendorId: this.addData.location.vendorId }, sign: 'EQ' },
          {
            param: {
              associationId: ''
            },
            sign: 'NUL'
          }
        ])
        const subNetsParams = JSON.parse(JSON.stringify(this.publicParams))
        subNetsParams.params = params
        getElasticIp(subNetsParams).then(data => {
          this.elasticList = data.data.rows
          if (this.elasticList.length && this.Ipv4_addressA == 'IP') {
            this.Ipv4_Elastic_Val_A = this.elasticList[0].id
          }
          if (this.elasticList.length && this.Ipv4_addressB == 'IP') {
            this.Ipv4_Elastic_Val_B = this.elasticList[0].id
          }
        })
      } else {
        this.elasticList = []
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>