<template>
  <el-dialog
    :title="buildTitle"
    :visible.sync="buildDialogVis"
    id="messageDialog"
    width="850px"
  >
    <el-form
      :inline="true"
      :model="form"
      label-width="160px"
      :label-position="'right'"
      :rules="rules"
      ref="ruleForm"
    >
      <template v-for="(val,key) in buildMessage">
        <h4 v-text="key != 'undefined' ? key :'信息'"></h4>

        <div
          :key="item.InfoPointCode"
          v-for="item in val"
          :class="[{'upload-file':item.dataType == 'ATTACHMENT' ||  item.Path === 'infos.pic'}]"
          style="width: 50%;display: inline-block">

          <el-form-item
            :class="{FloorTypeSelect:item.dataType == 'ENUM'||item.Unit}"
            :label="item.InfoPointName"
            :prop="item.InfoPointCode"
            v-if="all||item.Visible">
            <el-input
              :disabled="!item.editable"
              v-if="item.dataType == 'STRING'"
              v-model.trim="form[item.Path]"/>

            <el-input
              v-else-if="item.dataType == 'INTEGER' || item.dataType == 'DOUBLE'"
              type="number"
              v-model.trim="form[item.Path]">
              <template slot="append" v-if="item.Unit">{{ item.Unit }}</template>
            </el-input>

            <el-select
              v-else-if="item.dataType == 'ENUM' || item.dataType == 'BOOLEAN'"
              placeholder="请选择"
              v-model="form[item.Path]">
              <el-option :key="op.name" :label="op.name" :value="op.code" v-for="op in item.options"></el-option>
            </el-select>

            <el-select
              v-else-if="item.dataType == 'MENUM'"
              placeholder="请选择"
              v-model="form[item.Path]"
              multiple
              collapse-tags>
              <el-option :key="op.name" :label="op.name" :value="op.code" v-for="op in item.options"></el-option>
            </el-select>
            <el-date-picker
              v-else-if="item.dataType == 'DATETIME'"
              v-model="form[item.Path]"
              placeholder="选择日期"
              type="date">
            </el-date-picker>

            <uploadImgs
              v-else-if="item.dataType == 'ATTACHMENT'&& item.Path === 'infos.Pic'"
              :readOnly="false"
              v-model="form[item.Path]"
              :keysArr="Array.isArray(buildData[item.Path]) ? buildData[item.Path]:[]"
              :context-key="item.Path"
              :isShow="1"
              @change="changeItem"/>

            <upload-files
              v-else-if="item.dataType == 'ATTACHMENT'"
              v-model="form[item.Path]"
              :readOnly="false"
              :isShow="1"
              :keys-arr="Array.isArray(buildData[item.Path]) ? buildData[item.Path]:[] "
              :show-file-list="false"
              :context-key="item.Path"
              @change="changeItem"/>

          </el-form-item>
        </div>
      </template>
    </el-form>
    <span
      class="dialog-footer"
      slot="footer">
    <el-button @click="buildDialogVis = false">取 消</el-button>
    <el-button @click="submitForm('ruleForm')" type="primary" :disabled="buildDisabled">确 定</el-button>
  </span>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>
<script>
import uploadFiles from "@/components/business_space/lib/uploadFiles";
import uploadImgs from "@/components/business_space/lib/uploadImgsName";

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 {
  data() {

    return {
      buildName: '',
      keysArr: [], //保存临时的文件key
      buildDialogVis: false,
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      all: true,
      rules: {
        "localId": [
          {"required": true, "message": "请输入建筑本地编码", "trigger": "blur"}
        ],
        "localName": [
          {"required": true, "message": "请输入建筑本地名称", "trigger": "blur"}
        ]
      },
      buildData: {},
      buildDisabled: false,
    }
  },
  components: {uploadFiles, uploadImgs},
  props: ['buildTitle', 'buildMessage', 'currentBuild'],
  computed: {},
  mounted() {
  },
  watch: {},
  methods: {
    deepCopy(obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    showDialog(data) {
      //获取信息
      let buildData = data || {};  // string =>array key
      buildData = flattenKeys(buildData);
      // for (let key in this.buildMessage) {
      //   let arr = this.buildMessage[key];
      //   if (Array.isArray(arr)) {
      //     let list = arr.filter(i => i.dataType == 'MENUM' || i.dataType == 'DATETIME');
      //     list.forEach(j => {
      //       if (buildData.hasOwnProperty(j.Path)) {
      //         if (!Array.isArray(buildData[j.Path])) {
      //           buildData[j.Path] = buildData[j.Path].split(',');
      //         }
      //       }
      //
      //     })
      //   }
      // }
      this.buildData = buildData;
      this.timeoutSetVal()
      this.buildDialogVis = true
    },

    timeoutSetVal() {
      let that = this
      setTimeout(() => {
        if (that.form) {
          that.form = that.buildData
        } else {
          this.timeoutSetVal()
        }
      })
    },
    closeDialog() {
      this.buildDialogVis = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.buildDisabled = true
          this.$emit('handleBuild', this.form)
          setTimeout(() => {
            this.buildDisabled = false
          }, 2500)
        } else {
          return false;
        }
      });
    },
    changeItem(val) {
      console.log(val)
      let _key = Object.keys(val)[0] + '';
      this.form[_key] = val[_key];

    },

  }
}
</script>
<style lang="less" scoped>

#messageDialog {
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner, /deep/ .el-select {
    width: 200px;
  }

  /deep/ .FloorTypeSelect .el-form-item__content {
    width: 200px;
  }

  /deep/ .el-dialog__body {
    height: 420px;
    overflow: auto;
  }

  .upload-file {
    width: 100% !important;
    display: block !important;
  }

  /deep/ .el-input--small {
    width: 200px
  }
}
</style>
