<template>
  <div class="detail-real-box">
    <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>
</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()

import { listData } from '@/api/system/dict/data';

const weatherpop = ref(false)

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

const industrytypeList = ref('[]')

const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    // {
    //   name: '站点名称',
    //   value: 'XXX积水点',
    // },
    // {
    //   name: '站点编号',
    //   value: '039600001',
    // },
    // {
    //   name: '观测时间',
    //   value: '2023-04-23 18:00',
    // },
    // {
    //   name: '积水深度',
    //   value: '0.18m',
    // },
    // {
    //   name: '责任部门',
    //   value: '市政管理处',
    // },
    // {
    //   name: ' 责  任  人',
    //   value: '张三 136****8659',
    // },
    // {
    //   name: '通行状态',
    //   value: '缓慢通行',
    // },
    // {
    //   name: '报警信息',
    //   value: '通行正常通行正常通行正常通行正常',
    // },
    // {
    //   name: '安装照片',
    //   type: 'src',
    //   value: getImageUrl('install', 'cockpit'),
    // },


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

function showpic () {

};

// ** 查询字典数据列表 */
function getList2 (type) {
  listData({ dictType: type }).then((res) => {
    switch (type) {
      case 'drainage_user_industry_type':
        industrytypeList.value = res.data
        break;
    }
    fuzhiobj()
  });
}

function GetTypeName (value) {
  let name = industrytypeList.value.filter(item => {
    return item.dictValue == value
  })[0].dictLabel
  return name
}


function fuzhiobj () {
  GetObj.value = props.pointfeature
  switch (Number(GetObj.value.pointType)) {
    // 排水户
    case 12:
      allData.jsdList = [
        {
          name: '责任人',
          value: GetObj.value.dutyPerson,
        },
        {
          name: '联系方式',
          value: GetObj.value.dutyTellPhone,
        },
        {
          name: '行业类别',
          value: GetTypeName(GetObj.value.industryType),
        },
        {
          name: '是否是重点排水户',
          value: GetObj.value.importFlag == 1 ? '是' : '否'
        },

        {
          name: '是否办理排水证',
          value: GetObj.value.certificateStatus == 'NaN' ? '未办理' : GetObj.value.certificateStatus == 'normal' ? '有效' : '过期'
        },
        {
          name: '办证年份',
          value: GetObj.value.certificateYear,
        },
        {
          name: '地址',
          value: GetObj.value.drainageUserAddress,
        },
        {
          name: '有效开始时间',
          value: GetObj.value.certificateStartTime,
        },
        {
          name: '有效结束时间',
          value: GetObj.value.certificateEndTime,
        },

        // {
        //   name: '安装照片',
        //   type: 'src',
        //   value: getImageUrl('install', 'cockpit'),
        // },


      ]
      break;
  }
}

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


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

.detail-real-box {
  flex-wrap: wrap;
  overflow-y: auto;
}

.left-item {
  width: 50%;
  min-height: 40px;
  height: auto;
  display: flex;
  align-items: center;
  .item-name {
    width: 50%;
  }
  .item-value {
    width: 50%;
    color: #fff;
  }
}
</style>