<template>
  <div class="style-serie">
    <div class="setting-title" @click="show = !show">
      <div>系列设置</div>
      <e class="el-icon-arrow-right" v-show="!show"></e>
      <e class="el-icon-arrow-down" v-show="show"></e>
    </div>
    <el-form
      size="mini"
      label-width="100px"
      v-show="show"
      class="style-serie-form"
    >
      <template v-for="(item, i) of option.colorList" :key="i">
        <div class="item">
          <div class="name" style="line-height: 20px">
            <span>{{ "系列" + (i + 1) }}</span>
            <i class="el-icon-delete" @click="onDel(i)"></i>
          </div>
          <el-form-item label="颜色">
            <el-color-picker
              v-model="item.color1"
              show-alpha
              size="mini"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="渐变色">
            <el-color-picker
              v-model="item.color2"
              show-alpha
              size="mini"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="渐变方向">
            <el-select v-model="item.direction" style="width: 70px">
              <el-option label="向左" value="left"></el-option>
              <el-option label="向右" value="right"></el-option>
              <el-option label="向上" value="top"></el-option>
              <el-option label="向下" value="bottom"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="不选中">
            <el-switch v-model="item.unselect"></el-switch>
          </el-form-item>
          <el-form-item label="百分号">
            <el-switch v-model="item.percent"></el-switch>
          </el-form-item>
        </div>
      </template>
      <el-button
        size="mini"
        type="primary"
        plain
        icon="el-icon-plus"
        @click="onAdd"
      >
        添加
      </el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["option"],
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onAdd() {
      this.option.colorList.push({
        color1: "",
        color2: "",
        direction: "top",
        unselect: false,
        percent: false,
      });
    },
    onDel(i) {
      this.option.colorList.splice(i, 1);
    },
  },
};
</script>
<style lang="scss">
.style-serie {
  .style-serie-form {
    padding-bottom: 10px;
    .item {
      border: 1px solid #ccc;
      margin: 5px;
      .el-form-item {
        margin: 5px 0 !important;
      }
      .name {
        line-height: 20px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 20px 0;
        .el-icon-delete {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>
