<template>
  <section class="AiLibTable">
    <ai-search-bar>
      <template v-if="$scopedSlots.left" #left>
        <slot name="left"/>
      </template>
      <template #right>
        <slot v-if="$scopedSlots.right" name="right"/>
        <el-input v-else placeholder="搜索应用名称" size="small" v-model="search[searchKey]" @change="page.current=1,getTableData()" clearable/>
      </template>
    </ai-search-bar>
    <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :colConfigs="columns"
              :size.sync="page.size" border @getList="getTableData" tableSize="mini">
      <el-table-column slot="chb" width="100px">
        <template #header>
          <el-checkbox v-if="multiple" v-model="selectAll" @change="handleCheckAll"/>
        </template>
        <template slot-scope="{row}">
          <el-checkbox v-model="row.checked" @change="handleCheck(row)"/>
        </template>
      </el-table-column>
    </ai-table>
  </section>
</template>

<script>
export default {
  name: "AiLibTable",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {default: null},
    instance: Function,
    dict: Object,
    permissions: Function,
    action: {default: "/node/wechatapps/list"},
    colConfigs: {
      default: () => [
        {prop: 'label', label: "应用名称"},
        {prop: 'project', label: "项目/框架"},
        {prop: 'category', label: "分类"},
        {prop: 'name', label: "模块名"},
      ]
    },
    nodeKey: {default: "id"},
    searchKey: {default: "name"},
    multiple: Boolean
  },
  data() {
    return {
      page: {total: 0, current: 1, size: 10},
      search: {},
      tableData: [],
      selectAll: false
    }
  },
  computed: {
    columns() {
      return [
        {slot: "chb"}, ...this.colConfigs
      ]
    },
    selected() {
      return [this.value].flat().filter(e => !!e) || []
    }
  },
  watch: {
    action(v) {
      v && (this.page.current = 1, this.getTableData())
    },
  },
  methods: {
    getTableData() {
      let {page, search, action, nodeKey} = this
      this.instance?.post(action, null, {
        params: {...page, ...search}
      }).then(res => {
        if (res?.data) {
          const list = res.data.records || res.data || []
          list.map(e => {
            e.category = e.libPath.replace(/^\/[^\/]+\/([^\/]+)\/.+/, '$1')
            if (/\/project\//.test(e.libPath)) {
              e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
            } else if (/\/core\//.test(e.libPath)) {
              e.project = "core"
            } else e.project = "standard"
          })
          this.tableData = list.map(e => ({...e, checked: this.selected.includes(e[nodeKey])}))
          this.page.total = res.data.total
        }
      })
    },
    handleCheck(row) {
      const {nodeKey} = this
      if (this.multiple) {
        let selected = this.$copy(this.selected)
        if (row.checked) {
          selected.push(row[nodeKey])
        } else {
          selected = selected.filter(e => e != row[nodeKey])
        }
        this.$emit("change", selected)
      } else {
        this.$emit("change", row.checked ? row[nodeKey] : '')
      }
    },
    handleCheckAll(v) {
      const {nodeKey} = this
      let selected = this.tableData.map(e => {
        e.checked = v
        return e
      }).filter(e => e.checked)?.map(e => e[nodeKey]) || []
      this.$emit("change", selected)
    }
  },
  created() {
    this.$set(this.search, this.searchKey, "")
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AiLibTable {
}
</style>
