<template>
  <div>
    <div class="panelRow">
      <!-- <span style="color: red">*</span> -->
      <div> {{ i18n['label'] }}：</div>
      <el-input
        style="width:90%; font-size:12px"
        :disabled="readOnly"
        :value="model.label"
        size="small"
        @input="(value) => {onChange('label', value)}"
      />
    </div>
    <!-- <div class="panelRow">
      <div><span style="color: red">*</span> 顺序：</div>
      <el-input
        size="small"
        style="width:90%; font-size:12px"
        :disabled="readOnly"
        :value="model.sort"
        @input="(value) => {onChange('sort', value)}"
      />
    </div> -->
    <!-- <div v-if="model.clazz == 'exclusiveGateway'" class="panelRow">
      <el-checkbox
        size="small"
        :disabled="readOnly"
        :value="!!model.isHideNode"
        @change="(value) => onChange('isHideNode', value)"
      >隐藏节点</el-checkbox>
      <el-checkbox
        size="small"
        :disabled="readOnly"
        :value="!!model.hideIcon"
        @change="(value) => onChange('hideIcon', value)"
      >{{ i18n['hideIcon'] }}</el-checkbox>
    </div> -->
  </div>
</template>
<script>
export default {
  inject: ['i18n'],
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    onChange: {
      type: Function,
      default: () => {}
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'model.sort'() {
      this.onChange('sort', '1')
    }
  },
  mounted() {
    this.onChange('sort', '1')
    // console.log(this.model)
    // 开始结点，并且标题没有值时
    // if (this.model.clazz == 'start' && !this.model.label) {
    //   this.onChange('label', '开始')
    // } else if (this.model.clazz == 'end' && !this.model.label) {
    //   this.onChange('label', '结束')
    // }
    // console.log(this.model)
  }
}
</script>
