<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
      <span class="button-separator"></span>
      <el-button @click="addCodeItemClick" :disabled="notAllowAddItem" priv="Platform.Code.Add">
        <i class="fa fa-plus"></i> 添加
      </el-button>
    </el-toolbar>
    <el-table :data="codeItems" tooltip-effect="dark" @selection-change="onCodeItemSelectionChange">
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="codeValue" label="值" width="100"></el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-button type="text" class="table-title-button" :title="scope.row.codeName" priv="Platform.Code.Edit" :disabled="scope.row.isFixed" @click.stop="editCodeItemClick(scope.row)">{{scope.row.codeName}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="codeType" label="代码类别" width="200"></el-table-column>
      <el-table-column label="固定配置项" width="120" align="center">
        <template slot-scope="scope">
          <i class="fa fa-check icon-success" 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="editCodeItemClick(scope.row)" priv="Platform.Code.Edit" type="text" title="编辑" :disabled="scope.row.isFixed">
            <i class="fa fa-edit f16"></i>
          </el-button>
          <el-button @click.stop="deleteCodeItemClickHandler(scope.row)" priv="Platform.Code.Delete" type="text" title="删除" :disabled="scope.row.isFixed">
            <i class="fa fa-remove f16"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  props: {
    codeType: {
      type: [String],
      default: ''
    }
  },
  data() {
    return {
      codeItems: [],
      codeItemSelectedRows: [],
      tmpCodeItem: {},
      codeItemRules: {
        codeType: [{ required: true, message: '请输入类型', trigger: 'blur' }],
        codeName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            pattern: /^[.-\w-\u4e00-\u9fa5]{0,2000}$/,
            message: '请输入汉字、字母、数字、点且长度不超过2000个字符',
            trigger: 'blur,change'
          }
        ],
        codeValue: [
          { required: true, message: '请输入值', trigger: 'blur' },
          {
            pattern: /^[.-\w-\u4e00-\u9fa5]{0,40}$/,
            message: '请输入汉字、字母、数字、点且长度不超过40个字符',
            trigger: 'blur,change'
          }
        ]
      },
      notAllowAddItem: false
    }
  },
  created() {
    this.notAllowAddItem = this.$route.query.allowAddItem === 'false'
    this.loadData()
  },
  methods: {
    back() {
      this.$router.push({path: '/platform/code'})
    },

    async loadData() {
      if (!this.codeType) {
        this.$alert('代码类别为空 ！', '系统提示')
        return
      }
      let res = await axios.get(`/ui/codes/${this.codeType}/items`)
      res = res.data
      this.codeItems = res.status === 1 ? res.data : []
    },

    onCodeItemSelectionChange(selection) {
      this.codeItemSelectedRows = selection
    },

    addCodeItemClick() {
      this.$router.push({path: `/platform/code/${this.codeType}/items/new`})
    },

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

    async deleteCodeItemClickHandler(row) {
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let codeValues = []
      let codeType = ''
      if (row && row.codeValue) {
        codeValues.push(row.codeValue)
        codeType = row.codeType
      } else {
        this.codeItemSelectedRows.forEach(function(row) {
          codeValues.push(row.codeValue)
        })
        codeType = this.codeItemSelectedRows[0].codeType
      }
      let res = await axios.delete(`/ui/codes/${codeType}/items/${codeValues.join()}`)
      if (res.data.status === 1) {
        util.showMessage(res)
        this.loadData()
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    }
  }
}
</script>
