<template>
  <div class="detail" v-loading="loading">
    <KVTable title="基本信息" :list="basicInfo" :rightButton="rightButton">
      <template #slotValue="slot">
        <template v-if="slot.row.needMap">
          <span class="point" @click="showMap">{{ slot.row.value }}<i class="blueFont el-icon-location"></i></span>
        </template>
        <template v-else>
          {{ slot.row.value }}
        </template>
      </template>
    </KVTable>
    <KVTable title="消防信息" :list="fireInfo" kvStyle="margin-top: 10px;"/>
    <KVTable title="标签信息" :list="tagInfo" kvStyle="margin-top: 10px;"/>
    <template v-for="(item, index) in cardInfo">
      <KVTable title="安全合格证" :list="item" :key="index" kvStyle="margin-top: 10px;">
        <template #slotValue="slot">
          <template v-if="slot.row.file">
            <el-image
              v-for="id in slot.row.value.split(',')"
              :key="id"
              style="width: 100px; height: 100px;margin: 5px;"
              :src="`/v2/api/file/${id}`"
              :preview-src-list="previewList(slot.row.value)">
            </el-image>
          </template>
          <template v-else>
            {{ slot.row.value }}
          </template>
        </template>
      </KVTable>
    </template>

    <el-dialog :title="resoureData && resoureData.enforce_obj_address" :visible.sync="showAddressMap">
      <position-map :coor="coor"></position-map>
    </el-dialog>
  </div>
</template>

<script>
import KVTable from '@/component/KVTable'
import PositionMap from '@/component/PositionMap'

import {getEnforceItem, getPlaceTypes, loadTags} from '@/api/resource'
import { resourceMixin } from '@/mixin/resource'
import { notEmpty, formatDate } from '@/utils/tool';

export default {
  components: {
    KVTable,
    PositionMap
  },
  computed: {
    resourceId () {
      return this.$route.query.id
    },
    previewList () {
      return (ids) => {
        if (ids) {
          return ids.split(',').map(id => {
            return `/v2/api/file/${id}`
          })
        } else {
          return []
        }
      }
    },
    coor() {
      if (this.resoureData && this.resoureData.longitude && this.resoureData.latitude) {
        return {
          lat: this.resoureData.latitude,
          lng: this.resoureData.longitude
        }
      }
      return null
    }
  },
  mixins: [resourceMixin],
  data () {
    return {
      resoureData: null,
      loading: false,
      basicInfo: [],
      fireInfo: [],
      tagInfo: [],
      cardInfo: [],
      rightButton: {},
      showAddressMap: false,
    }
  },
  mounted () {
    if (this.resourceId) {
        this.getDetail()
        this.getTags()
    }
  },
  methods: {
    showMap() {
      if (this.resoureData.longitude && this.resoureData.latitude) {
        this.showAddressMap = true
      }
      else {
        this.$message.warning('坐标异常，无法展示');
      }
    },
    getDetail () {
      this.loading = true
      getPlaceTypes().then(result => {
        this.placeType = result;

        getEnforceItem(this.resourceId).then(res => {
          this.resoureData = res;
          this.generateBasicInfo(res)
          this.generateFireInfo(res)
          this.generateCardInfo(res.certificates || [])
          this.loading = false
        })
      });
    },
    getTags() {
        loadTags(this.resourceId).then(res => {
          if (res && res.length > 0) {
            let tagInfo = []
            for (let index in res) {
              let tag = {
                label: '主标签',
                value: res[index].tag_name
              }
              tagInfo.push(tag)
              let tempSubTag = []
              if (res[index].sub_tags && res[index].sub_tags.length > 0) {
                  for (let subIndex in res[index].sub_tags) {
                      tempSubTag.push(res[index].sub_tags[subIndex].tag_name)
                  }
              }
              let subTag = {
                label: '次标签',
                value: tempSubTag.join('    ')
              }
              tagInfo.push(subTag)
            }
            this.tagInfo = tagInfo
          }
        })
    },
    generateBasicInfo (res) {
      this.basicInfo = [
        {
          label: '单位名称：',
          value: res.enforce_obj_name || '-'
        },
        {
          label: '社会信用代码：',
          value: res.credit_code || '-'
        },
        {
          label: '单位地址：',
          value: res.enforce_obj_address || '-',
          needMap: true
        },
        {
          label: '经纬度：',
          value: (res.longitude || '') + ', ' + (res.latitude || '')
        },
        {
          label: '成立日期：',
          value: res.register_date || '-'
        },
        {
          label: '营业期限：',
          value: res.operating_date || '-'
        },
        {
          label: '单位法人：',
          value: res.legal_person || '-'
        },
        {
          label: '联系电话：',
          value: res.legal_person_phone || '-'
        },
        {
          label: '经营状态：',
          value: this.manageStatus[res.manage_status] || '-',
          row: true,
        },
        // {
        //   label: '',
        //   value: ''
        // }
      ]
    },
    generateFireInfo (res) {
      let last_select_time = '暂无';
      if (notEmpty(res.last_select_time)) {
        last_select_time = formatDate(res.last_select_time, true);
      }
      this.fireInfo = [
        {
          label: '所属辖区：',
          value: res.enforce_org_name || '-'
        },
        {
          label: '检查流程：',
          value: res.enforce_template_name || '-'
        },
        {
          label: '单位规模：',
          value: this.parseUnitSize(res.enforce_obj_type) || '-'
        },
        {
          label: '场所类型：',
          value: this.parsePlaceType(res.place_type) || '-'
        },
        {
          label: '所在建筑：',
          value: this.parseArchitectureType(res.architecture_type) || '-'
        },
        {
          label: '建筑安全：',
          value: this.parseResponsibilityType(res.hole_responsibility) || '-'
        },
        {
          label: '面积：',
          value: res.area || '-'
        },
        {
          label: '单位体量：',
          value: res.obj_mass || '-'
        },
        {
          label: '消防安全责任人：',
          value: res.charge_person || '-'
        },
        {
          label: '联系电话：',
          value: res.charge_person_phone || '-'
        },
        {
          label: '消防安全管理人：',
          value: res.manage_person || '-'
        },
        {
          label: '联系电话：',
          value: res.manage_person_phone || '-'
        },
        {
          label: '联系人：',
          value: res.contact_person || ''
        },
        {
          label: '联系电话：',
          value: res.contact_phone || ''
        },
        {
          label: '抽中次数：',
          value: res.select_times || '0'
        },
        {
          label: '上次抽取时间：',
          value: last_select_time
        }
      ]
    },
    generateCardInfo (res) {
      const result = []
      res.map(item => {
        result.push([
          {
            label: '消防文件号数：',
            value: item.cer_no || '-'
          },
          {
            label: '使用性质：',
            value: item.usage_type || '-'
          },
          {
            label: '场所层数：',
            value: item.floor || '-',
            row: true,
            first: true
          },
          {
            label: '消防设施：',
            value: item.facility || '-',
            row: true
          },
          {
            label: '证件上传：',
            value: item.file_ids || '',
            file: true,
            row: true
          },
        ])
      })
      this.cardInfo = result
    }
  }
}
</script>

<style lang="scss" scoped>
.point {
  cursor: pointer;
}
</style>
