<template>
  <a-card :bordered="false" title="项目人员信息">
    <!-- <template slot="extra">
      <a-button type="primary" size="default" @click="toNext">下一步</a-button>
    </template>
    <template slot="extra">
      <a-button type="primary" size="default" @click="toPrev">上一步</a-button>
    </template> -->
    <a-row type="flex" justify="center" align="top">
      <a-col :span="4" id="tree">
        <a-page-header title="单位列表" sub-title="" />
        <div v-if="this.orgTree != ''">
          <a-tree :treeData="orgTree" v-if="orgTree.length" @select="onSelect" :defaultExpandAll="true" :defaultExpandedKeys="defaultExpandedKeys" :replaceFields="replaceFields">
            <a-icon slot="switcherIcon" type="down" />
          </a-tree>
        </div>
      </a-col>
      <a-col :span="20" id="content">
        <a-page-header title="人员选择" sub-title="" />
        <a-col :span="18" id="table">
          <a-form layout="inline">
            <a-row>
              <a-form-item label="姓名">
                <a-input v-model="queryParam.name" placeholder="请输入姓名" />
              </a-form-item>
              <a-form-item label="人员类型">
                <a-select default-value="0" style="width: 120px">
                  <a-select-option value="0"> - 全 部 - </a-select-option>
                  <a-select-option value="1"> 类 型 一 </a-select-option>
                  <a-select-option value="2"> 类 型 二 </a-select-option>
                  <a-select-option value="3"> 类 型 三 </a-select-option>
                </a-select>
              </a-form-item>
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
            </a-row>
          </a-form>
          <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }">
            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
          </s-table>
        </a-col>
        <a-col :span="6" id="select">
          <p>点击列表项取消选择或【<a @click="removeAllSelece">清空所有</a>】</p>
          <a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
            <a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
              {{ item.name + '（' + item.userName + '）' }}
            </a-list-item>
          </a-list>
        </a-col>
      </a-col>
    </a-row>
    <a-col :span="24" style="text-align: center;">
      <a-button type="primary" size="default" @click="toPrev" style="margin-right: 8px;">上一步</a-button>
      <a-button type="primary" size="default" @click="toNext">下一步</a-button>
    </a-col>
  </a-card>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import { orgList } from '@/api/org/org'
import { listToTree } from '@/utils/util'
import { personPage } from '@/api/person/person'
import { STable } from '@/components'
const rootParentId = 0

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    orgList,
    STable,
  },
  props: {
    projectForm: {
      type: Object,
    },
  },
  data() {
    // 这里存放数据
    return {
      form: this.projectForm,
      // 查询参数
      queryParam: { orgType: 1 },
      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
      expandedKeys: [],
      autoExpandParent: true,
      defaultExpandedKeys: [],
      selectedRowKeys: [],
      selectedRows: this.projectForm.projectPersonLists || [],
      orgTree: [],
      orgId: '',
      orgType: 1,
      columns: [
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '姓名', dataIndex: 'name' },
        { title: '用户名', dataIndex: 'userName' },
      ],
      //人员列表数据
      loadData: (parameter) => {
        return personPage(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //下一步
    toNext() {
      this.form.projectPersonLists = this.selectedRows
      this.form.personIds = this.selectedRowKeys
      if (this.form.personIds.length > 0) {
        this.$emit('nextStep', this.form)
      } else {
        this.$message.warning('培训人员不能为空')
      }
    },
    //上一步
    toPrev() {
      this.form.projectPersonLists = this.selectedRows
      this.form.personIds = this.selectedRowKeys
      this.$emit('prevStep', this.form)
    },

    /** 表格行选中后触发 */
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      console.log('选择的表格数据 : ', selectedRows)
      this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
      this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
    },

    //对象去重
    unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    },

    //key去重
    uniqueKeys(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
    },

    //列表点击删除列表项
    changeList(item) {
      console.log('列表点击删除列表项 : ', item)
      this.selectedRows = this.selectedRows.filter(function (i) {
        return i.id != item.item.id
      })
      this.selectedRowKeys = this.selectedRowKeys.filter(function (i) {
        return i != item.item.id
      })
    },

    //清空选择
    removeAllSelece() {
      this.selectedRowKeys = []
      this.selectedRows = []
    },

    //选中后触发
    onSelect(selectedKey, info) {
      console.log('selected', selectedKey, info)
      this.queryParam.orgId = selectedKey.toString()
      this.orgId = selectedKey.toString()
      this.$refs.table.refresh(true)
    },

    //树使用的方法
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    //编辑时初始化人员列表初始化
    initPersonList() {
      if (this.form.projectPersonLists) {
        this.selectedRowKeys = [],
        this.form.projectPersonLists.forEach(element => {
          this.selectedRowKeys.push(element.id)
        });
        console.log('初始化的值',this.selectedRowKeys)
      }
    },

    /**
     * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
     */
    async getOrgTree() {
      await orgList({ orgType: this.orgType }).then((res) => {
        this.treeLoading = false
        if (!res.code === 200 || !res.data.length) {
          return
        }
        this.defaultExpandedKeys = []
        this.orgTree = listToTree(res.data, [], rootParentId)
        this.orgId = this.orgTree[0].id
        for (var item of this.orgTree) {
          if (item.pid === 0) {
            this.defaultExpandedKeys.push(item.id)
          }
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrgTree()
    this.initPersonList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { },
}
</script>
<style scoped>
/* #tree {
  height: 750px;
  background-color: beige;
}

#content {
  height: 750px;
  background-color: bisque;
} */
/* /project/form/ProjectPersonForm.vue */
</style>