<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 class="details-title"><b>{{name}} - {{code}}</b></span>
    </div>
    <div class="content">
      <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">
            <el-scrollbar style="height:100%;">
              <div>
                <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-media">
          <el-scrollbar style="height:100%;">
            <div>
              <exhibitionImage :exhibitionImage="exhibitionImage"/>
              <exhibitionVideo :exhibitionVideo="exhibitionVideo"/>
              <exhibitionFile :exhibitionFile="exhibitionFile"/>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="footer"></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, queryProperty} from "@/api/scan/request";
  import {mapGetters} from "vuex";
  function flattenKeys(obj) {
    let res = {}

    function isObject(val) {
      return typeof val === 'object' && !Array.isArray(val)
    }

    function digKeys(prev, obj) {
      Object.entries(obj).forEach(([key, value]) => {
        const currentKey = prev ? `${prev}.${key}` : key
        if (isObject(value)) {
          digKeys(currentKey, value)
        } else {
          res[currentKey] = value
        }
      })
    }
    digKeys('', obj)
    return res
  }
  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)
    },
    computed: {
      ...mapGetters("layout", ["projectId", "secret", "userId"])
    },
    data() {
      return {
        id: '', //当前资产id
        name: '', //当前资产本地名称
        code: '', //当前资产的本地编码
        type: '', //资产类型
        list: [], //资产列表
        pointData: [], //信息点数据
        currentRadio: '',//当前选中的select
        selectRadio: {
          information: '设备信息点',
          radioList: [
            {
              value: '显示需采集信息点',
              label: '1'
            },
            {
              value: '显示有值信息点',
              label: '2'
            },
            {
              value: '显示全部信息点',
              label: '3'
            }
          ]
        },
        exhibitionBaseInformation: {
          information: {},
          style:3
        },
        exhibitionFile: {
          title: '文件',
          list: {}
        },
        exhibitionCrux: {
          title: '关键信息点：',
          cruxArray: [],
          allMessage: [],//全部信息点
        },
        exhibitionImage: {
          title: '图片',
          list: {}
        },
        exhibitionVideo: {
          title: '视频',
          list: {}
        },
        instance: {},//实例信息处理
      }
    },
    methods: {
      deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj))
      },
      cruxSuccess(){
        this.getData()
      },
      // 获取表头和实例数据
      getData () {
        let params1 = {
          data: {
            Orders: "sort asc",
            PageNumber: 1,
            PageSize: 1000
          },
          type: this.type
        }, params2 = {
          Filters: `EquipID='${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];
          let obj = this.deepCopy(values[1].Content[0]);
          obj = flattenKeys(obj);
          this.instance = obj;
          this.handleRadios(1)
        })
      },
      handleRadios(val) { //判断radio的值显示关键信息，基本信息，图片，文件
        let arr = []
        if (val == 1) { //需采集信息
          arr = this.pointData.filter(i => i.Visible)
          //关键信息点
          this.exhibitionCrux.cruxArray = arr.filter(i => i.KeyWord)
          //  图片和的处理
          this.handlePicList(arr)
          //  文件处理
          this.handleFileList(arr)

        } else if (val == 2) { //有值信息点
          let list = this.pointData
          list.map(j => {
            if (this.exampleData.hasOwnProperty(j.Path)) {
              return {
                ...j,
                value: this.exampleData[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.InputMode == 'F2') {
            switch (i.Path) {
              case 'LedgerParam.PhotoDoc.Drawing':
              case 'LedgerParam.Siteinstall.InstallPic':
              case 'LedgerParam.Siteinstall.InstallDrawing':
              case 'LedgerParam.PhotoDoc.Nameplate':
                if (this.instance.hasOwnProperty(i.Path)) {
                  i.PicList = this.instance[i.Path]
                }
                if (picObject[i.InfoPointName]) {

                } else {
                  picObject[i.InfoPointName] = []
                }
                picObject[i.InfoPointName].push({
                  ...i,
                })
                break;

            }
          }

        })
        //展示图片
        this.exhibitionImage.list = picObject
      },
      handleFileList(arr) {
        let picObject = {}
        //处理数据格式
        arr.map(i => {
          if (i.InputMode == 'F2') {
            switch (i.Path) {
              case 'LedgerParam.InsuranceDoc.InsuranceFile':
              case 'LedgerParam.PhotoDoc.Archive':
              case 'LedgerParam.Siteinstall.CheckReport':
                if (this.instance.hasOwnProperty(i.Path)) {
                  i.fileList = this.instance[i.Path]
                }
                if (picObject[i.InfoPointName]) {

                } else {
                  picObject[i.InfoPointName] = []
                }

                picObject[i.InfoPointName].push({
                  ...i,
                })
                break
            }
          }

        })
        //展示文件
        this.exhibitionFile.list = picObject
      },
      changeRadio(val) { //1,需采集，2，有值，3，全部
        this.handleRadios(val)
        this.currentRadio = val
      },
      displayData(arr) {//对数据进行处理传给组件展示
        const result = {}
        arr.forEach(i => {
          if (this.exampleData.hasOwnProperty(i.Path) && this.currentRadio != 2) {
            i.value = this.exampleData[i.Path]
          }
          switch (i.InputMode) {
            case "L":
            case "L1":
            case "L2":
            case "M":
            case 'F2':
              break;
            default:
              if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
                result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
                  Path: i.Path,
                  InfoPointName: i.InfoPointName,
                  InfoPointCode: i.InfoPointCode,
                  Value: i.value,
                  Visible: i.Visible,
                  KeyWord: i.KeyWord
                })
              } else {
                result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
                  paths: [{
                    Path: i.Path,
                    InfoPointName: i.InfoPointName,
                    InfoPointCode: i.InfoPointCode,
                    Value: i.value,
                    Visible: i.Visible,
                    KeyWord: i.KeyWord
                  }]
                }
              }

          }


        })
        this.exhibitionBaseInformation.information = result
        this.exhibitionCrux.allMessage = result
      },
      goBack () {
        this.$router.push({path: "/ledger/property"})
      },
    },
    watch: {
      projectId() {
        this.$router.push({path: "/ledger/property"})
      }
    }
  }
</script>

<style scoped lang="less">
  .tableDisplay {
    .header {
      padding-bottom: 10px;
      .details-title {
        color: #333;
        font-size: 16px;
        margin-left: 20px;
        line-height: 32px;
      }
    }

    .content {
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      height: calc(100% - 82px);
      .content-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        .content-keyPoint {
          border: 1px solid #ccc;
          box-sizing: border-box;
          height: 100px;
          margin-bottom: 10px;
          overflow: hidden;
          background: #FFFFFF;
        }
        .content-showType {
          height: 50px;
          border: 1px solid #ccc;
          border-bottom: none;
          box-sizing: border-box;
          background: #FFFFFF;
        }
        .content-point {
          display: flex;
          flex-direction: row;
          height: calc(100% - 160px);
          border: 1px solid #ccc;
          box-sizing: border-box;
          background: #FFFFFF;
          .content-point-left {
            flex: 1;
          }
        }
      }
      .content-right {
        width: 400px;
        margin-left: 10px;
        .content-media {
          height: 100%;
          border: 1px solid #ccc;
          box-sizing: border-box;
        }
      }
    }

    .footer {
      height: 40px;
    }
  }

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

</style>
