<template>
  <div class="base-detail-container">
    <!-- <div class="form-title_blue" style="border-top: 1px solid var(--border_color);">超链接</div> -->
    <ts-form-item style="margin-top:5px">
      <ts-select
        :key="'linkTypeConfig'+selectData.pid+selectData.id"
        :source="linkTypeConfig"
        v-model="selectData.linkTypeId"
        title="链接方式"
        
        @selected="refresh($event,'linkTypeId')"
      ></ts-select>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        :key="'reportNameId'+selectData.pid+selectData.id"
        v-show="selectData.linkTypeId==='1'"
        :source="reportNameConfig"
        v-model="selectData.reportNameId"
        title="报表"
        
        @selected="refresh($event,'reportNameId')"
      ></ts-select>
      <ts-input
        v-show="!selectData.linkTypeId||selectData.linkTypeId==='2'"
        title="链接"
        
        v-model="selectData.reportName"
        @change="refresh($event)"
      >
      <!-- <p style="font-size:10px;color:#999">以'http://'或'https://'为开头的完整网页链接</p> -->
      </ts-input>
    </ts-form-item>
    <!-- <ts-form-item>
      <ts-select
        :key="'openPatternId'+selectData.pid+selectData.id"
        :source="openPatternConfig"
        v-model="selectData.openPatternId"
        title="打开方式"
        
        @selected="refresh($event,'openPatternId')"
      ></ts-select>
    </ts-form-item>-->
  </div>
</template>

<script>
export default {
  name: 'bi-attr-link',
  data() {
    return {
      selectData: { ...this.$store.state.bi.selectData },
      linkTypeConfig: {
        // 链接方式
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: [
          { _name: '网络报表', _id: '1' },
          { _name: '网页链接', _id: '2' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      reportNameConfig: {
        // 报表名称
        dataType: 'json',
        url: '/ts-bi/api/BiReportDesign/list',
        method: 'get',
        data: {
          sidx: 'create_date',
          sord: 'desc',
          elementid: '',
          // pageSize: 20,
          pageNo: 1
        },
        page: 'pageNo',
        code: 'id',
        text: 'designName',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      openPatternConfig: {
        // 打开方式
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: [
          { _name: '新窗口', _id: '1' },
          { _name: '对话框', _id: '2' },
          { _name: '当前窗口', _id: '3' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  created() {},
  methods: {
    // 即时刷新
    refresh(ev, arrKey) {
      this.$nextTick(() => {
        switch (arrKey) {
          case 'linkTypeId': // 链接方式
            this.selectData.linkTypeId = ev._id
            this.selectData.linkType = ev._name
            this.selectData.openPatternId = '1' //ev._id
            this.selectData.openPattern = '2' // ev._name
            break
          case 'openPatternId': // 打开方式
            this.selectData.openPatternId = '1' //ev._id
            this.selectData.openPattern = '2' // ev._name
            break
          case 'reportNameId': // 报表
            this.selectData.reportNameId = ev.id
            this.selectData.reportName = ev.designName
            break
        }
        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))
      }
    }
  }
}
</script>
<style lang="less" scoped>
.biUserDefinedForm-charttype__img {
  overflow: hidden;
  margin-top: 5px;

  .active {
    border-color: var(--base-acv) !important;
  }
  .img {
    width: 50px;
    margin-left: 5px;
    border: 1px #f7f7f7 solid;
    cursor: pointer;
    display: inline-block;
  }
  img {
    width: 50px;
    height: auto;
  }
}
</style>
