<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.InfoPointName"
          :prop="item.InfoPointCode"
          v-if="all||item.Visible"
          :class="{FloorTypeSelect:item.InputMode == 'D1'||item.Unit}"
        >
          <span v-if="item.InputMode == 'B1'">
            <el-input
              v-model="form[item.Path]"
              :placeholder="(item.InputMode === 'B1' && item.Path==='FloorLocalID') ? '填写示例：F1、B1？':'' "/>
              <div
                v-if="item.InputMode === 'B1' && item.Path==='FloorLocalID' && 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-input v-model="form[item.Path]"
                    v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'">
            <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
          </el-input>
          <el-input v-model="form[item.Path]" v-else disabled title="暂不支持"></el-input>

        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import {getDataDictionary} from "@/api/scan/request";

  //  v-for="item in InforsList" :key="item.InfoPointCode"
  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: {
          "FloorLocalID": [
            {validator: validateId, trigger: 'blur', "required": true}
          ],
          "FloorLocalName": [
            {"required": true, "message": "请输入楼层本地名称", "trigger": "blur"}
          ],
          "FloorSequenceID": [
            {"required": true, "message": "请输入楼层顺序号", "trigger": "blur"}
          ]
        }
      };
    },

    created() {
      this.getInforsPoint()
    }
    ,
    methods: {
      getInforsPoint() {
        let params = {
          data: {
            Orders: "sort asc,InfoPointCode asc",
            PageNumber: 1,
            PageSize: 1000
          },
          type: this.type
        };
        getDataDictionary(params, res => {
          this.InforsList = res.Content.map(item => {
            if (item.InputMode === 'D1') {
              item.options = JSON.parse(item.DataSource)
            }
            return item
          })
        })
      }
      ,
      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>
