<template>
  <div class="body">
    <div class="warp" v-if="showList && showList.length > 0">
      <div class="item" v-for="(item, index) in showList" :key="index">
        <el-input
          :disabled="true"
          :value="item.label"
          placeholder="原始文案"
          width="150px"
        ></el-input>
        <span style="margin: 0px 10px">-</span>
        <el-input
          :disabled="disabled"
          v-model="item.newLabel"
          placeholder="自定义文案"
          width="150px"
          @change="update"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "XdSetLabel",
  components: {},
  props: {
    list: {
      type: Array,
      required: true,
      default: [],
    },
    defaultValue: {
      type: Array,
      default: [],
    },
    disabled:{
      type: Boolean,
      default:false
    },
  },
  data() {
    return {
      showList: [],
    };
  },

  watch: {},

  created() {
    if (this.defaultValue && this.defaultValue.length > 0) {
      this.showList = this.defaultValue;
      return;
    }
    this.showList = this.list;
  },

  mounted() {
    this.$emit("input", this.showList);
  },

  methods: {
    update() {
      this.$emit("input", this.showList);
    },
  },
};
</script>

<style scoped lang="scss">
.body {
  width: 100%;

  .warp {
    width: 100%;

    .item {
      display: flex;
      margin-bottom: 20px;
    }
    .el-input {
      width: 200px;
    }
  }
}
</style>
