<template>
  <div style="padding: 0 20px;">
    <el-page-header
      :content="$route.meta.title"
      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="24">
      <el-col :span="21" class="print-content">
        <el-card
          id="detail-pictures"
          v-if="
            (detail.id_assets_atlas_files_house_id_relation &&
              detail.id_assets_atlas_files_house_id_relation.length > 0) ||
            (detail.id_assets_atlas_files_land_id_relation &&
              detail.id_assets_atlas_files_land_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_atlas_files_house_id_relation || detail.id_assets_atlas_files_land_id_relation)"
            >
              <el-image
                style="width: 100%; height: 100%"
                :src="item.url"
                :preview-src-list="picList"
                fit="cover"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card id="detail-info">
          <div class="el-descriptions__header el-descriptions__title">
            基本信息
          </div>
          <el-descriptions
            border
            :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-item :label="'关联'+(detail.hasOwnProperty('id_houses_land_id_relation') ? '房产' : '土地')">-->
<!--              <template v-if="/\/land/g.test($route.path)">-->
<!--                <div v-for="item in detail.id_houses_land_id_relation" style="display: flex;align-items: center;">-->
<!--                  <span>{{ item.name }}</span>-->
<!--                  <el-link style="margin-left: 10px;white-space: nowrap;" @click="$router.push(/houseDetail/+item.id)">查看</el-link>-->
<!--                </div>-->
<!--              </template>-->
<!--              <template v-if="/\/house/g.test($route.path)">-->
<!--                <div style="display: flex;align-items: center;">-->
<!--                  <span>{{ (detail.land_id_lands_id_relation ? detail.land_id_lands_id_relation.name : '')  }}</span>-->
<!--                  <el-link style="margin-left: 10px;white-space: nowrap;" @click="$router.push('/landDetail/'+detail.land_id_lands_id_relation.id)">查看</el-link>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-descriptions-item>-->
          </el-descriptions>
        </el-card>

        <!--        <el-card id="detail-documents">-->
        <!--          <div class="el-descriptions__header el-descriptions__title">-->
        <!--            资产证件图片-->
        <!--          </div>-->
        <!--          <template>-->
        <!--            <template-->
        <!--              v-if="-->
        <!--                (detail.id_asset_picture_files_land_id_relation &&-->
        <!--                detail.id_asset_picture_files_land_id_relation.length > 0) ||-->
        <!--                (detail.id_asset_picture_files_house_id_relation &&-->
        <!--                detail.id_asset_picture_files_house_id_relation.length > 0)-->
        <!--              "-->
        <!--            >-->
        <!--              <div style="display: flex;flex-wrap: wrap;">-->
        <!--                <div-->
        <!--                  v-for="item in /\/land/g.test($route.path) ? detail.id_asset_picture_files_land_id_relation : detail.id_asset_picture_files_house_id_relation"-->
        <!--                >-->
        <!--                  <el-image-->
        <!--                    style="width: 100%; max-width: 200px;margin-right: 10px;"-->
        <!--                    :src="item.url"-->
        <!--                    :preview-src-list="-->
        <!--                    (/\/land/g.test($route.path) ? detail.id_asset_picture_files_land_id_relation : detail.id_asset_picture_files_house_id_relation).map(-->
        <!--                      (i) => i.url-->
        <!--                    )-->
        <!--                  "-->
        <!--                    fit="contain"-->
        <!--                  ></el-image>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <template v-else>-->
        <!--              <el-empty description="无"></el-empty>-->
        <!--            </template>-->
        <!--          </template>-->
        <!--        </el-card>-->
        <el-card id="detail-link-land" v-if="/\/house/g.test($route.path) && (detail.land_id_lands_id_relation && detail.land_id_lands_id_relation.length > 0)">
          <div class="el-descriptions__header el-descriptions__title">
            <p>关联土地</p>

            <div v-if="detail.land_id_lands_id_relation" style="font-size: 14px;" @click="(detail.land_id_lands_id_relation && detail.land_id_lands_id_relation.id) ? $router.push('/landDetail/'+detail.land_id_lands_id_relation.id) : ''">
              <span>查看</span>
              <i class="el-icon-d-arrow-right"></i>
            </div>
          </div>
          <el-descriptions
            v-if="detail.land_id_lands_id_relation"
            border
            :column="2"
            :label-style="{ 'font-weight': '600' }"
          >
            <el-descriptions-item
              v-for="item in landFields"
              :label="item.label"
            >{{ detail.land_id_lands_id_relation ? detail.land_id_lands_id_relation[item.prop] : "" }}{{ units.get(item.prop) }}</el-descriptions-item
            >
          </el-descriptions>
          <el-empty v-else description="暂无关联土地"></el-empty>
        </el-card>
        <el-card id="detail-link-houses" v-if="/\/land/g.test($route.path) && detail.id_houses_land_id_relation">
          <div class="el-descriptions__header el-descriptions__title">
            关联房产
          </div>

          <xy-table :is-page="false" :height="300" :list="detail.id_houses_land_id_relation" :table-item="houseTable" style="margin-top: 20px" size="mini" :auths="[]" ></xy-table>
        </el-card>

        <el-card id="detail-histories">
          <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">
                  <el-descriptions :column="1" size="mini" border :title="$moment(item.fashengshijian).format('YYYY-MM-DD')" :label-style="{ 'width': '86px' }">
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-coordinate"></i>
                        面积调整
                      </template>
                      {{ item.mianjitiaozheng }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        资产来源
                      </template>
                      {{ item.zichanlaiyuan }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-chat-line-square"></i>
                        其他说明
                      </template>
                      {{ item.qitashuoming }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-picture-outline"></i>
                        文件目录
                      </template>
                      <div style="display: flex;flex-wrap: wrap;padding-top: 10px;">
                        <div style="display: flex;flex-direction: column; align-items: center;margin-right: 16px;cursor: pointer;"
                             v-for="(img,index) in item.tupian_detail"
                             :key="img.id">
                          <!--                          <el-image-->
                          <!--                            style="height: 160px"-->
                          <!--                            :src="img.url"-->
                          <!--                            fit="contain"-->
                          <!--                            :preview-src-list="item.id_his_tupian_files_asset_history_id_relation.map(i => i.url)"-->
                          <!--                          ></el-image>-->
                          <i class="el-icon-document" style="font-size: 24px;" @click="open(img.url)"></i>
                          <div style="color: #3477c6;padding: 10px 0;" @click="open(img.url)">{{ ++index }}. <span style="font-weight: 600;">{{ img.original_name }}</span></div>
                          <div style="color: #3477c6" @click="down(img)"><i class="el-icon-download"></i>点击下载</div>
                        </div>
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>

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

            <div @click="copyLocation" style="cursor: pointer;margin-left: auto;margin-right: 20px;">
              <i class="el-icon-map-location" style="font-weight: 600;margin-right: 4px;"></i>
              <span>{{ detail.zichanweizhi }}</span>
            </div>

            <i class="el-icon-full-screen" style="cursor: pointer;font-weight: 600;" @click="assetsMapFullscreen"></i>
          </div>

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

        </el-card>
        <!--        <el-card id="detail-safe">-->
        <!--          <div class="el-descriptions__header el-descriptions__title">-->
        <!--            安全检查-->
        <!--          </div>-->

        <!--          <xy-table :is-page="false" :height="300" :list="inspections" :table-item="inspectionTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>-->
        <!--        </el-card>-->

        <el-card id="detail-contract">
          <div class="el-descriptions__header el-descriptions__title">
            租赁合同
          </div>

          <xy-table :is-page="false" :height="300" :list="leases" :table-item="leaseTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>
        </el-card>

        <el-card id="detail-repair">
          <div class="el-descriptions__header el-descriptions__title">
            维修保养
          </div>

          <xy-table :is-page="false" :height="300" :list="keeps" :table-item="keepTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>
        </el-card>

        <el-card id="detail-files">
          <div class="el-descriptions__header el-descriptions__title">
            资产相关附件
          </div>
          <template>
            <template
              v-if="
                (detail.id_asset_file_files_land_id_relation &&
                detail.id_asset_file_files_land_id_relation.length > 0) ||
                 (detail.id_asset_file_files_house_id_relation &&
                detail.id_asset_file_files_house_id_relation.length > 0)
              "
            >
              <div
                v-for="item in /\/land/g.test($route.path) ? detail.id_asset_file_files_land_id_relation : detail.id_asset_file_files_house_id_relation"
                style="display: flex; justify-content: space-between;margin-bottom: 4px;"
              >
                <a :download="item.url">{{ item.original_name }}</a>
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-download"
                    circle
                    size="mini"
                    @click="down(item)"
                  ></el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-view"
                    circle
                    size="mini"
                    @click="open(item.url)"
                  ></el-button>
                </div>
              </div>
            </template>
            <template v-else>
              <el-empty description="无"></el-empty>
            </template>
          </template>
        </el-card>
      </el-col>
      <el-col :span="3">
        <Anchor class="myanchor" show-ink :offset-top="64" @on-select="anchorSelect">
          <AnchorLink href="#detail-pictures" title="资产图集"  v-if="
            (detail.id_assets_atlas_files_house_id_relation &&
              detail.id_assets_atlas_files_house_id_relation.length > 0) ||
            (detail.id_assets_atlas_files_land_id_relation &&
              detail.id_assets_atlas_files_land_id_relation.length > 0)
          " />
          <AnchorLink href="#detail-info" title="基本信息" />
          <AnchorLink href="#detail-link-land" title="关联土地" v-if="/\/house/g.test($route.path)"/>
          <AnchorLink href="#detail-link-houses" title="关联房产" v-if="/\/land/g.test($route.path)"/>
          <!--          <AnchorLink href="#detail-documents" title="证件图片" />-->
          <AnchorLink href="#detail-histories" title="历史沿革" />
          <AnchorLink href="#detail-assetsMap" title="资产地图" />
          <!--          <AnchorLink href="#detail-safe" title="安全检查"></AnchorLink>-->
          <AnchorLink href="#detail-contract" title="租赁合同"></AnchorLink>
          <AnchorLink href="#detail-repair" title="维修保养"></AnchorLink>
          <AnchorLink href="#detail-files" title="相关附件" />
        </Anchor>
      </el-col>
    </el-row>

    <div style="position:fixed;right: 40px;bottom: 80px;background: #fff;border-radius: 100%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;" @click="print">
      <Icon type="md-print" />
    </div>
    <div style="position:fixed;right: 40px;bottom: 30px;background: #fff;border-radius: 100%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;" @click="isShowSearch = !isShowSearch">
      <Icon type="md-search" />
    </div>

    <transition name="search-container">
      <el-card v-show="isShowSearch" class="search-container">
        <template #header>
          <div style="display:flex;align-items: center;">
            <p>搜索附件</p>

            <i class="el-icon-close" style="margin-left: auto;" @click="isShowSearch = false"></i>
          </div>
        </template>

        <template>
          <!--          <div>-->
          <!--            <Button  size="small" type="success" ghost>资产</Button>-->
          <!--            <Button size="small" type="info" ghost>文件</Button>-->
          <!--          </div>-->
          <el-input v-model="searchKeyword" size="mini" style="margin-top: 4px;" placeholder="请输入名称" clearable>
            <el-button type="primary" slot="append" icon="el-icon-search" @click="searchFile"></el-button>
          </el-input>

          <ul class="search-file-list">
            <li v-for="(item, index) in filesFilter" :key="item.name+item.id">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <a style="flex-basis: 50%;" :download="item.url">{{index+1}}.{{ item.original_name }}</a>

                <!--                <p style="flex-basis: 25%;flex-shrink: 0;">-->
                <!--                  {{ item.land.name ? `[土地]${item.land.name}` : `[房产]${item.house.name}` }}-->
                <!--                </p>-->

                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-download"
                    circle
                    size="mini"
                    @click="down(item)"
                  ></el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-view"
                    circle
                    size="mini"
                    @click="open(item.url)"
                  ></el-button>
                </div>
              </div>
            </li>
          </ul>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

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";
import { download } from "@/utils/downloadRequest";
import { getFiles } from "@/api/common";
export default {
  name: "detail",
  data() {
    return {
      isShowSearch: false,
      showModal: false,
      codeUri: "",
      center: [120.283692, 31.614211],
      marker: {},

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

      histories: [],
      leases: [],
      inspections: [],
      keeps: [],
      units: new Map([
        ["dengjimianji", "m²"],
        ["shijimianji", "m²"],
        ["dikuaizongjia", "元"],
        ["dikuaimianji", "m²"],
        ["muqianjunjia", "元"],
      ]),

      landFields: [
        {
          "prop": "tudiquanshuren",
          "label": "土地权属人",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "name",
          "label": "资产名称",
          "width": 0,
          "align": "left",
          "fixed": "left"
        },
        {
          "prop": "tudizhenghao",
          "label": "土地证号",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "zuoluo",
          "label": "坐落",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "zichanweizhi",
          "label": "资产位置",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "quanliren",
          "label": "证载“权利人”",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "gongyouqingkuang",
          "label": "共有情况",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "shiyongnianxian",
          "label": "使用年限（年）",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "xianzhuang",
          "label": "现状",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "yongtu",
          "label": "用途",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "shiyongquanleixing",
          "label": "使用权类型",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "lingzhengriqi",
          "label": "领证日期",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "zhongzhiriqi",
          "label": "终止日期",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "dengjimianji",
          "label": "登记面积（m²）",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "shijimianji",
          "label": "实际面积（m²）",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "ruzhangshijian",
          "label": "入账时间",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "zhangmianyuanzhi",
          "label": "账面原值",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "tudidengji",
          "label": "土地等级",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "tudishuidanjia",
          "label": "土地税单价",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "tudishui",
          "label": "土地税",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "tudishuijiaonazhuti",
          "label": "土地税缴纳主体",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "jiaoshuijine",
          "label": "缴税金额",
          "width": 0,
          "align": "center"
        }
      ],
      houseTable: [
        {
          "prop": "quanshuren",
          "label": "权属人",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "name",
          "label": "资产名称",
          "minWidth": 200,
          "fixed": "left",
          "align": "left"
        },
        {
          "prop": "quanzhenghao",
          "label": "权证号",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "zuoluo",
          "label": "坐落",
          "width": 0,
          "align": "left"
        },
        {
          "prop": "zichanweizhi",
          "label": "房产位置",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "quanliren",
          "label": "证载“权利人”",
          "width": 0,
          "align": "center"
        },
        {
          "prop": "yongtu",
          "label": "用途",
          "width": 180,
          "align": "left"
        },
        {
          "prop": "zhuangtai",
          "label": "现状",
          "width": 160,
          "align": "left"
        },
        {
          "prop": "dengjishijian",
          "label": "登记时间",
          "width": 180,
          "align": "center"
        },
        {
          "prop": "dengjimianji",
          "label": "登记面积（m²）",
          "width": 160,
          "align": "right"
        },
        {
          "prop": "shijimianji",
          "label": "实际面积（m²）",
          "width": 160,
          "align": "center"
        },
        {
          "prop": "ruzhangshijian",
          "label": "入账时间",
          "width": 180,
          "align": "center"
        },
        {
          "prop": "zhangmianyuanzhi",
          "label": "账面原值",
          "width": 160,
          "align": "center"
        },
        {
          "prop": "shiyongzhuangtai",
          "label": "使用状态",
          "width": 160,
          "align": "center"
        },
        {
          prop: "operate",
          label: "查看",
          align: 'center',
          fixed: "right",
          customFn: row => (
            <div>
              <Button type="primary"
                      size="small"
                      on={{['click']:_ => this.$router.push(/houseDetail/+row.id)}}>查看</Button>
            </div>
          )
        }
      ],
      inspectionTable: [
        {
          fixed: 'left',
          type: 'index',
          width: 46,
        },
        {
          label: "检查记录",
          prop: "jianchajilu",
          minWidth: 200,
          align: "left"
        },
        {
          label: "日期",
          prop: "riqi",
          width: 160
        }
      ],
      keepTable: [
        {
          fixed: 'left',
          type: 'index',
          width: 46,
        },
        {
          label: "保养内容",
          prop: "baoyangneirong",
          minWidth: 200,
          align: "left"
        },
        {
          label: "保养日期",
          prop: "baoyangriqi",
          width: 160
        },
        {
          label: "经办人",
          prop: "jingbanren",
          width: 140
        }
      ],
      leaseTable: [
        {
          fixed: 'left',
          type: 'index',
          width: 46,
        },
        {
          label: '资产名称',
          prop: 'assets',
          width: 180,
          fixed: 'left',
          align: 'left',
          customFn: row => {
            return (
              <div>
                {
                  row.land?.map(i => (
                    <div>
                      <Tag color="green">{ i.name }</Tag>
                    </div>
                  ))
                }
                {
                  row.houses?.map(i => (
                    <div>
                      <Tag color="blue">{ i.name }</Tag>
                    </div>
                  ))
                }
              </div>
            )
          }
        },
        {
          label: '承租方',
          prop: 'chengzufang',
          width: 150
        },
        {
          label: '租赁期限',
          width: 190,
          customFn:row => {
            return (
              <div>
                <span>{ this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD') }</span>
                <span> - </span>
                <span>{ this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD') }</span>
              </div>
            )
          }
        },
        {
          label: '年租金单价',
          prop: 'nianzujindanjia',
          align: 'right',
          width: 120
        },
        {
          label: '签订年月',
          prop: 'qiandingnianyue',
          align: 'right',
          width: 120
        },
        {
          label: "租金收取计划",
          multiHd: [
            {
              width: 200,
              prop: "zujindiyicidaoweishijian",
              label: "租金第一次到位时间",
              customFn: ({ row }) => {
                return (
                  <div>
                    {
                      row.id_lease_plans_lease_id_relation?.map(i => (
                        <p>{ i.zujindiyicidaoweishijian }</p>
                      ))
                    }
                  </div>
                )
              }
            },
            {
              width: 160,
              prop: "shijidaozhangriqi",
              label: "实际到账日期",
              customFn: ({ row }) => {
                return (
                  <div>
                    {
                      row.id_lease_plans_lease_id_relation?.map(i => (
                        <p>{ i.shijidaozhangriqi }</p>
                      ))
                    }
                  </div>
                )
              }
            },
            {
              width: 140,
              prop: "yingshou",
              label: "应收租金",
              customFn: ({ row }) => {
                return (
                  <div>
                    {
                      row.id_lease_plans_lease_id_relation?.map(i => (
                        <p style="text-align: right;">{ i.yingshou }</p>
                      ))
                    }
                  </div>
                )
              }
            },
            {
              width: 140,
              prop: "shijidaozhang",
              label: "实际到账",
              customFn: ({ row }) => {
                return (
                  <div>
                    {
                      row.id_lease_plans_lease_id_relation?.map(i => (
                        <p style="text-align: right;">{ i.shijidaozhang }</p>
                      ))
                    }
                  </div>
                )
              }
            },
            {
              width: 200,
              prop: "weidaoweiyuanyin",
              label: "未到账原因",
              customFn: ({ row }) => {
                return (
                  <div>
                    {
                      row.id_lease_plans_lease_id_relation?.map(i => (
                        <p>{ i.weidaoweiyuanyin }</p>
                      ))
                    }
                  </div>
                )
              }
            }
          ]
        }
      ],


      searchKeyword: "",
      searchFiles: [],
      searchFileTotal: 0,

      myFiles: [],
    };
  },
  methods: {
    assetsMapFullscreen () {
      const dom = document.querySelector('#detail-map')
      this.$store.dispatch('app/toggleDevice',"mobile")
      this.$store.commit('app/CLOSE_SIDEBAR')

      dom.classList.add('dom-fullscreen')

      const closeDom = document.createElement('div')
      closeDom.classList.add('dom-fullscreen-close')
      closeDom.innerHTML = '<i class="el-icon-circle-close"></i>'
      document.body.append(closeDom)
      closeDom.addEventListener('click',() => {
        dom.classList.remove('dom-fullscreen')
        closeDom.remove()
        this.$store.dispatch('app/toggleDevice',"desktop")
        this.$store.commit('app/TOGGLE_SIDEBAR')
      })
    },

    anchorSelect (href) {
      const { y } = document.querySelector(href)?.getBoundingClientRect()
      const el = document.querySelector(".app-main-scroll")
      let scrollTop = y - 70 + el.scrollTop
      el.scrollTo({
        left: 0,
        top: scrollTop,
        behavior: "smooth"
      })
    },

    copyLocation () {
      const input = document.createElement("input");
      input.setAttribute("readonly", "readonly"); // 设置为只读, 防止在 ios 下拉起键盘
      input.value = this.detail.zichanweizhi;
      document.body.appendChild(input);
      input.setSelectionRange(0, 9999); // 防止 ios 下没有全选内容而无法复制
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message({
        type: "success",
        message: `已复制:${input.value}`,
      });
    },

    async searchFile () {
      try {
        const res = await getFiles({ keyword: this.searchKeyword });
        this.searchFiles = res.list.data;
        this.searchFileTotal = res.list.total
      } catch (err) {

      }
    },

    open(url) {
      this.$bus.$emit('online-file', url)
    },

    down(e) {
      download(e.url, "get", {}, e.original_name);
    },

    init() {
      //创建卫星图层
      const satellite = new AMap.TileLayer.Satellite();
      const roadNet = new AMap.TileLayer.RoadNet();
      this.map = new AMap.Map("detail-map", {
        center: this.center,
        mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
        zoom: 60,
        layers: [satellite, roadNet]
      });
      this.map.plugin(["AMap.ToolBar"],() => {
        //加载工具条
        this.map.addControl(new AMap.ToolBar());
      });

      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.name;
        markerContent.appendChild(markerImg);
        markerContent.appendChild(markerSpan);
        marker.setContent(markerContent);

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

    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.filter(i => i.list_show).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
        .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.params.id,
        table_name: this.customForm.tableName,
      });
      this.detail = detail;
      this.init();

      if (/\/land/g.test(this.$route.path)) {
        this.myFiles.push(...detail.id_asset_file_files_land_id_relation);
        this.myFiles.push(...detail.id_asset_picture_files_land_id_relation);
        this.myFiles.push(...detail.id_assets_atlas_files_land_id_relation);
      } else {
        this.myFiles.push(...detail.id_asset_file_files_house_id_relation);
        this.myFiles.push(...detail.id_asset_picture_files_house_id_relation);
        this.myFiles.push(...detail.id_assets_atlas_files_house_id_relation);
      }
    },


    async getHistories () {
      const res = await index({
        table_name: 'his_evolutions',
        page: 1,
        page_size: 999,
        sort_name: "fashengshijian",
        filter:[
          {
            key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
            op: 'eq',
            value: this.$route.params.id
          }
        ]
      })
      this.histories = res.data;

      res.data.forEach(i => {
        this.myFiles.push(...i.tupian_detail)
      })
    },

    async getLeases () {
      if(this.detail.leases.length <= 0) return
      const res = await index({
        table_name: 'leases',
        page: 1,
        page_size: 999,
        filter:[
          {
            key: "id",
            op: 'eq_many',
            value: this.detail.leases.map(i => i.id).toString()
          }
        ]
      })
      this.leases = res.data;

      res.data.forEach(i => {
        if (i.file_detail) {
          this.myFiles.push(...i.file_detail)
        }
      })
    },

    async getKeeps () {
      const res = await index({
        table_name: 'asset_safety_keeps',
        page: 1,
        page_size: 999,
        filter:[
          {
            key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
            op: 'eq',
            value: this.$route.params.id
          }
        ]
      })
      this.keeps = res.data;

      res.data.forEach(i => {
        this.myFiles.push(...i.fujian_detail)
      })
    },

    async getInspections () {
      const res = await index({
        table_name: 'asset_safety_inspections',
        page: 1,
        page_size: 999,
        filter:[
          {
            key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
            op: 'eq',
            value: this.$route.params.id
          }
        ]
      })
      this.inspections = res.data;

      res.data.forEach(i => {
        this.myFiles.push(...i.fujian_detail)
      })
    },

    print () {
      const iframeEL=document.querySelector('.print-iframe');
      if(iframeEL){
        iframeEL.remove();
      }
      const dom = document.querySelector('.print-content')
      html2canvas(dom,{
        useCORS: true,
        ignoreElements:ele => {
          const ignoreIds = ['detail-pictures']
          if (ignoreIds.indexOf(ele.id) !== -1) {
            return true
          }
        }
      }).then(canvas => {
        const img = new Image();
        img.src = canvas.toDataURL('image/png');
        img.style.width='100%'
        // 在 iframe 文档中添加图片元素
        const iframe = document.createElement('iframe');
        iframe.style.width='100%'
        iframe.classList.add('print-iframe')
        document.body.appendChild(iframe)
        const doc = iframe.contentWindow.document
        doc.body.appendChild(img);
        //避免图片没有加载完成就打印
        setTimeout(()=>{
          iframe.contentWindow.print();
        },100)
      })
    }
  },

  computed: {
    filesFilter () {
      return this.myFiles.filter((i) => (new RegExp(`${this.searchKeyword}.`).test(i.original_name)));
    },

    picList() {
      if (/\/house/g.test(this.$route.path)) {
        return (
          this.detail?.id_assets_atlas_files_house_id_relation?.map(
            (i) => i.url
          ) || []
        );
      }
      if (/\/land/g.test(this.$route.path)) {
        return (
          this.detail?.id_assets_atlas_files_land_id_relation?.map(
            (i) => i.url
          ) || []
        );
      }
    },
    contentFormat() {
      return function (i) {
        let { field, _relations } = i;
        if (field === 'bufuqingkuang') {
          if ((this.detail.tudiquanshuren !== this.detail.quanliren) ||
            (this.detail.dengjimianji !== this.detail.shijimianji)) {
            let text = ""
            text += this.detail.tudiquanshuren !== this.detail.quanliren
              ? " 权利人名称不符 "
              : ""
            text += this.detail.dengjimianji !== this.detail.shijimianji
              ? " 登记面积不符 "
              : ""
            return text;
          }
          return "无"
        }
        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.getHistories()
      this.getKeeps()
      this.getLeases()
      // this.getInspections()
    })
  },
};
</script>

<style scoped lang="scss">
.el-card__body > .el-descriptions__title,.el-card__body > ::v-deep .el-descriptions__title {

  position: relative;
  padding-left: 14px;

  &::before {
    content: '';
    width: 4px;
    background: linear-gradient(to bottom,rgb(57, 129, 199), rgba(118, 148, 183, 0.7));

    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
  }
}
::v-deep .el-card {
  margin-bottom: 20px;
}
::v-deep .el-empty__image {
  width: 120px;
}

a {
  color: $primaryColor;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: $primaryColor;
  text-decoration: underline;
}

::v-deep .ivu-anchor-link-title:hover {
  transition: all 0.2s;
  color: $primaryColor !important;
}

.el-image + .el-image {
  margin-left: 6px;
}

.search-container-enter-active {
  animation: slide-in-fwd-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}
.search-container-leave-active {
  animation: slide-out-fwd-br 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes slide-in-fwd-br {
  0% {
    transform: translateZ(-1400px) translateY(800px) translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-fwd-br {
  0% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(600px) translateY(300px) translateX(400px);
    opacity: 0;
  }
}
.search-container {
  min-width: 460px;
  background: #fff;

  z-index: 4000;
  position: fixed;
  right: 100px;
  bottom: 30px;
}

.search-file-list {

  margin-top: 20px;
  li {
    transition: all 0.2s;
    list-style: none;
    line-height: 1.5;
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 6px 10px;

    &:hover {
      border-color: $primaryColor;
    }
  }
}
.myanchor {

  position: fixed;
}
</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);
  }
}

.dom-fullscreen {
  position: fixed !important;
  z-index: 99999999 !important;
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  transition: all .2s;
}
.dom-fullscreen-close {
  position: fixed !important;
  z-index: 999999999 !important;
  top: 50px !important;
  right: 50px !important;
  background: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  transition: all .2s;
  font-size: 50px;
}
</style>
