<template>
  <div class="book-vocab">
    <div class="book-vocab-content">
      <div class="book-vocab-content-search">
        <el-form :inline="true" size="mini" :model="searchForm">
          <el-form-item label="词汇键值">
            <el-input v-model="searchForm.word_key" placeholder="请输入词汇键值" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="wordKey" type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <div v-if="language_list.length > 0" class="language_list">
          <el-select
            v-model="language_value"
            placeholder="请选择添加的语言"
            size="mini"
            class="changeLang"
            @change="changeLang"
          >
            <el-option
              v-for="item in language_list"
              :key="item.language_type"
              :label="item.language_name"
              :value="item.language_type"
            >
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" @click="addLang">添加语言</el-button>
        </div>
        <el-button type="primary" size="mini" @click="saveWord">保存词汇</el-button>
      </div>
      <div v-if="word_list.length > 0" class="book-vocab-content-table">
        <el-table :data="word_list">
          <el-table-column prop="language_name" label="语言类型" width="200"> </el-table-column>
          <el-table-column prop="language_name_zh" label="语言类型" width="200"> </el-table-column>
          <el-table-column label="词汇">
            <template slot-scope="scope">
              <el-input v-model="scope.row.word"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="book-vocab-content-pag">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="cur_page"
          :page-size="page_capacity"
          layout="total, prev, pager, next, jumper"
          :total="total_count"
        >
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getContent } from '@/api/ajax';

export default {
  data() {
    return {
      isData: false,
      isSaving: false,
      searchForm: {
        word_key: ''
      },
      word_list: [],
      language_list: [],
      wordKey: '',
      language_value: '',
      language_item: null
    };
  },
  mounted() {
    let wordKey = this.$route.query.wordKey;
    this.wordKey = wordKey || '';
    this.searchForm.word_key = this.wordKey;
    this.getWordList();
  },
  // 方法集合
  methods: {
    getWordList() {
      let MethodName = 'language_manager-ReadWord';
      let data = {
        word_key: this.searchForm.word_key
      };
      getContent(MethodName, data).then(res => {
        this.word_list = res.word_list;
        this.getLanguageList();
      });
    },
    onSearch() {
      this.getWordList();
    },
    saveWord() {
      this.isSaving = true;
      let MethodName = 'language_manager-InputWord';
      let data = {
        word_key: this.searchForm.word_key,
        word_list: this.word_list
      };
      getContent(MethodName, data).then(() => {
        this.$message.success('保存成功');
        this.isSaving = false;
      });
    },
    getLanguageList() {
      let MethodName = 'language_manager-GetLanguageList';
      getContent(MethodName, {}).then(res => {
        let language_list = res.language_list;
        if (this.word_list.length > 0) {
          this.language_list = this.arrayRepeat(this.word_list, language_list);
        }
      });
    },
    changeLang(val) {
      this.language_list.forEach(item => {
        if (item.language_type === val) {
          this.language_item = val;
          return false;
        }
      });
    },
    addLang() {
      if (!this.language_item) {
        this.$message.warning('请选择添加语言！');
        return;
      }
      let obj = JSON.parse(JSON.stringify(this.language_item));
      obj.word = '';
      this.word_list.push(obj);
    },
    handleDel(index) {
      this.word_list.splice(index, 1);
    },
    arrayRepeat(array1, array2) {
      let result = [];
      for (let i = 0; i < array2.length; i++) {
        let obj = array2[i];
        let num = obj.language_type;
        let isExist = false;
        for (let j = 0; j < array1.length; j++) {
          let aj = array1[j];
          let n = aj.language_type;
          if (n === num) {
            isExist = true;
            break;
          }
        }
        if (!isExist) {
          result.push(obj);
        }
      }
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
.book-vocab {
  width: 100%;
  height: calc(100vh - 130px);
  overflow: hidden;

  &-content {
    width: 1200px;
    padding: 30px 0;
    margin: 0 auto;

    .changeLang {
      margin-right: 10px;
    }

    &-create {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      margin-bottom: 20px;
    }

    &-search {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    &-table {
      width: 100%;
      min-height: calc(100vh - 130px);
    }

    &-pag {
      padding-top: 30px;
    }
  }
}
</style>
