<template>
  <div class="mark-status">
    <template v-if="status">
      <span>
        <i
          :class="[
            'el-icon-success',
            status.save ? 'color-success' : 'color-danger',
          ]"
        ></i>
        提交{{ status.save ? "成功" : "失败" }}
      </span>
      <span>
        <i
          :class="[
            'el-icon-success',
            status.sync ? 'color-success' : 'color-danger',
          ]"
        ></i>
        同步{{ status.sync ? "成功" : "失败" }}
      </span>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "mark-status",
  props: {
    field: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("markParam", ["markStatus"]),
    status() {
      return this.markStatus[this.field];
    },
  },
  methods: {},
};
</script>

<style scoped>
.mark-status {
  display: inline-block;
  vertical-align: middle;
}
</style>
