<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}">

          <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==='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-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="暂不支持"></el-input>
          <!--                    <div>{{item.InputMode}}{{item.InfoPointCode}}</div>-->
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import {getDataDictionary} from "@/api/scan/request";

  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 => {
          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)
              if (item.options[0] && item.options[0].Content) {
                item.props = {
                  value: 'Code',
                  label: 'Name',
                  children: 'Content',
                  checkStrictly: true
                }
              }
            }
            switch (item.InfoPointCode) { //过滤掉待删除的
              case 'FloorIdentity':
              case 'RelatedSchedule':
              case 'OutPeopleFlow':
              case 'InPeopleFlow':
              case 'ExsitPeopleNum':
                break;
              default:
                return item
            }
          })
          //手动删除掉数据字典中不存在的字段，等待后台同步
          this.InforsList = arr.filter(t => t && t.InfoPointCode != '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>
