<template>
  <div class="app-container">
    <el-row>
      <el-col :span="5">
        <div style="width:95%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>事部件管理</span>
            </div>
            <el-tree
              v-loading="treeLoading"
              ref="tree"
              :data="caseTypeTree"
              :props="defaultProps"
              :default-expand-all="expandAllNode"
              :expand-on-click-node="expandNodeClick"
              :accordion="accordion"
              :default-expanded-keys="[listQuery.typeId]"
              :default-checked-keys="[listQuery.typeId]"
              :highlight-current="highlightCurrent"
              class="filter-tree"
              node-key="id"
              @node-click="handleNodeClick"
            />
          </el-card>
        </div>
      </el-col>
      <el-col :span="19">
        <search-area @search="search">
          <search-item>
            <el-input v-model="listQuery.typeDetailName" size="small" placeholder="名称" clearable/>
          </search-item>
          <search-item>
            <el-input v-model="listQuery.typeDetailCode" size="small" placeholder="编码" clearable/>
          </search-item>
        </search-area>
        <normal-table :data="caseDetailTypeList" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage" @selection-change="handleSelectionChange">
          <template slot="btns">
            <el-button v-if="hasPerm('/caseType/deleteTypeDetail')" size="small" @click="del">删除</el-button>
            <el-button v-if="hasPerm('/caseType/addTypeDetail')" size="small" @click="add">添加</el-button>
          </template>
          <template slot="preColumns">
            <el-table-column align="center" type="selection" width="50"/>
          </template>
          <template slot="columns">
            <el-table-column align="center" prop="typeDetailName" label="名称"/>
            <el-table-column align="center" prop="typeDetailCode" label="编码"/>
            <el-table-column align="center" label="所属大类">
              <template slot-scope="scope">
                {{ caseTypeMap[scope.row.typeId] }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="num" label="排序" width="50"/>
            <el-table-column label="操作" align="center" width="140">
              <template slot-scope="scope">
                <el-button class="table-button" type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
                <el-button class="table-button" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <!--<el-button class="table-button" type="text" @click="showStandard(scope.row)">立案标准</el-button> -->
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </el-col>
    </el-row>
    <edit-caseType v-show="editShow" ref="editCaseType" @watchChild="fetchData"/>
    <detail-caseType v-show="detailShow" ref="detailCaseType"/>
  </div>
</template>

<script>
import { getCaseTypeList, getCaseDetailType, deleteCaseDetailType, getCaseTypeDict } from '@/api/busAdmin/caseType'
import editCaseType from '@/views/busAdmin/caseType/editCaseType'
import detailCaseType from '@/views/busAdmin/caseType/detailCaseType'

export default {
  name: 'ListCaseType',
  components: { editCaseType, detailCaseType, deleteCaseDetailType },
  data() {
    return {
      // caseTypeTree: [
      //   {
      //     id: -1,
      //     name: '事件',
      //     children: []
      //   },
      //   {
      //     id: -2,
      //     name: '部件',
      //     children: []
      //   }
      // ],
      caseTypeTree: [],
      treeLoading: false,
      expandAllNode: false,
      expandNodeClick: true,
      accordion: true,
      highlightCurrent: true,
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id'
      },
      listQuery: {
        typeId: 0,
        eorc: 1,
        typeDetailId: '',
        typeDetailCode: '',
        offset: 1,
        limit: 10,
        sort: 'id',
        order: 'asc'
      },
      total: 0, // 数据总数
      columns: [
        {
          text: '名称',
          value: 'typeDetailName',
          align: 'center'
        },
        {
          text: '编码',
          value: 'typeDetailCode',
          align: 'center',
          width: 100
        },
        {
          text: '所属大类',
          value: 'this.typeId',
          align: 'center'
        },
        {
          text: '排序',
          value: 'this.num',
          align: 'center'
        }
      ],
      listLoading: false,
      caseDetailTypeList: [],
      editShow: false,
      detailShow: false,
      multipleSelection: [], // 多选选中项
      caseTypeMap: {}
    }
  },
  watch: {
    'editShow': function(newVal, oldVal) {
      console.log('editShow', this.editShow)
    }
  },
  created() {
    this.initCaseTypeTree()
    // this.fetchCaseTypeTree()
  },
  methods: {
    initCaseTypeTree() {
      this.treeLoading = true
      getCaseTypeDict().then(response => {
        response.data.forEach(dictItem => {
          const treeRoot = {}
          treeRoot.id = 0 - parseInt(dictItem.value)
          treeRoot.name = dictItem.name
          treeRoot.eorc = dictItem.value
          treeRoot.children = []
          this.caseTypeTree.push(treeRoot)
        })
        this.fetchCaseTypeTree()
      })
    },
    fetchCaseTypeTree() {
      getCaseTypeList().then(response => {
        this.parseCaseTypeTree(response.data)
        this.parseCaseTypeMap(response.data)
        this.listQuery.typeId = parseInt(response.data[0].id)
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.listQuery.typeId) // treeBox 元素的ref   value 绑定的node-key
        })
        this.treeLoading = false
        this.fetchData()
      })
    },
    parseCaseTypeTree(caseTypeList) {
      caseTypeList.forEach(item => {
        const caseType = {}
        caseType.id = parseInt(item.id)
        caseType.name = item.typeName
        caseType.children = []
        caseType.eorc = item.eorc
        // console.log(this.caseTypeTree)
        this.caseTypeTree.forEach(treeItem => {
          if (caseType.eorc === treeItem.eorc) {
            treeItem.children.push(caseType)
          }
        })
        // console.log(this.caseTypeTree)
      })
    },
    parseCaseTypeMap(caseTypeList) {
      caseTypeList.forEach(item => {
        this.caseTypeMap[item.id] = item.typeName
        // this.caseTypeMap.set(item.id, item.value)
      })
      console.log('caseTypeMap', this.caseTypeMap)
    },
    handleNodeClick(data) {
      this.listQuery.typeId = data.id
      this.listQuery.eorc = data.eorc
      if (this.listQuery.typeId > 0) {
        this.fetchData(false)
      }
    },
    fetchData(isNowPage = true) {
      this.listLoading = true
      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
        this.listQuery.offset = 1
      }
      getCaseDetailType(this.listQuery).then(response => {
        this.caseDetailTypeList = response.data.rows
        this.total = parseInt(response.data.total)
        this.listLoading = false
      })
    },
    search() {
      this.fetchData(false)
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    },
    add() {
      if (this.listQuery.typeId < 0) { // 点击事件或部件，不展示添加
        this.$message.warning('请先选择案卷大类')
        return
      }
      this.dialogFormVisible = true
      this.editShow = true
      this.$refs.editCaseType.initDialog({
        dialogStatus: 'create',
        dialogFormVisible: this.dialogFormVisible,
        eorc: this.listQuery.eorc,
        typeId: this.listQuery.typeId
      })
    },
    edit(row) {
      if (this.hasPerm('/caseType/updateTypeDetail')) {
        event.stopPropagation()
        this.dialogFormVisible = true
        this.editShow = true
        this.$refs.editCaseType.initDialog({
          dialogStatus: 'update',
          dialogFormVisible: this.dialogFormVisible,
          eorc: this.listQuery.eorc,
          typeId: this.listQuery.typeId,
          row: row
        })
      } else {
        event.stopPropagation()
        this.$message.warning('没有权限')
      }
    },
    del() {
      if (this.checkSelection()) {
        const detailTypeIds = []
        this.multipleSelection.forEach(function(value, index) {
          detailTypeIds.push(value.id)
        })
        this.$confirm(
          '确定要删除所选类别吗？',
          '确认操作',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteCaseDetailType(detailTypeIds.join(',')).then(response => {
            if (response.code === 200) {
              this.$message.success('删除成功')
              this.fetchData()
            }
          })
        })
      } else {
        this.$message.error('至少选中一项')
      }
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 检查选择情况
    checkSelection() {
      if (this.multipleSelection.length === 0) {
        return false
      } else {
        return true
      }
    },
    showDetail(row) {
      this.detailShow = true
      this.$refs.detailCaseType.initDialog(true, row)
    }
  }
}
</script>

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