<template>
  <div class="generator">
    <!-- 左侧组件选择 -->
    <div class="generator-left">
      <div class="generator-left-top">Form Generator</div>
      <div class="generator-left-bottom">
        <item-list :clone="clone" :add="add" />
      </div>
    </div>
    <!-- 中部组件展示 -->
    <div class="generator-center">
      <div class="generator-center-top">
        <span @click="empty"><Icon type="md-trash" /> 清空</span>
      </div>
      <div class="generator-center-bottom">
        <!-- 主要的 组件 -->
        <!-- {{formData}} -->
        <form-content
          :formData="formData"
          @itemClick="itemClick"
          :curId="curId"
          ref="formContent" />
      </div>
    </div>
    <!-- 右侧组件属性与表单属性 -->
    <div class="generator-right">
      <Tabs value="component">
        <TabPane label="字段属性" name="component" class="comp-prop">
          <comp-prop :info="itemInfo" :field-list="fieldList" :use-selected-field="useSelectedField" />
        </TabPane>
        <TabPane label="表单属性" name="form">
          <form-prop :config="formData.config" />
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import ItemList from './components/ItemList'
import FormContent from './components/FormContent'
import FormProp from './components/FormProp'
import CompProp from './components/CompProp'
import { traverRows, transForEnd, transForFront } from '@/lib/utils'

export default {
  name: 'FormGenerator',
  components: {
    ItemList,
    FormContent,
    FormProp,
    CompProp,
  },
  props: {
    //默认json
    defaultValue: String,
    //status 状态  默认新增    //新增 add    未使用 notUse   已停用   stop
    status: {
      type: String,
      default: 'add',
    },
    fieldList: {
      type: Array,
      default: () => [],
    },
    useSelectedField: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        config: {
          labelPosition: 'left',
          labelWidth: 90,
          gutter: 20,
          size: 'default',
          labelColon: false,
        },
        schema: [], //eslint-disable-line
      },
      curId: '', //当前 item id
    }
  },
  computed: {
    itemInfo() {
      const target = traverRows(this.formData.schema).find(v => v.id === this.curId)
      return target
    },
  },
  created() {
    if (this.defaultValue) {
      //处理行容器
      const json = transForFront(this.defaultValue)

      //处理 函数
      const loop = (rst) => {
        rst.forEach(v => {
          if (v.schema && v.schema.length) {
            loop(v.schema)
          }
          v.isNew = true
        })
      }
      // 未使用情况下 isNew 全部为true
      if (this.status === 'notUse') {
        loop(json.schema)
      }
      this.formData = json
    }
  },
  methods: {
    getJson() {
      const formData  = transForEnd(this.formData)
      //主要 处理事务
      formData.schema.forEach(v => {
        delete v.isNew
        if (v.name.includes('TqFieldTq')) {
          v.name = ''
        }
      })
      return JSON.stringify(formData)
    },
    itemClick(id) {
      this.curId = id
    },
    //新增属性 默认值
    clone({ label, type, tqType }) {
      //lastSpan 记录上次操作的span 优化新增时操作
      const lastSpan = this.itemInfo?.layout
      const id =  (new Date).getTime()
      this.curId = id
      //  拥有简单 选项
      // 拥有 远程 选项
      const hasRemoteOptions = ['Select', 'SelectRemote', 'Cascader', 'Radio', 'Checkbox']

      return {
        isNew: true, //  已停用 状态下 新增字段和原有字段 交互不同
        id,
        type: tqType,
        name: `TqFieldTq${id}`,
        defaultValue: null,
        layout: lastSpan || 24,
        required: false,
        title: {
          content: label, // 标题内容
          // hide: false, // 是否隐藏标题
          icon: {
            show: false, // 是否展示
            iconPosition: 'left', // 位置   文字前面left   文字后面 right
            iconType: 'icon', // 图片类型 iview  icon  img 两种
            iconName: '', // iview  icon 或 img 的标识
            tips: '', // 提示内容
          },
        },
        form: {
          type, // form 类型
          // 远程选项 数据 所需格式
          ...(hasRemoteOptions.includes(type) ? {
            options: {
              type: type === 'SelectRemote' ? 'remote' : 'static',
              remote: '',
              localstorage: '',
              staticList: type === 'Cascader' ? [{
                value: 'key1',
                label: '选项1',
                type: 'string',
                expand: true,
                children: [
                  { value: 'key11', label: '选项11', type: 'string', expand: true },
                ],
              }] : [{
                label: '展示1',
                value: 'key1',
              }, {
                label: '展示2',
                value: 'key2',
              }],
            },
          } : {}),
        },
        validateRules: [
        ],
        //搜索配置
        search: {
          show: false,
          sort: 1,
          layout: 6,
          label: '',
          type: 'simple',
        },
        //列表展示相关
        table: {
          show: false,
          label: '',
          width: 150,
          fixed: '',
          ellipsis: false,
          sortable: false,
          sort: 1,
          render: '',
        },
        isImport: { // 是否可导入
          show: false,
        },
        //控制可见状态
        controller: {
          disabled: {
            update: false,
            view: true,
          },
          visible: {
            update: true,
            view: true,
          },
        },
      }
    },
    add(obj) {
      const item = this.clone(obj)
      this.formData.schema.push(item)
    },
    empty() {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要清空所有组件吗？',
        onOk: () => {
          this.formData.schema = []
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.generator{
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  text-align: left;
  background: #fff;
  &-left{
    width: 260px;
    &-top{
      height: 42px;
      border-bottom:1px solid  #f1e8e8;
      color: #00afff;
      font-size: 18px;
      font-weight: 600;
      line-height: 42px;
      padding-left: 12px;
    }
    &-bottom{
      height: calc(100% - 42px);
      padding: 12px;
      border-right:1px solid  #f1e8e8;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  &-center{
    flex:1;
    &-top{
      height: 42px;
      border-bottom:1px solid  #f1e8e8;
      >span{
        float: right;
        color: #17b3a3;
        cursor: pointer;
        font-size: 14px;
        line-height:42px;
        margin-right: 15px;
        font-weight: 600;
        &:hover{
          color: #45c2b5;
        }
        &:first-of-type{
          color: #f56c6c;
          &:hover{
          color:  #d27474
          }
        }
      }
    }
    &-bottom{
      padding: 12px;
      height: calc(100% - 42px);
      overflow-y: scroll;
      position: relative;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  &-right{
    width: 340px;
    border-left:1px solid  #f1e8e8;
    ::v-deep .ivu-tabs{
      height: 100%;
      .ivu-tabs-bar{
        height: 42px;
        border-color:  #f1e8e8;
        .ivu-tabs-nav-scroll{
          height: 42px;
          .ivu-tabs-nav{
            height: 42px;
            width: 100%;
            .ivu-tabs-ink-bar{
              width: 50%!important;
              background-color: #17b3a3;
            }
            .ivu-tabs-tab{
              width: 50%;
              text-align: center;
              font-weight: 600;
              &:hover{
                color:#17b3a3 ;
              }
            }
            .ivu-tabs-tab-active {
                color: #17b3a3;
            }
          }
        }
      }
      .ivu-tabs-content{
        height: calc(100% - 50px);
        .ivu-tabs-tabpane{
          padding:0 12px 12px;
          overflow-y: scroll;
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
  }
}

.modal-item{
  margin-bottom:10px;
  >span{
    display: inline-block;
    width: 70px;
    text-align: right;
    margin-right: 10px;
  }
}

.comp-prop{
  padding: 0!important;
}
</style>