<template>
  <section class="resourceClassification">
    <ai-list>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="dialog = true">&nbsp;添加分类</el-button>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getList()" :col-configs="colConfigs" :dict="dict">
                  <!-- @sort-change="changeTableSort" -->

          <!-- <el-table-column label="商品图" slot="merchandisePhoto" align="center" width="130">
            <template v-slot="{ row }">
              <ai-uploader :disabled="true" :instance="instance" v-model="row.merchandisePhoto" :limit="9"></ai-uploader>
            </template>
          </el-table-column> -->

          <el-table-column slot="options" label="状态" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" title="详情" @click="toEdit(row.id)">编辑</el-button>
              <el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="添加资源分类" :visible.sync="dialog" :customFooter="true" :destroyOnClose="true" width="720px" @onConfirm="onConfirm" @closed="form={}">
      
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model.trim="form.categoryName" placeholder="请输入" type="text" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="分类图标" prop="categoryIcon">
          <ai-uploader :instance="instance" isShowTip v-model="form.categoryIcon" :limit="1"></ai-uploader>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog=false">取消</el-button>
        <el-button type="primary" @click="dialog=false">确定</el-button>
      </div>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "resourceClassification",
  props: {
    instance: Function,
    dict: Object,
    areaId: String,
    permissions: Function,
  },
  data() {
    return {
      search: {
        current: 1,
        categoryId: '',
        size: 10,
        resourceName: ''
      },
      total: 0,
      tableData: [],
      dialog: false,
      form: {
        categoryName: '',
        categoryIcon: ''
      }
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'resourceName', label: '分类名称', width: '300px'},
        {prop: 'categoryName', label: '资源数量', align: 'center'},
        // {prop: "merchandisePhoto",slot: "merchandisePhoto",align: "center",label: "商品图"},
        {prop: 'option'}
      ]
    },
    rules() {
      return {
        categoryName: [{required: true, message: "请输入分类名称"}],
        categoryIcon: [{required: true, message: "请上传分类图标"}],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.instance.post(`/app/appresourcecategory/list`,null,{
        params: {
          ...this.search,
          areaId: this.areaId,
        }
      }).then(res=> {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.total
        }
      })
    },
    onConfirm() {

    }
  }
}
</script>

<style lang="scss" scope>
.resourceClassification {

}
</style>