<template>
  <div id="inforsPoint">
    <el-form ref="ruleForm" :model="form" label-width="150px" :rules="rules" :inline="true" :label-position="'right'">
      <div v-for="item in InforsList" :key="item.infoPointCode" style="width:50%;display: inline-block">
        <el-form-item
          :label="item.name"
          :prop="item.code"
          v-if="all||item.visible"
          :class="{FloorTypeSelect:item.inputMode == 'D1'||item.unit}">

          <el-input
            v-model="form[item.path]"
            v-if="item.infoPointCode == 'bimLocation' || item.infoPointCode =='modelId'"
            disabled/>

          <!--二维码相关-->
          <span v-else-if="item.infoPointCode == 'DefaultQRCode' ">
            <el-input v-if="!form[item.path]" v-model="form[item.path]" disabled/>
            <el-popover v-else placement="right" width="210" trigger="click">
              <div style="overflow:hidden;">
                <img
                  style="width:200px;height:200px;"
                  :src="'/image-service/common/file_get/'+ form[item.path] +'?systemId=dataPlatform'"
                  alt="二维码">
              </div>
              <el-button slot="reference" type="text">点击查看</el-button>
            </el-popover>
          </span>

          <span v-else-if="item.infoPointCode == 'QRCodePic' ">
            <el-input v-if="!form[item.path]" v-model="form[item.path]" disabled/>
            <el-popover v-else placement="right" width="210" trigger="click">
              <div style="overflow:hidden;">
                <img
                  style="width:200px;height:200px;"
                  :src="'/image-service/common/file_get/'+ form[item.path] +'?systemId=dataPlatform'"
                  alt="二维码">
              </div>
              <el-button slot="reference" type="text">点击查看</el-button>
            </el-popover>
          </span>

          <!--/二维码相关-->
          <span v-else-if="item.inputMode == 'B1'">
            <el-input v-model="form[item.path]"
                      :placeholder="(item.inputMode === 'B1' && item.path==='localId') ? '填写示例：F1、B1？':'' "/>
              <div v-if="item.inputMode === 'B1' && item.path==='localId' && isShowTitle"
                   style="color: gray;font-size: 12px">
                用于楼层平面图切换
              </div>
          </span>

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

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

          <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-input v-model="form[item.path]" v-else disabled title="暂不支持" :placeholder="item.inputMode?'':'字典无输入类型'"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import {getDataDictionary} from "@/api/dict";

export default {
  props: {
    type: {
      default: 'floor'
    }
  },
  data() {
    let validateId = (rule, value, callback) => {
      if (!value) {
        this.isShowTitle = false
        return callback(new Error('请输入楼层本地编码'));
      } else {
        this.isShowTitle = true
        callback()
      }
    }
    // }
    return {
      form: {},
      isShowTitle: true,
      InforsList: [],
      all: true, // 默认显示全部
      rules: {
        "localId": [
          {validator: validateId, trigger: 'blur', "required": true}
        ],
        "localName": [
          {"required": true, "message": "请输入楼层本地名称", "trigger": "blur"}
        ],
        "floorSequenceID": [
          {"required": true, "message": "请输入楼层顺序号", "trigger": "blur"}
        ]
      }
    };
  },

  created() {
    this.getInforsPoint()
  }
  ,
  methods: {
    getInforsPoint() {
      let params = {
        type: this.type,
        // orders: "sort asc,infoPointCode asc",
        pageNumber: 1,
        pageSize: 1000,
        orders: "sort asc, name desc",
      };
      getDataDictionary(params, res => {
        let arr = res.content.map(item => {
          if ((item.inputMode === 'D1' || item.inputMode === 'D2' || item.inputMode === 'E2' || item.inputMode === 'D1L') && item.dataSource) {
            // item.options = JSON.parse(item.dataSource)
            item.options = item.dataSource
            if (item.options[0] && item.options[0].content) {
              item.props = {
                value: 'code',
                label: 'name',
                children: 'content',
                checkStrictly: true
              }
            }
          }
          switch (item.code) { //过滤掉待删除的
            case 'floorIdentity':
            case 'relatedSchedule':
            case 'outPeopleFlow':
            case 'inPeopleFlow':
            case 'exsitPeopleNum':
              break;
            default:
              return item
          }
        })
        //手动删除掉数据字典中不存在的字段，等待后台同步
        this.InforsList = arr.filter(t => t && t.code != 'FloorQRCode')
      })
    },
    submitForm(call) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          call()
        } else {
          return false;
        }
      });
    },

  }
};
</script>
<style lang="scss" scoped>
#inforsPoint {
  .el-form-item {
    /deep/ label.el-form-item__label {
      font-size: 12px;
    }
  }

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

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