<template>
  <div class="height100 userDefined_attr_container">
    <div class="flexYbox height100">
      <ts-form :data="selectData" :rules="rules" style="height:100%" v-if="selectData.type" ref="xForm">
        <div slot="formCon">
          <attrBase
            ref="attrBase"
            v-if="selectData.type&&selectData.type!=='col'"
            :biModel="biModel"
            :formId="formId"
          ></attrBase>
          <attrTab
            ref="attrChart"
            v-if="selectData.type&&selectData.type==='tab'"
            :biCustom="biCustom"
          ></attrTab>
          <!--门户组件数据源+返回数据量【方块签/快捷链/人物块状】-->
          <template
            v-if="selectData.type&&selectData.type==='element'&&(selectData.state==1||selectData.state==2||selectData.state==6)"
          >
            <attr-data-source></attr-data-source>
            <ts-form-item v-if="selectData.state!=6">
              <ts-radio
                title="返回类型"
                v-model="selectData.dataType"
                :data="textDataType"
                type="group"
                :isDefaultFirst="true"
                @change="refresh($event)"
              ></ts-radio>
            </ts-form-item>
            <ts-form-item v-if="selectData.state==6||selectData.dataType ==1">
              <ts-row type="flex">
                <div class="title form__title">
                  <tsPopover>注：返回结果后的数据量约束</tsPopover>数据量
                </div>
                <ts-col :flex="1" class="mrgr5">
                  <ts-input
                    v-model="selectData.dataNumStart"
                    type="number"
                    placeholder="开始"
                    :min="0"
                    :clearable="false"
                    @change="refresh($event,'dataNumStart')"
                  ></ts-input>
                </ts-col>
                <ts-col :flex="1">
                  <ts-input
                    v-model="selectData.dataNumEnd"
                    type="number"
                    placeholder="结束"
                    :min="0"
                    :clearable="false"
                    @change="refresh($event,'dataNumEnd')"
                  ></ts-input>
                </ts-col>
              </ts-row>
              <ts-row type="flex" v-if="!selectData.dsType||selectData.dsType==0">
                <ts-col :flex="1">
                  <ts-switch
                    title="分页"
                    v-model="selectData.isPage"
                    on-label="是"
                    off-label="否"
                    @change="refresh($event)"
                  >
                    <tsPopover slot="title">注：默认为下拉拖到底进行分页</tsPopover>
                  </ts-switch>
                </ts-col>
                <ts-col :flex="1" v-if="selectData.isPage">
                  <ts-input
                    v-model="selectData.pageSize"
                    type="number"
                    placeholder="每页条数"
                    :min="1"
                    :clearable="false"
                    @change="refresh($event,'pageSize')"
                  ></ts-input>
                </ts-col>
              </ts-row>
            </ts-form-item>
          </template>

          <attrChart
            ref="attrChart"
            v-if="selectData.type&&selectData.type==='chart'"
            :biCustom="biCustom"
          ></attrChart>
          <attrCol
            ref="attrCol"
            v-else-if="selectData.type&&selectData.type==='col'"
            :biCustom="biCustom"
            :key="selectData.id"
          ></attrCol>
          <attrScreen
            ref="attrScreen"
            v-else-if="selectData.type&&selectData.type==='screen'"
            :biCustom="biCustom"
            :biModel="biModel"
          ></attrScreen>
          <attr-table ref="attrTable" v-else-if="selectData.type&&selectData.type=='table'"></attr-table>
          <attr-fast-link
            ref="attrFastLink"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='1'"
            :biCustom="biCustom"
          ></attr-fast-link>
          <attr-link-item
            ref="attrLinkItem"
            v-else-if="selectData.type&&selectData.type==='link'"
            :biCustom="biCustom"
          ></attr-link-item>
          <attr-square
            ref="attrSquare"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='2'"
            :biCustom="biCustom"
          ></attr-square>
          <attr-line
            ref="attrline"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='3'"
            :biCustom="biCustom"
          ></attr-line>
          <attr-media
            ref="attrmedia"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='4'"
            :biCustom="biCustom"
          ></attr-media>
          <attr-calendar
            ref="attrmedia"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='5'"
            :biCustom="biCustom"
          ></attr-calendar>
          <attr-person
            ref="attrperson"
            v-else-if="selectData.type&&selectData.type==='element'&&selectData.state==='6'"
            :biCustom="biCustom"
          ></attr-person>
           <attr-Ancher  v-else-if="selectData.type==='biElement'&&selectData.state=='3'"></attr-Ancher>
          <attrBiElement v-else-if="selectData.type&&selectData.type==='biElement'"></attrBiElement>
        </div>
      </ts-form>
      <tsEmpty v-else description="-请选中编辑区控件-" :imageStyle="{width:'80%',height:'200px'}">
      </tsEmpty>
    </div>
    
  </div>
</template>

<script>
import attrMedia from './definedAttrPannel/attrMedia'
import attrCalendar from './definedAttrPannel/attrCalendar'
import attrBase from './definedAttrPannel/attrBase'
import attrTable from './definedAttrPannel/attrTable'
import attrChart from './definedAttrPannel/attrChart'
import attrCol from './definedAttrPannel/attrCol'
import attrScreen from './definedAttrPannel/attrScreen'
import attrSquare from './definedAttrPannel/attrSquare'
import attrFastLink from './definedAttrPannel/attrFastLink'
import attrDataSource from './definedAttrPannel/attrDataSource'
import attrLinkItem from './definedAttrPannel/attrLinkItem'
import attrLine from './definedAttrPannel/attrLine'
import attrPerson from './definedAttrPannel/attrPerson'
import attrTab from './definedAttrPannel/attrTab'
import attrBiElement from './definedAttrPannel/attrBiElement'
import attrAncher from './definedAttrPannel/attrAncher.vue'
export default {
  name: 'defined-attr-editor',
  components: {
    attrBase,
    attrCol,
    attrChart,
    attrScreen,
    attrSquare,
    attrFastLink,
    attrDataSource,
    attrLinkItem,
    attrLine,
    attrTab,
    attrTable,
    attrMedia,
    attrPerson,
    attrCalendar,
    attrBiElement,
    attrAncher
  },
  props: ['biCustom', 'biModel','formId'],
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      rules: {},
      // 数据类型
      textDataType: [
        { value: '0', text: '对象' },
        { value: '1', text: '列表' }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    refresh(ev, key) {
      this.$nextTick(() => {
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.userDefined_attr_container {
  .leftH50 {
    height: 50%;
  }
  .biUserDefinedForm-add__listT {
    padding: 5px 10px;
    font-size: 12px;
  }
}
</style>
