<template>
  <div class="code">
    <div>
      <el-button size="mini" type="primary" @click="save()">保存</el-button>
    </div>
    <div
      class="rules"
    >输入规则:key 和 value 用 # 分割 例: 0#熏蒸 多个用 / 分割 例:0#熏蒸/1#煎服/2#坐浴 价格用-拼接 例:0#熏蒸-10/1#煎服-20/2#坐浴-30</div>

    <div class="code-item flex-vertical-center-l" v-for="(item,index) in list" :key="index">
      <div class="span">
        <span>{{item.type}}：</span>
      </div>
      <div class="input">
        <el-input v-model="item.value" type="textarea"></el-input>
      </div>
    </div>
    <div class="code-item flex-vertical-center-l">
      <div class="span">
        <!-- <span>频次：</span> -->
      </div>
      <!-- <div class="input">
                <div class="save flex-center">保存</div>
      </div>-->
    </div>

    <!-- <div class="save flex-center">保存</div> -->
  </div>
</template>
<script>
import { getCodeMsg, addCodeMsg } from "@/api/system.js";
export default {
  data() {
    return {
      list: [],
      sign: ""
    };
  },
  created() {
    this.getCodeMsg();
  },
  methods: {
    save() {
      this.addCodeMsg();
    },
    // 获取 公共代码信息
    async getCodeMsg() {
      let res = await getCodeMsg();
      if (res.ResultCode == 0) {
        let keys = Object.keys(res.Data);
        // console.log(keys);
        let values = Object.values(res.Data);
        // console.log(values);

        let arr = [];
        keys.forEach((item, index) => {
          let obj = {
            type: item,
            value: values[index]
          };

          // obj[`item${index}`] = values[index]
          arr.push(obj);
        });
        // console.log(arr, 'arr');
        this.list = arr;
      }
    },
    // 提交公共代码信息
    async addCodeMsg() {
      let params = {
        paramList: this.list
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let res = await addCodeMsg(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          showClose: true,
          message: "提交成功"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/common.scss";

.code {
  padding: 10px 10px;
  background: #fff;
  border-radius: 5px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  .code-item {
    margin-bottom: 10px;

    .span {
      // display: inline-block;
      width: 150px;
      text-align: right;
    }
  }

  .save {
    width: 76px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    // margin-left: 30px;
  }
}

.input {
  flex: 1;
}

.rules {
  color: red;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>