<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="main">
        <el-form :model="form" ref="form">
          <div v-for="(item, index) in valuetypeList" :key="index">
            <div class="main_title">
              <div class="bluekuai"></div>
              <div class="title_word">{{ item.labelName }}</div>
            </div>
            <div class="main_content">
              <el-form-item :label="item.labelName" prop="rangeName">
                <div
                  :span="3"
                  v-for="(aitem, aindex) in item.labelShowVOList"
                  :key="aindex"
                  class="thecol"
                >
                  <el-input clearable
                    style="margin-right: 20px"
                    v-model="aitem.label"
                    :placeholder="'请输入'"
                  >
                    <i
                      v-if="aitem.pkId"
                      @click="deletLabel(aitem.pkId)"
                      slot="suffix"
                      class="el-icon-circle-close theicon"
                    ></i>
                  </el-input>
                </div>
                <div style="margin-top: 10px">
                  <el-button
                    circle
                    icon="el-icon-plus"
                    @click="addoptionList(index)"
                  ></el-button>
                  <!-- <el-button
                    circle
                    icon="el-icon-minus"
                    @click="suboptionList(index)"
                  ></el-button> -->
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="footer">
        <div style="margin: 0 auto">
          <el-button class="thebtn"> {{ '取消' }}</el-button>
          <el-button type="primary" class="thebtn" @click="saveDate"
            > {{ '确认' }}</el-button
          >
        </div>
      </div>
    </div>
  </template>

  <script>
  import topBar from "@/components/topBar";
  import {
    getLabelType,
    getLabelList,
    deletLabel,
    saveLabel,
  } from "@/api/system";
  export default {
    name: "Label",
    components: {
      topBar,
    },
    data() {
      return {
        moren: "label",
        topList: [
          {
            name: '标签配置',
            path: "label",
          },
        ],
        form: {},
        tabelTitleList: [], //枚举表头
        valuetypeList: [],
      };
    },
    created() {
      this.getLabelType();
      this.getLabelList();
    },
    methods: {
      addoptionList(index) {
        this.valuetypeList.forEach((element, i) => {
          if (i == index) {
            this.valuetypeList[i].labelShowVOList.push({label:""});
          }
        });
      },
      suboptionList(index) {
        this.valuetypeList.forEach((element, i) => {
          if (i == index) {
            // console.log('🌈2131',element.labelShowVOList[i].pkId)
            this.valuetypeList[i].labelShowVOList.pop();
          }
        });
      },
      //删除标签
      deletLabel(id) {
        this.$confirm('确定删除?').then((_) => {
          deletLabel({ pkId: id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getLabelList();
            }
          });
        });
      },
      //获取标签列表
      getLabelList() {
        getLabelList().then((res) => {
          res.data.forEach((element) => {
            this.tabelTitleList.forEach((item) => {
              if (element.labelType == item.value) {
                element.labelName = item.label;
              }
            });
          });
          this.valuetypeList = res.data;
        });
      },
      //获取枚举标签名称
      getLabelType() {
        getLabelType().then((res) => {
          this.tabelTitleList = res.data;
        });
      },
      //保存标签
      saveDate() {
        saveLabel(this.valuetypeList).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getLabelList()
        });
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  ::v-deep .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
  }
  .page {
    padding: 20px;
    background: #f9f9f9;
    font-size: 14px;
    .main {
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
      .theicon {
        cursor: pointer;
      }
      .main_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .bluekuai {
          width: 5px;
          height: 19px;
          background: #4391fd;
          margin-right: 20px;
        }
        .title_word {
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #333333;
        }
      }
      .main_content {
        padding: 20px 25px;
        .thecol {
          display: flex;
          width: 200px;
          margin: 10px 0;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 0;
      .thebtn {
        width: 120px;
        height: 38px;
      }
    }
  }
  </style>
