<template>
  <div class="base-screen-container">
    <div class="form-title_blue">页面元素配置</div>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-form-item>
          <ts-input
            type="number"
            v-model="selectData.linesWidth"
            title="线宽度"
            :clearable="false"
            :min="0"
            @change="refresh(arguments, 'linesWidth')"
          ></ts-input>
        </ts-form-item>
      </ts-col>
      <ts-col :flex="1">
        <ts-form-item>
          <ts-switch
            :key="'dashed'+selectData.id"
            title="虚线"
            v-model="selectData.dashed"
            on-label="是"
            off-label="否"
            @change="refresh($event,'dashed')"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
    </ts-row>
    <!-- <ts-form-item>
    <ts-input
      type='number'
      v-model="selectData.linesHeight"
      title="分割线长度"
      
      @change="refresh(arguments, linesHeight)"
    ></ts-input>
    </ts-form-item>-->
    <ts-form-item>
      <ts-radio
        title="显示方向"
        v-model="selectData.direction"
        :data="directionStyle"
        type="group"
        :isDefaultFirst="true"
        @change="refresh(arguments, 'direction')"
      ></ts-radio>
    </ts-form-item>
    <ts-color-picker
      v-model="selectData.lineColor"
      @change="refresh($event,'lineColor')"
      title="线颜色"
      colorWidth="46px"
    ></ts-color-picker>
  </div>
</template>

<script>
export default {
  name: 'attrScreen',
  props: ['biCustom'],
  components: {},
  data() {
    return {
      selectData: '',
      fontColor: '',
      directionStyle: [
        { value: '0', text: '垂直' },
        { value: '90', text: '水平' }
      ]
    }
  },
  computed: {},
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
  },
  created() {},
  methods: {
    refresh(ev, key) {
      switch (key) {
        case 'linesHeight': //高度
          this.selectData.colNumber = ev[0].value
          break
        case 'linesWidth': // 宽度
          this.selectData.linesWidth = ev[0].value
          break
        case 'groundColor': // 背景
          this.selectData.groundColor = ev
          break
        case 'direction': // 方向
          this.selectData.direction = ev[0].label
          break
      }
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', { data: { ...this.selectData } })
      this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      },
      deep: true
    },
    biCustom: {
      handler(val, old) {},
      deep: true
    }
    // 'biCustom.norm': {
    //   handler(val, old) {
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
</style>
