<template>
  <div class="base-detail-container">
    <!-- <div class="form-title_blue">属性设置</div> -->
    <ts-form-item style="margin-top:5px">
      <ts-input v-model="selectData.controlType" title="控件类型" disabled readonly></ts-input>
    </ts-form-item>
    <ts-form-item>
      <ts-input :value="selectData.type + '_'+selectData.id" title="控件ID" disabled readonly></ts-input>
    </ts-form-item>
    <template
      v-if="selectData.type == 'element'&&(selectData.state == '1'||selectData.state == '2'||selectData.state == '6')"
    >
      <ts-form-item>
        <div class="form-title_blue">
          <tsPopover v-if="selectData.state == 1">注：优先级低于【链接项】的URL设置</tsPopover>项点击
        </div>
        <template v-if="!selectData.linkTypeId||selectData.linkTypeId==='2'">
          <ts-form-item>
            <ts-radio
              title="路径方式"
              v-model="selectData.urlType"
              :data="UrlMethodSource"
              :isDefaultFirst="true"
              type="group"
              width="97%"
              @change="refresh(arguments)"
            ></ts-radio>
          </ts-form-item>
          <ts-textarea
            v-if="selectData.urlType!=1"
            title="URL"
            v-model="selectData.interUrl"
            @change="refresh($event)"
          ></ts-textarea>
          <ts-select
            v-if="selectData.urlType==1"
            :key="'url'+selectData.id"
            :source="dataSourceColSource(this.selectData.selectDataSourceCodeOption)"
            v-model="selectData.codeUrl"
            title="URL"
            @selected="refresh($event,'')"
          >
            <tsPopover slot="title">注：取结果项中【路径】字段，所对应的值</tsPopover>
          </ts-select>
        </template>
      </ts-form-item>
      <ts-form-item
        v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
      >
        <ts-select
          :key="'selectDataResult'+selectData.id"
          :source="dataSourceColSource(this.selectData.selectDataSourceResultData)"
          v-model="selectData.interSelectDataSourceResult"
          @selected="refresh($event,'selectDataSourceResult')"
          title="结果集"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :key="'source'+selectData.id"
          :source="dataSourceColSource(this.selectData.selectDataSourceCodeOption)"
          v-model="selectData.interSourceParam"
          title="源参数"
          @selected="refresh($event,'interSourceParam')"
        >
          <tsPopover slot="title">
            注：取每项【源参数】所对应的值，
            <br />传递给路径链接
          </tsPopover>
        </ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.interTargetParam"
          title="目标字段"
          placeholder="跳转需要携带的字段名"
          @change="refresh(arguments,'startDate')"
        ></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input v-model="selectData.token" title="token名" @change="refresh(arguments,'token')"></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.userCode"
          title="用户代码"
          placeholder="请输入用户代码参数名"
          @change="refresh(arguments,'userCode')"
        ></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.deptCode"
          title="部门代码"
          placeholder="请输入部门代码参数名"
          @change="refresh(arguments,'deptCode')"
        ></ts-input>
      </ts-form-item>
    </template>
    <ts-multi-mdl
      v-if="selectData.type!='element'&&selectData.clickEvent != '导出'&&selectData.clickEvent!= '刷新'&&selectData.clickEvent!= '查询'"
      :mulitValue="selectData.clickEvent"
      :fields="clickField"
      title="单击"
      width="100%"
      @change="onClickField($event,'clickEvent')"
    ></ts-multi-mdl>
    <template v-if="selectData.type=='panel'&&selectData.rightTitle">
      <div class="form-title_blue">右上角标题点击交互</div>
      <ts-textarea title="URL" v-model="selectData.rightTitleUrl" @change="refresh($event)">
        <tsPopover slot="title">
          注：参数用'?'的方式写在链接后，多个参数用'&'隔开；
          <br />若是系统内部跳转，直接用'/'开头，如'/bi/formCenterGrid'；
          <br />若是外部链接，请用'http'或'https'开头
        </tsPopover>
      </ts-textarea>
      <ts-switch
        title="需要权限"
        v-model="selectData.isTokenRight"
        on-label="是"
        off-label="否"
        @change="refresh($event)"
      >
        <tsPopover
          slot="title"
        >注：开启后，请求地址后默认携带<br>'token/dep/user/deptcode/deptid/userId/userCode/roleCode/hospCode'信息</tsPopover>
      </ts-switch>
    </template>
  </div>
</template>

<script>
import natureArrMixins from '../mixins/natureArrMixins'
import biUtils from '../../utils/biUtils'
export default {
  name: 'inter-base',
  props: {},
  mixins: [natureArrMixins],
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      natureArrIds: [],
      actionData: [
        { id: '000', name: '渲染' },
        { id: '001', name: '隐藏' }
      ],
      UrlMethodSource: [
        { value: '0', text: '静态' },
        { value: '1', text: '动态' }
      ],
      childDatasList: []
    }
  },
  computed: {
    clickField() {
      return [
        {
          name: 'targetControl',
          type: 'select',
          id: 'targetControl',
          placeholder: '目标对象',
          width: '100%',
          // isGanged: true, // 是否联动  默认false boolean
          source: {
            dataType: 'local',
            data: this.natureArrIds,
            code: 'id',
            text: 'typeId',
            isReq: true,
            value: {
              name: '',
              code: ''
            }
          }
          // formatter: row => {
          //   return {
          //     data: this.getParamList(row.id, 'conditionDefine')
          //   }
          // }
        },
        // {
        //   name: 'action',
        //   type: 'select',
        //   width: '50%',
        //   id: 'action',
        //   placeholder: '动作',
        //   isGanged: true, // 是否联动  默认false boolean
        //   gangedId: 'sourceParam,targetParam', // 联动项id
        //   source: {
        //     dataType: 'local',
        //     data: this.actionData,
        //     code: 'id',
        //     text: 'name',
        //     isReq: true,
        //     value: {
        //       name: '',
        //       code: ''
        //     }
        //   },
        //   formatter: row => {
        //     return {
        //       isHide: row.id === '001' // 当为固定值时，隐藏
        //     }
        //   }
        // },
        {
          name: 'sourceParam',
          type: 'select',
          id: 'sourceParam',
          width: '100%',
          placeholder: '源参数',
          source: this.dataSourceColSource(
            this.selectData.selectDataSourceCodeOption
          ),
          isGanged: true, // 是否联动
          gangedId: 'targetParam', // 联动项id
          formatter: row => {
            return row.name
          }
        },
        {
          name: 'targetParam',
          type: 'text',
          id: 'targetParam',
          width: '100%',
          placeholder: '目标参数',
          tsPopover: '跳转需要携带的字段名'
        }
        // {
        //   name: 'targetParam',
        //   type: 'select',
        //   id: 'targetParam',
        //   width: '50%',
        //   placeholder: '目标参数',
        //   source: {
        //     dataType: 'local',
        //     data: [],
        //     code: 'name',
        //     text: 'name',
        //     value: {
        //       name: '',
        //       code: ''
        //     }
        //   }
        // }
      ]
    }
  },
  created() {
    this.natureArrIds = []
    this.getNatureArrIds(
      this.$store.state.bi.natureArr[
        'd' + (this.$store.state.bi.dialogEditors.length - 1)
      ]
    )
  },
  methods: {
    // 数据源参数
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'selectDataSourceResult': // 结果集
            this.selectData.selectDataSourceData = []
            this.selectData.selectDataSourceResult = ev[0].name
            if (Object.keys(ev[0]).length > 0) {
              for (let items of ev[0].tableColumns) {
                this.selectData.selectDataSourceData.push({
                  name: items.name
                })
              }
            }
            break
        }
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    },
    // 选择交互的回调
    onClickField(ev, type) {
      this.selectData[type] = ev
      this.changeStoreArray()
    }
  },
  mounted() {},
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      }
    },
    '$store.state.bi.natureArr': {
      handler(val) {
        this.natureArrIds = []
        this.getNatureArrIds(
          val['d' + (this.$store.state.bi.dialogEditors.length - 1)]
        )
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
