<template>
  <div>
    <el-drawer v-model="visible" size="700px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="drawer-header">
          <el-icon class="el-icon--close" @click="close">
            <Close />
          </el-icon>
          <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </div>
      </template>
      <div v-if="equipment" class="drawer-content">
        <!-- 基础信息 -->
        <div class="basic-info-area">
          <DetailInfoBox :data="equipment" :title="'基础信息'" :dataConfig="showDataConfig['基础信息']" />

          <div class="right-wrapper">
            <div>
              <el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
              <el-tag v-if="equipment.sbzt === '损坏'" type="danger" size="small">损坏</el-tag>
              <el-tag v-if="equipment.sbzt === '报废'" type="danger" size="small">报废</el-tag>
            </div>
            <div class="photo-block">
              <el-image v-if="defaultPhoto" style="width: 100%; height: 100%" :src="defaultPhoto" :zoom-rate="1.2"
                :max-scale="7" :min-scale="0.2" :preview-src-list="photos" show-progress :initial-index="4"
                fit="cover" />
              <div v-else class="no-photo">
                <span>暂无图片</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 设备位置 -->
        <DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />

        <!-- 设备管理情况 -->
        <DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备管理情况'"
          :dataConfig="showDataConfig['设备管理情况']" />
      </div>

      <!-- 设备情况 -->
      <template v-for="(item, index) in statusList">
        <DetailInfoBox class="detail-info-box" :data="item" :title="index == 0 ? '设备情况' : ''"
          :dataConfig="showDataConfig['设备情况']" />
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import DetailInfoBox from '@/component/DetailInfoBox/DetailInfoBox.vue'
import { formatDate } from '../../../../shared/utils'

const visible = ref(false)
const title = ref('设备详情')
const equipment = ref(null)
const statusList = ref([])
const defaultPhoto = ref('')
const photos = ref([])
const showDialog = (data) => {
  equipment.value = data.equipment || {}
  statusList.value = data.statusList || []
  photos.value = data.photos?.length ? data.photos.map((item) => item.photoUrl) : []
  defaultPhoto.value = photos.value && photos.value[0] || null
  visible.value = true
}

const showDataConfig = ref({
  '基础信息':
    [{
      "label": "设备名称",
      "name": "sbmc"
    }, {
      "label": "设备大类",
      "name": "sbdl"
    }, {
      "label": "设备类型",
      "name": "sblx"
    }, {
      "label": "设备编号",
      "name": "sbbh"
    }, {
      "label": "设备型号",
      "name": "sbxh"
    }, {
      "label": "生产商",
      "name": "sccj"
    }, {
      "label": "所属服务站",
      "name": "yhzmc"
    }, {
      "label": "上传人",
      "name": "czy"
    }, {
      "label": "上传时间",
      "name": "tjsj"
    }, {
      "label": "备注",
      "name": "remark"
    }],
  "设备位置": [{ "label": "设备位置", "name": "sbwz" }, { "label": "设备经度", "name": "jd" }, { "label": "设备纬度", "name": "wd" }],
  "设备管理情况": [
    { "label": "设备管理人员", "name": "glry" },
    { "label": "操作员", "name": "czy" },
    {
      "label": "购置日期", "name": "gzrq",
      "value": (item) => {
        return item.gzrq ? formatDate(item.gzrq) : ''
      }
    },
    { "label": "购买费用（万元）", "name": "gmfy" },
    { "label": "应急设备", "name": "sfyjsb" },
    { "label": "纳入市级补助范围", "name": "sfnrsjbz" },
    { "label": "辐射范围", "name": "fsfw" }
  ],
  "设备情况": [
    {
      "label": (item) => {
        if (item.equipmentStatus == '正常') return '设备状态'
        if (item.equipmentStatus == '损坏') return '损坏原因'
        if (item.equipmentStatus == '报废') return '报废原因'
      },
      "value": (item) => {
        if (item.equipmentStatus == '正常') return '正常'
        if (item.equipmentStatus == '损坏') return item.statusDesc
        if (item.equipmentStatus == '报废') return item.statusDesc
      }
    },
    {
      "label": "上报时间",
      "value": (item) => {
        return item.reportTime ? formatDate(item.reportTime) : ''
      }
    },
    {
      "label": "上报人",
      "name": "userName"
    }
  ]
})

defineExpose({
  showDialog
})

</script>

<style lang="scss" scoped>
.drawer-header {
  display: flex;
  align-items: center;

  .el-icon--close {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
  }
}

.basic-info-area {
  position: relative;

  .right-wrapper {
    position: absolute;
    top: 45px;
    right: 50px;
    display: flex;
    gap: 30px;

    .photo-block {
      width: 150px;
      height: 167px;

      .no-photo {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 6px;
        color: #999;
      }
    }
  }
}

:deep(.detail-info-box) {
  .info-item-list-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 20px;
}

:deep(.el-drawer__body) {
  padding: 15px;
  background-color: rgb(242, 242, 242);
}
</style>