<template>
  <div>
    <!-- <Card title="自动任务" :padding="0" shadow style="margin: 4px">
      <a href="#" slot="extra" @click.prevent="editAutotask"> 修改 </a>
      <Table :columns="autotaskCol" :data="tableData" max-height="200"></Table>
    </Card> -->
    <Card title="选择审批人" :padding="0" shadow style="margin: 4px">
      <Checkbox slot="extra" v-model="selectApprover"></Checkbox>
    </Card>
  </div>
</template>
<script>
export default {
  props: {
    currentNode: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      selectApprover: false,
    };
  },
  watch: {
    selectApprover(val) {
      if (this.currentNode.type == 'countersignTask' && val) {
        this.$Message.info('会签和选择审批人不能同时选择')
        this.$nextTick(() => {
          this.selectApprover = false
        })
      }
      this.currentNode.properties.selectApprover = val
    },
    currentNode: {
      deep: true,
      handler(newValue, oldValue) {
        console.log(newValue, this.selectApprover)
        if (newValue.type == 'countersignTask' && this.selectApprover) {
          this.$nextTick(() => {
            this.selectApprover = false
          })
        }
        this.$emit("property-change", newValue);
        this.initData();
      },
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.currentNode.hasOwnProperty("properties")) {
        this.currentNode.properties = new Object();
      }
      this.selectApprover = this.currentNode.properties.selectApprover
    },
  },
};
</script>
<style>
.tablecell {
  height: 30px;
  display: table-cell;
  border: #e8e8e8 1px solid;
  vertical-align: middle;
  text-align: center;
}
</style>