<template>
  <el-row>
    <el-form-item label="控件标题">
      <el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
    </el-form-item>
    <el-form-item label="占位提示">
      <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
    </el-form-item>
    <template v-if="!activeData.__config__.isSubTable">
      <el-form-item label="控件栅格">
        <el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
      </el-form-item>
      <el-form-item label="标题宽度">
        <el-input-number v-model="activeData.__config__.labelWidth" placeholder="标题宽度" :min="0" :precision="0" controls-position="right" />
      </el-form-item>
    </template>
    <el-form-item label="控件宽度" v-if="activeData.__config__.isSubTable">
      <el-input-number v-model="activeData.__config__.columnWidth" placeholder="控件宽度" :min="0" :precision="0" controls-position="right" />
    </el-form-item>
    <el-form-item>
      <template slot="label">
        <span>自动填写</span>
        <el-tooltip style="cursor: pointer" effect="dark" :content="'设置指定规则，将结果自动填写到字段输入框中'" placement="top">
          <i class="el-icon-question" />
        </el-tooltip>
      </template>
      <el-select v-model="activeData.__config__.inputType" placeholder="请选择">
        <el-option label="指定数值" :value="1">
          <span>指定数值</span>
          <el-tooltip style="cursor: pointer" effect="dark" :content="'创建数据时将指定数值自动输入'" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </el-option>
        <el-option label="自定义表达式" :value="2">
          <span>自定义表达式</span>
          <el-tooltip style="cursor: pointer" effect="dark" :content="'通过函数和本表其他字段的运算结果自动填入，被引用的字段值改变时不会改变当前字段值'" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </el-option>
        <el-option label="页面变量" :value="4">
          <span>页面变量</span>
          <el-tooltip style="cursor: pointer" effect="dark" :content="'通过页面内定义变量值结果自动填入'" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="指定数值" v-if="activeData.__config__.inputType === 1">
      <el-input-number
        v-model="activeData.__config__.defaultValue"
        placeholder="默认值"
        :min="activeData.min"
        :max="activeData.max"
        :step="activeData.step"
        :precision="activeData.precision"
        controls-position="right"
      />
    </el-form-item>
    <el-form-item label="自定义表达" v-if="activeData.__config__.inputType === 2">
      <customExpression :defaultValueExp="activeData.defaultValueExp" @onChangeExp="setDefaultValExp" :dbLinkId="dbLinkId" :drawList="drawList" :activeData="activeData" />
    </el-form-item>
    <el-form-item label="选择变量" v-if="activeData.__config__.inputType === 4">
      <el-cascader v-model="activeData.defaultVarType" :options="varTypeList" @visible-change="allVarListChange"></el-cascader>
    </el-form-item>
    <el-form-item label="最小值">
      <el-input-number v-model="activeData.min" placeholder="最小值" controls-position="right" />
    </el-form-item>
    <el-form-item label="最大值">
      <el-input-number v-model="activeData.max" placeholder="最大值" controls-position="right" />
    </el-form-item>
    <el-form-item label="步长">
      <el-input-number v-model="activeData.step" placeholder="步数" :min="1" controls-position="right" />
    </el-form-item>
    <el-form-item label="精度">
      <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" controls-position="right" />
    </el-form-item>
    <el-form-item label="前缀">
      <el-input v-model="activeData.slotPrepend" :maxlength="3" placeholder="请输入前缀" />
    </el-form-item>
    <p style="color: #ff0000;margin-bottom: 10px">注：前缀最多支持三个字符；</p>
    <el-form-item label="后缀">
      <el-input v-model="activeData.slotAppend" placeholder="请输入后缀" />
    </el-form-item>
    <el-form-item label="按钮位置">
      <el-radio-group v-model="activeData['controls-position']">
        <el-radio-button label="">默认</el-radio-button>
        <el-radio-button label="right">右侧</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="严格步数">
      <el-switch v-model="activeData['step-strictly']" />
    </el-form-item> -->
    <!-- <el-form-item label="显示标签">
      <el-switch v-model="activeData.__config__.showLabel" />
    </el-form-item> -->
    <el-form-item label="是否禁用">
      <el-switch v-model="activeData.disabled" />
    </el-form-item>
    <el-form-item label="是否必填">
      <el-switch v-model="activeData.__config__.required" />
    </el-form-item>
    <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.displayNone" />
    </el-form-item>
  </el-row>
</template>
<script>
import comMixin from './mixin'
import customExpression from '@/components/Generator/index/RightComponents/customExpression'
import { loopRelationList,loopActiveTabelList } from '@/utils'
export default {
  props: ['activeData', 'dbLinkId', 'drawList'],
  mixins: [comMixin],
  components: { customExpression },
  data() {
    return {
      allVarList: [],
      apiVarList: [],
      varTypeList: []
    }
  },
  created() {
    this.allVarListChange(true)
  },
  methods: {
    getAllVarList() {
      //获取表单内变量
      let mapList = this.activeData.__config__.relationTable ? loopActiveTabelList(this.drawList,this.activeData.__config__.relationTable) : loopRelationList(this.drawList)
      this.allVarList = mapList
        .map((o) => {
          if (o.allVar) {
            return {
              label: o.__config__.label,
              value: o.__vModel__
            }
          }
        })
        .filter((l) => l !== undefined)
    },
    getAllapiVarList() {
      //获取API返回变量
      this.apiVarList = []
      let mapList = this.activeData.__config__.relationTable ? loopActiveTabelList(this.drawList,this.activeData.__config__.relationTable) : loopRelationList(this.drawList)
      mapList.forEach((item, key) => {
        let config = item.__config__
        if (config.ApiReturn && config.ApiReturn.length) {
          let list = []
          if (config.jnpfKey === 'cascader') {
            list = config.ApiReturn.map((o) => {
              return {
                label: o.varName,
                value: o.varName,
                cascaderType: true
              }
            }).filter((l) => l !== undefined)
          } else {
            list = config.ApiReturn.map((o) => {
              return {
                label: o.varName,
                value: o.varName
              }
            }).filter((l) => l !== undefined)
          }
          this.apiVarList = [...this.apiVarList, ...list]
        }
      })
    },
    //相同组件切换时 表单内全局变量数据不会及时更新  利用下拉框出现时刷新一下
    allVarListChange(val) {
      if (val) {
        this.getAllVarList()
        this.getAllapiVarList()
        this.varTypeList = [
          { value: 3, label: '表单全局变量', children: this.allVarList || [] },
          { value: 4, label: 'api全局变量', children: this.apiVarList || [] }
        ]
      }
    }
  }
}
</script>
