<!--
 * @Author: Badguy
 * @Date: 2022-03-24 09:55:13
 * @LastEditTime: 2022-03-24 18:13:32
 * @LastEditors: your name
 * @Description: 数据整合-编辑接口
 * have a nice day!
-->

<template>
  <div class="interface-edit">
    <el-container class="scrollbar">
      <el-container>
        <el-main class="part part1">
          <el-form
            ref="form"
            :model="formData"
            class="form"
            label-position="right"
            label-width="132px"
          >
            <div class="header">
              <span class="title">编辑接口</span>
              <el-form-item label="是否启用">
                <el-radio-group v-model="formData.active">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                >保存</el-button>
              </el-form-item>
            </div>
            <div class="main">
              <el-form-item
                label="名称"
                prop="name"
              >
                <el-input
                  v-model="formData.name"
                  width="224px"
                  placeholder="请输入名称"
                  size="small"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="描述"
                prop="desc"
              >
                <el-input
                  v-model="formData.desc"
                  placeholder="请输入描述"
                  type="textarea"
                  :auto-size="{ minRows: 2 }"
                  clearable
                />
              </el-form-item>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="接口类型">
                    <el-select
                      v-model="formData.type"
                      size="small"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="{ value, label } in formOptions.type"
                        :key="value"
                        :value="value"
                        :label="label"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="接口协议">
                    <el-select
                      v-model="formData.protocol"
                      size="small"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="{ value, label } in formOptions.protocol"
                        :key="value"
                        :value="value"
                        :label="label"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="详细配置"
                prop="options"
              >
                <el-input
                  v-model="formData.options"
                  placeholder="请输入详细配置"
                  type="textarea"
                  :auto-size="{ minRows: 2 }"
                  clearable
                />
              </el-form-item>
              <el-form-item label="是否开启本地缓存">
                <el-radio-group v-model="formData.cache">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="目标数据类型">
                <el-select
                  v-model="formData.dataType"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="{ value, label } in formOptions.dataType"
                    :key="value"
                    :value="value"
                    :label="label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="目标数据配置"
                prop="dataOptions"
              >
                <el-input
                  v-model="formData.dataOptions"
                  placeholder="请输入目标数据配置"
                  type="textarea"
                  :auto-size="{ minRows: 2 }"
                  clearable
                />
              </el-form-item>
            </div>
          </el-form>
        </el-main>
        <el-aside
          class="part part2"
          width="502px"
        >
          <div class="header">
            <span class="title">节点管理</span>
            <el-button
              class="button-white"
              size="small"
            >新增</el-button>
          </div>
          <div class="main">
            <el-row :gutter="22">
              <el-col
                v-for="node in nodeList"
                :key="node.id"
                :span="12"
              >
                <div class="interface-edit-card">
                  <div class="card-button-close">
                    <i class="el-icon-close" />
                  </div>
                  <div class="card-header">
                    <span>{{ node.nodeName }}</span>
                    <el-checkbox v-model="node.isChecked" />
                  </div>
                  <div class="card-main">
                    <span>{{ node.IPAddr }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-aside>
      </el-container>
      <el-footer
        class="part part3"
        height="360px"
      >
        <div class="header">
          <span class="title">源数据管理</span>
          <el-button
            class="button-white"
            size="small"
          >新增</el-button>
        </div>
        <div class="main">
          <el-row :gutter="20">
            <el-col
              v-for="source in sourceList"
              :key="source.id"
              :span="4"
            >
              <div class="interface-edit-card">
                <div class="card-button-close">
                  <i class="el-icon-close" />
                </div>
                <div class="card-header">
                  <span>{{ source.sourceName }}</span>
                  <el-checkbox v-model="source.isChecked" />
                </div>
                <div class="card-main">
                  <span>{{ source.desc }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        active: '1',
        name: '',
        desc: '',
        type: '',
        protocol: '',
        options: '',
        cache: '1',
        dataType: '',
        dataOptions: ''
      },
      formOptions: {
        type: [
          {
            value: '1',
            label: '主动拉取'
          },
          {
            value: '2',
            label: '自动拉取'
          }
        ],
        protocol: [
          {
            value: 'IBMMQ',
            label: 'IBMMQ'
          },
          {
            value: 'http',
            label: 'http'
          }
        ],
        dataType: [
          {
            value: 'kafka',
            label: 'kafka'
          },
          {
            value: 'MQ',
            label: 'MQ'
          }
        ]
      },
      nodeList: [
        {
          id: 0,
          nodeName: '首都机场BHS',
          IPAddr: '192.168.1.1',
          isChecked: false
        },
        {
          id: 1,
          nodeName: '主采集节点',
          IPAddr: '10.12.13.112',
          isChecked: true
        },
        {
          id: 2,
          nodeName: '备用采集节点',
          IPAddr: '10.12.13.112',
          isChecked: true
        }
      ],
      checkedNodeList: [],
      sourceList: [
        {
          id: 0,
          sourceName: 'BSM',
          desc: '行李源报文',
          isChecked: true
        },
        {
          id: 1,
          sourceName: 'BPM',
          desc: '行李处理报文',
          isChecked: true
        },
        {
          id: 2,
          sourceName: '航班动态',
          desc: '国航全球航班计划及航班动态信息',
          isChecked: false
        }
      ],
      sourceCheckedList: []
    }
  }
}
</script>

<style lang="scss" scoped>
.interface-edit {
  padding: 16px 0 8px;
  overflow: hidden;
  > .scrollbar {
    padding: 0 24px;
    height: calc(100vh - 104px);
    overflow-x: hidden;
    overflow-y: auto;
    ::v-deep .part {
      background: #ffffff;
      padding: 24px 33px 20px 24px;
      .header {
        display: flex;
        justify-content: space-between;
        .title {
          flex: 1;
          position: relative;
          padding-left: 16px;
          height: 20px;
          line-height: 32px;
          font-size: 20px;
          font-weight: bold;
          &::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 20px;
            background: #2d67e3;
            top: 6px;
            left: 0;
          }
        }
        button {
          width: 64px;
          height: 32px;
          &.button-white {
            background: #ffffff;
            border: 1px solid #92ace2;
            color: #2d67e3;
          }
        }
      }
      label,
      span,
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: Helvetica, 'Microsoft YaHei';
        font-size: 14px;
      }
      label {
        color: #303133;
      }
      input {
        color: #101116;
      }
      .el-radio {
        font-weight: 400;
      }
      .interface-edit-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px 14px 16px 16px;
        background: #f5f7fa;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        position: relative;
        font-family: Helvetica, 'Microsoft YaHei';
        .card-button-close {
          position: absolute;
          top: -12px;
          right: -12px;
          z-index: 10;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background: #000000;
          opacity: 0.8;
          border-radius: 50%;
          color: #ffffff;
          cursor: pointer;
        }
        .card-header {
          display: flex;
          justify-content: space-between;
          color: #101116;
          font-weight: bold;
          font-size: 14px;
        }
        .card-main {
          color: #afb4bf;
          font-size: 12px;
        }
      }
      &.part1 {
        .header {
          .el-form-item {
            .el-form-item__label {
              line-height: 34px;
            }
            .el-form-item__content {
              height: 32px;
              line-height: 32px;
            }
          }
        }
        .main {
          span {
            line-height: 32px;
          }
        }
      }
    }
    .part2 {
      margin-left: 16px;
      .main {
        margin-top: 4px;
        .interface-edit-card {
          margin-top: 20px;
          height: 104px;
        }
      }
    }
    .part3 {
      margin-top: 16px;
      .main {
        margin-top: 4px;
        .interface-edit-card {
          margin-top: 20px;
          height: 120px;
        }
      }
    }
  }
}
</style>
