<template>
  <div class="inspectorRecord">
    <div class="table-top">
      <div class="header-item">日期</div>
      <div class="header-item">督察人员</div>
    </div>

    <div class="list">
      <div
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <span>{{ item.createdAt }}</span>
        <span>{{ item.supervisorUser.nickname }}</span>
        <van-icon name="arrow" :size="14" color="#000000" />
      </div>
    </div>

    <div class="bottom">
      <van-button round color="#C4C7CC" @click="$router.go(-1)"
        >返回</van-button
      >
      <van-button round :color="$colors.prim" @click="add">添加记录</van-button>
    </div>

    <!-- <div class="add" @click="add">添加记录</div> -->
  </div>
</template>

<script>
export default {
  name: "inspectorRecord",
  metaInfo() {
    return {
      title: "监察记录"
    };
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    add() {
      this.$router.push({
        name: "addRecord",
        query: { recordId: this.$route.query.id }
      });
    },
    goDetail(id) {
      this.$router.push({ name: "addRecord", query: { id: id } });
    }
  },
  mounted() {
    this.$http
      .get(`/regulatory/byRecord`, {
        recordId: this.$route.query.id
      })
      .then(res => {
        this.list = res;
      });
  }
};
</script>
<style lang="less" scoped>
.inspectorRecord {
  .title {
    font-size: 36px;
    text-align: center;
    font-weight: 700;
    margin: 20px;
  }
  .table {
    margin-top: 50px;
  }
  .add {
    width: 90%;
    margin: 0 auto;
    padding: 5px 0;
    background-color: skyblue;
    text-align: center;
    border-radius: 4px;
    color: #fff;
  }
  .row {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    // text-align: start;
    & + .row {
      margin-top: 12px;
    }
    .name {
      width: 33%;
    }
    .data {
      width: 33%;
    }
    .operat {
      width: 33%;
      text-align: center;
      span {
        border: 1px solid #ccc;
        padding: 3px 5px;
      }
    }
  }
}
.table-top {
  position: fixed;
  height: 44px;
  background: #ffffff;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 0 36px;
  .header-item {
    flex-grow: 1;
    font-size: 14px;
    color: #c4c7cc;
    line-height: 44px;
    text-align: center;
  }
}

.list {
  padding: 60px 16px calc(env(safe-area-inset-bottom) + 100px);
}

.item {
  display: flex;
  height: 70px;
  background: #ffffff;
  border-radius: 12px;
  align-items: center;
  position: relative;
  padding: 0 20px;
  span {
    font-size: 14px;
    font-weight: bold;
    color: #313233;
    line-height: 28px;
    flex-grow: 1;
    // text-align: center;
  }

  .van-icon {
    position: absolute;
    right: 10px;
  }

  &:not(:first-child) {
    margin-top: 12px;
  }
}

.bottom {
  background: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 26px calc(env(safe-area-inset-bottom) + 6px);
  display: flex;
  justify-content: space-between;
  z-index: 20;

  .van-button {
    height: 48px !important;
    &:first-child {
      width: 82px;
    }
    &:last-child {
      width: 228px;
    }
  }
}
</style>
