 <!--
  @description: 国际化语言
  @author: change by sunxinman
  @routerPath: /systemManagement/internationalLanguage
  @date:  2019/11/16-23:33
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />语言信息维护
    </div>
    <section class="p0-16">
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
      </div>
      <!-- 搜索条件 -->
      <section class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form ref="searchForm" :model="searchForm" inline>
            <el-form-item label="语言key" prop="langKey">
              <el-input v-model="searchForm.langKey" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="内容" prop="langContext">
              <el-input v-model="searchForm.langContext" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch('searchForm')">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重 置
          </el-button>
        </div>
      </section>
      <!--查询结果-->
      <div class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
      <div class="mb10">
        <el-button type="primary" plain @click="addLanguage">
          语言录入
        </el-button>
      </div>
      <!-- 列表 -->
      <section>
        <el-table
          ref="smallTable"
          :row-key="getRowKeys"
          :data="tableData"
        >
          <el-table-column type="index" label="序号" align="center" width="100" />
          <el-table-column align="left" label="语言key" min-width="200">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.langKey" placement="top">
                <span class="no_wrap">{{ scope.row.langKey }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="left" label="内容" min-width="300">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.langContext" placement="top">
                <span class="no_wrap">{{ scope.row.langContext }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="语言" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.langCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="150">
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="updateLanguage(scope.row)">
                [编辑]
              </el-link>
              <el-link type="primary" @click.stop="handeSee(scope.row)">
                [查看]
              </el-link>
              <el-link type="primary" @click.stop="handleDelete(scope.row.id)">
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="pagination p16">
          <div class="page-number fl">
            共{{ Math.ceil(total/10) }}页 {{ total }}条
          </div>
          <el-pagination
            :current-page="searchForm.pageNo"
            :total="total"
            class="fr"
            background
            layout="prev, pager, next, sizes"
            @current-change="pickHandle"
            @size-change="handleSizeChange"
          />
        </el-row>
      </section>
      <!-- 语言录入 、编辑 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <el-form
          ref="dataForm"
          :rules="langRules"
          :model="langData"
          label-position="right"
          label-width="120px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="语言key：" prop="langKey">
            <el-input v-model="langData.langKey" :disabled="dialogStatus=='see'" />
          </el-form-item>
          <el-form-item label="内容：" prop="langContext">
            <el-input v-model="langData.langContext" :disabled="dialogStatus=='see'" />
          </el-form-item>
          <el-form-item label="语言：" prop="langCode">
            <el-select
              v-model="langData.langCode"
              :disabled="dialogStatus=='see'"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in langType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="dialogStatus=='create'" type="primary" @click="langCreateData">
            确定
          </el-button>
          <el-button v-if="dialogStatus=='update'" type="primary" @click="langUpdateData">
            确定
          </el-button>
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import { internationalizationList, delMutiLang, addOrUpdate } from '@/api/rolemanagment/internationLanguage'
import { ListMixin } from '@/mixins/ListMixin'
export default {
  mixins: [ListMixin],
  data() {
    return {
      total: 0,
      date: '',
      menuTemp: '',
      getRowKeys(row) {
        return row.id
      },
      show: false, // 查看页面
      tableData: [],
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        langKey: '', // 语言key
        langContext: '' // 内容
      },
      dialogFormVisible: false, // 语言录入
      dialogStatus: '',
      textMap: {
        update: '语言编辑',
        create: '语言录入',
        see: '查看'
      },
      langData: { // 语言录入数据
        id: '',
        langKey: '', // 语言key
        langContext: '', // 内容
        langCode: '' // 语言
      },
      langRules: {
        langKey: [{ required: true, message: '请填写语言Key！', trigger: 'blur' }],
        langContext: [{ required: true, message: '请填写内容！', trigger: 'blur' }]
      }, // 语言录入校验
      langType: [
        {
          value: 'en',
          label: 'English'
        },
        {
          value: 'zh-cn',
          label: '中文'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 初始化接口(语言信息维护还没有)
    getData() {
      internationalizationList(this.searchForm).then(response => {
        this.tableData = response.data.results
        this.total = response.data.total
      })
    },
    // 搜索
    onSearch() {
      this.searchForm.page = 0
      this.getData(this.searchForm)
    },
    // 重置
    resetForm() {
      this.searchForm = {
        langKey: '',
        langContext: '',
        pageNo: 0,
        pageSize: 10
      }
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getData()
    },
    // 分页
    pickHandle(val) {
      this.searchForm.pageNo = val
      this.getData()
    },
    // 删除事件
    handleDelete(id) {
      this.$confirm('确认要删除菜单么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMutiLang(id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData()
        })
      })
    },
    // -----------语言录入------------//
    // 语言录入新增
    addLanguage() {
      // 清空
      Object.keys(this.langData).forEach((val, inx) => {
        this.langData[val] = ''
      })
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    // 语言录入新增 确定
    langCreateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          addOrUpdate(this.langData).then(() => {
            this.tableData.unshift(this.langData)
            this.dialogFormVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getData()
          })
        }
      })
    },
    // 语言录入编辑
    updateLanguage(row) {
      // 点击编辑按钮
      this.langData = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 语言录入编辑 确定
    langUpdateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.langData)
          addOrUpdate(tempData).then(() => {
            for (const v of this.tableData) {
              if (v.id === this.langData.id) {
                const index = this.tableData.indexOf(v)
                this.tableData.splice(index, 1, this.langData)
                break
              }
            }
            this.dialogFormVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getData()
          })
        }
      })
    },
    // 查看
    handeSee(row) {
      this.dialogStatus = 'see'
      this.dialogFormVisible = true
      this.langData = Object.assign({}, row) // copy obj
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.no_wrap {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scrollbar {
  height: 75vh;
}

.filter-container {
  margin: 30px 20px !important;
}
</style>
