<template>
  <div class="detail-real-box">
    <div class="realbox-left realbox-top">
      <div class="left-item"
           v-for="(item,index) in allData.jsdList"
           :key="index">
        <div class="item-name">{{item.name}}</div>
        <div class="item-value"
             v-if="item.type=='src'">
          <el-image style=" height: 40px"
                    :src="item.value"
                    :zoom-rate="1.2"
                    :preview-src-list="allData.srcList"
                    :initial-index="0"
                    fit="cover" />
        </div>
        <div class="item-value"
             v-else
             :title="item.value">{{item.value}}</div>
      </div>

    </div>

    <div class="realbox-bottom">
      <el-table height='100%'
                :data="allData.listData">
        <el-table-column label="部门"
                         align="center"
                         prop="departmentName" />
        <el-table-column label="职位"
                         align="center"
                         prop="jobTitle" />
        <el-table-column label="姓名"
                         align="center"
                         prop="name" />
        <el-table-column label="联系方式"
                         align="center"
                         prop="concatPhone" />
        <el-table-column label="值守状态"
                         align="center"
                         prop="isCheck">
          <template #default="scope">
            {{scope.row.isCheck==0?'否':scope.row.isCheck==1?'是':scope.row.isCheck==2?'未安排任务':''}}
          </template>

        </el-table-column>
      </el-table>
    </div>

  </div>

</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()


const weatherpop = ref(false)

import {
  floodPointgetDetail,
} from "@/api/cockpit";


const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});

const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    {
      name: '责任人',
      value: '039600001',
    },
    {
      name: '联系方式',
      value: '2023-04-23 18:00',
    },
    {
      name: '所属部门',
      value: '0.18m',
    },
    {
      name: '所属区域',
      value: '市政管理处',
    },
  ],

  listData: [],

  url: getImageUrl('install', 'cockpit'),
  srcList: [getImageUrl('install', 'cockpit')],
})
const GetObj = ref({})

function showpic () {

};

function fuzhiobj () {
  GetObj.value = props.pointfeature
  onLoadData()
}


function onLoadData () {
  floodPointgetDetail(GetObj.value.pointId).then(response => {
    allData.listData = response.data.fxFloodPointPersonList;

    console.log('allData.listData', response.data);
    allData.jsdList = [
      {
        name: '责任人',
        value: response.data.reportedConcatPerson,
      },
      {
        name: '联系方式',
        value: response.data.reportedConcatPhone,
      },
      {
        name: '所属部门',
        value: response.data.reportedDepartment,
      },
      {
        name: '所属区域',
        value: response.data.regionName,
      },
    ]

  }).catch(() => {
  })
}

// onMounted(() => {
//   console.log(props.pointfeature);
// })

fuzhiobj()


</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  display: block;
}

.realbox-top {
  height: 100px !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;

  .left-item {
    width: 45% !important;
  }
}

.realbox-bottom {
  height: calc(100% - 108px);
}
</style>