<template>
  <div>
    <el-dialog :title="$t('label.choose_status')" :visible.sync="stateVisible" width="30%" :before-close="handleClose" :append-to-body="isNested">
      <div class="stateContent">
        <div class="stateContentBody">
          <el-tree :data="stateData" show-checkbox ref="tree" node-key="id" default-expand-all :props="defaultProps" :default-checked-keys="defKeys"></el-tree>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button plain size="small" @click="handleClose">{{$t('form.close')}}</el-button>
        <el-button size="small" type="danger" @click="resetState">{{$t('btns.clean')}}</el-button>
        <el-button size="small" type="primary" @click="saveState">{{$t("btns.save")}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stateData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      defKeys: [], // 初始化默认选中的数组
    };
  },
  methods: {
    handleClose() {
      this.defKeys = []
      this.$emit("closeStateVisible");
    },
    saveState() {
      let arr = this.$refs.tree.getCheckedNodes();
      let str=''
      if (arr.length == 0) {
        return this.$message.error(this.$t('msg.select_status'));
      } else {
         arr.forEach((item,index)=> {
           if(!item.children){
              str+=item.name+((index!=arr.length-1)?',':'')
           }
         });
        this.$emit("setStateToShow", str);
        this.$emit("closeStateVisible");
      }
    },
    resetState() {
      this.$emit("setStateToShow", "");
      this.defKeys = []
      this.$emit("closeStateVisible");
    },

  },
  props: {
    stateVisible: Boolean,
    isNested: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style scoped>
</style>
