<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-input v-model="keyword" placeholder="部门筛选查询" size="mini" clearable />
      </el-col>
      <el-col :span="6" :offset="0">
        <el-button size="mini" type="primary" @click="submitScreenForm">查询</el-button>
        <el-button size="mini" @click="resetScreenForm">重置</el-button>
      </el-col>
    </el-row>
    <div style="margin-top: 15px">
      <el-button type="primary" size="mini" @click="handleAdd(false)">创建</el-button>
    </div>
    <div class="table">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        max-height="700px"
        style="width: 100%"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" width="300" />
        <el-table-column prop="createBy" label="发布人" />
        <el-table-column prop="createTime" label="发布时间" />
        <el-table-column prop="updateBy" label="更新人" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div style="display: flex; justify-content: center">
              <el-button
                v-if="row.parentId == '0'"
                size="mini"
                type="text"
                @click="handleAdd(true, row)"
              >添加</el-button>
              <el-button size="mini" type="text" @click="handleEdit(true, row)">编辑</el-button>
              <el-popconfirm
                style="margin-left: 10px"
                title="这是一段内容确定删除吗？"
                @confirm="handleDelete(row.id)"
              >
                <el-button slot="reference" type="text" size="mini">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <!-- <div class="fr">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <el-dialog
      :title="type == 'add' ? '新增分类' : '编辑分类'"
      :visible.sync="visible"
      width="30%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form ref="formData" :model="formData" label-width="100px" :inline="false" size="mini">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="formData.parentName" label="上级分类" prop="parentName">
          <el-input v-model="formData.parentName" placeholder="请输入" clearable disabled />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="formData.state">
            <el-radio
              v-for="item in [
                { label: '开启', vlaue: true },
                { label: '停用', vlaue: false }
              ]"
              :key="item.vlaue"
              :label="item.vlaue"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTradeConfigList, editTradeConfig, addTradeConfig, delTradeConfig } from '@/api/basic_data/sectorAllocation'
export default {
  data() {
    return {
      visible: false,
      keyword: '',
      tableData: [],
      formData: {
        id: '',
        name: '',
        parentId: '',
        parentName: '',
        state: true
      },
      type: 'add',
      currentPage: 1,
      pageSize: 10,
      listTotal: 0,
      listLoading: false
    }
  },
  created() {
    this.getTradeConfigList()
  },
  methods: {
    async load(tree, treeNode, resolve) {
      const data = await this.getTradeConfigList(tree.id)
      resolve(data)
    },
    getTradeConfigList(parentId = '') {
      getTradeConfigList({
        keyword: this.keyword
      })
        .then(res => {
          this.listLoading = true
          if (!parentId) {
            res.data.forEach(k => {
              if (!k.childList) {
                k.childList = []
              }
            })
            this.tableData = res.data
            this.listTotal = res.data.total
            this.listLoading = false
          }
        })
        .catch(_err => {
        })
    },
    handleEdit(level, row) {
      this.formData = { ...row }
      this.type = 'edit'
      this.visible = true
    },
    handleDelete(id) {
      delTradeConfig({ id }).then(res => {
        this.$successMsg('删除成功')
        this.resetScreenForm()
      })
    },
    onSubmit() {
      this.$refs.formData.validate(valid => {
        const params = {
          ...this.formData
        }
        if (valid) {
          if (this.type !== 'add') {
            editTradeConfig(params).then(res => {
              this.visible = false
              this.$successMsg('编辑成功')
              this.resetScreenForm()
            })
          } else {
            addTradeConfig(params).then(res => {
              this.visible = false
              this.$successMsg('新增成功')
              this.resetScreenForm()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitScreenForm() {
      this.tableData = []
      this.getTradeConfigList()
    },
    resetScreenForm() {
      this.keyword = ''
      this.tableData = []
      this.getTradeConfigList()
    },
    handleAdd(level = false, row = {}) {
      if (level) {
        this.formData = {
          id: '',
          state: row.state,
          name: '',
          parentId: row.id,
          parentName: ''
        }
      } else {
        this.formData.id = ''
      }
      this.type = 'add'
      this.visible = true
    },
    handleClose() {
      this.formData = {
        id: '',
        name: '',
        parentId: '',
        parentName: '',
        state: true
      }
      this.visible = false
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTradeConfigList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTradeConfigList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
