<template>
  <van-swipe-cell>
    <div class="XFItem-box" @click.stop="handleItem(props.data)">
      <div class="isCheck" v-show="props.data.isCheck" :class="props.data.isCheck ? 'isCheck-y':''"><van-icon name="success" color="#ffffff"></van-icon></div>
      <div class="time"><van-icon name="clock-o" />{{props.data.xfsj}}</div>
      <div class="text">巡防主责人：<span class="mess">{{props.data.xfzzXm}}</span></div>
      <div class="text">巡防商铺：
        <span class="mess">
          <span class="tag" v-for="it in props.data.xfdw" :key="it.id" style="margin:0 4px;">{{it.dwmc}}</span>
        </span>
      </div>
      <div class="text">巡防类型：
        <span class="mess">{{ setDict(props.data.xflx, props.dic.D_BZ_XFLX) }}</span></div>
      <div class="text text_detail">
        巡防内容：<span class="mess">{{props.data.xfnr}}</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 { setDict } from "../../../../utils/dict";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive, defineEmits,defineProps } from "vue";
const emits = defineEmits(['deletedata','chooseData'])
const router = useRouter();
const props = defineProps({
  data:{
    type:Object,
    default:{}
  },
  dic:{
    type:Object,
    default:{}
  }
});

// 编辑
function gotoEdit(){
  localStorage.setItem('XF_Active',3)
  router.push({path: "/Declaration/addEdit", query: {id:props.data.id}});
}
// 删除
function deleteItem(){
  emits('deletedata',props.data.id)
}
// 点击
function handleItem(item){
  emits('chooseData',item)
}
</script>

<style lang="scss" scoped>
.XFItem-box {
  padding: 3vw 4vw;
  box-sizing: border-box;
  background-color: #f6fafd;
  position: relative;
  .isCheck{
    position: absolute;
    top: 0vw;
    right: 0vw;
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    border: 1px solid #c8c9cc;
    text-align: center;
    line-height: 6vw;
  }
  .isCheck-y{
    background: #1989fa;
  }
  .time {
    font-size: 16px;
    line-height: 5vw;
    .van-icon-clock-o {
      margin-right: 2vw;
      font-size: 16px;
    }
  }
  .text {
    color: #9f9f9f;
    line-height: 6vw;
    .mess {
      color: #000;
    }
  }
}
.tag{
  border: 1px solid #5e9fdd;
  border-radius: 4px;
  font-size: 14px;
  color: #409eff;
  padding: 1px 4px;
}
</style>