<template>
  <div class="home">
    <nav-bar/>
    <!--div class="bj"></div-->
    <div class="container">
      <!-- <div>注：如果就诊后查不到相关缴费等信息，可以重新添加一下就诊卡！</div> -->
      <div class="list">
        <ul>
          <li v-for="item in list" :key="item.list">
            <div class="info" @click="handleDetail(item)">
              <div>
                <h3>{{ item.name }}</h3>
                <p>卡号：{{ item.cardNo }}</p>
              </div>
            </div>
            <div class="del" @click="handleDel(item.id)">删除</div>
            <em class="on" v-if="item.isYes == 0">默认</em>
          </li>
        </ul>
      </div>
    </div>
    <div class="di_nav1">
      <router-link to>
        <router-link to="Member_jzrbj">
          <van-icon name="add-o"/>
          添加就诊人
        </router-link>
      </router-link>
    </div>

    <div class="gao"></div>
  </div>
</template>

<script>
import {
  apiUserCardList,
  apiUserCardDel,
  apiUserCardAdd,
} from "@/request/api.js";
import {Dialog, Toast} from "vant";

export default {
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      list: [],
    };
  },
  filters: {
    strFilter(val) {
      // console.log(val)
      return val ? val.replace(val.substring(4, val.length - 4), "*****") : "";
    },
  },
  mounted() {
    // console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
    this.getList();
  },
  methods: {
    handleDetail(val) {
      let _this = this;
      let formData = {
        QueryCode: val.cardNo,
        QueryType: "0",
        QueryBusiness: "0",
        isYes: "0",
        isModify: "1", //1是修改信息，0是查询病人信息
      };
      console.log(formData);
      apiUserCardAdd(formData).then((res) => {
        //Toast("设置默认就诊人成功");
        console.log(res);
        console.log(res.data);
        sessionStorage.setItem("card", JSON.stringify(val));
        this.getList();
      });

      if (this.$route.query.f && this.$route.query.f == 1) {
        //alert(JSON.stringify(val));
        sessionStorage.setItem("card", JSON.stringify(val));
        this.$router.back(-1);
        return;
      }
      //this.$router.push({ path:'/Member_jzrbj', query: { id:val.id } });
    },
    handleDel(id) {
      let _this = this;
      Dialog.confirm({
        title: "标题",
        message: "是否删除就诊卡",
      })
          .then(() => {
            apiUserCardDel({id}).then((res) => {
              Toast("删除成功");
              sessionStorage.removeItem("card");
              _this.getList();
            });
          })
          .catch(() => {
          });
    },
    getList() {
      apiUserCardList().then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
  },
};
</script>


<style scoped lang="scss">
.list {

  padding: 0.375rem 0;

  ul li {
    background: linear-gradient(270deg, #b0deff, #1078ee);
    border-radius: 0.375rem;
    display: flex;
    position: relative;
    margin-bottom: 0.25rem;
    align-items: center;

    .del {
      width: 1rem;
      text-align: center;
      color: red;
    }

    .info {
      width: calc(100% - 1.5rem);
      padding: 0.375rem;
      box-sizing: border-box;
      position: relative;

      h3 {
        font-size: 0.4rem;
        margin-bottom: 0.1rem;
        color: #fff;
      }

      p {
        font-size: 0.375rem;
        color: #fff;
      }
    }

    em.on {
      width: 1.5rem;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.25rem;
      background: linear-gradient(270deg, #166bcc, #0095ff);
      border-radius: 0 0.25rem;
      text-align: center;
      color: #fff;
      position: absolute;
      right: 0;
      top: 0;
    }

  }
}

.di_nav1 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.8rem;
  background: #fff;

  a {
    width: 8rem;
    height: 1rem;
    background: #166bcc;
    border-radius: 0.375rem;
    font-size: 0.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  i {
    margin-right: 0.25rem;
    font-size: 0.5rem;
  }
}

.gao {
  height: 1.8rem;
}
</style>
