<template>
  <template v-if="item.type=='params'">
    <el-form-item label="组件">
      <avue-input-tree multiple
                       placeholder="请选择组件"
                       v-model="item.index"
                       :dic="childrenDic"
                       :props="{label: 'name',value: 'index'}">
      </avue-input-tree>
    </el-form-item>
    <el-form-item label=""
                  label-width="0">
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="item.child.push({})">新增参数</el-button>
    </el-form-item>
    <template v-for="(citem,cindex) in item.child"
              :key="cindex">
      <div>
        <el-form-item label="参数名称">
          <avue-input v-model="citem.name"
                      placeholder="参数名称">
          </avue-input>
          &nbsp;
          <el-button type="danger"
                     icon="el-icon-delete"
                     @click="item.child.splice(cindex,1)"></el-button>
        </el-form-item>
        <el-form-item label="映射字段">
          <avue-input v-model="citem.value"
                      placeholder="映射字段"></avue-input>
        </el-form-item>
        <br />
      </div>
    </template>
  </template>
  <template v-else-if="item.type=='group'">
    <el-form-item label="大屏">
      <avue-select :dic="contain.config.group"
                   v-model="item.group"
                   placeholder="请选择大屏对象"
                   :props="{label:'name',value:'id'}">
      </avue-select>
    </el-form-item>
  </template>
  <template v-else-if="item.type=='href'">
    <el-form-item label="新窗口">
      <avue-switch v-model="item.target"></avue-switch>
    </el-form-item>
    <el-form-item label="跳转大屏">
      <avue-input v-model="item.src"
                  placeholder="请输入跳转地址">
      </avue-input>
    </el-form-item>
    <el-form-item label=""
                  label-width="0">
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="item.child.push({})">新增参数</el-button>
    </el-form-item>
    <template v-for="(citem,cindex) in item.child"
              :key="cindex">
      <div>
        <el-form-item label="参数名称">
          <avue-input v-model="citem.name"
                      placeholder="参数名称">
          </avue-input>
          &nbsp;
          <el-button type="danger"
                     icon="el-icon-delete"
                     @click="item.child.splice(cindex,1)"></el-button>
        </el-form-item>
        <el-form-item label="映射字段">
          <avue-input v-model="citem.value"
                      placeholder="映射字段"></avue-input>
        </el-form-item>
        <br />
      </div>
    </template>
  </template>
  <template v-else-if="item.type=='display'">
    <el-form-item label="组件">
      <avue-input-tree multiple
                       placeholder="请选择组件"
                       v-model="item.index"
                       :dic="childrenDic"
                       :props="{label: 'name',value: 'index'}">
      </avue-input-tree>
    </el-form-item>
    <el-form-item label="操作">
      <avue-select v-model="item.displayType"
                   :empty-values="[undefined]"
                   :dic="dic.displayType">
      </avue-select>
    </el-form-item>
  </template>
  <template v-else-if="item.type=='data'">
    <el-form-item label="组件">
      <avue-input-tree multiple
                       placeholder="请选择组件"
                       v-model="item.index"
                       :dic="childrenDic"
                       :props="{label: 'name',value: 'index'}">
      </avue-input-tree>
    </el-form-item>
  </template>
  <template v-else-if="item.type=='dialog'">
    <el-form-item label="弹窗标题">
      <avue-input v-model="item.title"
                  aria-placeholder="请输入弹窗标题">
      </avue-input>
    </el-form-item>
    <el-form-item label="组件">
      <avue-input-tree multiple
                       placeholder="请选择组件"
                       v-model="item.index"
                       :dic="childrenDic"
                       :props="{label: 'name',value: 'index'}">
      </avue-input-tree>
    </el-form-item>
    <el-form-item label="大屏">
      <avue-select :dic="contain.config.group"
                   v-model="item.group"
                   placeholder="请选择大屏对象"
                   :props="{label:'name',value:'id'}">
      </avue-select>
    </el-form-item>
  </template>
  <template v-else-if="item.type=='fun'">
    <event-fun :item="item"></event-fun>
  </template>
</template>
<script>
import eventFun from '@/page/setup/event-fun.vue'
export default {
  inject: ["contain"],
  props: {
    item: Object
  },
  components: { eventFun },
  data () {
    return {
      dic: {
        displayType: [{
          label: '隐藏',
          value: 'none'
        }, {
          label: '显示',
          value: 'block'
        }, {
          label: '显示/隐藏',
          value: ''
        }]
      }
    }
  },
  created () {

  },
  computed: {
    childrenDic () {
      return this.deepClone(this.contain.nav)
    }
  },
  methods: {
  }
}
</script>

