<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>{{key}}</h4>

        <div
          :key="item.InfoPointCode"
          v-for="item in val"
          :class="[{'upload-file':item.InputMode == 'F2' ||  item.Path === 'BuildingInfo.BuildingType.Pic'}]"
          style="width: 50%;display: inline-block">

          <el-form-item
            :class="{FloorTypeSelect:item.InputMode == 'D1'||item.Unit}"
            :label="item.InfoPointName"
            :prop="item.InfoPointCode"
            v-if="all||item.Visible">

            <el-input
              v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
              v-model="form[item.Path]"/>

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

            <el-select
              v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
              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.InputMode == 'D2'"
              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.InputMode == 'C6'"
              v-model="form[item.Path]"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>

            <el-cascader
              v-else-if="item.InputMode == 'D1L'"
              placeholder="请选择"
              :options="item.options"
              v-model="form[item.Path]"
              :props="item.props"
              filterable
              :show-all-levels="false"
              clearable
              style="width: 200px"/>

            <el-input
              v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
              v-model="form[item.Path]">
              <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
            </el-input>

            <el-date-picker
              v-else-if="item.InputMode == 'C5'" v-model="form[item.Path]"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              type="date">
            </el-date-picker>

            <uploadImgs
              v-else-if="item.InputMode == 'F2'&& item.Path === 'BuildingInfo.BuildingType.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.InputMode == 'F2'"
              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-input disabled title="暂不支持" v-else v-model="form[item.Path]"/>

          </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: {
          "BuildLocalID": [
            {"required": true, "message": "请输入建筑本地编码", "trigger": "blur"}
          ],
          "BuildLocalName": [
            {"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.InputMode == 'D2' || i.InputMode == 'C6');
            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
            for (let key in this.buildMessage) {
              let arr = this.buildMessage[key];
              if (Array.isArray(arr)) {
                let list = arr.filter(i => i.InputMode == 'D2' || i.InputMode == 'C6');
                list.forEach(j => {
                  if (this.form.hasOwnProperty(j.Path)) {
                    if (Array.isArray(this.form[j.Path])) {
                      this.form[j.Path] = this.form[j.Path].join(',');
                    }
                  }
                })
              }
            }
            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>
