<template>
  <div class="ws-compare-merge-item">
    <div class="ws-compare-merge-item__input-section">
      <WsCard>
        <WsContent>
          <WsContentTitle>{{titleFirst}}</WsContentTitle>
          <template v-if="firstValue">
            <WsState
              v-for="(field,fieldKey) in inputFields"
              :key="fieldKey"
              :type="field.type"
              :label="field.label"
              :value="firstValue[fieldKey]"
              @input="$_onFirstValueInput($event,fieldKey)"
            ></WsState>
          </template>
        </WsContent>
      </WsCard>
      <div class="ws-compare-merge-item__arrow-section">
        <WsIconBtn
          :disabled="!firstValue||!secondValue"
          @click="$_onArrowClick('left')"
        >mdi-arrow-left</WsIconBtn>
        <WsIconBtn
          :disabled="!firstValue||!secondValue"
          @click="$_onArrowClick('right')"
        >mdi-arrow-right</WsIconBtn>
      </div>
      <WsCard>
        <WsContent>
          <WsContentTitle>{{titleSecond}}</WsContentTitle>
          <template v-if="secondValue">
            <WsState
              v-for="(field,fieldKey) in inputFields"
              :key="fieldKey"
              :type="field.type"
              :label="field.label"
              :value="secondValue[fieldKey]"
              @input="$_onSecondValueInput($event,fieldKey)"
            ></WsState>
          </template>
        </WsContent>
      </WsCard>
    </div>
    <WsCard class="ws-compare-merge-item__compare-section">
      <WsContent>
        <WsInfo
          type="stringCompare"
          label="差異比對"
          :value="_stringCompareValue"
        ></WsInfo>
      </WsContent>
    </WsCard>
  </div>
</template>

<script>
export default {
  computed: {
    _stringCompareValue() {
      return [
        this.firstValue ? this.firstValue[this.compareField] : null,
        this.secondValue ? this.secondValue[this.compareField] : null
      ];
    }
  },
  methods: {
    $_onArrowClick(direct) {
      if (direct == "left") {
        this.$emit("update:secondValue", null);
      } else if (direct == "right") {
        this.$emit("update:firstValue", null);
      }
    },
    $_onFirstValueInput($event, fieldKey) {
      const newValue = JSON.parse(JSON.stringify(this.firstValue));
      newValue[fieldKey] = $event;
      this.$emit("update:firstValue", newValue);
    },
    $_onSecondValueInput($event, fieldKey) {
      const newValue = JSON.parse(JSON.stringify(this.secondValue));
      newValue[fieldKey] = $event;
      this.$emit("update:secondValue", newValue);
    }
  },
  props: {
    compareField: {
      type: String
    },
    titleFirst: {
      type: String,
      default: null
    },
    titleSecond: {
      type: String,
      default: null
    },
    firstValue: {
      type: Object,
      default: null
    },
    secondValue: {
      type: Object,
      default: null
    },
    inputFields: {
      type: Object
    }
  }
};
</script>

<style>
</style>