<!--
 * @Author: 曹捷
 * @Date: 2021-05-07 17:06:21
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-01 16:39:26
 * @Description: fileContent
-->
<template>
  <a-tabs class="right-panel" v-model:value:activeKey="activeKey">
    <a-tab-pane class="pana-content" key="1" tab="组件属性">
      <obit-scrollbar class="h100">
        <a-form size="small" class="pana-form" :labelCol="{span: 7}" :wrapper-col="{span:16}">
          <a-form-item label="切换组件">
            <a-select v-model:value="activeData.cptIndex" @change="cptChange">
              <a-select-option :key="index" :value="index" v-for="(item,index) in componentList">
                {{item.__config__.label}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="字段名">
            <a-input v-model:value="activeData.key" placeholder="请输入字段名（v-model)" />
          </a-form-item>
          <a-form-item label="标题">
            <a-input v-model:value="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
          </a-form-item>
          <a-form-item label="占位提示">
            <a-input v-model:value="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
          </a-form-item>
          <a-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
            <a-input v-model:value="activeData['start-placeholder']" placeholder="请输入占位提示" />
          </a-form-item>
          <a-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
            <a-input v-model:value="activeData['end-placeholder']" placeholder="请输入占位提示" />
          </a-form-item>
          <a-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
            <a-slider :marks="{12:'12' }" v-model:value="activeData.__config__.span" @change="spanChange" :min="0"
              :max="24" />
          </a-form-item>
          <a-form-item label="标签宽度">
            <a-slider :marks="{4:'4' }" v-model:value="activeData.__config__.labelCol" :min="0" :max="24" />
          </a-form-item>
          <a-form-item label="控件宽度">
            <a-slider :marks="{18:'18' }" v-model:value="activeData.__config__.wrapperCol" :min="0" :max="24" />
          </a-form-item>
          <a-form-item v-if="activeData.key!==undefined" label="默认值">
            <a-input v-model:value="activeData.__config__.defaultValue" @input="onDefaultValueInput"
              placeholder="请输入默认值" />
          </a-form-item>
          <a-form-item v-if="activeData.multiple!==undefined" label="多选">
            <a-switch v-model:checked="activeData.multiple" />
          </a-form-item>
          <!-- 下拉组件 -->
          <template v-if="activeData.ajaxInfo!==undefined">
            <a-form-item label="值字段名">
              <a-input v-model:value="activeData.ajaxInfo.valuename" placeholder="值字段名" />
            </a-form-item>
            <a-form-item label="展示字段">
              <a-input v-model:value="activeData.ajaxInfo.labelname" placeholder="展示字段" />
            </a-form-item>
            <a-form-item label="接口地址">
              <a-textarea v-model:value="activeData.ajaxInfo.ajaxurl" placeholder="接口地址" />
            </a-form-item>
            <a-form-item label="类型">
              <a-radio-group v-model:value="activeData.componentType" button-style="solid">
                <a-radio-button value="select">下拉选择</a-radio-button>
                <a-radio-button value="radio">按钮单选</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </template>
          <!-- 字典组件 -->
          <template v-if="activeData.dictCode!==undefined">
            <a-form-item label="字典编码">
              <a-input v-model:value="activeData.dictCode" placeholder="字典编码" />
            </a-form-item>
            <a-form-item label="类型">
              <a-radio-group v-model:value="activeData.componentType" button-style="solid">
                <a-radio-button value="select">下拉选择</a-radio-button>
                <a-radio-button value="radio">按钮单选</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </template>
          <!-- 开关组件 -->
          <template v-if="activeData.checkedChildren !== undefined">
            <a-form-item label="选中内容">
              <a-input v-model:value="activeData.checkedChildren" placeholder="选中内容" />
            </a-form-item>
            <a-form-item label="非选中内容">
              <a-input v-model:value="activeData.unCheckedChildren" placeholder="非选中内容" />
            </a-form-item>
            <a-form-item label="选中值">
              <a-input v-model:value="activeData.activeValue" placeholder="选中值" />
            </a-form-item>
            <a-form-item label="非选中值">
              <a-input v-model:value="activeData.inactiveValue" placeholder="非选中值" />
            </a-form-item>
          </template>
          <a-form-item v-if="activeData.showTime !== undefined" label="展示时间">
            <a-switch v-model:checked="activeData.showTime" />
          </a-form-item>
          <a-form-item label="展示格式" v-if="activeData.format !== undefined">
            <a-input v-model:value="activeData.format" placeholder="展示格式" />
          </a-form-item>
          <a-form-item label="日期格式" v-if="activeData.valueFormat !== undefined">
            <a-input v-model:value="activeData.valueFormat" placeholder="日期格式" />
          </a-form-item>
          <!-- <a-form-item v-if="activeData.type !== undefined && 'a-date-picker' === activeData.__config__.tag"
            label="时间类型">
            <a-select v-model="activeData.type" placeholder="请选择时间类型" :style="{ width: '100%' }"
              @change="dateTypeChange">
              <a-option v-for="(item, index) in dateTypeOptions" :key="index" :label="item.label" :value="item.value" />
            </a-select>
          </a-form-item> -->

          <a-form-item v-if="activeData.autosize !== undefined" label="最小行数">
            <a-input-number class="w100" v-model:value="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
          </a-form-item>
          <a-form-item v-if="activeData.autosize !== undefined" label="最大行数">
            <a-input-number class="w100" v-model:value="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
          </a-form-item>

          <a-form-item v-if="activeData.min !== undefined" label="最小值">
            <a-input-number class="w100" v-model:value="activeData.min" :min="1" placeholder="最小值" />
          </a-form-item>
          <a-form-item v-if="activeData.max !== undefined" label="最大值">
            <a-input-number class="w100" v-model:value="activeData.max" :min="1" placeholder="最大值" />
          </a-form-item>
          <a-form-item v-if="activeData.setp !== undefined" label="步长">
            <a-input-number class="w100" v-model:value="activeData.setp" :min="1" placeholder="步长" />
          </a-form-item>
          <a-form-item v-if="activeData.precision !== undefined" label="精度">
            <a-input-number class="w100" v-model:value="activeData.precision" :min="1" placeholder="精度" />
          </a-form-item>
          <a-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
            <a-input v-model:value="activeData.__slot__.prepend" placeholder="请输入前缀" />
          </a-form-item>
          <a-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
            <a-input v-model:value="activeData.__slot__.append" placeholder="请输入后缀" />
          </a-form-item>
          <a-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
            <a-input placeholder="请选择前图标" readonly v-model:value="activeData['prefix-icon']">
              <template #prefix>
                <i class="iconfont " :class="'icon-'+activeData['prefix-icon']"></i>
              </template>
              <template #suffix>
                <obitIconShow v-model:icon="activeData['prefix-icon']"></obitIconShow>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item v-if="activeData['prefix-icon']!==undefined" label="后图标">
            <a-input placeholder="请选择后图标" readonly v-model:value="activeData['suffix-icon']">
              <template #prefix>
                <i class="iconfont " :class="'icon-'+activeData['suffix-icon']"></i>
              </template>
              <template #suffix>
                <obitIconShow v-model:icon="activeData['suffix-icon']"></obitIconShow>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
            <a-input addonAfter="个字符" v-model:value.number="activeData.maxlength" placeholder="请输入字符长度">
            </a-input>
          </a-form-item>
          <a-form-item v-if="activeData.__config__.showLabel !== undefined " label="显示标签">
            <a-switch v-model:checked="activeData.__config__.showLabel" />
          </a-form-item>
          <a-form-item v-if="activeData['show-word-limit'] !== undefined " label="输入统计">
            <a-switch v-model:checked="activeData['show-word-limit']" />
          </a-form-item>
          <a-form-item v-if="activeData.clearable !== undefined " label="能否清空">
            <a-switch v-model:checked="activeData.clearable" />
          </a-form-item>
          <a-form-item v-if="activeData.readonly !== undefined " label="是否只读">
            <a-switch v-model:checked="activeData.readonly" />
          </a-form-item>
          <a-form-item v-if="activeData.disabled !== undefined " label="是否禁用">
            <a-switch v-model:checked="activeData.disabled" />
          </a-form-item>
          <a-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
            <a-switch v-model:checked="activeData.__config__.required" />
          </a-form-item>
          <div class="reg-content" v-if="Array.isArray(activeData.__config__.regList)">
            <a-divider>正则校验</a-divider>
            <div class="reg-item" v-for="(item, index) in activeData.__config__.regList" :key="index">
              <span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
                <i class="iconfont icon-close" />
              </span>
              <a-form-item label="表达式">
                <a-input v-model:value="item.pattern" placeholder="请输入正则" />
              </a-form-item>
              <a-form-item label="错误提示" style="margin-bottom:0">
                <a-input v-model:value="item.message" placeholder="请输入错误提示" />
              </a-form-item>
            </div>
            <div style="margin-left: 20px">
              <a-button type="link" @click="addReg">
                <i class="iconfont icon-add-circle p-r-5"></i> 添加规则
              </a-button>
            </div>
          </div>

        </a-form>
      </obit-scrollbar>
    </a-tab-pane>
    <!-- -----------------------------------表单属性----------------------------------------------- -->
    <a-tab-pane class="pana-content" key="2" tab="表单属性">
      <obit-scrollbar class="h100">
        <a-form size="small" :labelCol="{span: 7}" :wrapper-col="{span:16}">
          <a-form-item label="文件名">
            <a-input v-model:value="formConf.fileName" placeholder="请输入文件名" />
          </a-form-item>
          <a-form-item label="表单Ref">
            <a-input v-model:value="formConf.formRef" placeholder="请输入表单名（ref）" />
          </a-form-item>
          <a-form-item label="表单模型">
            <a-input v-model:value="formConf.formModel" placeholder="请输入数据模型" />
          </a-form-item>
          <a-form-item label="功能名称">
            <a-input v-model:value="formConf.modulesName" placeholder="请输入功能名称" />
          </a-form-item>
          <a-form-item label="保存URL">
            <a-textarea v-model:value="formConf.saveUrl" placeholder="请输入保存API地址" />
          </a-form-item>
          <a-form-item label="编辑URL">
            <a-textarea v-model:value="formConf.editUrl" placeholder="请输入编辑时API地址" />
          </a-form-item>
          <a-form-item label="布局">
            <a-radio-group v-model:value="formConf.layout" button-style="solid">
              <a-radio-button value="horizontal">水平</a-radio-button>
              <a-radio-button value="vertical">垂直</a-radio-button>
              <a-radio-button value="inline">行内</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="标签对齐">
            <a-radio-group v-model:value="formConf.labelAlign" button-style="solid">
              <a-radio-button value="left">左对齐</a-radio-button>
              <a-radio-button value="right">右对齐</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="组件宽度">
            <a-slider :marks="{12:'12' }" v-model:value="formConf.span" :min="0" :max="24" />
          </a-form-item>
          <a-form-item label="标签宽度">
            <a-slider :marks="{4:'4' }" v-model:value="formConf.labelCol" :min="0" :max="24" />
          </a-form-item>
          <a-form-item label="控件宽度">
            <a-slider :marks="{18:'18' }" v-model:value="formConf.wrapperCol" :min="0" :max="24" />
          </a-form-item>
          <a-form-item label="栅格间隔(x)">
            <a-slider :marks="{12:'12',24:'24'}" v-model:value="formConf.gutterX" :min="0" :max="36" />
          </a-form-item>
          <a-form-item label="栅格间隔(y)">
            <a-slider :marks="{12:'12',24:'24'}" v-model:value="formConf.gutterY" :min="0" :max="36" />
          </a-form-item>
          <!-- <a-form-item label="表单按钮">
            <a-switch v-model:checked="formConf.formBtns" />
          </a-form-item> -->
        </a-form>
      </obit-scrollbar>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import obitIconShow from './../../../components/obit-icon-show/obit-icon-show.vue'
import { leftComponents } from './../gconfig'
import { util } from './../../../entery'

export default {
  components: { obitIconShow },
  props: {
    activeData: {
      type: Object
    },
    formConf: {
      type: Object
    },
    formData: {
      type: Object
    }
  },
  setup (props, context) {
    let _data = reactive({
      activeKey: '1',
      componentList: [],
      dateTypeOptions: [
        { label: '日(date)', value: 'date' },
        { label: '周(week)', value: 'week' },
        { label: '月(month)', value: 'month' },
        { label: '年(year)', value: 'year' },
        { label: '日期时间(datetime)', value: 'datetime' }
      ]
    })
    let _methods = {
      // 添加规则
      addReg () {
        props.activeData.__config__.regList.push({})
      },
      onDefaultValueInput (val) {
        props.formData[props.activeData.key] = props.activeData.__config__.defaultValue
      },
      cptChange (value) {
        let item = util.util.cloneObj(_data.componentList[value])
        item.__config__.span = props.activeData.__config__.span
        item.__config__.label = props.activeData.__config__.label
        item.placeholder = props.activeData.placeholder
        item.key = props.activeData.key
        item.cptIndex = value
        context.emit('changeActive', item)
      },
      changeRenderKey () {
      },
      spanChange (val) {
        props.formConf.span = val
      }
    }
    watch(() => props.activeData, () => {
      props.activeData.cptIndex = _data.componentList.findIndex(ele => ele.__config__.tag === props.activeData.__config__.tag)

    })
    _data.componentList = [].concat(...leftComponents.map(item => item.list))
    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style lang="less">
.right-panel {
  .reg-content {
    padding: 0 12px;
  }
  .reg-item {
    padding: 12px 6px;
    background: #f8f8f8;
    position: relative;
    border-radius: 8px;
    .close-btn {
      position: absolute;
      right: -6px;
      top: -6px;
      display: block;
      width: 19px;
      height: 19px;
      line-height: 16px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      color: #fff;
      text-align: center;
      z-index: 1;
      cursor: pointer;
      font-size: 12px;
      padding: 2px;
    }
    .close-btn:hover {
      background: rgba(210, 23, 23, 0.5);
    }
  }
  .reg-item + .reg-item {
    margin-top: 18px;
  }
  .ant-tabs-bar {
    margin-bottom: 0;
  }
  .pana-content {
    height: calc(100vh - 45px);
  }
  .pana-form {
    .ant-form-item {
      margin-bottom: 12px;
    }
  }
  .ant-tabs-nav {
    width: 100%;
    .ant-tabs-tab {
      margin: 0;
      width: 50%;
      text-align: center;
    }
  }
}
</style>