<template>
  <div class="subscribe">
    <!-- 订阅中心 -->
    <el-row>
      
      <span class="unread1">12</span>
    <el-tabs v-model="activeName" @tab-click="handleClick">       
      <el-tab-pane :label="$t(`subscribe.subscribe2`)" name="first">
        <!-- 选择订阅 -->
        <el-row>
          <div class="subscribeDetails">
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 日报订阅 -->
                <span>{{$t(`subscribe.DailySubscription`)}}:</span>
              </el-col>
              <el-col class="subscribeCheckbox" :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 周报订阅 -->
                <span>{{$t(`subscribe.WeeklySubscription`)}}:</span>
              </el-col>
              <el-col :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 重大消息订阅 -->
                <span>{{$t(`subscribe.MajorSubscription`)}}:</span>
              </el-col>
              <el-col :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>

            <el-tag type="warning" style="width: 10%; text-align: center"
              >{{$t(`subscribe.ConfirmSubscription`)}}</el-tag
            >
          </div>
        </el-row>
       
        <!-- 订阅操作历史 -->
        <el-row>
          <h3>{{$t(`subscribe.SubscriptionHistory`)}}</h3>
          <el-table
            class="table"
            :data="tableData"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column fixed prop="date" :label="$t(`subscribe.number`)" width="150">
            </el-table-column>
            <el-table-column fixed prop="date" :label="$t(`subscribe.time`)">
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.user`)"> </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.OperationContent`)">
            </el-table-column>
          </el-table>
        </el-row>

        <!-- 消息历史 -->
        <el-row>
          <h3>{{$t(`subscribe.MessageHistory`)}}</h3>
          <el-table
            class="table"
            :data="tableData"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column fixed prop="date" :label="$t(`subscribe.number`)" width="150">
            </el-table-column>
            <el-table-column fixed prop="date" :label="$t(`subscribe.time`)">
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.receiveEmail`)"> </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.subscriber1Type`)">
            </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.MessageTitle`)">
            </el-table-column>
            <el-table-column fixed="right" :label="$t(`subscribe.MessageDetails`)" width="120">
              <template>
                <el-button @click="handelDetails" type="text" size="small">
                {{$t(`subscribe.details`)}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <!-- 自定义订阅 -->
      <el-tab-pane :label="$t(`subscribe.customizeSubscription`)" name="second">
        <!-- 选择订阅 -->
        <el-row>
          <div class="subscribeDetails">
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 日报订阅 -->
                <span>{{$t(`subscribe.DailySubscription`)}}:</span>
              </el-col>
              <el-col class="subscribeCheckbox" :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 周报订阅 -->
                <span>{{$t(`subscribe.WeeklySubscription`)}}:</span>
              </el-col>
              <el-col :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 重大消息订阅 -->
                <span>{{$t(`subscribe.MajorSubscription`)}}:</span>
              </el-col>
              <el-col :span="5">
                <span>Email</span>
                <input type="checkbox" />
              </el-col>
              <el-col :span="5">
                <span>Android App</span>
                <input type="checkbox" />
              </el-col>
            </el-row>
          </div>
        </el-row>

        <el-row>
          <!-- 自定义订阅指标 -->
          <h3>{{$t(`subscribe.customizeIndex`)}}</h3>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column :label="$t(`subscribe.number`)" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.IndexName`)" width="120">
            </el-table-column>
            <el-table-column
              prop="address"
              :label="$t(`subscribe.CurrentValue`)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="name"
              width="210"
              :label="$t(`subscribe.ConditionalSelection`)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="name"
               :label="$t(`subscribe.increase`)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.increaseValue`)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="name"
             :label="$t(`subscribe.decline`)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="name"  :label="$t(`subscribe.declineValue`)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.SMA`)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column type="selection" width="55"> </el-table-column>
          </el-table>

          <el-row>
            <!-- 告警周期选择 -->
            <p style="color: rgba(0, 0, 0, 0.7)">{{$t(`subscribe.alarm`)}}:</p>
            <el-col class="period" :span="3">
              <!-- <span class="SMATitle">SMA </span> -->
              <el-select
                size="small"
                v-model="period"
                :placeholder="$t(`login.smaPlaceholder`)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
                <div class="inputBox">
                  <div class="container">
                    <el-input
                      v-model="inputPeriod"
                      placeholder="30"
                      class="input"
                    ></el-input>
                    <span>Days</span>
                  </div>
                  <span class="submit">APPLY</span>
                </div>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <div style="color: rgba(0, 0, 0, 0.7)" class="inputEmail">
              <p>Email:</p>
              <el-input :placeholder="$t(`subscribe.Please`)" size="small"> </el-input>
            </div>
          </el-row>

          <el-row>
            <el-col>
              <div class="checkbox2">
                <span style="color: rgba(0, 0, 0, 0.7); font-size: 14px"
                  >Android App</span
                >
                <input type="checkbox" />
              </div>
            </el-col>
          </el-row>
        </el-row>
        <!-- 确认订阅 -->
        <el-tag
          type="warning"
          style="width: 10%; text-align: center; margin-top: 10px"
          >{{$t(`subscribe.ConfirmSubscription`)}}</el-tag
        >

        <!-- 订阅操作历史 -->
        <el-row>
          <h3>{{$t(`subscribe.SubscriptionHistory`)}}</h3>
          <el-table
            class="table"
            :data="tableData"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column fixed prop="date" :label="$t(`subscribe.number`)" width="150">
            </el-table-column>
            <el-table-column fixed prop="date" :label="$t(`subscribe.time`)">
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.user`)"> </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.OperationContent`)">
            </el-table-column>
          </el-table>
        </el-row>

        <!-- 消息历史 -->
        <el-row>
          <h3>{{$t(`subscribe.MessageHistory`)}}</h3>
          <el-table
            class="table"
            :data="tableData"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column fixed prop="date" :label="$t(`subscribe.number`)" width="150">
            </el-table-column>
            <el-table-column fixed prop="date" :label="$t(`subscribe.time`)">
            </el-table-column>
            <el-table-column prop="name" :label="$t(`subscribe.receiveEmail`)"> </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.subscriber1Type`)">
            </el-table-column>
            <el-table-column prop="province" :label="$t(`subscribe.MessageTitle`)">
            </el-table-column>
            <el-table-column fixed="right" :label="$t(`subscribe.MessageDetails`)" width="120">
              <template>
                <el-button @click="handelCustomizeDetails" type="text" size="small">
                 {{$t(`subscribe.details`)}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <!-- 未读消息详情 -->
      <el-tab-pane :label="$t(`subscribe.unreadMessage`)" name="message">
     
        <div class="subscribeDetails2">
          <el-row class="row">
            <el-col  :span="2"> {{$t(`subscribe.time`)}}: </el-col>
            <el-col :span="10" style="color:rgba(0,0,0,0.7)"> 2023/02/14 </el-col>
          </el-row>
          <el-row class="row">
            <!-- 订阅类型 -->
            <el-col :span="2"> {{$t(`subscribe.subscriber1Type`)}}: </el-col>
            <el-col :span="10" style="color:rgba(0,0,0,0.7)" > 自定义订阅 </el-col>
          </el-row>
          <el-row class="row">
            <!-- 消息标题 -->
            <el-col :span="2" > {{$t(`subscribe.MessageTitle`)}}: </el-col>
            <el-col :span="10" style="color:rgba(0,0,0,0.7)">这是一个标题</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="10">
              <!-- 消息内容 -->
              <p >{{$t(`subscribe.MessageContent`)}}:</p>
              <el-input
                type="textarea"
                resize="none"
                :autosize="{ minRows: 8, maxRows: 10 }"
                disabled
                v-model="content"
              
              ></el-input>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "../subscribe/index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.subscribe {
  // outline: 1px solid red;
  padding: 50px 100px;
  .subscribeDetails {
    color: rgba(0, 0, 0, 0.6);
    //  outline: 1px solid red;
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .subscribeCheckbox {
      display: flex;
      // outline: 1px solid red;
    }
  }
}

// -----------移动平均线--------------------
.period:hover {
  border: 1px solid rgba(0, 0, 0, 0.8);
}
.period {
  // padding-left: 10px;
  // position: absolute;
  // top: 2px;
  // right: 237px;
  // background: #f5921a;
  // padding: 0px 5px;
  height: 30px;
  // width: 400px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  // margin-right: 5px;
  // .SMATitle {
  //   // outline: 1px solid  red;
  //   padding-right: 5px;
  //   height: 30px;
  //   line-height: 28px;
  //   font-size: 13px;
  //   color: rgba(0, 0, 0, 0.5);
  // }
}

.inputBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // outline: 1px solid red;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 5px;
  padding: 2px 5px;
  .container {
    outline: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    //  height: 30px;
    padding: 0px 6px;
  }
  .submit {
    margin-left: 5px;
    font-size: 14px;
    outline: 1px solid rgba(0, 0, 0, 0.3);
    padding: 6px 5px;
    border-radius: 4px;
  }
}
.inputEmail {
  width: 190px;

  // border: 1px solid red;
}
.checkbox2 {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.subscribeDetails2 {
  padding: 20px;
  border: 1px solid rgba(247,149,31, 0.1);
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 2px 0px ;
  border-collapse: separate;
  background: rgba(247,149,31, 0.05);
  
  .row{
    margin-top: 10px;
  }
  
}

.unread1{
    position: absolute;
    display: inline-block;
    // outline: 1px solid red;
    width: 20px;
    line-height: 20px;
    top: -6px;
    left: 260px;
    border-radius: 50%;
    text-align: center;
    font-size: 10px;
    color: aliceblue;
    background: #ea6767;
    z-index: -1;
  }
</style>
<style >
.period .el-select .el-input__inner {
  width: 100%;
  /* background: red; */
  border: none;
  outline: none;
  margin-top: 0px !important;
  height: 28px;
}
</style>