<template>
  <div>
    <el-page-header
      :content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' : '') + detail.dikuaimingcheng"
      style="
        padding: 1em;
        font-size: 1em;
        background: #fff;
        margin: 1.67em 0;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 5px;
      "
      @back="$router.back()"
    >
    </el-page-header>

    <el-row :gutter="20">
      <el-col :span="14">
        <el-card v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
          <div class="el-descriptions__header el-descriptions__title">资产图集</div>
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in detail.id_assets_picture_files_file_id_relation">
              <el-image
                style="width: 100%; height: 100%;"
                :src="item.url"
                :preview-src-list="picList"
                fit="contain"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card>
          <el-descriptions title="基本信息" :column="2" :label-style="{'font-weight': '600'}">
            <el-descriptions-item v-for="item in fields" :label="item.name" v-if="!['file','picture'].find(j => j === item.field)">{{
                contentFormat(item)
              }}{{ units.get(item.field) }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card>
          <div class="el-descriptions__header el-descriptions__title">资产相关附件</div>
          <template>
            <template v-if="detail.id_assets_file_files_file_id_relation && detail.id_assets_file_files_file_id_relation.length > 0">
              <div v-for="item in detail.id_assets_file_files_file_id_relation">
                <a :download="item.url">{{ item.original_name }}</a>
              </div>
            </template>
            <template v-else>
              <el-empty description="无"></el-empty>
            </template>
          </template>
        </el-card>


        <el-card>
          <div class="el-descriptions__header el-descriptions__title">资产证件图片</div>
          <template>
            <template  v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
              <div v-for="item in detail.id_assets_picture_files_file_id_relation">
                <el-image
                  style="width: 100%; height: 100%;"
                  :src="item.url"
                  :preview-src-list="picList"
                  fit="contain"></el-image>
              </div>
            </template>
            <template v-else>
              <el-empty description="无"></el-empty>
            </template>
          </template>
        </el-card>
      </el-col>
      <el-col :span="10" >
        <el-card>
          <div class="el-descriptions__header el-descriptions__title">资产历史</div>
          <template>
            <template v-if="histories && histories.length > 0">
              <Timeline>
                <TimelineItem v-for="(item,index) in histories" :key="item.id">
                  <p>{{ item.riqi }}</p>
                  <div v-html="item.neirong"></div>
                  <el-image style="width: 78%;height: 160px;" v-for="img in item.id_his_tupian_files_asset_history_id_relation" :src="img.url" fit="contain"></el-image>
                </TimelineItem>

              </Timeline>
            </template>
            <template v-else>
              <el-empty description="无"></el-empty>
            </template>
          </template>
        </el-card>
        <el-card>
          <div class="el-descriptions__header el-descriptions__title">资产地图</div>

          <div class="map" id="detail-map" style="width: 100%;height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { show, index } from "@/api/system/baseForm";
import { show as formShow } from "@/api/system/customForm";
import { getparameter } from '@/api/system/dictionary'
import { listdept } from '@/api/system/department'
export default {
  data() {
    return {
      center: [120.283692, 31.614211],
      marker: {},

      histories: [],
      picList: [],
      detail: {},
      fields: [],
      relation: [],
      customForm: {
        customFormId: "",
        tableName: "",
      },


      units: new Map([
        ['jianzhu','m²'],
        ['jianzhugaodu','m'],
        ['dikuaizongjia','元'],
        ['dikuaimianji','m²'],
        ['muqianjunjia','元'],
      ])
    }
  },
  methods: {

    init() {
      this.map = new AMap.Map("detail-map", {
        center: this.center,
        mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
        zoom: 60
      });

      this.map.remove(this.marker);
      if (this.detail.zichanweizhi) {
        let lat, lng;
        [lng, lat] = this.detail.zichanweizhi.split(",");
        let marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [Number(lng), Number(lat)],
          offset: new AMap.Pixel(-13, -30),
        });
        let markerContent = document.createElement("div");
        markerContent.setAttribute("class", "map-marker");
        let markerImg = document.createElement("img");
        markerImg.src =
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
        let markerSpan = document.createElement("span");
        markerSpan.setAttribute("class", "map-marker__text");
        markerSpan.innerText = this.detail.dikuaimingcheng;
        markerContent.appendChild(markerImg);
        markerContent.appendChild(markerSpan);
        marker.setContent(markerContent);

        this.marker = marker;
        this.map.add(this.marker)
        this.map.setFitView(this.marker);
      }
    },


    async getFields () {
      if (this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
        try {
          let custom_form = JSON.parse(decode);
          this.customForm.customFormId = custom_form.custom_form_id;
          this.customForm.tableName = custom_form.table_name;
        } catch (err) {
          console.warn(err);
        }
      }

      const res = await formShow({ id: this.customForm.customFormId }, false);
      this.fields = res.fields.sort((a,b) => a.sort - b.sort)
      this.relation = res.relation


      //字段处理
      //初始表白名单
      let baseTable = new Map([
        ['departments', async () => {
          const res = await listdept()
          return res
        }],
        ['admins',[]]
      ])
      let { fields, relation } = this
      if (
        !fields ||
        !relation ||
        !fields instanceof Array ||
        !relation instanceof Array
      ) {
        throw new Error("fields或relation格式错误");
      }
      fields.sort((a,b) => a.sort - b.sort).forEach(i => {
        i._relations = relation.find(
          (j) => j.link_table_name.split("_")[1] === i.field
        );
        if (i.select_item && typeof i.select_item === "object") {
          let keys = Object.keys(i.select_item);
          i._params = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(i.select_item[key])
                ? Number(i.select_item[key])
                : i.select_item[key],
            };
          });
        }
        if (i.edit_input === 'file' || i.edit_input === 'files') {
          return
        }
        if (i._relations) {
          if (baseTable.get(i._relations.link_table_name)) {
            baseTable
              .get(i._relations.link_table_name)()
              .then((res) => {
                i._params = res.data;
              });
          } else {
            i._params = i._relations.parameter_id
              ? getparameter({ id: i._relations.parameter_id }, false).then(
                (res) => {
                  i._params = res.detail;
                }
              )
              : this.index({
                table_name: i._relations.link_table_name,
                page: 1,
                page_size: 9999,
              }).then((res) => {
                i._params = res.data;
              });
          }
        }
      });

      const detail = await show({
        id: this.$route.query.id,
        table_name: this.customForm.tableName
      })
      this.detail = detail
      this.init();

      this.picList = detail?.id_assets_picture_files_file_id_relation?.map(i => i.url)
    },

    async getHistory () {
      const res = await index({
        page: 1,
        page_size: 999,
        table_name: "asset_histories",
        filter: [
          {
            key: 'asset_id',
            op: 'eq',
            value: this.detail.id
          }
        ]
      })
      this.histories = res.data
    }
  },
  computed: {
    contentFormat() {
      return function (i) {
        let { _relations } = i;
        if (_relations && _relations.link_table_name) {
          if (_relations.link_relation === "hasOne" || _relations.link_relation === "newHasOne") {
            return (
              this.detail[_relations.link_with_name]?.name ||
              this.detail[_relations.link_with_name]?.no ||
              this.detail[_relations.link_with_name]?.value
            );
          }
          if (_relations.link_relation === "hasMany" || _relations.link_relation === "newHasMany") {
            return this.detail[_relations.link_with_name]
              ?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
              ?.toString();
          }

          return
        }
        if (i._params && i._params.length > 0) {
          return i._params.find(j => j.value == this.detail[i.field])?.key;
        }

        return this.detail[i.field]
      };
    }
  },
  created() {
    this.getFields().then(res => {
      this.getHistory()
    })
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-card {
  margin-bottom: 20px;
}
::v-deep .el-empty__image {
  width: 120px;
}
</style>
<style lang="scss">
.map-marker {
  display: flex;
  flex-direction: column;
  align-items: center;

  &__text {
    background: #fff;
    zoom: 0.9;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    filter: drop-shadow(2px 2px 5px #00000055);
  }
}
</style>
