<template>
  <div class="tab-detail-container">
    <div class="form-title_blue">页面元素配置</div>
    <ts-form-item>
      <ts-radio
        title="标题方向"
        v-model="selectData.tabType"
        :data="tabTypeSource"
        type="group"
        :isDefaultFirst="true"
        @change="refresh($event)"
      ></ts-radio>
    </ts-form-item>
    <ts-form-item v-if="selectData.tabType == '1'">
      <ts-input v-model="selectData.mainTitle" title="主标题" @change="refresh($event)"></ts-input>
    </ts-form-item>
    <ts-form-item>
      <ts-input v-model="selectData.controlTitle" title="当页标题" @change="refresh($event,'title')"></ts-input>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        ref="roleSelect"
        v-model="selectData.roleIds"
        title="当页角色"
        :source="roledata"
        :key="selectData.id+'roledata'"
        @selected="refresh($event,'roleIds')"
      ></ts-select>
    </ts-form-item>
    <attrDSParamMuti
      :selectItem="selectTab"
      @onClickField="onClickField"
      :addFieldData="addFieldData"
    ></attrDSParamMuti>
    <!-- <div class="form-title_blue">数据源配置(入参)</div>
    <ts-multi-mdl
      :key="selectTab?selectTab.id:'dS'"
      v-model="selectTab.dataSourceData"
      :fields="sourceDatas"
      width="calc(100% - 15px)"
      style="padding-left:15px"
      @change="onClickField($event,'dataSourceData')"
    ></ts-multi-mdl>-->

    <!-- <ts-form-item :titleWidth="110">
      <div>
        <div class="attr_chart_title">数据源配置</div>
        <ts-row class="form-autoEdit-list">
          <ts-row
            class="form-autoEdddit-item"
            v-for="(item,j) in selectTab.dataSourceData"
            :key="j"
            type="flex"
          >
            <ts-col class="form-autoEdit-item-i txt">{{j+1}}</ts-col>
            <ts-col :flex="19">
              <ts-row type="flex">
                <ts-col :flex="1">
                  <ts-select
                    :key="'dataSourceId'+item.i"
                    v-model="item.dataSourceId"
                    :source="dataSourceData(item)"
                    placeholder="数据源"
                    title="数据源"
                    width="99%"
                    @selected="onSelectDataSource($event,item)"
                  ></ts-select>
                </ts-col>
                <ts-col :flex="0.8">
                  <ts-select
                    :key="'colSource'+item.i"
                    :ref="'colSource'+item.i"
                    v-model="item.dataSourceCol"
                    :source="dataSourceColSource(item.conditionData)"
                    placeholder="参数名"
                    width="99%"
                    @selected="onSelectColSource($event,item)"
                  ></ts-select>
                </ts-col>
                <ts-col :flex="0.8">
                  <ts-input
                    v-model="item.defaultValue"
                    width="100%"
                    placeholder="值"
                    @change="onSelectDataType($event,item,'defaultValue')"
                  ></ts-input>
                </ts-col>
              </ts-row>
            </ts-col>
            <ts-col :flex="1">
              <ts-button
                id="deleteAutoEdit"
                type="text"
                icon="iconfont icon-Group-17"
                @click="onRelation('delete',item.i)"
                v-if="j!=0"
              ></ts-button>
              <ts-button
                v-if="j===0"
                id="addAutoEdit"
                type="text"
                icon="iconfont icon-Group-13"
                @click="onRelation('add',item.i)"
                class="form-autoEdit-item-add-btn"
              ></ts-button>
            </ts-col>
          </ts-row>
        </ts-row>
      </div>
    </ts-form-item>-->
  </div>
</template>
<script>
import attrDSParamMuti from './attrDSParamMuti'
export default {
  name: 'attr-Tab',
  props: ['biCustom'],
  components: { attrDSParamMuti },
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      tabTypeSource: [
        {
          value: '0',
          text: '靠左'
        },
        {
          value: '1',
          text: '靠右'
        }
      ],
      addFieldData: {
        3: [
          {
            name: 'value',
            type: 'text',
            id: 'value',
            width: '50%',
            placeholder: '值',
            gangedKey: 'defaultValue'
          }
        ]
      },
      roledata:{
        dataType: 'local',
        data: [...this.$store.state.bi.roleTreeList],
        code: 'code',
        text: 'name',
        children: 'children',
        tree: true,
        treeType: 'checkbox',
        isLoading: false,
        isClose: true,
        noParent: true
      }
    }
  },
  computed: {
    // roledata(){
    //   return  {
        
    //     // value: {
    //     //   name: this.oldData.roleName,
    //     //   code: this.oldData.roleIds
    //     // }
    //   },
    // sourceDatas() {
    //   return [
    //     {
    //       name: 'dataSourceId',
    //       type: 'select',
    //       id: 'dataSourceId',
    //       value: 'dataSourceName',
    //       width: '33%',
    //       placeholder: '数据源',
    //       isGanged: true, // 是否联动  默认false boolean
    //       gangedId: 'dataSourceCol', // 联动项id
    //       source: {
    //         dataType: 'local',
    //         data: this.dataSourceDataList,
    //         code: 'id',
    //         text: 'queryName',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       },
    //       formatter: row => {
    //         let childDatasList = JSON.parse(row.conditionDefine)
    //         return {
    //           data: childDatasList
    //         }
    //       }
    //     },
    //     {
    //       name: 'dataSourceCol',
    //       type: 'select',
    //       id: 'dataSourceCol',
    //       value: 'dataSourceCol',
    //       width: '28%',
    //       placeholder: '参数名',
    //       isGanged: true, // 是否联动  默认false boolean
    //       gangedId: 'value', // 联动项id
    //       source: {
    //         dataType: 'local',
    //         data: [],
    //         code: 'name',
    //         text: 'name',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       },
    //       formatter: row => {
    //         return {
    //           value: row
    //         }
    //       }
    //     },
    //     {
    //       name: 'value',
    //       type: 'text',
    //       id: 'value',
    //       width: '38%',
    //       placeholder: '值',
    //       gangedKey: 'defaultValue'
    //     }
    //   ]
    // },
    selectTab() {
      return this.selectData.tabs[parseInt(this.selectData.activeIndex)] || {}
    }
  },
  created() {},
  methods: {
    refresh(ev, arrKey) {
      this.$nextTick(() => {
        let activeIndex = this.selectData.activeIndex || '0'
        switch (arrKey) {
          case 'title':
            for (let tab of this.selectData.tabs) {
              if (tab.index == activeIndex) {
                tab.title = ev.value
                break
              }
            }
            break
          case 'roleIds':
            for (let tab of this.selectData.tabs) {
              if (tab.index == activeIndex) {
                tab.roleIds = this.selectData.roleIds
                break
              }
            }
            break
        }
        this.changeStoreArray()
      })
    },
    // 数据源参数
    dataSourceColSource(data) {
      let code = 'name'
      if (this.selectData.dataSourceId == '000') {
        code = 'id'
      }
      return {
        dataType: 'local',
        code: code,
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 数据源结果集
    selectDataSourceResult(data) {
      let code = 'name'
      if (this.selectData.dataSourceId == '000') {
        code = 'id'
      }
      return {
        dataType: 'local',
        code: code,
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 刷新选项设置
    onSelectDataType(ev, item, type) {
      item[type] = ev.value
      item.value = ev.value
      this.changeStoreArray()
    },
    onClickField(ev, type) {
      for (let evItem of ev) {
        evItem.value = evItem.value
      }
      this.selectTab[type] = [...ev]
      this.changeStoreArray()
    },
    // 监听数据源
    onSelectDataSource(ev, item) {
      item.selectDataSourceResultData = []
      item.conditionData = []
      // if (ev.serviceType == '2') {
      //   // 结果集
      //   for (let col of JSON.parse(ev.columnDefine)) {
      //     item.selectDataSourceResultData.push({
      //       name: col.name,
      //       tableColumns: col.tableColumns
      //     })
      //   }
      // } else {
      if (ev.conditionDefine) {
        item.conditionData = []
        for (let con of JSON.parse(ev.conditionDefine)) {
          item.conditionData.push({
            columnType: con.columnType,
            value: con.value,
            defaultValue: con.defaultValue,
            name: con.name
          })
        }
      }
      // }
      item.dataSourceId = ev.id
      item.dataSourceCol = ''
      item.defaultValue = ''
      item.selectDataSourceResult = ''
      item.dataSourceName = ev.queryName
      this.$refs['colSource' + item.i][0].source.data = item.conditionData
      this.changeStoreArray()
    },
    // 监听数据源结果集
    onSelectColSourceResult(ev, item) {
      for (let con of ev.tableColumns) {
        item.conditionData.push({
          columnType: con.columnType,
          value: con.value,
          defaultValue: con.defaultValue,
          name: con.title
        })
      }
      item.selectDataSourceResult = ev.name
      this.changeStoreArray()
    },
    // 监听数据源字段
    onSelectColSource(ev, item) {
      item.dataSourceCol = ev.name
      item.columnType = ev.columnType
      item.defaultValue = ev.defaultValue
      item.value = ev.defaultValue
      this.changeStoreArray()
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            id: '',
            i: this.$utils.uuid(16)
          }
          if (
            this.selectTab.dataSourceData &&
            this.selectTab.dataSourceData.length > 0
          ) {
            relation.selectDataSourceCodeOption = this.selectTab.dataSourceData
          }
          relation.id = this.$utils.uuid(16)
          this.selectTab.dataSourceData.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectTab.dataSourceData.length; i++) {
            if (this.selectTab.dataSourceData[i].i == index && index != 0) {
              this.selectTab.dataSourceData.splice(i, 1)
              break
            }
          }
          break
      }
      this.changeStoreArray()
    },
    changeStoreArray() {
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', { data: { ...this.selectData } })
      this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    }
  },
  mounted() {},
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      }
    }
    // '$store.state.bi.dataSource': {
    //   handler(val) {
    //     this.dataSourceDataList = [...val]
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.tab-detail-container {
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
}
</style>
