<template>
  <div class="Alarm" v-loading="AlarmLoading">

   
    <el-row>
      <el-col :span="24">
        <div style="display: flex; align-items: center">
          <h2>{{ $t(`login.Alarm`) }}</h2>
          <!-- <i class="i ishuaxin1 Refresh"></i> -->
        </div>
      </el-col>
    </el-row>

    <!-- 标签页 -->
    <el-tabs v-model="activeName">
      <!-- 订阅观察报告 -->
       <!-- <el-tab-pane :label="$t(`subscribe.subscriptionReport`)" name="subscription"> -->
        <!-- 选择订阅 -->
        <!-- <el-row>
          <div class="subscribeDetails">
            <el-row :gutter="20" class="row">
              <el-col :span="3">
                <span>{{ $t(`subscribe.DailySubscription`) }}:</span>
              </el-col>
              <el-checkbox
                @change="handelCheckbox"
                v-model="contact[item]"
                v-for="item in contactList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-row>
            <el-row :gutter="20" class="row">
              <el-col :span="3">
                <span>{{ $t(`subscribe.WeeklySubscription`) }}:</span>
              </el-col>
              <el-checkbox
                @change="handelCheckboxWeekly"
                v-model="contactWeekly[item]"
                v-for="item in contactList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-row> -->
            <!-- 月报订阅 -->
            <!-- <el-row :gutter="20" class="row">
              <el-col :span="3">
                <span>{{$t(`subscribe.monthlyReport`)}}:</span>
              </el-col>
              <el-checkbox
                @change="handelCheckboxMonthly"
                v-model="contactMonthly[item]"
                v-for="item in contactList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-row> -->
            <!-- 重大消息订阅 -->
            <!-- <el-row :gutter="20" class="row">
              <el-col :span="3">
                <span>{{ $t(`subscribe.MajorSubscription`) }}:</span>
              </el-col>
              <el-checkbox
                @change="handelCheckboxMajor"
                v-model="contactMajor[item]"
                v-for="item in contactList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-row>
            <el-row style="margin-top: 100px">
              <el-button
                type="warning"
                style="width: 10%; text-align: center"
                @click="handleConfirm"
                >{{ $t(`subscribe.ConfirmSubscription`) }}</el-button
              >
              <el-button
                @click="handelUnsubscribe"
                type="warning"
                style="width: 10%; text-align: center"
                >{{$t(`subscribe.Unsubscribed`)}}</el-button
              >
            </el-row> -->
          <!-- </div>
        </el-row>
      </el-tab-pane> -->
      <!-- 选择告警指标 -->
      <el-tab-pane
        :label="$t(`subscribe.selectAlarm`)"
        name="selectAlarm"
        class="alarmIndicators"
      >
        <div class="subscribeDetails">
          <!-- <el-row :gutter="20" class="row">
            <el-col :span="2">
         
              <span style="font-size: 14px">指标范围选择:</span>
            </el-col>
            <el-col :span="1">
              <el-radio v-model="range" label="BTC">BTC</el-radio>
            </el-col>
            <el-col :span="1">
              <el-radio v-model="range" label="ETH">ETH</el-radio>
            </el-col>
            <el-col :span="1.5">
              <el-radio v-model="range" label="稳定币">稳定币</el-radio>
            </el-col>
            <el-col :span="1.5">
              <el-radio v-model="range" label="宏观经济指标"
                >宏观经济指标</el-radio
              >
            </el-col>
          </el-row> -->
          <!-- <el-row :gutter="20" class="row">
            <el-col :span="2">
              <span>+/-(涨/跌):</span>
            </el-col>
            <el-col :span="1">
              <el-radio v-model="rise" label="涨">+(涨)</el-radio>
            </el-col>
            <el-col :span="2">
              <el-radio v-model="rise" label="跌">-(跌)</el-radio>
            </el-col>
          </el-row> -->

          <!-- <el-row :gutter="20" class="row">
            <el-col :span="2">
           
              <span>告警周期:</span>
            </el-col>
            <el-col :span="1.5" v-for="item in cycle" :key="item.value">
              <el-radio v-model="radio" :label="item.value">{{
                item.label
              }}</el-radio>
            </el-col>
          </el-row> -->
          <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            style="margin-top: 20px"
          >
            <el-form-item :label="$t(`subscribe.indicatorSelection`)">
              <el-cascader
                v-model="defaultIndex"
                ref="cascader"
                @change="handelIndex"
                :options="getTranslatedOptions"
                :show-all-levels="false"
              ></el-cascader>

              <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </el-form-item>

            <!-- <el-form-item label="条件">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in conditionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
                      
            </el-form-item> -->
            <el-form-item :label="$t(`subscribe.alarmType`)">
              <!-- <el-select v-model="cycle" placeholder="请选择">
                <el-option
                  v-for="item in cycleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-radio-group v-model="threshold2">
                <el-radio
                  v-for="item in alarmType"
                  :key="item.value"
                  @input="handelRadio"
                  :label="item"
                  >{{ $t(item) }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t(`subscribe.alarmCycle`)">
              <el-radio-group v-model="threshold3">
                <el-radio
                  v-for="item in alarmInterval"
                  :key="item.value"
                  @input="handelRadio"
                  :label="item"
                  >{{ $t(item) }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="阈值类型">
              <el-radio @input="handelRadio" v-model="threshold" label="数值"
                >数值</el-radio
              >
              <el-radio @input="handelRadio" v-model="threshold" label="范围"
                >范围</el-radio
              >
            </el-form-item> -->
            <!-- <el-form-item label="阈值(数值型)">
              <el-input
                v-show="threshold == `数值`"
                v-model="formLabelAlign.region"
                @input="handleInput"
                placeholder="请输入最多2位浮点数的数值"
                style="width: 20%"
              ></el-input>

           
               <section style="display: flex"  v-show="activeItem.alarmType.includes(`数值`)">
                <el-input              
                v-model="formLabelAlign.min"
                @input="handleInput"
                placeholder="最小值"
                style="width: 10%"
              ></el-input>
                <span style="color: #ccc; margin: 0px 5px">一</span>
                <el-input
               
                v-model="formLabelAlign.max"
                @input="handleMaxInput"
                placeholder="最大值"
                style="width: 10%"
              ></el-input>
              </section>

            </el-form-item> -->
            <!-- <el-form-item label="阈值(百分比)" v-show="threshold2 == `比值`"> -->
              <!-- <el-input
                v-model="formLabelAlign.content"
                @input="handleInputPercentage"
                placeholder="请输入最多1位浮点数的数值"
                type="text"
                style="width: 20%"
              >
                <span style="padding-right: 10px" slot="suffix">%</span>
              </el-input> -->
              <!-- 范围 -->
              <!-- <section style="display: flex"  v-show="activeItem.alarmType.includes(`比值`)">
                <el-input
                  v-model="formLabelAlign.percentageMin"
                  @input="handleInputPercentageMin"
                  placeholder="最小值"
                  type="text"
                  style="width: 10%"
                >
                  <span style="padding-right: 10px" slot="suffix">%</span>
                </el-input>
                <span style="color: #ccc; margin: 0px 5px">一</span>
                <el-input
                  v-model="formLabelAlign.percentageMax"
                  @input="handleInputPercentageMax"
                  placeholder="最大值"
                  type="text"
                  style="width: 10%"
                >
                  <span style="padding-right: 10px" slot="suffix">%</span>
                </el-input>
              </section> -->
            <!-- </el-form-item> --> 
            <el-form-item :label="$t(`subscribe.addressFilling`)" v-show="threshold2 == `subscribe.address`">
              <el-input 
               
                v-model="address"
                :placeholder="$t(`subscribe.addressPrompt`)"
                type="textarea"
                style="width: 30%;text-transform: none"
                :autosize="{ minRows: 5, maxRows: 10 }"
                resize="none"
                @blur="handleInputBlur"
              >
              </el-input>
              <!-- addressPrompt2 -->
              <div style="color: red;  font-size: 12px;width: 520px;line-height: 20px;margin-top: 5px;">
              {{ $t(`subscribe.addressWarning2`) }}
              </div>
              <div style="color: red;  font-size: 12px;width: 520px;line-height: 20px;margin-top: 5px;">
              {{ $t(`subscribe.addressWarning`) }}
              </div>
            </el-form-item>
            <el-form-item :label="$t(`subscribe.notificationMethod`)">
              <el-checkbox
                @change="handelCheckboxNotice"
                v-model="contactNotice[item]"
                v-for="item in contactList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-form-item>
          </el-form>
          <!-- <el-row :gutter="20">
            <el-col :span="2">
              <span>通知方式:</span>
            </el-col>
            <el-checkbox
              @change="handelCheckboxNotice"
              v-model="contactNotice[item]"
              v-for="item in contactList"
              :label="item"
              :key="item"
              >{{ item }}</el-checkbox
            >
          </el-row> -->
          <el-button
            @click="handelSubmit"
            style=" margin-top: 20px;padding: 10px 10px;width: 150px;box-sizing: border-box"
            type="warning"
            >{{$t(`subscribe.confirmSubmission`)}}</el-button
          >
          <h4>{{ $t(`subscribe.subscribedMetrics`) }}:</h4>
          <el-table
            class="table"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="from"
            style="width: 100%"
            max-height="500"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" :label="$t(`subscribe.subscriptionTime`)"> </el-table-column>
            <el-table-column prop="channel" :label="$t(`subscribe.subscribedChannels`)">
            </el-table-column>
            <el-table-column prop="metrics" :label="$t(`subscribe.subscriptionMetrics`)">
              <template slot-scope="scope">
                {{ handelMetrics(scope.row.metrics) }}
              </template>

            </el-table-column>
            <!-- <el-table-column prop="operator" label="条件">
            </el-table-column> -->
            <el-table-column prop="addresses" :label="$t(`subscribe.alarmThreshold`)">
            </el-table-column>
           
            <el-table-column prop="cycle" :label="$t(`subscribe.alarmCycle`)"> 
              <template slot-scope="scope">
                {{ handelAlarmCycle(scope.row.cycle) }}
              </template>
            </el-table-column>
            <el-table-column prop="noticeWay" :label="$t(`subscribe.notificationMethod`)"> </el-table-column>
            <el-table-column fixed="right" :label="$t(`subscribe.operation`)" width="120">
              <template slot-scope="scope">
                <el-popconfirm :title="$t(`subscribe.unsubscribeReminder`)"
                
                @confirm="deleteRow(scope.row)"
                
                >
                  <el-button
                    type="text"
                   
                    slot="reference"
                    >{{$t(`subscribe.Unsubscribed`)}}</el-button  
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="$t(`subscribe.alarmAcknowledgement`)"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="preview">
        <p>
          <span>{{$t(`subscribe.indicatorSelection`)}}:</span> <span>{{$t(activeItem.label)  }}</span>
        </p>
        <!-- <p>
          <span>+/-(涨/跌):</span> <span>{{ rise }}</span>
        </p>
        <p>
          <span>指标选择:</span> <span>{{ value }}</span>
        </p> -->
        <p>
          <span>{{$t(`subscribe.alarmType`)}}:</span> <span>{{ $t(threshold2) }}</span>
        </p>
        <p>
          <span>{{$t(`subscribe.alarmCycle`)}}:</span> <span>{{$t(threshold3)  }}</span>
        </p>
        <p v-show="address">
          <span>{{$t(`subscribe.address`)}}:</span> <span  style="text-transform: none">{{ address }}</span>
        </p>
        <!-- <p>
          <span>阈值(数值型):</span> <span>{{ formLabelAlign.region ||  `${ formLabelAlign.min} ~ ${ formLabelAlign.max}`}}</span>
        </p> -->
        <!-- <p>
          <span>阈值(百分比):</span>
          <span>{{  `${formLabelAlign.type}` || `${ formLabelAlign.percentageMin}%  ~ ${ formLabelAlign.percentageMax}%` }}</span>
        </p> -->
        <p>
          <span>{{$t(`subscribe.notificationMethod`)}}:</span> <span>{{ modes }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t(`subscribe.Cancel`)}}</el-button>
        <el-button type="warning" @click="handelConfirm" :loading="btLoading"
          >{{$t(`subscribe.Confirm`)}}</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="Text"
      :visible.sync="reportDialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="preview">
        <p>
          <span>{{$t(`subscribe.DailySubscription`)}}:</span> <span>{{ daily }}</span>
        </p>
        <p>
          <span>{{$t(`subscribe.WeeklySubscription`)}}:</span> <span>{{ WeeklyValue }}</span>
        </p>
        <p>
          <span>{{$t(`subscribe.monthlyReport`)}}:</span> <span>{{ MonthlyValue }}</span>
        </p>
        <p>
          <span>{{$t(`subscribe.MajorSubscription`)}}:</span> <span>{{ MajorValue }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reportDialogVisible = false">{{$t(`subscribe.Cancel`)}}</el-button>
        <el-button type="warning" @click="reportDialogVisible = false"
          >{{$t(`subscribe.Confirm`)}}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import IndexJs from "./index";
import i18n from '../../lang/index'
export default {
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '订阅告警,指标变化,Subscribe to alerts, indicator changes'
      },
      {
        name: 'description',
        content:i18n.t(`seo.Alarm`),
        // content:window.vm.$t(`seo.Alarm`)
      }
    ]
  },
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.preview {
  p {
    span:nth-of-type(1) {
      width: 100px;
      display: inline-block;
      text-align: right;
    }
    span:nth-of-type(2) {
      display: inline-block;
      padding-left: 10px;
    }
  }
}
.Alarm {
  padding: 50px 100px;
}
.alarmIndicators {
  font-size: 14px;
}
.subscribeDetails {
  color: rgba(0, 0, 0, 0.6);
  //  outline: 1px solid red;
  width: 100%;
  // min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 0px;
  .row {
    margin-top: 20px;
  }
  .subscribeCheckbox {
    display: flex;
    // outline: 1px solid red;
  }
}
</style>
<style >
</style>
