<template>
  <div id="app">
<!--    <div>
      <div class="lab-text-inner" contenteditable>
          单行文本
        <sub>2323</sub>我是中间间隔的<sup>我是是</sup>
      </div>

    </div>
    <el-button @click="testClick">测试</el-button>
    {{ modelData }}
    <lab-view ref="viewRef" :element="viewModel" :model-data="modelData" />-->
    <LabDesign :view="test" />
  </div>
</template>

<script>


export default {
  name: 'App',
  provide(){
    return {
      loadView: this.loadView
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      test: { element: {  render:'form', elements: []  }},
      viewModel: { render:'form',
        elements: [
          { render: 'file', label: '头像', mapper: 'userImage' },
          { render: 'text', label: '用户名', mapper: 'userName',  needValue: true, lifeScope: 'all', props: {}, style: { color: 'green' }, events: [{trigger: 'change',eventScript: this.testEvent }]  },
          { render: 'text', label: '手机号', mapper: 'userPhone', needValue: true, lifeScope: 'table' },
         /* { render: 'date', label: '范围', mapper: 'userScope', props: {type: 'daterange', filterOp: 'between'} },
          { render: 'text', label: '邮箱', mapper: 'userEmail' },
          { render: 'date', label: '出生日期', mapper: 'userBirthday' },
          { render: 'switch', label: '管理', mapper: 'admin' },
          { render: 'button', label: '按钮', mapper: 'test' },
          { render: 'buttonGroup', label: '按钮', mapper: 'test', props: { showCount: 2 },
            elements: [
              { render: 'button', label: '按钮1' }, { render: 'button', label: '按钮2' },{ render: 'button', label: '按钮3' },{ render: 'button', label: '按钮4' },
              { render: 'button', label: '按钮5', events: [ { trigger: 'click',eventScript: this.testClick  } ] },
            ]
          },
          { render: 'divider', label: 'gggggggg', level: 2 },
          { render: 'tab', label: '标签', mapper: 'test', level: 2, events: [{ trigger: 'tabClick',eventScript: 'const { active } = args; console.info(active);resolve()' }],
            elements: [
              { label: '标签1',
                elements: [  { render: 'number', label: '年龄', mapper: 'userAge' } ]
              },
              { label: '标签2',
                elements: [
                    { render: 'text', label: '令牌', mapper: 'accessToken', lg: 24 },
                    { render: 'select', label: '下拉选择', mapper: 'select', options: [{value:'111',label:'选项1'}], requests: [] },
                    { render: 'radio', label: '单选按钮', mapper: 'radio', options: [{value:'111',label:'选项1'}], requests: [] },
                    { render: 'checkbox', label: '多选按钮', mapper: 'checkbox', options: [{value:'111',label:'选项1'}], events: [{ trigger: 'change', eventScript: this.selectTest }], props: { filterOp: 'i'},
                      requests: [{
                        trigger: 'source',
                        config: {
                          requestType: 'post', requestUrl: 'http://qaaurora.fsnip.com:50000/dynamic-platform/processDef/todos',
                          resultProp: 'data.records', labelProp: 'todoDescription', valueProp: 'todoId', codeProp: 'todoState',
                          params: [
                            { prop: 'Authorization',location: 'header', type: 'String', dynamic: true, mapper: 'accessToken' },
                            { prop: 'page',location: 'body', type: 'Number', dynamic: true, value: 1 },
                            { prop: 'pageSize',location: 'body', type: 'Number', dynamic: true, value: 10 },
                            { prop: 'params',location: 'body', type: 'Array', value: [] },
                          ]
                        }
                      }],
                    },
                ]
              },
            ]
          },*/
          /*{ render: 'formTable', label: '表格', mapper: 'table', level: 2, events: [{ trigger: 'tabClick',eventScript: 'const { active } = args; console.info(active);resolve()' }],
            props: { rowKey: 'todoId', showExpand: true },
            elements: [
              { render: 'text', label: '令牌', mapper: 'accessToken', lg: 24, lifeScope: 'form' },
              { render: 'date', label: '出生日期', mapper: 'createAt', props: { filterOp: 'between', type: 'datetime' }, lifeScope: 'table',
                events: [{ trigger: 'created',eventScript: 'const { $this } = args; $this.selfType="edit";resolve()' }] },
              { render: 'view', label: '展开事件', mapper: 'expend', props: { groupId: 'in'}, lifeScope: 'table', level: 2 },
              { render: 'select', label: '下拉选择', mapper: 'select', options: [{value:'111',label:'选项1'}], requests: [] },
              { render: 'button', label: '导出', mapper: '$tableExport'},
              { render: 'buttonGroup', label: '顶部按钮', mapper: '$tableTops',
                elements: [  { render: 'button', label: '导入', mapper: '$tableImport'}, ]
              },
              { render: 'radio', label: '状态', mapper: 'todoState', options: [{value:'runing',label:'进行中'},{value:'cancel',label:'已退回'},{value:'finish',label:'已完成'},{value:'111',label:'选项1'}], events: [{ trigger: 'change', eventScript: this.selectTest }], props: { filterOp: '='},},
            ],
            requests: [{
              trigger: 'source',
              config: {
                requestType: 'post', requestUrl: 'http://qaaurora.fsnip.com:50000/dynamic-platform/processDef/todos',
                resultProp: 'data', labelProp: 'todoDescription', valueProp: 'todoId', codeProp: 'todoState',
                params: [
                  { prop: 'Authorization',location: 'header', type: 'String', dynamic: true, mapper: 'accessToken' },
                  { prop: 'page',location: 'body', type: 'Number', dynamic: true, value: 1 },
                  { prop: 'pageSize',location: 'body', type: 'Number', dynamic: true, value: 10 },
                  { prop: 'params',location: 'body', type: 'Array', value: [] },
                ]
              }
            }, {trigger: 'save', config: {}}, {trigger: 'remove', config: {}}, {trigger: 'formSource', config: {
                requestType: 'post', requestUrl: 'http://qaaurora.fsnip.com:50000/dynamic-platform/processDef/todos',
                resultProp: 'data', labelProp: 'todoDescription', valueProp: 'todoId', codeProp: 'todoState',
                params: [
                  { prop: 'Authorization',location: 'header', type: 'String', dynamic: true, mapper: 'accessToken' },
                  { prop: 'page',location: 'body', type: 'Number', dynamic: true, value: 1 },
                  { prop: 'pageSize',location: 'body', type: 'Number', dynamic: true, value: 10 },
                  { prop: 'params',location: 'body', type: 'Array', value: [] },
                ]
              }}
            ]
          },*/
        ]
      },
      // view:  {},
      modelData: {
        accessToken: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmdhbml6YXRpb25OYW1lIjoi6aOf5a6J56eR5oqALumjn-WTgeWupCIsIm9yZ0FkbWluIjp0cnVlLCJ1c2VyX25hbWUiOiJhZG1pbiIsIm5pY2tOYW1lIjoi566h55CG5ZGYIiwiZGVwYXJ0bWVudElkIjoiMTQ1MzU0NzMxNTU1MDM2Nzc0NiIsInVzZXJJZCI6IjEiLCJjbGllbnRfaWQiOiJjbGllbnRJZDEiLCJvcmdhbml6YXRpb25JZCI6IjEiLCJzY29wZSI6WyJhbGwiXSwiZXhwIjoxNjY4Mzg2NjYyLCJzdXBlck1hbiI6dHJ1ZSwic3NvT3JnSWQiOm51bGwsInNzb1VzZXJJZCI6bnVsbCwianRpIjoiYmJlNjYwOGUtZTk4NS00YzBhLWIyZWMtYzdkMmIxYWI0ZjE3In0.mtal0ZQfylncEqU5qHypl6uk3qyaQJB2xmb9t-TfJmE'
      }
    }
  },
  methods: {
    loadView(ele, data){
      return new Promise(resolve => {
        console.info('ele',ele, data)
        resolve(this.viewModel)
      })
    },
    testClick(){
      const $userName = this.$refs.viewRef.findElement('userName')
      if ($userName) {
        $userName.selfStyle.color = 'red'
        $userName.selfType = $userName.selfType === 'view' ? 'edit' : 'view'
        $userName.dispatchEvent('change')
      }
    },
    testEvent(args) {
      console.info('lail ', args)
      const { modelData, $this } = args
      const userPhone = modelData.userName + '---------'
      const $userPhone = $this.findElement('userPhone')
      if ($userPhone) {
        $userPhone.selfStyle.color = 'red'
        $userPhone.selfType = $userPhone.selfType === 'view' ? 'edit' : 'view'
        this.$set(modelData, 'userPhone', userPhone)
      }
      $this.findElement('userScope').selfType = 'view'
      $this.findElement('userBirthday').element.visible = false
      const $admin = $this.findElement('admin')
      $admin.selfType = $admin.selfType === 'view' ? 'edit':'view'
    },
    selectTest(args) {
      const { $this } = args
      $this.findElement('select').selfType = 'view'
      $this.findElement('radio').selfType = 'view'
      $this.selfType = 'view'
      $this.selfStyle.color = 'red'
    }
  }
}
</script>

<style lang="scss">
.lab-col {
  border-radius: 4px;
  min-height: 36px;
  background: #99a9bf;
  margin: 2px;
}
#app {
  height: 100%;
}
.lab-text-inner {
  -webkit-appearance: none;
  background-color: #FFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  &:focus {
    border-color: #409EFF;
    outline: 0;
  }
}
</style>
