<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" @change="handleChange" />
    </van-dropdown-menu>
    <div class="content">
      <div class="cell">
        <p class="label">单位名称</p>
        <p class="value">{{ detail.aae044 }}</p>
      </div>
      <div class="cell">
        <p class="label">险种类型</p>
        <p class="value">{{ detail.aae140 }}</p>
      </div>
      <div class="cell">
        <p class="label">缴费状态</p>
        <p class="value">{{ detail.aac031 }}</p>
      </div>
      <div class="cell">
        <p class="label">个人缴费基数</p>
        <p class="value">{{ detail.aae180 }}</p>
      </div>
      <div class="cell">
        <p class="label">单位缴费比例</p>
        <p class="value">{{ detail.aaa042 }}</p>
      </div>
      <div class="cell">
        <p class="label">个人缴费比列</p>
        <p class="value">{{ detail.aaa041 }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
import { social } from "@/api/insurance";

Vue.use(DropdownMenu).use(DropdownItem);

export default {
  data() {
    return {
      idCard: null,
      dataSrc: [],
      value: 0,
      option: [],
      detail: {},
    };
  },
  methods: {
    handleChange(value) {
      this.dataSrc.forEach((item) => {
        if (item.aae140code === value) {
          this.detail = item;
        }
      });
    },
    init() {
      let params = {
        busCode: "WS-B0004",
        aae135: this.idCard,
        cpage: 1,
        rows: 1000,
        encryptIdCard: this.idCard
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      social(params).then((res) => {
        this.$toast.clear();
        if (res.data.tradeMsg.data.busiId !== "0000") {
          this.$toast("未查询到相关社保信息");
          this.payNoData = true;
          return;
        }
        const list = res.data.tradeMsg.data.dataSet.rowSet.row;
        if (list.__proto__.constructor !== Array) {
          let a = [];
          a.push(list);
          this.dataSrc = a;
        } else {
          this.dataSrc = list;
        }
        this.option = this.dataSrc.map((item) => {
          return {
            text: item.aae140,
            value: item.aae140code,
          };
        });
        this.value = this.option[0].value;
        this.dataSrc.forEach((item) => {
          if (item.aae140code === this.value) {
            this.detail = item;
          }
        });
      });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.idCard = JSON.parse(res).idCardNo;
    this.init();
  },
};
</script>

<style lang="stylus" scoped>
.content {
  margin-top 20px;
  height calc(100vh - 120px)
  overflow-y auto

  .cell {
    padding 39px 30px
    display flex;
    align-items center;
    justify-content space-between
    border-bottom 1px solid #eee
    background #fff

    .label {
      font-size: 32px;
      color: #333333;
    }
    .value {
      width calc(100vw - 300px)
      text-align right
      line-height 50px
      font-size: 32px;
      color: #333333;
    }
  }
}
</style>
