<template>
  <div class="base-screen-container">
    <div class="form-title_blue">
      <ts-popover>
        优先级:
        <br />高于对应筛选框内设置的【数据源配置(入参)】
      </ts-popover>关联筛选配置
    </div>
    <ts-multi-mdl
      :keyId="selectItem?selectItem.id:'filter'"
      :mulitValue="selectItem_.filterData"
      :fields="sourceFields"
      width="calc(100% - 15px)"
      style="padding-left:15px"
      @change="onClickField($event,'filterData')"
      :key="'filterId'+selectItem.id"
    />
  </div>
</template>

<script>
// import sss from './sss'
export default {
  name: 'attrDataSource',
  // components: { sss },
  props: {
    selectItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    addFieldData: {
      // 需要插入的值，{index:[]}
      type: Object,
      default: () => {
        return {}
      }
    },
    natureArrIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      selectItem_: this.selectItem
    }
  },
  computed: {
    sourceFields() {
      let arr = [
        {
          name: 'filterId',
          type: 'select',
          id: 'filterId',
          value: 'filterId',
          width: '100%',
          placeholder: '请选择筛选器',
          source: {
            dataType: 'local',
            data: this.natureArrIds,
            code: 'state',
            text: 'typeId',
            isReq: true,
            value: {
              name: '',
              code: ''
            }
          },
          changed: (item, row, index) => {
            if (item.filterId) {
              if (item.filterId.indexOf('filter') == 0) {
                row[1].isHide = true
                row[2].isHide = true
              } else {
                row[2].isHide = false
                if (item.filterId.split('_')[1] == 1) {
                  // 日期
                  row[1].isHide = false
                } else {
                  row[1].isHide = true
                }
              }
            }

            return row
          }
        },
        {
          name: 'dataSourceDateType',
          type: 'select',
          id: 'dataSourceDateType',
          width: '50%',
          placeholder: '日期分类',
          value: 'dataSourceDateType',
          isHide: true,
          source: {
            isReq: true,
            dataType: 'local',
            data: [
              { value: '0', label: '起始日期' },
              { value: '1', label: '结束日期' }
            ],
            code: 'value',
            text: 'label',
            value: {
              name: '',
              code: ''
            }
          }
        },
        {
          name: 'reqParam',
          type: 'text',
          id: 'reqParam',
          value: 'reqParam',
          width: '50%',
          placeholder: '请填写参数名',
          isHide: true
        }
      ]
      return arr
    }
  },
  mounted() {
    this.doOldFilterData()
  },
  created() {},
  methods: {
    onClickField(ev, key) {
      this.$emit('onClickField', ev, key)
    },
    // 处理筛选器旧版
    doOldFilterData() {
      if (this.selectItem_.filterId && !this.selectItem_.filterData) {
        this.selectItem_.filterData = [
          { filterId: 'filter' + '_0_' + this.selectItem_.filterId }
        ]
        // delete this.selectItem_.filterId
        this.$forceUpdate()
      }
    }
  },
  watch: {
    selectItem: {
      handler(val) {
        this.selectItem_ = { ...val }
        this.doOldFilterData()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
</style>
