<template>
  <div class="Grouping">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <div class="GroupingBox">
      <div class="GroupingOne" v-for="(item,index) in this.group" :key="index">
        <div class="GroupingLeft">
          <p>分组名称：{{item.name}}</p>
        </div>
        <van-icon class="ellipsis" name="ellipsis" @click="Delete(item.id,item.number,index)" />
      </div>
    </div>
    </van-list>
    <div class="add">
      <div style="display: flex;align-items: center;">
        <van-icon class="addIcon" name="add" @click="addGrouping" />新增
      </div>
    </div>
    <van-action-sheet
      v-model="newShow"
      :actions="actions"
      cancel-text="取消"
      @cancel="onCancel"
      @select="OnSelect"
    />
  </div>
</template>

<script>
import { getAllGroup, DeleteGroup } from "@/api/patient/patient";
import { Dialog } from "vant";
export default {
  props: {
    active: Number
  },
  data() {
    return {
      loading: false,
      finished: false,
      newShow: false,
      actions: [{ name: "编辑" }, { name: "删除" }],
      page: 1,
      limit: 10,
      group: [],
      id: 0,
      index: 0,
      total: 0,
      number: ""
    };
  },
  methods: {
    onCancel() {},
    addGrouping() {
      this.$router.push("/addgroup?active=" + this.active);
    },
    getAllGroup() {
      getAllGroup(this.page, this.limit).then(response => {
        if (response.data.state === 1) {
          var group = response.data.data.group;
          let arr = this.group;
          arr.push(...group);
          this.group = arr;
          // console.log("group", group);
          var total = response.data.data.total;
          // console.log("total", total);
          this.total = total;
          this.loading = false;
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        this.page++;
        if (this.page <= Math.ceil(this.total / 10)) {
          this.getAllGroup(this.page, this.limit);
        } else {
          this.loading = false;
          this.finished = true;
        }
      }, 1000);
    },
    onCancel() {
      this.newShow = false;
    },
    Delete(id, number, index) {
      this.newShow = true;
      this.id = id;
      this.index = index;
      this.number = number;
    },
    OnSelect(val) {
      if (val.name === "删除") {
        this.DeleteGroup(this.id, this.number, this.index);
      }
      if (val.name === "编辑") {
        this.$router.push(
          "/editgroup?id=" + this.id + "&active=" + this.active
        );
      }
    },
    DeleteGroup(id, number, index) {
      if (number !== "") {
        this.$toast("该分组存在床位号，不能删除");
        this.newShow = false;
        return false;
      }
      Dialog.confirm({
        title: "删除提示!",
        message: "确认删除该条信息吗?,删除后将无法恢复!"
      }).then(() => {
        DeleteGroup(id).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg;
            console.log("msg", msg);
            this.group.splice(index, 1);
            this.newShow = false;
          }
        });
      });
    }
  },
  created() {
    this.getAllGroup();
  }
};
</script>

<style lang="scss" scoped>
.Grouping {
  margin-bottom: 3.125rem;
  .GroupingBox{
     >div:last-child{
      border: none;
    }
  }
  .GroupingOne {
    padding: 1.375rem 1.125rem 1.125rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e5e5;
    p {
      font-size: 0.9375rem;
    }
    .ellipsis {
      font-size: 1.5rem;
      color: #cccccc;
    }
  }
  .add {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.9375rem;
    color: #979798;
    .addIcon {
      color: #5b98ff;
      font-size: 1.25rem;
      margin-right: 0.25rem;
    }
  }
}
</style>
