<template>
  <div class="class-relation" v-loading="!async">
    <x-border icon="icon-5333-ict9" :title="viewModel.title" :desc="viewModel.description" v-if="async">
      <div class="relation">
        <el-alert :title="viewModel.title+'管理说明'" type="info" show-icon :closable="false">
          <div v-html="viewModel.intro"></div>
        </el-alert>
        <x-line title="" icon="flaticon-layers244" intro="">
          <div slot="headerRight">
            <el-button type="primary" @click="addTag(0,0)" size="mini" :disabled="!isCanAdd">新增一级{{viewModel.title}}</el-button>
          </div>
        </x-line>
        <el-table row-key="id" :data="viewModel.data" :expand-row-keys="expandKeys" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" class="tag_table">
          <el-table-column prop="id" label="ID" header-align="center" align="center" width="140">
            <template slot-scope="scope">
              <span v-if="scope" class="metal_color">#{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="图片" width="80" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope" />
              <x-image :src="scope.row.icon"></x-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分类名称(10个字以内)" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope" />
              <el-input @change="edit(scope.row)" v-model="scope.row.name" size="medium" maxlength="10" placeholder="请输入分类(10个字以内)"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="isEnable" label="是否启用" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope" />
              <el-switch v-model="scope.row.isEnable" @change="edit(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="modifiedTime" label="修改时间" header-align="center" align="center" width="200">
            <template slot-scope="scope">
              <span v-if="scope" class="metal_color">{{scope.row.modifiedTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200">
            <template slot-scope="scope">
              <span v-if="scope" class="metal_color">{{scope.row.createTime}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="action" header-align="right" align="right" width="105">
            <template slot-scope="scope">
              <span v-if="scope" />
              <el-button type="text" icon="el-icon-plus" @click="addTag(0,scope.row.id)" :disabled="!isCanAdd" v-if="scope.row.level<=2">加子分类</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" header-align="left" align="left" width="155">
            <template slot-scope="scope">
              <span v-if="scope" />
              <el-button type="text" size="mini" icon="el-icon-edit" @click="addTag(scope.row.id,scope.row.fatherId)" :title="'编辑分类：'+scope.row.name">编辑</el-button>
              <el-button type="text" v-if="!(scope.row.children&&scope.row.children.length>0)" size="mini" icon="el-icon-delete" @click="detele(scope.row)" :title="'删除分类：'+scope.row.name">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" width="50">
            <template>
              <i class="el-icon-rank handle"></i>
            </template>
          </el-table-column>
        </el-table>
        <div class="buttom_box">
          <el-button type="primary" icon="el-icon-check" :loading="loading" @click="save">保 存</el-button>
        </div>
      </div>
      <edit @saveForm="saveForm" :title="viewModel.title" @handleClose="handleClose" ref="dialogForm"></edit>
    </x-border>
  </div>
</template>
<script>
  // 文档 https://sortablejs.github.io/Sortable/
  import ala from '@/service/ala'
  import servcie from './service/index'
  import edit from './widget/edit.vue'

  export default {
    components: {
      edit
    },
    data () {
      return {
        async: false,
        viewModel: null,
        expandKeys: [], // 展开的行
        isCanAdd: true, // 一次只能新增一个分类
        loading: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      getPath () {
        if (this.$ala.router().path.toLowerCase().includes('admin/class')) {
          this.init()
        }
      },
      async init () {
        this.async = false
        this.viewModel = await servcie.init()
        this.async = true
        this.$nextTick(() => {
          this.rowDrop()
        })
      },
      // 编辑
      async edit (row) {
        this.viewModel.data = await servcie.edit(this.viewModel.data, row)
        this.isCanAdd = true
        this.$forceUpdate()
      },
      // 添加分类
      async addTag (id, fatherId) {
        this.$nextTick(async () => {
          if (this.$refs.dialogForm) {
            await this.$refs.dialogForm.init(id, fatherId)
          }
        })
      },
      async detele (row) {
        this.viewModel.data = await servcie.del(this.viewModel.data, row)
        this.$forceUpdate()
      },

      // 弹窗保存
      async saveForm (result, isAdd) {
        this.isCanAdd = true
        this.loading = false
        this.viewModel.data = servcie.afterSave(this.viewModel.data, result, isAdd)
        this.$forceUpdate()
        if (result.fatherId > 0) {
          this.expandKeys.push(result.fatherId.toString()) // 展开
        }
      },
      // 底部批量保存
      async save () {
        this.isCanAdd = true
        this.loading = true
        var response = await this.$admin.relationSort(this.viewModel.data)
        if (response) {
          this.$ala.toast('保存成功')
        }
        this.loading = false
      },
      handleClose () {
        this.isCanAdd = true
      },
      // 行拖拽
      rowDrop () {
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          group: 'nested',
          animation: 150,
          fallbackOnBody: true,
          swapThreshold: 0.65,
          onEnd (evt) {
            var soreResult = servcie.sort(_this.viewModel.data, evt.newIndex, evt.oldIndex)
            if (soreResult) {
              _this.viewModel.data = soreResult
            } else {
              _this.init().then()
            }
          }
        })
      }
    },
    watch: {
      '$route': 'getPath'
    }
  }
</script>

<style lang="scss" scoped rel="stylesheet/scss">
  @import url("./var.scss");
</style>




