<template>
  <div class="base-screen-container">
    <div class="form-title_blue">页面元素配置</div>
    <ts-row type="flex">
      <!-- 字体大小 -->
      <ts-col :flex="1" class="mrgr5">
        <ts-input
          title="锚点标题"
          v-model="selectData.ancherName"
          @change="refresh($event, 'ancherName')"
        ></ts-input>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.fontSize"
          type="integer"
          :min="1"
          title="文字大小"
          :clearable="false"
          @change="refresh(arguments,'fontSize')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
          <ts-color-picker v-model="selectData.fontColor" @change="refresh($event,'fontColor')" title="文字颜色" colorWidth="46px"></ts-color-picker>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <!-- <ts-col :flex="1">
        <ts-input
          v-model="selectData.fontSize"
          type="integer"
          :min="1"
          title="文字大小"
          :clearable="false"
          @change="refresh(arguments,'fontSize')"
        ></ts-input>
      </ts-col>-->
      <ts-col :flex="1">
          <ts-color-picker v-model="selectData.groundColor" @change="refresh($event,'groundColor')" title="背景颜色" ></ts-color-picker>
      </ts-col>
    </ts-row>
  </div>
</template>

<script>
export default {
  name: 'attrScreen',
  props: ['biCustom'],
  components: {},
  data() {
    return {
      alignOption: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: 'left', label: '居左' },
          { code: 'center', label: '居中' },
          { code: 'right', label: '居右' }
        ],
        isReq: true,
        value: { code: 'left', label: '居左' }
      },
      fontSource: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: '12px', label: '12' },
          { code: '13px', label: '13' },
          { code: '14px', label: '14' },
          { code: '15px', label: '15' },
          { code: '16px', label: '16' },
          { code: '17px', label: '17' },
          { code: '18px', label: '18' },
          { code: '19px', label: '19' }
        ],
        isReq: true,
        value: { code: '14px', label: '14' }
      },

      color1: '#ccc',
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    }
  },
  computed: {
    // 下拉数据源-显示
    selectDataSourceName() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    screenControlVal() {
      return {
        dataType: 'local',
        code: 'dimensionName',
        text: '_name',
        data: this.getScreenControlVal(),
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 下拉数据源-值
    selectDataSourceCode() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceResultData
      )
    },
    // 输入值
    inputControlValSource() {
      if (this.biCustom) {
        var controlVal = []
        if (this.biCustom.weidu && this.selectData.isDimension == '1') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
          for (var i = 0; i < controlVal.length; i++) {
            if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
              controlVal.splice(i, 1)
              break
            }
          }
        } else if (this.selectData.isDimension == '0') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.norm))
        }
      }
      return {
        dataType: 'local',
        code: this.selectData.isDimension == '1' ? 'dimensionName' : '_id',
        choice: true,
        text: '_name',
        data: controlVal,
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    // this.dataSourceData.value = {
    //   name: this.selectData.dataSourceName,
    //   code: this.selectData.dataSourceId
    // }
  },
  created() {
    // this.getScreenControlVal()
  },
  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 })
      })
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = []
          relation = JSON.parse(JSON.stringify(this.selectData.dataSourceData))[
            this.selectData.dataSourceData.length - 1
          ]
          relation.id = this.$utils.uuid(16)
          relation.i = this.$utils.uuid(16)
          this.selectData.dataSourceData.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.dataSourceData.length; i++) {
            if (this.selectData.dataSourceData[i].i == index && index != 0) {
              this.selectData.dataSourceData.splice(i, 1)
              break
            }
          }
          break
      }
      this.refresh()
    },
    onRelation2(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            i: this.$utils.uuid(16),
            iconUrl: '',
            iconValue: ''
          }
          this.selectData.iconList.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.iconList.length; i++) {
            if (this.selectData.iconList[i].i == index && index != 0) {
              this.selectData.iconList.splice(i, 1)
              break
            }
          }
          break
      }
      this.refresh()
    },
    //控件值
    getScreenControlVal() {
      var controlVal = []
      if (Object.keys(this.biCustom).length > 0 || this.biCustom.weidu) {
        controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
        for (var i = 0; i < controlVal.length; i++) {
          if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
            controlVal.splice(i, 1)
            break
          }
        }
      }
      // this.screenControlVal.data = controlVal
      return controlVal
    },

    // 监听数据源字段
    onSelectColSource(ev, item, key) {
      switch (key) {
        case 'selectDataSourceResult': // 下拉数据源-结果集
          this.selectData.selectDataSourceData = []
          item.selectDataSourceResult = ev.name
          item.selectDataSourceCodeOption = []
          for (let items of ev.tableColumns) {
            item.selectDataSourceCodeOption.push({
              name: items.name
            })
          }
          item.field = ''
          this.$store.commit('setSelectData', { ...this.selectData })
          break
      }
      this.refresh()
    },
    upploadHandler(o, item, src) {
      item.iconUrl = o[o.length - 1].url
      this.refresh()
      // 上传回写
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        if (!this.selectData.dataSourceData) {
          // 处理空数据的部分
          this.selectData.dataSourceData = [
            {
              id: this.$utils.uuid(16),
              i: this.$utils.uuid(16),
              showName: '',
              field: '',
              fontColor: '#333',
              fontSize: 12,
              backgroundColor: '#fff'
            }
          ]
          this.$store.commit('setSelectData', { ...this.selectData })
          this.$store.commit('saveArr', { data: { ...this.selectData } })
          this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
        }
      },
      deep: true
    }
    // biCustom: {
    //   handler(val, old) {
    //     // this.getScreenControlVal()
    //   },
    //   deep: true
    // },
    // 'biCustom.norm': {
    //   handler(val, old) {
    //     // if (this.selectData.state !== '1') {
    //     //   //非时间组件，则清空
    //     //   this.selectData.fieldNamesId = ''
    //     //   this.selectData.fieldNames = ''
    //     //   this.selectData.dimensionLevelId = ''
    //     //   this.selectData.dimensionLevel = ''
    //     // }
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.base-screen-container {

  .like_form {
    padding: 0 0 5px 100px;
    display: flex;
    align-items: center;
  }
  .form-autoEdit-item-add-btn {
    .vxe-button--icon.iconfont {
      color: var(--base-acv) !important;
    }
  }
  .attr_name {
    font-size: 12px;
    text-align: center;
  }
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
  .form-autoEdit-list {
    padding: 0;
    .form-autoEdit-item-i {
      background: rgba(215, 215, 215, 1);
      margin-left: 0px;
    }
    .form-autoEdddit-item {
      display: flex;
      justify-content: center;
      margin-top: 2px;
      padding: 0 10px;
      width: calc(100% - 10px) !important;
      .form__title {
        width: auto;
        padding: 0 5px;
      }
      .txt {
        width: 3px !important;
        height: 23px;
        text-align: center;
        line-height: 23px;
        font-size: 12px;
        color: #555;
      }

      .form__box {
        margin: 0 2px;
      }
      .vxe-input--inner {
        margin: 0 1px;
      }
      .con {
        margin: 5px;
        position: relative;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        // div {
        //   display: flex;
        //   align-items: center;
        //   flex: 1;
        // }
      }
    }
  }
}
.form__title {
  width: 80px;
  padding: 0 5px;
  height: 24px;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
}
</style>
