<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>
        <span style="margin: 0px 10px">-</span>
        <el-input
          :disabled="disabled"
          v-model="item.sort"
          type="number"
          :max="showList.length"
          min="1"
          placeholder="排序"
          width="150px"
          @change="update"
        ></el-input>
        <span v-if="setting&&setting.isNeedSwitch" style="margin: 0px 10px">-</span>
        <el-switch
          v-if="setting&&setting.isNeedSwitch"
          :disabled="item.isShow&&switchDisabled"
          @change="update"
          v-model="item.isShow"
        >
        </el-switch>
      </div>
    </div>
  </div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
  name: "XdSetSortLabel",
  components: {},
  watch: {},
  mixins: [emitter],
  props: {
    list: {
      type: Array,
      required: true,
      default: [],
    },
    defaultValue: {
      type: Array,
      default: [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    setting: {
      type: Object,
      default: null,
    }
  },
  computed: {
    switchDisabled() {
      return this.isSingleTrue(this.showList)
    },
  },
  data() {
    return {
      showList: [],
    };
  },

  created() {
    let list = this.mergeAndReplace( this.list,this.defaultValue,)
    this.showList = list.map((item, index) => {
      if (!item.sort) item.sort = index + 1;
      return item;
    });
  },

  mounted() {
    this.update()
  },

  methods: {
    mergeAndReplace(arr1, arr2) {
    // 使用reduce方法合并数组
      return arr1.reduce((acc, item1) => {
        let item2 = ''
        if(arr2&&arr2.length>0) {
          // 查找arr2中是否有相同value的元素
          item2 = arr2.find(item => item.value === item1.value);
        }
          // 如果找到，则替换，否则保留item1
          return acc.concat(item2 ? item2 : item1);
      }, []);
    },
    isSingleTrue(arr) {
      let count = 0;
      for (let item of arr) {
        if (item.isShow) {
          count++;
        }
      }
      return count === 1;
    },
    update() {
      this.$emit("input", this.showList);
      if (this.$parent.$options['componentName'] === 'ElFormItem') {
        this.dispatch('ElFormItem', 'el.form.change', [this.showList]);
        this.dispatch('ElFormItem', 'el.form.blur', [this.showList])
      }
    },
  },
};
</script>

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

  .warp {
    width: 100%;

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