<template>
  <div class="layout-no-flex right-list-toolbar">
    <div>
      <el-toolbar>
        <el-button @click="addClick" priv="Platform.Code.Add">
          <i class="fa fa-plus"></i>新建
        </el-button>
        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="searchCodeType" placeholder="请输入代码类别或名称" class="search-bar-algin-toolbar" @keyup.enter.native="searchClickHandler"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
        </el-col>
      </el-toolbar>

      <div>
        <el-table tooltip-effect="dark" ref="table" @selection-change="onSelectionChange" :data-read-url="getData" :page-size="20">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column label="代码类别">
            <template slot-scope="scope">
              <a class="code-type" href="javascript:void(0)" @click="cellClickHandler(scope.row)">{{scope.row.codeType}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="codeName" label="代码名称"></el-table-column>
          <el-table-column label="固定配置项" align="center">
            <template slot-scope="scope">
              <i class="fa fa-check icon-success" :style="{'color':'#67C23A'}" v-if="scope.row.isFixed"></i>
              <i class="fa fa-times icon-danger" v-else></i>
            </template>
          </el-table-column>
          <el-table-column prop="memo" label="备注"></el-table-column>
          <el-table-column label="操作" align="right" width="80">
            <template slot-scope="scope">
              <el-button @click.stop="editClick(scope.row)" type="text" title="编辑" priv="Platform.Code.Edit" :disabled="scope.row.isFixed">
                <i class="fa fa-edit f16"></i>
              </el-button>
              <el-button @click.stop="deleteClickHandler(scope.row)" type="text" title="删除" priv="Platform.Code.Delete" :disabled="scope.row.isFixed">
                <i class="fa fa-remove f16"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      codes: [],
      selectedRows: [],
      searchCodeType: '', //  查询关键字
      codeItems: []
    }
  },

  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },

    searchClickHandler() {
      this.$refs.table.getData()
    },

    // 获取表格数据
    getData() {
      return [
        '/ui/codes',
        {
          params: {
            searchCodeType: encodeURIComponent(this.searchCodeType)
          }
        }
      ]
    },

    // 某一列被点击时触发事件
    async cellClickHandler(row) {
      if (!row || !row.codeType) {
        return
      }
      this.$router.push({path: `/platform/code/${row.codeType}/items`, query: {allowAddItem: row.allowAddItem}})
    },

    addClick() {
      this.$router.push({path: '/platform/code/new'})
    },

    editClick(row) {
      this.$router.push({path: `/platform/code/${row.codeType}`})
    },

    async deleteClickHandler(row) {
      let isFixed = row && row.codeType ? row.isFixed : this.selectedRows.findIndex(val => val.isFixed === true) !== -1
      if (isFixed) {
        this.$alert('固定配置项不能被删除哦！', '不能被删除', {
          confirmButtonText: '确定'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let codeTypes = []
      if (row && row.codeType) {
        codeTypes.push(row.codeType)
      } else {
        this.selectedRows.forEach(function(row) {
          codeTypes.push(row.codeType)
        })
      }
      let res = await axios.delete(`/ui/codes/${codeTypes.join()}`)
      if (res.data.status === 1) {
        util.showMessage(res)
        this.$refs.table.getData()
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    }
  }
}
</script>

<style scoped>
.items-dialog-wrap {
  margin-left: -20px;
  margin-right: -20px;
}
.code-type:hover {
  color: #f80;
  text-decoration: none;
}
</style>
