<template>
  <div class="properties-centent kk-checkbox">
    <div class="head-title">
      控件属性设置
    </div>

    <div class="properties-body">
      <p class="hint-box" v-show="selectItem.key === ''">未选择控件</p>
      <p class="hint-box" v-show="selectItem.type == 'columnPanel_2' || selectItem.type == 'columnPanel_3'">此控件无可修改属性</p>
      <a-form v-show="selectItem.key !== ''">
        <!-- 标题 -->
        <a-form-item
          v-if="typeof selectItem.label !== 'undefined' && typeof selectItem.options.title !== 'undefined'"
          :label="selectItem.options.title.name"
        >
          <a-input v-model="selectItem.options.title.value" :maxLength="20"/>
        </a-form-item>

        <!-- <a-form-item
          v-if="typeof selectItem.model !== 'undefined'"
          label="数据字段"
        >
          <a-input v-model="selectItem.model"/>
        </a-form-item> -->
        <!-- input type start -->
        <a-form-item v-if="selectItem.type === 'input'" label="输入框type">
          <a-input v-model="options.type" placeholder="请输入" />
        </a-form-item>
        <!-- input type end -->
        <!-- 下拉 -->
        <!-- <a-form-item
          v-if="
            typeof options.rangePlaceholder !== 'undefined' && options.range
          "
          :label="占位内容"
        >
          <a-input placeholder="请输入" v-model="options.placeholder[0]" />
          <a-input placeholder="请输入" v-model="options.rangePlaceholder[1]" />
        </a-form-item> -->
        <!-- end -->

        <!-- 提示值 -->
        <a-form-item
          v-else-if="typeof options.placeholder !== 'undefined'"
          :label="options.placeholder.name"
        >
          <a-input v-model="options.placeholder.value" :maxLength="20"/>
        </a-form-item>

        <!-- <a-form-item
          v-if="selectItem.type === 'textarea'"
          label="自适应内容高度"
        >
          <a-input-number
            style="width:100%"
            v-model="options.minRows"
            placeholder="最小高度"
          />
          <a-input-number
            style="width:100%"
            v-model="options.maxRows"
            placeholder="最大高度"
          />
        </a-form-item> -->
        <!-- 宽度 -->
        <a-form-item v-if="typeof options.width !== 'undefined' && selectItem.type != 'date'" :label="options.width.name">
          <a-radio-group v-model="options.width.defValue">
            <a-radio :value="itemLB.value" :style="radioStyle" v-for="itemLB in options.width.value">
                {{itemLB.label}}
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item v-if="typeof options.height !== 'undefined'" label="高度">
          <a-input-number v-model="options.height" />
        </a-form-item>
        <a-form-item v-if="typeof options.step !== 'undefined'" label="步长">
          <a-input-number v-model="options.step" placeholder="请输入" />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'number'" :label="options.range.name">
          <a-input-number 
            @change="Change(options,'one',selectItem)"
            @blur="clear(options,'one',selectItem)"
            v-model="options.range.value.min"
          />
          --
           <a-input-number
             @blur="clear(options,'two',selectItem)" 
             @change="Change(options,'two',selectItem)" 
             v-model="options.range.value.max"
           />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'number'" :label="options.scale.name">
            
            <a-radio-group v-model="options.scale.defValue">
              <a-radio :value="itemLB.value" :style="radioStyle" v-for="itemLB in options.scale.value">
                  {{itemLB.label}}
              </a-radio>
            </a-radio-group>
        </a-form-item>

        <a-form-item
          v-if="typeof options.dictCode !== 'undefined'"
          label="dictCode"
        >
          <a-input v-model="options.dictCode"></a-input>
        </a-form-item>
        <!-- 选项配置及动态数据配置 start -->
        <a-form-item
          v-if="selectItem.type === 'radio' || selectItem.type === 'checkbox' || selectItem.type === 'select'"
          :label="selectItem.options.options.name"
        >
          <!-- <a-radio-group buttonStyle="solid" v-model="options.options.dynamic">
            <a-radio-button :value="false">静态数据</a-radio-button>
            <a-radio-button :value="true">动态数据</a-radio-button>
          </a-radio-group> -->

          <!-- <a-input
            v-show="options.dynamic"
            v-model="options.dynamicKey"
            placeholder="动态数据变量名"
          ></a-input>
          {{options.value}} -->
          <KChangeOption v-model="selectItem.options.options.value" />
        </a-form-item>
        <!-- 选项配置及动态数据配置 end -->
        <a-form-item v-if="selectItem.type === 'grid'" label="栅格间距">
          <a-input-number
            v-model="selectItem.options.gutter"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'grid'" label="列配置项">
          <KChangeOption v-model="selectItem.columns" type="colspan" />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'switch'" label="默认值">
          <a-switch v-model="options.defaultValue" />
        </a-form-item>

        <a-form-item
          v-if="['number', 'slider'].indexOf(selectItem.type) >= 0"
          label="默认值"
        >
          <a-input-number
            :step="options.step"
            :max="options.max"
            :min="options.min"
            v-model="options.defaultValue.value"
          />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'rate'" label="默认值">
          <a-rate
            v-model="options.defaultValue"
            :allowHalf="options.allowHalf"
            :count="options.max"
          />
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'select'" label="默认值">
          <a-select 
            :options="selectItem.options.options.value" 
            v-model="selectItem.options.options.defValue == '' ? undefined : selectItem.options.options.defValue"
            placeholder="请选择"
          />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'radio'" label="默认值">
          <a-radio-group
            :options="selectItem.options.options.value"
            v-model="selectItem.options.options.defValue"
          />
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'checkbox'" label="默认值">
          <a-checkbox-group
            :options="selectItem.options.options.value"
            v-model="selectItem.options.options.defValue"
          />
        </a-form-item>
        <!-- 日期选择器默认值 start -->
        <!-- <a-form-item v-if="selectItem.type === 'date'" :label="options.defaultValue.name">
          <a-input
            v-model="options.defaultValue.value"
          />
          <a-input
            v-if="options.range"
            v-model="options.rangeDefaultValue[0]"
            :placeholder="
              typeof options.format === 'undefined' ? '' : options.format
            "
          />
          <a-input
            v-if="options.range"
            v-model="options.rangeDefaultValue[1]"
            :placeholder="
              typeof options.format === 'undefined' ? '' : options.format
            "
          />
        </a-form-item> -->
        <!-- 日期选择器默认值 end -->

        <a-form-item v-if="selectItem.type === 'date'" :label="options.currentDate.name">
            <a-checkbox v-model="options.currentDate.value" @change="dateChange(options.currentDate.value,options)">{{options.currentDate.name}}</a-checkbox>
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'date'" :label="options.showTime.name">
            <a-checkbox v-model="options.showTime.value">{{options.showTime.name}}</a-checkbox>
        </a-form-item>


        <!-- 默认值 -->
        <a-form-item
          v-if="
            ![
              'number',
              'radio',
              'checkbox',
              'date',
              'rate',
              'select',
              'switch',
              'slider',
              'html',
            ].includes(selectItem.type) &&
              typeof options.defaultValue !== 'undefined'
          "
          :label="options.defaultValue.name"
        >
          <a-input
            v-model="options.defaultValue.value"
            :maxLength="20"
            
          />
        </a-form-item>
        <!-- 修改html -->
        <a-form-item v-if="selectItem.type === 'html'" label="默认值">
          <a-textarea
            v-model="options.defaultValue"
            :autoSize="{ minRows: 4, maxRows: 8 }"
          />
        </a-form-item>
        <!-- 日期格式选择 -->
        <a-form-item
          v-if="typeof options.dateformat !== 'undefined'"
          :label="options.dateformat.name"
        >
          <a-select 
            :options="options.dateformat.value" 
            v-model="options.dateformat.defValue"
            placeholder="请选择"
          />

        </a-form-item>

        <a-form-item
          v-if="typeof options.orientation !== 'undefined'"
          label="标签位置"
        >
          <a-radio-group buttonStyle="solid" v-model="options.orientation">
            <a-radio-button value="left">左</a-radio-button>
            <a-radio-button value="">居中</a-radio-button>
            <a-radio-button value="right">右</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'button'" label="类型">
          <a-radio-group buttonStyle="solid" v-model="options.type">
            <a-radio value="primary">Primary</a-radio>
            <a-radio value="default">Default</a-radio>
            <a-radio value="dashed">Dashed</a-radio>
            <a-radio value="danger">Danger</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'button'" label="按钮操作">
          <a-radio-group buttonStyle="solid" v-model="options.handle">
            <a-radio-button value="submit">提交</a-radio-button>
            <a-radio-button value="reset">重置</a-radio-button>
            <a-radio-button value="dynamic">动态函数</a-radio-button>
          </a-radio-group>
          <a-input
            v-show="options.handle === 'dynamic'"
            v-model="options.dynamicFun"
            placeholder="动态函数名"
          ></a-input>
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'alert'" label="辅助描述">
          <a-input v-model="options.description"></a-input>
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'alert'" label="类型">
          <a-radio-group buttonStyle="solid" v-model="options.type">
            <a-radio value="success">success</a-radio>
            <a-radio value="info">info</a-radio>
            <a-radio value="warning">warning</a-radio>
            <a-radio value="error">error</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'alert'" label="操作属性">
          <kCheckbox v-model="options.showIcon" label="显示图标" />
          <kCheckbox v-model="options.banner" label="无边框" />
          <kCheckbox v-model="options.closable" label="可关闭" />
        </a-form-item>
        <!-- 上传图片 -->
        <a-form-item v-if="selectItem.type === 'uploadImg'" label="样式">
          <a-radio-group buttonStyle="solid" v-model="options.listType">
            <a-radio-button value="text">text</a-radio-button>
            <a-radio-button value="picture">picture</a-radio-button>
            <a-radio-button value="picture-card">card</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <!-- 上传数量 -->
        <a-form-item
          v-if="typeof options.limit !== 'undefined'"
          label="最大上传数量"
        >
          <a-input-number :min="1" v-model="options.limit" />
        </a-form-item>

        <!-- scrollY -->
        <a-form-item
          v-if="typeof options.scrollY !== 'undefined'"
          label="scrollY"
        >
          <a-input-number :min="0" v-model="options.scrollY" />
        </a-form-item>

        <!-- 上传地址 -->
        <a-form-item
          v-if="typeof options.action !== 'undefined'"
          label="上传地址"
        >
          <a-input v-model="options.action" placeholder="请输入"></a-input>
        </a-form-item>
        <!-- 上传额外参数 -->
        <a-form-item
          v-if="typeof options.data !== 'undefined'"
          label="额外参数（JSON格式）"
        >
          <a-input v-model="options.data" placeholder="严格JSON格式"></a-input>
        </a-form-item>
        <!-- 文字对齐方式 -->
        <!-- <a-form-item v-if="selectItem.type === 'text'" label="文字对齐方式">
          <a-radio-group buttonStyle="solid" v-model="options.textAlign">
            <a-radio-button value="left">左</a-radio-button>
            <a-radio-button value="center">居中</a-radio-button>
            <a-radio-button value="right">右</a-radio-button>
          </a-radio-group>
        </a-form-item> -->
        <!-- <a-form-item v-if="selectItem.type === 'text'" label="操作属性">
          <kCheckbox v-model="options.showRequiredMark" label="显示必选标记" />
        </a-form-item> -->

        <!-- <a-form-item
          v-if="
            typeof options.disabled !== 'undefined' ||
              typeof options.readonly !== 'undefined' ||
              typeof options.clearable !== 'undefined' ||
              typeof options.multiple !== 'undefined' ||
              typeof options.range !== 'undefined' ||
              typeof options.showTime !== 'undefined' ||
              typeof options.allowHalf !== 'undefined' ||
              typeof options.showInput !== 'undefined'
          "
          label="操作属性"
        >
          <kCheckbox
            v-if="typeof options.disabled !== 'undefined'"
            v-model="options.disabled"
            label="禁用"
          />
          <kCheckbox
            v-if="typeof options.readonly !== 'undefined'"
            v-model="options.readonly"
            label="只读"
          />
          <kCheckbox
            v-if="typeof options.clearable !== 'undefined'"
            v-model="options.clearable"
            label="可清除"
          />
          <kCheckbox
            v-if="typeof options.multiple !== 'undefined'"
            v-model="options.multiple"
            label="多选"
          />
          <kCheckbox
            v-if="typeof options.range !== 'undefined'"
            v-model="options.range"
            label="范围选择"
          />
          <kCheckbox
            v-if="typeof options.showTime !== 'undefined'"
            v-model="options.showTime"
            label="时间选择器"
          />
          <kCheckbox
            v-if="typeof options.allowHalf !== 'undefined'"
            v-model="options.allowHalf"
            label="允许半选"
          />
          <kCheckbox
            v-if="typeof options.showInput !== 'undefined'"
            v-model="options.showInput"
            label="显示输入框"
          />
          <kCheckbox
            v-if="typeof options.showLabel !== 'undefined'"
            v-model="options.showLabel"
            label="显示Label"
          />
          <kCheckbox
            v-if="typeof options.chinesization !== 'undefined'"
            v-model="options.chinesization"
            label="汉化"
          />
          <kCheckbox
            v-if="typeof options.hideSequence !== 'undefined'"
            v-model="options.hideSequence"
            label="隐藏序号"
          />
          <kCheckbox
            v-if="typeof options.drag !== 'undefined'"
            v-model="options.drag"
            label="允许拖拽"
          />
        </a-form-item> -->
        <!-- 校验 -->
        <a-form-item
          v-if="
            typeof selectItem.rules !== 'undefined' &&
              selectItem.rules.length > 0
          "
          label="校验"
        >
          <kCheckbox v-model="selectItem.rules[0].required" :label="selectItem.options.required.name"/>
          <a-input
            v-show='selectItem.rules[0].required'
            v-model="selectItem.rules[0].message"
            :maxLength="20"
            placeholder="必填校验提示信息"
          />
          <!-- <KChangeOption v-model="selectItem.rules" type="rules" /> -->
        </a-form-item>

        <!-- 表格选项 -->
        <a-form-item v-if="selectItem.type === 'table'" label="表格样式CSS">
          <a-input v-model="selectItem.options.customStyle" />
        </a-form-item>
        <a-form-item v-if="selectItem.type === 'table'" label="属性">
          <kCheckbox v-model="selectItem.options.bordered" label="显示边框" />
          <kCheckbox v-model="selectItem.options.bright" label="鼠标经过点亮" />
          <kCheckbox v-model="selectItem.options.small" label="紧凑型" />
        </a-form-item>

        <a-form-item v-if="selectItem.type === 'table'" label="提示">
          <p style="line-height: 26px;">
            请点击右键增加行列，或者合并单元格
          </p>
        </a-form-item>
      </a-form>
    </div>
    <div class="close-box" @click="$emit('handleHide')">
      <a-icon type="double-right" />
    </div>
  </div>
</template>
<script>
/*
 * author kcz
 * date 2019-11-20
 * description 表单控件属性设置组件,因为配置数据是引用关系，所以可以直接修改
 */
import KChangeOption from "../../KChangeOption/index.vue";
import kCheckbox from "../../KCheckbox/index.vue";
import moment from "moment";
export default {
  name: "formItemProperties",
  data() {
    return {
      options: {},
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
    };
  },
  props: {
    selectItem: {
      type: Object,
      required: true
    }
  },
  methods: {
      Change(val,type,list){
          if(type == 'one'){
              if( val.range.value.min == '' ){
                  val.range.value.min = null;
              }
          }else{
              if( val.range.value.max == ''){
                  val.range.value.max = null;
              }
          }
      },
      clear(val,type,list){
          if(val.range.value.min !== '' && val.range.value.max !== ''){
              if(type == 'one'){
                  if(val.range.value.min > val.range.value.max){
                      val.range.value.min = null;
                      this.$message.warning('最小值不能大于最大值');
                  }
              }else{
                  if(val.range.value.min > val.range.value.max){
                    val.range.value.max = null;
                    this.$message.warning('最小值不能大于最大值');  
                  }  
              }
          } 
      },
      dateChange(val,time){
        if(val){
            let data = moment(new Date()).format(time.dateformat.defValue)
            time.defaultValue.value = data;
        }else{
            time.defaultValue.value  = null;
        }

      }
  },
  watch: {
    selectItem(val) {
      this.options = val.options || {};
    }
  },
  computed:{
      isMin(val){
          if(val != null){
              return val;
          }else{
              return 0;
          }
      }    
  },
  components: {
    KChangeOption,
    kCheckbox
  }
};
</script>

