<template>
  <div class="saga-fill">
    <div class="saga-label saga-item">{{renderData.label}}：</div>
    <div class="saga-input saga-item" style="padding: 0 10px;">
      <div v-if="renderData.type == 'Str'">
        <el-input size="small" v-model="value" @keyup.native="change" placeholder="请输入内容">
          <template slot="append" v-if="renderData.Unit">{{renderData.Unit}}</template>
        </el-input>
      </div>
      <div v-if="renderData.type == 'Num'">
        <el-input
          size="small"
          type="number"
          @keyup.native="change"
          v-model="value"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div v-if="renderData.type == 'Enum' || renderData.type == 'Bool'">
        <el-select
          v-model="value"
          placeholder="请选择"
          size="small"
          @change="change"
          filterable
          style="width:100%;padding-left:15px;"
        >
          <el-option
            v-for="item in renderData.dataSource"
            :key="item.Code"
            :label="item.Name"
            :value="item.Code"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="saga-button saga-item" v-if="!isCreated">
      <div v-if="!!renderData.oldValue && renderData.oldValue != value">
        <el-button
          @click="oldToNew"
          style="width:100%;"
          size="small"
          type="info"
        >《 更新值为： “{{renderData.oldValue}}”</el-button>
      </div>
      <div v-else>{{renderData.oldValue == value ? "资产中的值与厂商库中的值相同" : "无可用的新值"}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    renderData: {
      type: [Object],
      default: function () {
        return {}
      },
    },
    isCreated: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: ""
    }
  },
  created() {
    this.value = this.renderData.value
  },
  mounted() { },
  methods: {
    change() {
      this.renderData.value = this.value
    },
    oldToNew() {
      this.renderData.value = this.renderData.oldValue
      this.value = this.renderData.oldValue
    }
  },
  watch: {
    renderData: {
      deep: true,
      handler: function () {
        this.value = this.renderData.value
      }
    }
  }
}
</script>
<style lang="less" scoped>
.saga-fill {
  display: flex;
  margin: 10px 0;
  .saga-item {
    line-height: 30px;
  }
  .saga-label {
    flex-grow: 5;
    width: 80px;
    text-align: right;
  }
  .saga-input {
    flex-grow: 5;
  }
  .saga-button {
    flex-grow: 6;
    width: 150px;
  }
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
