<template>
  <van-swipe-cell>
    <div class="XFItem-box">
      <div class="name">
        {{props.data.xm}}
        <span v-for="v in props.dic.D_BZ_XB " :key="v"> 
          <span class="xb" v-if="v.dm == props.data.xb">{{v.text}}</span>
        </span>
      </div>
      <div class="text">
        身份证号：<span class="mess">{{props.data.sfzh}}</span>
      </div>
      <div class="text">籍贯：<span class="mess">{{props.data.jg}}</span></div>
      <div class="text">联系电话：<span class="mess">{{props.data.lxdh}}</span></div>
    </div>
    <template #right>
      <van-button style="height: 100%; width: 60px" type="primary" @click="gotoEdit">编辑</van-button>
      <van-button style="height: 100%; width: 60px" type="danger" @click="deleteItem" >删除</van-button>
    </template>
  </van-swipe-cell>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, reactive, defineEmits, defineProps } from "vue";
const emits = defineEmits(["deletedata"]);
const router = useRouter();
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  dic:{
    type: Object,
    default: {},
  }
});

// 编辑
function gotoEdit() {
  localStorage.setItem('XF_Active',0)
  router.push({ path: "/Declaration/addEditCyry", query: { id: props.data.id } });
}
// 删除
function deleteItem() {
  emits("deletedata", props.data.id);
}
</script>

<style lang="scss" scoped>
.XFItem-box {
  padding: 3vw 4vw;
  box-sizing: border-box;
  background-color: #f6fafd;
  position: relative;
  .name {
    color: #4788e1;
    line-height: 6vw;
    .xb {
      margin: 0 14px;
    }
  }
  .text {
    color: #9f9f9f;
    line-height: 6vw;
    .mess {
      color: #000;
    }
  }
}
</style>