<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="资料名称：">
          <el-input
            v-model="querys[0].value"
            clearable
            maxlength="128"
            placeholder="请输入资料名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="资料分类：">
          <el-cascader
            v-model="querys[1].value"
            :options="MaterialDataType"
            :props="{value: 'id', label: 'name', checkStrictly: true}"
            clearable
            filterable
            style="width: 100%"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
          <el-button icon="el-icon-refresh" @click="handleReset"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content">
        <el-button icon="el-icon-plus" type="success" @click="handleAdd"
          >新增
        </el-button>
        <el-popconfirm title="确定删除选中数据吗？" @confirm="handleDelete">
          <el-button
            slot="reference"
            :disabled="!multipleSelection.length"
            icon="el-icon-delete"
            style="margin-left: 10px"
            type="danger"
            >删除
          </el-button>
        </el-popconfirm>
        <el-button
          icon="el-icon-sort"
          plain
          style="margin-left: 10px"
          type="primary"
          @click="savePropertyf"
        >
          保存排序号
        </el-button>
      </div>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :default-sort="{prop: 'sn', order: 'ascending'}"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableMaxHeight"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="55"
        ></el-table-column>
        <el-table-column
          label="资料名称"
          min-width="150"
          prop="title"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="资料分类"
          min-width="100"
          prop="typeName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="关键词"
          min-width="70"
          prop="keyword"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="资料简介"
          min-width="150"
          prop="memo"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column min-width="120" prop="mome" label="备注" show-overflow-tooltip>
                </el-table-column> -->
        <el-table-column
          align="center"
          label="排序"
          min-width="70"
          prop="sn"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sn"
              min="1"
              size="small"
              style="width:70px"
              type="number"
              @input="insort(scope.row)"
            >
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="total"
        align="right"
        background
        class="bbsl-pagination"
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <zlxxMenuDialog ref="formModal" @loadData="loadData"></zlxxMenuDialog>
  </div>
</template>

<script>
import zlxxMenu from '@/api/examination/zlxxMenu.js'
import {TableMixin} from '@/mixins/tableMixin'
import zlxxMenuDialog from './components/zlxxMenuDialog.vue'

export default {
  name: 'equSysMenu',
  components: {
    zlxxMenuDialog
  },
  mixins: [TableMixin],
  data() {
    return {
      url: {
        delete: '/exam/materialType/info/'
      }, //删除信息url
      MaterialDataType: [],
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'title',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'typeId',
          relation: 'AND',
          value: ''
        }
      ],
      tableData: [],
      materialTypeList: [],
      sortList: {}
    }
  },
  created() {
    this.getTreen()
  },
  mounted() {},
  methods: {
    handleChange(val) {
      this.querys[1].value = val[val.length - 1]
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
      this.querys[1].value = ''
      this.loadData(1)
    },
    // 获取树
    getTreen() {
      zlxxMenu.getMaterTree({id: '0'}, res => {
        this.MaterialDataType = res.value
        this.$set(this.MaterialDataType)
      })
    },
    // 获取list
    loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      zlxxMenu.getMaterial(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.$set(this.tableData)
        this.loading = false
      })
    },
    insort(val) {
      let id = val.id
      let value = val.sn
      this.sortList[id] = value
    },
    // 保存排序
    savePropertyf() {
      zlxxMenu.saveSort(this.sortList, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.type-tag {
  margin: 0 2px;
}
</style>
