<template>
  <view>
    <Navbar title="升级公告" />
    <div class="content">
      <u-list>
        <div class="title-wrapper">
          <div>更新时间</div>
          <div>更新内容</div>
        </div>
        <u-list-item v-for="(item, index) in dataList" :key="index">
          <div class="item-wrapper">
            <div>{{ item.label }}</div>
            <div>
              <u-button type="primary" text="查看" size="mini" plain hairline @click="handleCheck(item)" />
            </div>
          </div>
        </u-list-item>
      </u-list>
    </div>

    <u-modal :show="show" :title="title" :negativeTop="-200">
      <view class="slot-content">
        <div>尊敬的用户:</div>
        <div class="item">本次系统升级，更新{{ content }}</div>
      </view>
      <u-icon
        slot="confirmButton"
        class="modal-btn"
        name="/static/images/imgs/close.png"
        size="30"
        @click="show = false"
      />
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          label: '2024-01-01 12:00',
          value: 1000
        },
        {
          label: '2024-01-01 12:00',
          value: 100
        },
        {
          label: '2024-01-01 12:00',
          value: 999
        },
        {
          label: '2024-01-01 12:00',
          value: 888
        }
      ],
      show: false,
      title: '升级通知',
      content: ''
    }
  },
  methods: {
    handleCheck(item) {
      console.log('查看', item)
      this.show = true
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;
  .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background: #f8f9fc;
    border-radius: 4px 4px 4px 4px;
  }

  .item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
}

.slot-content {
  text-align: start;
  font-weight: 400;
  font-size: 13px;
  color: #0f274b;
  .item {
    text-indent: 2em;
    white-space: pre-wrap;
    overflow: hidden;
  }
}
.modal-btn {
  margin: 10px auto 0;
}
/deep/ .u-modal__button-group--confirm-button {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
/deep/ .u-modal__content {
  justify-content: start !important;
}
</style>
