<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- <date-range-picker
          type="datetimerange"
          v-model="query.time"
          class="date-item"
          style="width: 350px !important"
        /> -->
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入名称查询"
          style="width: 150px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.dataType"
          clearable
          size="small"
          placeholder="选择数据分类"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option label="RealData" :value="100"></el-option>
          <el-option label="AlarmData" :value="200"></el-option>
        </el-select>
        <el-input
          v-model="query.ip"
          clearable
          size="small"
          placeholder="输入IP查询"
          style="width: 150px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.port"
          clearable
          size="small"
          placeholder="输入端口查询"
          style="width: 150px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.host"
          clearable
          size="small"
          placeholder="输入主机查询"
          style="width: 150px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.useExchange"
          clearable
          size="small"
          placeholder="是否使用交换器"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="620px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="90px" inline>
        <div>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width: 190px" />
          </el-form-item>
          <el-form-item label="数据分类" prop="dataType">
            <el-select
              v-model="form.dataType"
              filterable
              size="small"
              placeholder="请选择"
              class="filter-item"
              style="width: 190px"
            >
              <el-option label="RealData" :value="100"></el-option>
              <el-option label="AlarmData" :value="200"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="IP" prop="ip">
            <el-input v-model="form.ip" style="width: 190px" />
          </el-form-item>
          <el-form-item label="端口" prop="port">
            <el-input v-model="form.port" style="width: 190px" />
          </el-form-item>
          <el-form-item label="主机名称" prop="host">
            <el-input v-model="form.host" style="width: 190px" />
          </el-form-item>
        </div>

        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" style="width: 190px" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" style="width: 190px" />
        </el-form-item>
        <div>
          <el-form-item label="使用交换器" prop="useExchange">
            <el-switch
              v-model="form.useExchange"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </el-form-item>
        </div>
        <div v-if="form.useExchange">
          <el-form-item label="交换器名称" prop="exchangeName">
            <el-input v-model="form.exchangeName" style="width: 190px" />
          </el-form-item>
          <el-form-item label="交换器类型" prop="exchangeType">
            <el-select
              v-model="form.exchangeType"
              filterable
              size="small"
              placeholder="请选择"
              class="filter-item"
              style="width: 190px"
            >
              <el-option label="direct" value="direct"></el-option>
              <el-option label="topic" value="topic"></el-option>
              <el-option label="fanout" value="fanout"></el-option>
              <el-option label="headers" value="headers"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路由键" prop="routingKey">
            <el-input v-model="form.routingKey" style="width: 190px" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="队列名" prop="queueName">
            <el-input v-model="form.queueName" style="width: 190px" />
          </el-form-item>
        </div>
        <div class="queue-box">
          <div class="title">
            <span class="el-form-item__label">队列参数</span>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addQueueArgs"
            ></el-button>
          </div>
          <div class="queue-content">
            <div class="queue-item" v-for="(item, index) of form.queueArguments" :key="index">
              <el-form-item label="名称" label-width="60px">
                <el-input v-model="item.name" style="width: 160px" />
              </el-form-item>
              <el-form-item label="值" label-width="60px">
                <el-input v-model="item.value" style="width: 160px" />
              </el-form-item>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeQueueArgs(index)"
              ></el-button>
            </div>
          </div>
        </div>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" rows="3" v-model="form.desc" style="width: 480px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="订阅名称" prop="name" align="center"></el-table-column>
      <el-table-column label="数据分类" prop="dataType" align="center"></el-table-column>
      <el-table-column label="IP" prop="ip" align="center"></el-table-column>
      <el-table-column label="端口" prop="port" align="center"></el-table-column>
      <el-table-column label="主机名称" prop="host" align="center"></el-table-column>
      <el-table-column label="用户名" prop="userName" align="center"></el-table-column>
      <el-table-column label="密码" prop="password" align="center"></el-table-column>
      <el-table-column label="使用交换器" prop="useExchange" align="center">
        <template slot-scope="scope">
          {{ scope.row.useExchange === true ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="交换器名称" prop="exchangeName" align="center"></el-table-column>
      <el-table-column label="交换器类型" prop="exchangeType" align="center"></el-table-column>
      <el-table-column label="路由键" prop="routingKey" align="center"></el-table-column>
      <el-table-column label="队列名" prop="queueName" align="center"></el-table-column>
      <el-table-column label="队列参数" prop="queueArguments" align="center">
        <template slot-scope="scope">
          {{ JSON.stringify(scope.row.queueArguments) }}
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="desc" align="center"></el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'subscribe:edit', 'subscribe:del'])"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudSubscribe from '@/api/dataComm/dataPubSub'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'

const defaultForm = {
  id: '',
  name: '', // 名称
  type: '1', // 类型
  dataType: '', // 数据分类
  ip: '', // ip
  port: '', // 端口
  host: '', // 主机名称
  userName: '', // 用户名
  password: '', // 密码
  useExchange: false, // 使用交换机
  exchangeName: '', // 交换机名称
  exchangeType: '', // 交换器类型
  routingKey: '', // 路由键
  queueName: '', // 队列名
  queueArguments: [{ name: '', value: '' }], // 队列参数
  desc: '',
}

export default {
  name: 'subscribe',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker },
  cruds() {
    return CRUD({
      title: '数据订阅',
      url: 'dataPubSub/rabbitMQ/getList',
      listOrder: [],
      crudMethod: { ...crudSubscribe },
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
  },
  data() {
    return {
      permission: {
        add: ['admin', 'subscribe:add'],
        edit: ['admin', 'subscribe:edit'],
        del: ['admin', 'subscribe:del'],
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        dataType: [{ required: true, message: '请选择数据分类', trigger: 'blur' }],
        ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
        host: [{ required: true, message: '请输入主机名称', trigger: 'blur' }],
        port: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.query.type = '1'
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    addQueueArgs() {
      const obj = { name: '', value: '' }
      this.form.queueArguments.push(obj)
    },
    removeQueueArgs(index) {
      this.form.queueArguments.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
.queue-box {
  .title {
    display: flex;
    align-items: center;
    height: 32px;
    span {
      width: 100px;
      font-weight: 700;
    }
  }
  .queue-content {
    padding: 18px 30px;
    .queue-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }
}
.table-opt-box {
  display: flex;
  justify-content: center;
  .slot-btn {
    .el-button {
      margin-left: 0;
      margin-right: 8px;
    }
  }
}
</style>
