<!--基础管道弯头属性-->
<template>
  <div class="base-pipe">
    <ul>
      <li>
        <div class="small-title">属性</div>
        <div class="property">
          <div class="color-box">
            <div class="cololorSelect">
              <el-color-picker
                show-alpha
                @change="changeColor"
                class="fix-box-1"
                v-model="color"
              ></el-color-picker>
            </div>
            <span>颜色</span>
          </div>
          <div class="line-width">
            <el-select v-model="angle"  @change="changeAngle" placeholder="请选择">
              <el-option
                v-for="item in angleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>旋转</span>
          </div>
          <div class="line-width">
            <el-input-number
              style="width: 80px"
              v-model="linewidth"
              controls-position="right"
              @change="changeWidth"
              size="mini"
              :min="1"
              :max="60"
              :maxlength="100"
            ></el-input-number>
            <span>线宽</span>
          </div>
        </div>
      </li>
      <li>
        <div class="small-title">拐角</div>
        <div>
          <el-radio-group v-model="corner" @change="changeRadio">
            <el-radio label="1">直角</el-radio>
            <el-radio label="2">圆角</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-top: 10px" v-if="corner == '2'">
          <label for="radius">设置圆角半径: </label>
          <el-input-number
            v-model="radius"
            controls-position="right"
            size="mini"
            @change="changeCornerRaduis"
            :min="0"
            :step-strictly="true"
          ></el-input-number>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import bus from "@/bus/bus";
export default {
  props: ["fillColor", "lineStyle", "lineWidth", "Radius","angles"],
  data() {
    return {
      color: "",
      linewidth: "",
      corner: "1", // 默认直角
      radius: 0, // 圆角半径
      angleList: [
        {
          value: 0,
          label: "0度",
        },
        {
          value: 90,
          label: "90度",
        },
        {
          value: 180,
          label: "180度",
        },
        {
          value: 270,
          label: "270度",
        },
      ],
      angle: 0,
    };
  },
  methods: {
    // 改变线宽
    changeWidth(val) {
      bus.$emit("updateStyle", "lineWidth", val);
    },
    // 改变颜色
    changeColor(val) {
      bus.$emit("updateStyle", "fillColor", val);
    },
    // 改变拐角半径
    changeCornerRaduis(val) {
      bus.$emit("updateStyle", "radius", this.radius);
    },
    // 拐角类型变化
    changeRadio() {
      if (this.corner == "1") {
        this.radius = 0;
      }
      bus.$emit("updateStyle", "radius", this.radius);
    },
    changeAngle(val){
      console.log('valval',val)
        bus.$emit("updateStyle", "angle", val);
    }
  },
  watch: {
    fillColor(val) {
      this.color = val;
    },
    lineWidth(val) {
      this.linewidth = val;
    },
    lineStyle(val) {
      this.linestyle = val;
    },
    Radius(val) {
      this.corner = val > 0 ? "2" : "1";
      this.radius = val;
    },
    angles(val) {
      this.angle = val;
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.base-pipe {
  .title {
    height: 47px;
    // border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  ul {
    width: calc(~"100% - 24px");
    margin: -1px 12px 0 12px;
    li {
      // border-top: 1px solid #979797;
      .small-title {
        font-size: 12px;
        color: #8d9399;
        margin: 12px 0;
      }
      .property {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .color-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          .cololorSelect {
            width: 32px;
            height: 20px;
            overflow: hidden;
            position: relative;
            margin: 4px 0;
            .fix-box-1 {
              margin-top: -8px;
              margin-left: -8px;
              /deep/ .el-color-picker__trigger {
                width: 200px;
                height: 200px;
              }
            }
          }
        }
        .line-width {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 8px;
          position: relative;
        }
        .line-style {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          position: relative;
          margin-top: 4px;
          .nametype {
            position: absolute;
            left: 50%;
            bottom: -80%;
            transform: translateX(-140%);
          }
        }
        span {
          font-size: 12px;
          color: #1f2429;
          margin-top: 4px;
        }
      }
      /deep/.el-input-number--mini {
        width: 100px;
      }
    }
  }
}
</style>