<template>
  <div class="workSpace">
    <searchForm ref="searchForm" :keys="['orgName']" @on-search="onSearch"></searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <VaDataTable :items="showData" :columns="columns" :loading="loading">
          <template #cell(setting)="{ rowData }">
            <editOrgBtn :params="rowData" @after-op="afterOpData"></editOrgBtn>
            <deleteOrgBtn :params="rowData" @after-op="afterOp(rowData)"></deleteOrgBtn>
          </template>
        </VaDataTable>
      </div>
    </VaCard>
  </div>
</template>

<script>
  import searchForm from '../../module/searchForm.vue'
  import editOrgBtn from './editOrgBtn.vue'
  import deleteOrgBtn from './deleteOrgBtn.vue'
  export default {
    name: 'workSpace',
    components: {
      searchForm,
      editOrgBtn,
      deleteOrgBtn,
    },
    computed: {
      showData() {
        return this.users.filter((x) => {
          if (this.searchKey == '') {
            return true
          } else {
            return x.orgName.includes(this.searchKey)
          }
        })
      },
    },
    methods: {
      afterOpData(data) {
        this.users = this.users.map((x) => {
          if (x.id == data.id) {
            return data
          } else {
            return x
          }
        })
        this.$emit('after-op')
      },
      afterOp(row) {
        this.users = this.users.filter((x) => {
          return x.id != row.id
        })
        this.$emit('after-op')
      },
      onSearch() {
        this.searchKey = this.$refs.searchForm.form.orgName
      },
    },
    data() {
      return {
        searchKey: '',
        columns: [
          { key: 'orgName', label: '部门名称' },
          { key: 'orgLeader', label: '部门负责人' },
          { key: 'orgLeaderPhone', label: '联系方式' },
          { key: 'description', label: '描述' },
          { key: 'setting', label: '设置' },
        ],
        users: [],
      }
    },
  }
</script>

<style scoped lang="less">
  .workSpace {
    width: 100%;
    flex: 1;
  }
  .table {
    margin-top: 20px;
    width: 100%;
  }
  .va-table-responsive {
    width: 100%;
  }
  .va-table {
    width: 100%;
  }
</style>
