<template>
  <div style="height: 100%">
    <div class="rules-header">
      <div>
        <a-row type="flex" :gutter="10">
          <a-col flex="190px">
            <a-button class="rules-add" @click="handleAdd">
              <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
              <span style="margin-left: 10px"> Create Alarm Rule </span>
            </a-button>
          </a-col>
          <a-col flex="300px">
            <span class="item-label">Rule Status</span>
            <a-select
              style="width: 180px; display: inline-block"
              v-model="queryParams.station"
              :options="stateOptions"
              show-arrow
              allowClear
              placeholder="select..."
              @change="onStateChange"
            >
              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            </a-select>
          </a-col>
          <a-col flex="300px">
            <span class="item-label">Source Type</span>
            <a-select
              style="width: 180px; display: inline-block"
              v-model="queryParams.type"
              :options="typeOptions"
              show-arrow
              allowClear
              placeholder="select..."
              @change="onTypeChange"
            >
              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            </a-select>
          </a-col>
          <a-col flex="255px">
            <span class="item-label">Source</span>
            <a-select
              style="width: 180px; display: inline-block"
              v-model="queryParams.name"
              :options="nameOptions"
              show-arrow
              allowClear
              placeholder="select..."
              @change="onNameChange"
            >
              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            </a-select>
          </a-col>
          <a-col>
            <a-button class="search-btn" @click="onSearch">
              <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
              <span style="margin-left: 10px"> Search </span>
            </a-button>
          </a-col>
        </a-row>
      </div>
      <!-- <a-button class="rules-reset" @click="resetQuery" style="display:none">
        <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
        <span style="margin-left: 10px;">
          Refresh
        </span>
      </a-button> -->
    </div>
    <div class="rules-content">
      <a-spin :spinning="spinning">
        <div class="monitor-list">
          <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
            <div class="monitor-list-item-title">
              <div class="monitor-list-item-title-name">{{ item.name }}</div>
              <div class="monitor-list-item-title-server">
                <span style="color: #5b9cba">{{ item.sourceType }}：</span>
                <a-tooltip>
                  <template slot="title">
                    {{ item.sourceName }}
                  </template>
                  <span style="color: #ade6ee">{{ item.sourceName }}</span>
                </a-tooltip>
              </div>
            </div>
            <div class="monitor-list-item-content">
              <div class="monitor-list-item-content-info">
                {{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }}
                {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
              </div>
              <div
                :class="[
                  item.enabled == 1 ? 'monitor-list-item-content-enable' : 'monitor-list-item-content-disable',
                  'monitor-list-item-content-btn',
                ]"
              >
                {{ item.enabled == 1 ? 'Enable' : 'Disabled' }}
              </div>
            </div>
            <div class="monitor-list-item-footer">
              <div class="monitor-list-item-footer-group">
                <span style="color: #5b9cba">Alarm Contact Group：</span>
                <span style="color: #ade6ee">{{ item.groupName }}</span>
              </div>
              <div class="monitor-list-item-footer-actions">
                <span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
                <span title="Delete" class="actions-delete" @click="deleteItem(item.id)"></span>
                <span
                  v-if="item.enabled == 1"
                  title="Enable"
                  class="actions-enable"
                  @click="changeItemStatus(item.id, item.enabled)"
                >
                </span>
                <span
                  v-if="item.enabled == 0"
                  title="Disabled"
                  class="actions-disable"
                  @click="changeItemStatus(item.id, item.enabled)"
                >
                </span>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
      <a-pagination
        size="small"
        v-model="ipagination.current"
        :pageSize="ipagination.pageSize"
        :page-size-options="ipagination.pageSizeOptions"
        show-size-changer
        show-quick-jumper
        :total="ipagination.total"
        :show-total="
          (total, range) =>
            `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
        "
        show-less-items
        @change="handlePageChange"
        @showSizeChange="handleSizeChange"
      />
    </div>
    <a-modal
      :title="isAdd ? 'Add Rule' : 'Edit Rule'"
      :width="845"
      v-model="visible"
      :maskClosable="false"
      @cancel="onCancel"
    >
      <a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="[15, 0]">
          <a-col :span="12">
            <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
              <a-select
                v-model="form.sourceType"
                :options="typeOptions"
                show-arrow
                allowClear
                placeholder="select..."
                @change="onSourceTypeChange"
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="sourceId" label="Source" prop="sourceId">
              <a-select
                v-model="form.sourceId"
                :options="sourceOptions"
                show-arrow
                allowClear
                labelInValue
                placeholder="select..."
                @change="onSourceChange"
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[15, 0]">
          <a-col :span="12">
            <a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
              <a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
              <a-select
                v-model="form.itemId"
                :options="itemOptions"
                show-arrow
                allowClear
                labelInValue
                placeholder="select..."
                @change="onItemChange"
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[15, 0]">
          <a-col :span="12">
            <a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
              <a-select
                v-model="form.operator"
                :options="operatorOptions"
                show-arrow
                allowClear
                placeholder="select..."
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="threshold" label="Threshold" prop="threshold">
              <a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[15, 0]">
          <a-col :span="12">
            <a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
              <a-select
                v-model="form.silenceCycle"
                :options="silenceCyclerOptions"
                show-arrow
                allowClear
                placeholder="select..."
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
              <a-select
                v-model="form.contactId"
                :options="contactGroupOptions"
                show-arrow
                allowClear
                placeholder="select..."
              >
                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-space class="operators" :size="20">
          <a-button type="success" @click="onSave">Save</a-button>
          <a-button type="warn" @click="onCancel">Cancel</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage'
import BoxTitle from '../../components/boxTitle.vue'
export default {
  components: {
    BoxTitle,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      spinning: false,
      isAdd: true,
      ipagination: {
        current: 1,
        pageSize: 9,
        pageSizeOptions: ['9', '18', '27'],
        showTotal: (total, range) => {
          const { current, pageSize } = this.ipagination
          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      visible: false,
      queryParams: {
        station: undefined,
        type: undefined,
        name: undefined,
      },
      stateOptions: [
        {
          label: 'Disabled',
          value: '0',
        },
        {
          label: 'Enable',
          value: '1',
        },
      ],
      typeOptions: [
        {
          label: 'Server',
          value: 'Server',
        },
        {
          label: 'Database',
          value: 'Database',
        },
        {
          label: 'E-MAIL',
          value: 'Email',
        },
      ],
      nameOptions: [],
      monitorList: [],
      // 表单
      form: {
        sourceType: undefined,
        sourceId: undefined,
        name: '',
        itemId: undefined,
        operator: undefined,
        threshold: '',
        silenceCycle: undefined,
        contactId: undefined,
      },
      currId: '',
      units: '',
      sourceOptions: [],
      operatorOptions: [
        {
          label: '>',
          value: '>',
        },
        {
          label: '<',
          value: '<',
        },
        {
          label: '>=',
          value: '>=',
        },
        {
          label: '<=',
          value: '<=',
        },
        {
          label: '==',
          value: '==',
        },
      ],
      itemOptions: [],
      silenceCyclerOptions: [
        {
          label: '5 minutes',
          value: 300,
        },
        {
          label: '15 minutes',
          value: 900,
        },
        {
          label: '30 minutes',
          value: 1800,
        },
        {
          label: '60 minutes',
          value: 3600,
        },
        {
          label: '3 hours',
          value: 10800,
        },
        {
          label: '6 hours',
          value: 21600,
        },
        {
          label: '12 hours',
          value: 43200,
        },
        {
          label: '24 hours',
          value: 86400,
        },
      ],
      contactGroupOptions: [],
      rules: {
        sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
        sourceId: [{ required: true, message: 'Please select a source', trigger: 'change' }],
        name: [{ required: true, message: 'Please input alarmRule name' }],
        itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
        operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
        threshold: [{ required: true, message: 'Please input threshold' }],
        silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
        contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.getAlarmRulesPage()
    this.getAlarmGroup()
  },
  methods: {
    getAlarmSources(val) {
      getAction('/alarmRule/getSources', { souceType: val }).then((res) => {
        if (res.success) {
          this.nameOptions = res.result.map((item) => {
            return {
              label: item.sourceName,
              value: item.sourceId,
            }
          })
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    getSourcesOptions(val) {
      getAction('/alarmRule/getSources', { souceType: val }).then((res) => {
        if (res.success) {
          this.sourceOptions = res.result.map((item) => {
            return {
              label: item.sourceName,
              value: item.sourceId,
            }
          })
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    getAlarmRulesPage() {
      this.spinning = true
      let params = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        enabled: this.queryParams.station,
        sourceType: this.queryParams.type,
        sourceId: this.queryParams.name,
      }
      getAction('/alarmRule/findPage', params).then((res) => {
        this.spinning = false
        if (res.success) {
          this.monitorList = res.result.records
          this.ipagination.total = res.result.total
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    onSearch() {
      this.ipagination.current = 1
      this.getAlarmRulesPage()
    },
    resetQuery() {
      this.queryParams = {
        station: undefined,
        type: undefined,
        name: undefined,
      }
    },
    handlePageChange(page, pageSize) {
      this.ipagination.current = page
      this.ipagination.pageSize = pageSize
      this.getAlarmRulesPage()
    },
    handleSizeChange(current, size) {
      this.ipagination.current = current
      this.ipagination.pageSize = size
      this.getAlarmRulesPage()
    },
    onTypeChange(val) {
      this.queryParams.type = val
      if (val) {
        this.getAlarmSources(val)
      } else {
        this.nameOptions = []
      }
    },
    onStateChange(val) {
      this.queryParams.station = val
    },
    onNameChange(val) {
      this.queryParams.name = val
    },
    getUid() {
      return (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
    },
    handleAdd() {
      this.isAdd = true
      this.visible = true
    },
    onSourceTypeChange(val) {
      this.form.sourceType = val
      this.form.sourceId = undefined
      this.form.itemId = undefined
      if (val) {
        this.getSourcesOptions(val)
      } else {
        this.sourceOptions = []
      }
    },
    onSourceChange(val, option) {
      if (val) {
        this.form.sourceId = val
        this.getItems(val.key)
      } else {
        this.form.sourceId = {}
        this.form.itemId = undefined
      }
    },
    getItems(val) {
      getAction('/alarmRule/getItems', { sourceId: val }).then((res) => {
        if (res.success) {
          this.itemOptions = res.result.map((item) => {
            return {
              label: item.name,
              value: item.itemId,
              units: item.units,
            }
          })
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    onItemChange(val, option) {
      this.form.itemId = val
      this.units = option.data.props.units
    },
    getAlarmGroup() {
      let params = {
        pageNo: 1,
        pageSize: 9999,
      }
      getAction('/alarmContactGroup/findPage', params).then((res) => {
        if (res.success) {
          this.contactGroupOptions = res.result.records.map((item) => {
            return {
              label: item.name,
              value: item.id,
            }
          })
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    onSave() {
      this.$refs.al_ruleForm.validate((valid) => {
        if (valid) {
          let params = {
            silenceCycle: this.form.silenceCycle,
            contactId: this.form.contactId,
            sourceId: this.form.sourceId.key,
            sourceType: this.form.sourceType,
            itemId: this.form.itemId.key,
            rule: {
              name: this.form.itemId.label,
              operator: this.form.operator,
              threshold: this.form.threshold,
              units: this.units,
            },
            name: this.form.name,
            id: this.isAdd ? '' : this.currId,
          }
          if (this.isAdd) {
            postAction('/alarmRule/create', params).then((res) => {
              if (res.success) {
                this.visible = false
                this.$message.success('success')
                this.getAlarmRulesPage()
              } else {
                this.$message.warning('This operation fails. Contact your system administrator')
              }
            })
          } else {
            httpAction('/alarmRule/update', params, 'put').then((res) => {
              if (res.success) {
                this.visible = false
                this.$message.success('success')
                this.getAlarmRulesPage()
              } else {
                this.$message.warning('This operation fails. Contact your system administrator')
              }
            })
          }
        }
      })
    },
    onCancel() {
      this.resetForm()
      this.visible = false
    },
    editItem(id) {
      getAction('/alarmRule/findInfo', { alarmRuleId: id }).then(async (res) => {
        if (res.success) {
          this.isAdd = false
          this.form.sourceType = res.result.sourceType
          this.form.sourceId = {
            key: res.result.sourceId || '',
            label: res.result.sourceName || '',
          }
          this.form.name = res.result.name
          this.form.itemId = {
            key: res.result.itemId,
            label: JSON.parse(res.result.operator).name,
          }
          this.form.operator = JSON.parse(res.result.operator).operator
          this.form.threshold = JSON.parse(res.result.operator).threshold
          this.units = JSON.parse(res.result.operator).units
          this.form.silenceCycle = res.result.silenceCycle
          this.form.contactId = res.result.contactId
          this.currId = res.result.id
          this.visible = true
          getAction('/alarmRule/getSources', { souceType: res.result.sourceType })
            .then((res) => {
              if (res.success) {
                this.sourceOptions = res.result.map((item) => {
                  return {
                    label: item.sourceName,
                    value: item.sourceId,
                  }
                })
              } else {
                this.$message.warning('This operation fails. Contact your system administrator')
              }
            })
            .catch((err) => {
              this.$message.warning('This operation fails. Contact your system administrator')
            })
          getAction('/alarmRule/getItems', { sourceId: res.result.sourceId })
            .then((res) => {
              if (res.success) {
                this.itemOptions = res.result.map((item) => {
                  return {
                    label: item.name,
                    value: item.itemId,
                    units: item.units,
                  }
                })
              } else {
                this.$message.warning('This operation fails. Contact your system administrator')
              }
            })
            .catch((err) => {
              this.$message.warning('This operation fails. Contact your system administrator')
            })
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    deleteItem(id) {
      let _this = this
      this.$confirm({
        title: 'Are you sure to delete this item?',
        onOk() {
          deleteAction('/alarmRule/deleteById', { alarmRuleId: id }).then((res) => {
            if (res.success) {
              _this.$message.success('success')
              _this.getAlarmRulesPage()
            } else {
              _this.$message.warning('This operation fails. Contact your system administrator')
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    changeItemStatus(id, isEnabled) {
      putAction(`/alarmRule/updateStatus?alarmRuleId=${id}&enabled=${isEnabled == 1 ? 0 : 1}`).then((res) => {
        if (res.success) {
          this.$message.success('success')
          this.getAlarmRulesPage()
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    resetForm() {
      this.$refs.al_ruleForm.resetFields()
      this.form = {
        sourceType: undefined,
        sourceId: undefined,
        name: '',
        itemId: undefined,
        operator: undefined,
        threshold: '',
        silenceCycle: undefined,
        contactId: undefined,
      }
      this.sourceOptions = []
      this.itemOptions = []
      this.units = ''
    },
  },
}
</script>

<style lang="less" scoped>
.ant-row-flex {
  flex-flow: nowrap;
}
.operators {
  width: 100%;
  justify-content: center;
  .ant-btn {
    width: 92px;
  }
}
/deep/.ant-modal-title {
  letter-spacing: 1px;
}
.ant-select {
  .ant-select-arrow-icon {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  &-open {
    .ant-select-arrow-icon {
      transform: rotate(180deg);
    }
  }
}
.ant-select-dropdown-content {
  position: relative;
  background: #03353f;
}
.rules-header {
  height: 50px;
  border-top: 1px solid rgba(13, 235, 201, 0.3);
  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
  margin: 0 0 0px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: rgba(12, 235, 201, 0.05);
  .item-label {
    display: inline-block;
    font-size: 16px;
    font-family: ArialMT;
    color: #ade6ee;
    line-height: 32px;
    height: 32px;
    margin-right: 10px;
  }
  .rules-add {
    background-color: #1397a3;
    font-family: ArialMT;
    color: #ffffff;
    border: none;
  }
  .search-btn {
    margin-left: 10px;
    background-color: #1397a3;
    font-family: ArialMT;
    color: #ffffff;
    border: none;
  }
  .rules-reset {
    background-color: #1397a3;
    font-family: ArialMT;
    color: #ffffff;
    border: none;
    float: right;
  }
}
.rules-content {
  height: calc(100% - 65px);
  margin-left: 20px;
  position: relative;
  overflow: hidden;
  .ant-spin-nested-loading {
    width: 100%;
    height: calc(100% - 40px);
  }
  .monitor-list {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    &-item {
      width: 32.76%;
      height: 224px;
      // margin-top: 15px;
      background-color: rgba(2, 40, 43, 0.5);
      border: solid 1px rgba(65, 111, 127, 0.5);
      position: relative;
      margin-top: 15px;
      &-title {
        height: 50px;
        padding: 0 15px 0 20px;
        background-color: rgba(13, 109, 118, 0.2);
        border-bottom: solid 1px rgba(65, 111, 127, 0.2);
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        font-family: ArialMT;
        &-name {
          font-size: 16px;
          color: #00bded;
        }
        &-server {
          width: 55%;
          font-size: 14px;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &-content {
        padding: 15px 20px;
        &-info {
          font-family: ArialMT;
          font-size: 16px;
          color: #ade6ee;
        }
        &-btn {
          margin-top: 10px;
          display: inline-block;
          padding: 3px 10px;
        }
        &-enable {
          background-color: #098839;
        }
        &-disable {
          background-color: #8a8a8a;
        }
      }
      &-footer {
        width: 100%;
        height: 32px;
        position: absolute;
        bottom: 10px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-group {
          font-family: ArialMT;
          font-size: 14px;
        }
        &-actions {
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-left: 5px;
            cursor: pointer;
          }
          .actions-edit {
            background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat;
            background-size: 100% 100%;
            &:hover {
              background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat;
              background-size: 100% 100%;
            }
          }
          .actions-delete {
            background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat;
            background-size: 100% 100%;
            &:hover {
              background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat;
              background-size: 100% 100%;
            }
          }
          .actions-enable {
            background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat;
            background-size: 100% 100%;
            &:hover {
              background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat;
              background-size: 100% 100%;
            }
          }
          .actions-disable {
            background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat;
            background-size: 100% 100%;
            &:hover {
              background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    &::after {
      content: '';
      width: 32.76%;
    }
  }
  .ant-pagination {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
}
</style>