<template>
  <el-dialog title="增加独立计费部门" :visible.sync="visible" width="420px" custom-class="dialog" @close="onClose">
    <div class="content mt27">
      <span class="label">选择部门：</span>
      <div class="border">
        <el-input class="mb10" v-model="search" prefix-icon="el-icon-search" placeholder="请输入部门名称" @change="onSearchTree"></el-input>
        <el-tree ref="tree" class="tree" default-expand-all :data="treeData" check-strictly node-key="departId" :props="props" show-checkbox @check-change="handleCheckChange" :filter-node-method="filterNode">
          <span slot-scope="{ node, data }">
            <el-tooltip :content="node.label" v-if="node.label.length > 10" placement="right">
              <span>{{ limitLenth(node.label) }}</span>
            </el-tooltip>
            <span v-else @click="test(node, data)">{{ node.label }}</span>
            <span v-if="node.disabled" class="disabled">已设置</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="text-right mt20">
      <el-button plain @click="onClose">取消</el-button>
      <el-button type="primary" @click="save">确认增加</el-button>
    </div>
  </el-dialog>
</template>

<script>
// addAccountDepart
import { getAllDepart, addAccountDepart } from '@/service/api/rechargeApi.js';
export default {
  name: 'addDepartment',
  props: {
    visible: Boolean
  },
  data() {
    return {
      depart: [],
      search: '',
      treeData: [],
      props: {
        children: 'childList',
        label: 'departName'
      }
    };
  },
  computed: {
    limitLenth() {
      return label => label.slice(0, 10) + '...';
    }
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false);
    },
    async getDepart() {
      const { result } = await getAllDepart();
      if (result) result.disabled = 1;
      this.treeData = [result] || [];
    },
    onSearchTree() {
      this.$refs.tree.filter(this.search);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.departName.indexOf(value) !== -1 && !data.disabled;
    },
    handleCheckChange(data, status) {
      const { departId, departName } = data;
      if (status) this.depart.push({ id: departId, name: departName });
      else this.depart = this.depart.filter(el => el.id != departId);
    },
    async save() {
      if (!this.depart.length) return this.$message.warning('请先选择要独立计费的部门');
      await addAccountDepart({ departmentJson: JSON.stringify(this.depart) });
      this.$message.success('保存成功');
      this.onClose();
      this.$emit('saved');
    },
    test(a, b) {
      console.log(a, b);
    }
  },
  watch: {
    visible: {
      handler: function(newVal) {
        if (newVal) {
          this.getDepart();
          this.search = '';
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoepd lang="scss">
.dialog {
  height: 463px;
  position: relative;
  .border {
    width: 308px;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
  }
  .content {
    display: flex;
    align-items: flex-start;
    .label {
      display: inline-block;
      width: 70px;
      margin-top: 8px;
    }
    .tree {
      height: 245px;
      overflow-y: auto;
    }
  }
  .disabled {
    display: inline-block;
    width: 48px;
    background: #f0f5ff;
    border-radius: 2px;
    border: 1px solid #adc6ff;
    color: #2f54eb;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    margin-left: 5px;
  }
}
</style>
