<template>
  <div class="tableDisplay">
    <div class="header">
      <el-button
        style="float: left"
        size="small"
        type="default"
        icon="el-icon-back"
        @click="goBack"
      ></el-button>
      <span :title="`${name} - ${code}`" class="details-title"
        ><b>{{ name }} - {{ code }}</b></span
      >
    </div>
    <div class="content">
      <el-scrollbar style="height: 100%">
        <div class="content-scrollbar">
          <div class="content-left">
            <div class="content-keyPoint">
              <exhibitionCrux
                :exhibitionCrux="exhibitionCrux"
                :type="type"
                @cruxSuccess="cruxSuccess"
              />
            </div>
            <div class="content-showType">
              <selectRadio
                :selectRadio="selectRadio"
                @changeRadio="changeRadio"
              />
            </div>
            <div class="content-point">
              <div class="content-point-left">
                <exhibitionBaseInformation
                  :exhibitionBaseInformation="exhibitionBaseInformation"
                />
              </div>
            </div>
          </div>
          <div class="content-right">
            <div class="content-media">
              <exhibitionImage
                :exhibitionImage="exhibitionImage"
                v-show="isShowImage"
              />
              <exhibitionVideo
                :exhibitionVideo="exhibitionVideo"
                v-show="isShowVideo"
              />
              <exhibitionFile
                :exhibitionFile="exhibitionFile"
                v-show="isShowFile"
              />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="footer">
      <el-button-group style="float: right; margin: 8px 10px 0 0">
        <el-button
          :disabled="list.findIndex((item) => item.value == id) == 0"
          @click="handleClickPrev"
          size="mini"
          icon="el-icon-arrow-left"
        >
          上一页
        </el-button>
        <el-select
          size="mini"
          style="float: left; margin: 0 10px"
          v-model="id"
          @change="handleChangeExample"
          placeholder="请选择"
        >
          <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          :disabled="
            list.findIndex((item) => item.value == id) == list.length - 1
          "
          @click="handleClickNext"
          size="mini"
        >
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
import selectRadio from "@/components/ledger/details/detail/selectRadio";
import { getDataDictionary } from "@/api/dict";
import { queryProperty } from "@/api/scan/request";
import { mapGetters } from "vuex";
import tools from "@/utils/scan/tools";

export default {
  name: "propertyDetails",
  components: {
    exhibitionBaseInformation,
    exhibitionFile,
    exhibitionImage,
    selectRadio,
    exhibitionCrux,
    exhibitionVideo,
  },
  created() {
    this.id = this.$route.query.equipId;
    this.name = this.$route.query.equipName;
    this.code = this.$route.query.equipCode;
    this.type = this.$route.query.type;
    this.list = this.$route.query.data;
    this.getData();
    console.log(this.$route.query, "query");
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"]),
  },
  data() {
    return {
      id: "", //当前资产id
      name: "", //当前资产本地名称
      code: "", //当前资产的本地编码
      type: "", //资产类型
      list: [], //资产列表
      pointData: [], //信息点数据
      currentRadio: "1", //当前选中的select
      selectRadio: {
        information: "设备信息点",
        initRadio: "1",
        radioList: [
          {
            value: "显示需采集信息点",
            label: "1",
          },
          {
            value: "显示有值信息点",
            label: "2",
          },
          {
            value: "显示全部信息点",
            label: "3",
          },
        ],
      },
      exhibitionBaseInformation: {
        information: {},
      },
      exhibitionFile: {
        title: "文件",
        list: {},
      },
      exhibitionCrux: {
        title: "关键信息点：",
        cruxArray: [],
        allMessage: [], //全部信息点
      },
      exhibitionImage: {
        title: "图片",
        list: {},
        arr: [],
      },
      exhibitionVideo: {
        title: "视频",
        list: {},
      },
      instance: {}, //实例信息处理
      isShowImage: true,
      isShowVideo: true,
      isShowFile: true,
    };
  },
  methods: {
    deepCopy(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    cruxSuccess() {
      const isCrux = 1; //是否为点击详情后获取表头和实例数据
      this.getData(isCrux);
    },
    // 获取表头和实例数据
    getData(isCrux = 0) {
      let params1 = {
          orders: "sort asc",
          pageNumber: 1,
          pageSize: 1000,
          type: this.type,
        },
        params2 = {
          filters: `id='${this.id}'`,
        };
      let promise1 = new Promise((resolve, reject) => {
        getDataDictionary(params1, (res) => {
          resolve(res);
        });
      });
      let promise2 = new Promise((resolve, reject) => {
        queryProperty(params2, (res) => {
          resolve(res);
        });
      });
      Promise.all([promise1, promise2]).then((values) => {
        this.pointData = values[0].content;
        this.exampleData = values[1].content[0];
        this.name = this.exampleData.localName
          ? this.exampleData.localName
          : this.exampleData.name
          ? this.exampleData.name
          : "";
        this.code = this.exampleData.localId ? this.exampleData.localId : "";
        let obj = this.deepCopy(values[1].content[0]);
        obj = tools.flattenKeys(obj);
        for (let key in obj) {
          if (Array.isArray(obj[key]) && !obj[key].length) {
            delete obj[key];
          }
        }
        this.instance = obj;
        // this.handleRadios(this.currentRadio);
        this.handleEnclosure(); //处理图片视频文件信息

        // 如果是编辑后状态、则需要更新下Tab
        if (isCrux) {
          const currentRadio = this.currentRadio
          this.handleRadios(-1);
          setTimeout(()=>{
             this.handleRadios(currentRadio);
          })
        }else{
           this.handleRadios(this.currentRadio);
        }
      });
    },
    handleEnclosure() {
      //图片文件处理，脱离radio控制
      let isList = this.pointData;
      let isArr = [];
      isList.map((j) => {
        if (this.instance.hasOwnProperty(j.path)) {
          j.value = this.instance[j.path];
          return j;
        }
      });
      isArr = isList.filter((k) => k.value);
      this.handlePicList(isArr);
      this.handleFileList(isArr);
    },
    handleRadios(val) {
      //判断radio的值显示关键信息，基本信息，图片，文件
      let arr = [];
      //关键信息点
      this.exhibitionCrux.cruxArray = this.pointData.filter((i) => i.keyWord);
      this.exhibitionCrux.cruxArray.map((i) => {
        if (this.instance.hasOwnProperty(i.path)) {
          return {
            ...i,
            value: this.instance[i.path],
          };
        }
      });
      if (val == 1) {
        //需采集信息
        arr = this.pointData.filter((i) => i.visible);

        //  图片和的处理
        // this.handlePicList(arr)
        // //  文件处理
        // this.handleFileList(arr)
      } else if (val == 2) {
        //有值信息点
        let list = this.pointData;
        list.map((j) => {
          if (this.instance.hasOwnProperty(j.path)) {
            return {
              ...j,
              value: this.instance[j.path],
            };
          }
          arr = list.filter((k) => k.value);
          // this.handlePicList(arr)
          // this.handleFileList(arr)
        });
      } else {
        //全部信息点
        arr = this.pointData;
        // this.handlePicList(arr)
        // this.handleFileList(arr)
      }
      this.displayData(arr);
    },
    handlePicList(arr) {
      let picObject = {};
      //处理数据格式
      arr.map((i) => {
        if (i.dataType == "ATTACHMENT") {
          switch (i.path) {
            case "infos.drawing":
            case "infos.installPic":
            case "infos.installDrawing":
            case "infos.nameplate":
            case "infos.pic":
              if (this.instance.hasOwnProperty(i.path)) {
                i.PicList = this.instance[i.path];
              }
              if (picObject[i.name]) {
              } else {
                picObject[i.name] = [];
              }
              picObject[i.name].push({
                ...i,
              });
              break;
          }
        }
      });
      //展示图片
      this.exhibitionImage.list = picObject;
      let isArray = []; //获取图片数组
      for (let i in picObject) {
        if (Array.isArray(picObject[i])) {
          let list = picObject[i];
          list.forEach((i) => {
            if (i.PicList) {
              isArray.push(...i.PicList);
            }
          });
        }
      }
      this.exhibitionImage.arr = isArray;
      let video = isArray.filter((i) => i.Type == "video" && i.type == "video");
      this.exhibitionVideo.list = video;
      //判断是否显示图片组件
      this.isShowImage = isArray.length ? true : false;
      //判断是否显示video组件
      this.isShowVideo = video.length ? true : false;
    },
    handleFileList(arr) {
      let picObject = {};
      //处理数据格式
      arr.map((i) => {
        if (i.dataType == "ATTACHMENT") {
          switch (i.path) {
            case "infos.insuranceFile":
            case "infos.archive":
            case "infos.checkReport":
              if (this.instance.hasOwnProperty(i.path)) {
                i.fileList = this.instance[i.path];
              }
              if (picObject[i.name]) {
              } else {
                picObject[i.name] = [];
              }

              picObject[i.name].push({
                ...i,
              });
              break;
          }
        }
      });
      //展示文件
      this.exhibitionFile.list = picObject;
      let isArray = []; //获取文件数组
      for (let i in picObject) {
        if (Array.isArray(picObject[i])) {
          let list = picObject[i];
          list.forEach((i) => {
            if (i.fileList) {
              isArray.push(...i.fileList);
            }
          });
        }
      }
      //判断是否显示文件组件
      this.isShowFile = isArray.length ? true : false;
    },
    changeRadio(val) {
      //1,需采集，2，有值，3，全部
      this.handleRadios(val);
      this.currentRadio = val;
    },
    formatDate(str) {
      if (str) {
        if (str.includes("-")) {
          return str;
        } else {
          if (str.length > 8) {
            return (
              str.substr(0, 4) +
              "-" +
              str.substr(4, 2) +
              "-" +
              str.substr(6, 2) +
              " " +
              str.substr(8, 2) +
              ":" +
              str.substr(10, 2) +
              ":" +
              str.substr(12, 2)
            );
          } else {
            return (
              str.substr(0, 4) +
              "-" +
              str.substr(4, 2) +
              "-" +
              str.substr(6, 2) +
              " " +
              str.substr(8, 2)
            );
          }
        }
      } else {
        return "--";
      }
    },
    displayData(arr) {
      //对数据进行处理传给组件展示
      const result = {};
      arr.forEach((i) => {
        if (this.instance.hasOwnProperty(i.path) && this.currentRadio != 2) {
          i.value = this.instance[i.path];
        }
        if (i.dataType == "DATETIME") {
          if (this.instance.hasOwnProperty(i.path)) {
            let time = this.instance[i.path];
            i.value = this.formatDate(time);
          }
        }
        if (i.dataSource && i.dataSource.length) {
          // let source = JSON.parse(i.DataSource)
          let source = i.dataSource;
          //判断输入类型
          if (i.dataType == "ENUM") {
            let d1l = tools.formatDataSource(i.dataSource);
            d1l.forEach((k) => {
              if (k.code == this.instance[i.path]) {
                i.value = k.name;
              }
            });
          } else if (i.dataType == "MENUM" || i.dataType == "DATETIME") {
            if (this.instance.hasOwnProperty(i.path)) {
              if (!Array.isArray(this.instance[i.path])) {
                let transArray = this.instance[i.path].split(",");
                i.value = source
                  .filter((item) => transArray.includes(item.code))
                  .map((item) => item.name)
                  .join(",");
              }
            }
          }
          source.forEach((j) => {
            if (j.code == this.instance[i.path]) {
              i.value = j.name;
            }
          });
        }
        if (i.category == "STATIC") {
          if (
            result[`${i.firstName}${i.secondName ? "/" + i.secondName : ""}`]
          ) {
            result[
              `${i.firstName}${i.secondName ? "/" + i.secondName : ""}`
            ].paths.push({
              Path: i.Path,
              InfoPointName: i.name,
              InfoPointCode: i.code,
              Value: i.value,
              Visible: i.visible,
              KeyWord: i.keyWord,
              data: i.data,
              receivetime: i.receivetime,
              error: i.error,
              Unit: i.unit,
              FirstName: i.firstName,
              classCode: i.classCode,
              id: i.id,
              groupCode: i.groupCode,
              type: i.type,
              dataType: i.dataType,
            });
          } else {
            result[
              `${i.firstName}${i.secondName ? "/" + i.secondName : ""}`
            ] = {
              paths: [
                {
                  Path: i.path,
                  InfoPointName: i.name,
                  InfoPointCode: i.code,
                  Value: i.value,
                  Visible: i.visible,
                  KeyWord: i.keyWord,
                  data: i.data,
                  receivetime: i.receivetime,
                  error: i.error,
                  Unit: i.unit,
                  FirstName: i.firstName,
                  classCode: i.classCode,
                  id: i.id,
                  groupCode: i.groupCode,
                  type: i.type,
                  dataType: i.dataType,
                },
              ],
            };
          }
        }
      });

      this.exhibitionBaseInformation.information = result;
      this.exhibitionCrux.allMessage = result;
    },
    goBack() {
      this.$router.push({
        name: "propertyLedger",
        params: {
          Family: this.type,
        },
      });
    },
    // 切换实例
    handleChangeExample() {
      this.selectRadio.initRadio = "1";
      this.currentRadio = "1";
      this.getData();
    },
    // 切换上一个实例
    handleClickPrev() {
      let index = this.list.findIndex((item) => item.value == this.id);
      this.id = this.list[index - 1].value;
      this.handleChangeExample();
    },
    // 切换下一个实例
    handleClickNext() {
      let index = this.list.findIndex((item) => item.value == this.id);
      this.id = this.list[index + 1].value;
      this.handleChangeExample();
    },
  },
  watch: {
    projectId() {
      this.$router.push({ path: "/ledger/property" });
    },
  },
};
</script>

<style scoped lang="less">
@bgc: #fff;
.tableDisplay {
  .header {
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .details-title {
      color: #333;
      font-size: 16px;
      margin-left: 20px;
      line-height: 32px;
      cursor: pointer;
    }
  }

  .content {
    height: calc(100% - 77px);

    .content-scrollbar {
      display: flex;
      height: 100%;
      flex-direction: row;
      box-sizing: border-box;
      background-color: #f2f2f2;

      .content-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;

        .content-keyPoint {
          border: 1px solid #ccc;
          box-sizing: border-box;
          margin-bottom: 10px;
          // overflow: hidden;
          background: @bgc;
        }

        .content-showType {
          height: 50px;
          border: 1px solid #ccc;
          border-bottom: none;
          box-sizing: border-box;
          background: @bgc;
        }

        .content-point {
          display: flex;
          flex-direction: row;
          border: 1px solid #ccc;
          box-sizing: border-box;
          background: @bgc;

          .content-point-left {
            flex: 1;
          }
        }
      }

      .content-right {
        width: 400px;
        margin-left: 10px;
        box-sizing: border-box;

        .content-media {
          box-sizing: border-box;
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 235px;
    width: calc(100% - 235px);
    height: 45px;
    background-color: #fff;
    box-sizing: border-box;
  }
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
