<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="渠道">
        <el-select v-model="channelIds" filterable multiple clearable>
          <el-option
            v-for="item in channels"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="search()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="sData" border>
      <el-table-column label="渠道名称" prop="ChannelName" />
      <el-table-column label="方案名称" prop="SolutionName" />
      <el-table-column label="提取节点字段">
        <template slot-scope="scope">
          {{ scope.row.StrExtractNodes }}
        </template>
      </el-table-column>
      <el-table-column label="预上网节点字段">
        <template slot-scope="scope">
          {{ scope.row.StrPreInternetAccess }}
        </template>
      </el-table-column>
      <el-table-column label="异常节点">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.ReturnNodes && scope.row.ReturnNodes.length > 0"
            placement="top-start"
            title="异常节点"
            width="800"
            trigger="hover"
            :content="formatNodes()"
          >
            <div
              v-for="(n, idx) in scope.row.ReturnNodes"
              :key="idx"
              style="
                border-bottom: 1px solid #eee;
                margin-bottom: 3px;
                padding-bottom: 3px;
              "
            >
              {{ n.Node }} {{ n.CNNode }}
            </div>
            <div slot="reference" style="text-wrap: no-wrap; over-flow: hidden">
              {{ scope.row.StrReturnNodes }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="primary" @click="openUseTemplate(scope.row)">
            使用现有方案
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑节点" :visible.sync="dialogEdit">
      <el-form :model="editDto" label-width="100px" class="demo-form-inline nodes-form">
        <el-form-item label="方案名称">
          <el-input v-model="editDto.SolutionName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="渠道名称">
          <el-input v-model="editDto.ChannelName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in editDto.ExtractNodes"
          :key="domain.Node"
          :label="'上网节点' + (index + 1)"
          :prop="'ExtractNodes.' + index + '.Node'"
          :rules="{
            required: true,
            message: '上网节点不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="domain.Node" />
          <el-button
            style="float: left"
            @click.prevent="removeExtractNode(domain)"
          >删除</el-button>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in editDto.PreInternetAccessNodes"
          :key="domain.Node"
          :label="'预上网节点' + (index + 1)"
          :prop="'PreInternetAccessNodes.' + index + '.Node'"
          :rules="{
            required: true,
            message: '预上网节点不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="domain.Node" />
          <el-button
            style="float: left"
            @click.prevent="removePreInternetAccess(domain)"
          >删除</el-button>
        </el-form-item>

        <el-form-item
          v-for="(domain, index) in editDto.ReturnNodes"
          :key="domain.Node"
          :label="'异常节点' + (index + 1)"
          :prop="'ReturnNodes.' + index + '.Node'"
        >
          <el-input v-model="domain.Node" placeholder="英文节点" />
          <el-input v-model="domain.CNNode" placeholder="中文节点" />
          <el-button
            style="float: left"
            @click.prevent="removeReturnNode(domain)"
          >删除</el-button>
        </el-form-item>

        <el-form-item
          v-for="(domain, index) in editDto.deliveredNode"
          :key="domain.Node"
          :label="'外出派送' + (index + 1)"
          :prop="'DeliveredNode.' + index + '.Node'"
        >
          <el-input v-model="domain.Node" placeholder="英文节点" />
          <el-button
            style="float: left"
            @click.prevent="removeDeliveredNode(domain)"
          >删除</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="addExtractNode">新增上网节点</el-button>
          <el-button @click="addPreInternetAccessNode">新增预上网节点</el-button>
          <!-- <el-button @click="addReturnNode">新增退回节点</el-button> -->
          <el-button @click="addDeliveredNode">新增外出派送节点</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="postEditNode">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="克隆渠道配置" :visible.sync="showUseTemplateDialog" width="30%">
      <el-form v-loading="processingSolution">
        <el-form-item label="当前渠道" label-width="100px">
          <el-input v-model="currentChannelName" readonly disabled />
        </el-form-item>
        <el-form-item label="可用方案" label-width="100px">
          <el-select v-model="selectedSolutionName">
            <el-option
              v-for="i in solutions"
              :key="i.ChannelId"
              :label="i.SolutionName"
              :value="i.SolutionName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="新方案名称">
          <el-input v-model="newSolutionName" />
        </el-form-item>
        <el-form-item label="清空原有节点">
          <el-checkbox v-model="clearNodes" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUseTemplateDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUseSolution()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
.nodes-form .el-input {
  width: 70%;
  float: left;
  margin-right: 10px;
}
</style>
<script>
import { _getDeliverChannel } from '@/api/baseInfo'

import {
  _getTrackingMoreNodeDtos,
  _editNote,
  _loadSolutions,
  _cloneSolution
} from '@/api/trakingMoreNode'
export default {
  name: 'ConfigTracking',
  data() {
    return {
      dialogEdit: false,
      currentChannelName: null,
      currentChannelId: null,
      showUseTemplateDialog: false,
      selectedSolutionName: null,
      newSolutionName: null,
      clearNodes: false,
      processingSolution: false,
      solutions: [],
      sData: [],
      channels: [],
      channelIds: [],
      editDto: {
        ChannelId: 0,
        ExtractNodes: [],
        PreInternetAccessNodes: [],
        ReturnNodes: [],
        deliveredNode: [],
        ChannelName: ''
      }
    }
  },
  created() {
    _getDeliverChannel().then((resp) => {
      this.channels = resp
    })
    this.search()
  },
  methods: {
    submitUseSolution() {
      this.processingSolution = true
      const channelId = this.currentChannelId
      const solutionName = this.selectedSolutionName
      const newSolutionName = this.newSolutionName
      const clearNodes = this.clearNodes
      const data = { channelId, solutionName, newSolutionName, clearNodes }
      _cloneSolution(data)
        .then((res) => {
          this.$message({ type: 'success', message: '设置成功' })
          this.showUseTemplateDialog = false
          this.search()
        })
        .finally(() => {
          this.processingSolution = false
        })
    },
    formatNodes(nodes) {
      let content = ''
      if (nodes && nodes.length > 0) {
        nodes.map((i) => {
          content += `${i.Node}  ${i.CNNode} \r\n`
        })
      }
      return content
    },
    openUseTemplate(dto) {
      this.selectedSolutionName = null
      this.currentChannelName = dto.ChannelName
      this.currentChannelId = dto.ChannelId
      this.showUseTemplateDialog = true
      this.loadSolutions()
    },
    loadSolutions() {
      this.processingSolution = true
      const channelId = this.currentChannelId
      _loadSolutions()
        .then((res) => {
          this.solutions = res.filter((i) => i.ChannelId != channelId)
        })
        .finally(() => {
          this.processingSolution = false
        })
    },
    addReturnNode() {
      this.editDto.ReturnNodes.push({
        Node: '',
        CNNode: ''
      })
    },
    addDeliveredNode() {
      this.editDto.deliveredNode.push({
        Node: ''
      })
    },

    removeDeliveredNode(item) {
      var index = this.editDto.deliveredNode.indexOf(item)
      if (index !== -1) {
        this.editDto.deliveredNode.splice(index, 1)
      }
    },

    removeReturnNode(item) {
      var index = this.editDto.ReturnNodes.indexOf(item)
      if (index !== -1) {
        this.editDto.ReturnNodes.splice(index, 1)
      }
    },
    edit(row) {
      this.editDto = row
      // this.editDto.ReturnNodes = new Array();
      this.dialogEdit = true
    },
    getTrackingMoreNodeDtos(channelIds) {
      let idStr = null
      if (channelIds && channelIds.length > 0) {
        idStr = channelIds.join(',')
      }
      _getTrackingMoreNodeDtos(idStr).then((response) => {
        this.sData = response
      })
    },
    postEditNode() {
      _editNote(this.editDto).then((response) => {
        this.getTrackingMoreNodeDtos()
        this.dialogEdit = false
      })
    },
    removeExtractNode(item) {
      var index = this.editDto.ExtractNodes.indexOf(item)
      if (index !== -1) {
        this.editDto.ExtractNodes.splice(index, 1)
      }
    },
    addExtractNode() {
      this.editDto.ExtractNodes.push({
        value: '',
        key: Date.now()
      })
    },
    removePreInternetAccess(item) {
      var index = this.editDto.PreInternetAccessNodes.indexOf(item)
      if (index !== -1) {
        this.editDto.PreInternetAccessNodes.splice(index, 1)
      }
    },
    addPreInternetAccessNode() {
      this.editDto.PreInternetAccessNodes.push({
        value: '',
        key: Date.now()
      })
    },
    search() {
      const ids = this.channelIds
      this.getTrackingMoreNodeDtos(ids)
    }
  }
}
</script>
