<template>
  <div class="partition">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="partitionBox">
        <div class="partitionOne" v-for="(item, index) in this.zone" :key="index">
          <div class="partitionLeft">
            <p>分区名称：{{ item.name }}</p>
            <p>分区类型：{{ item.type }}</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="addPartition" />新增
      </div>
    </div>

    <van-action-sheet
      v-model="newShow"
      :actions="actions"
      cancel-text="取消"
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { GetAllZone, DeleteZone } 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,
      zone: [],
      total: 0,
      id: 0,
      index: 0,
      number: 0
    };
  },
  methods: {
    onLoad() {},
    onCancel() {},
    addPartition() {
      this.$router.push("/addpartition?active=" + this.active);
    },
    GetAllZone() {
      GetAllZone(this.page, this.limit).then(response => {
        if (response.data.state === 1) {
          var zone = response.data.data.zone;
          // console.log("分区", zone);
          for (let i = 0; i < zone.length; i++) {
            if (zone[i].type === 1) {
              zone[i].type = "普通";
            }
            if (zone[i].type === 2) {
              zone[i].type = "乙肝";
            }
            if (zone[i].type === 3) {
              zone[i].type = "丙肝";
            }
            if (zone[i].type === 4) {
              zone[i].type = "艾滋病";
            }
            if (zone[i].type === 5) {
              zone[i].type = "肺结核";
            }
            if (zone[i].type === 6) {
              zone[i].type = "梅毒";
            }
          }
          let arr = this.zone;
          arr.push(...zone);
          this.zone = arr;
          var total = response.data.data.total;
          this.total = total;
          this.loading = false;
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        this.page++;
        if (this.page <= Math.ceil(this.total / 10)) {
          this.GetAllZone(this.page, this.limit);
        } else {
          this.loading = false;
          this.finished = true;
        }
      }, 1000);
    },
    onCancel() {
      this.show = false;
    },
    onSelect(val) {
      if (val.name === "删除") {
        this.DeleteZone(this.id, this.number, this.index);
      }
      if (val.name === "编辑") {
        this.$router.push("/editpartition?id=" + this.id);
      }
    },
    Delete(id, number, index) {
      this.newShow = true;
      this.id = id;
      this.index = index;
      this.number = number;
    },
    DeleteZone(id, number, index) {
      if (number !== "") {
        this.$toast("该分区存在床位号，不能删除");
        this.newShow = false;
        return false;
      }
      Dialog.confirm({
        title: "删除提示!",
        message: "确认删除该条信息吗?,删除后将无法恢复!"
      }).then(() => {
        DeleteZone(id).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg;
            console.log("msg", msg);
            this.zone.splice(index, 1);
            this.newShow = false;
          }
        });
      });
    }
  },
  created() {
    this.GetAllZone();
  }
};
</script>

<style lang="scss" scoped>
.partition {
  margin-bottom: 3.125rem;
  .partitionBox{
    >div:last-child{
      border: none;
    }
  }

  
  .partitionOne {
    padding: 1.375rem 1.125rem 0 1.5rem;
    display: flex;
    justify-content: space-between;
    // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e5e5;
    p {
      font-size: 0.9375rem;
      margin-bottom: 1.125rem;
    }
    .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>
