<template>
  <div class="dec-modify-content dec-set-line">
    <div class="dec-flex-list side">
      <span class="d-left">线条颜色</span>
      <div class="d-right">
        <div style="float: right; margin-right: 40px">
          <color-picker :color="arg.color" @change="ensure"></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">边距样式</span>
      <div class="d-right">
        <a-radio-group v-model="arg.margin" button-style="solid" size="small">
          <a-radio-button value="no">无边距</a-radio-button>
          <a-radio-button value="yes">留边距</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">线条样式</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.lineStyle"
          button-style="solid"
          size="small"
        >
          <a-radio-button :value="'dashed'">虚线</a-radio-button>
          <a-radio-button :value="'solid'">实线</a-radio-button>
          <a-radio-button :value="'dotted'">点线</a-radio-button>
        </a-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import colorPicker from "../../../modal/colorPicker";
export default {
  props: ["tab", "checked"],
  components: {
    colorPicker,
  },
  data() {
    return {
      arg: null,
    };
  },
  created() {
    this.arg = this.tab.arg;
    if (!this.arg.color) {
      thi.arg.color = "#dddddd";
    }
  },
  methods: {
    ensure(val) {
      this.arg.color = val;
    },
  },
};
</script>
