<template>
  <el-container>
    <el-row class="main">
      <el-row class="header_bar">
        <span v-if="path">
          当前路径: <el-tag type="">{{path}}</el-tag>
        </span>
        当前语言: <el-tag type="">{{lang}}</el-tag>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row class="header">
            <el-select @change="lang_change" v-model="select_option" placeholder="请选择" size="mini" style="width: 130px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select @change="date_change" v-model="date_option" placeholder="请选择" size="mini" style="width: 130px">
              <el-option
                v-for="item in date_options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button size="mini" type="primary" @click="get_register_str" v-show="register_bool">注册当前页字段</el-button>
            <el-button-group style="float: right">
              <el-button size="mini" type="primary" @click="add_line" v-show="select_option === '0'">新增</el-button>
              <el-button size="mini" type="primary" @click="post_trans_str">保存提交</el-button>
            </el-button-group>
          </el-row>
          <el-row class="body">
            <el-table
              border
              :data="table_data.lang_data"
              style="width: 100%">
              <el-table-column
                label="字段key"
              >
                <template slot-scope="scope">
                  <span v-if="select_option === '1'">{{scope.row.sKey}}</span>
                  <el-input size="mini" v-model="scope.row.sKey" v-else></el-input>
                </template>
              </el-table-column>
              <el-table-column
                :label="'字段value(' + lang + ')'">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.sValue"></el-input>
                </template>
              </el-table-column>
              <el-table-column
              label="时间">
                <template slot-scope="scope">
                  {{scope.row.date}}
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </el-container>
</template>
<script>
  export default {
    inject: ['reload'],
    data() {
      return {
        options: [
          {
            value: '1',
            label: '当前页'
          },
          {
            value: '0',
            label: '通用'
          }
        ],
        date_options: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1week',
            label: '一周内'
          },
          {
            value: '1month',
            label: '一月内'
          },
          {
            value: '1years',
            label: '一年内'
          }
        ],
        date_option: '',
        select_option: '1',
        table_data: {},
        table_data_copy: {},
        common_data: {},
        path: '',
        lang: '',
        register_data: [], // 未注册字段
        register_bool: false,
        exist_data: {} // 已注册字段
      }
    },
    mounted() {
      if (sessionStorage.trans_str) {
        this.register_bool = true
      }
      this.lang = JSON.parse(sessionStorage.user_info).lang
      this.path = localStorage.page_path
      // this.get_register_str()
      this.get_trans_str()
      this.table_data = JSON.parse(JSON.stringify(this.exist_data))
      this.table_data_copy = JSON.parse(JSON.stringify(this.exist_data))
      this.get_common_str()
    },
    methods: {
      // 通用 单页数据切换
      lang_change() {
        switch (this.select_option) {
          case '1':
            this.table_data = JSON.parse(JSON.stringify(this.exist_data))
            this.table_data_copy = JSON.parse(JSON.stringify(this.exist_data))
            break
          case '0':
            this.table_data = JSON.parse(JSON.stringify(this.common_data))
            this.table_data_copy = JSON.parse(JSON.stringify(this.common_data))
            break
        }
      },
      // 时间差值计算
      get_time_interval(d) {
        const now_time = Date.now()
        const stmp = new Date(d).getTime()
        const interval = now_time - stmp
        const day_num = Math.floor(interval / 1000 / 60 / 60 / 24)
        return day_num
      },
      // 时间选择
      date_change() {
        const list = JSON.parse(JSON.stringify(this.table_data_copy.lang_data))
        let filter_list = []
        switch (this.date_option) {
          case '':
            filter_list = list
            break
          case '1week':
            list.map(item => {
              if (this.get_time_interval(item.date) < 7) {
                filter_list.push(item)
              }
            })
            break
          case '1month':
            list.map(item => {
              if (this.get_time_interval(item.date) < 30) {
                filter_list.push(item)
              }
            })
            break
          case '1years':
            list.map(item => {
              if (this.get_time_interval(item.date) < 365) {
                filter_list.push(item)
              }
            })
            break
        }
        this.table_data.lang_data = JSON.parse(JSON.stringify(filter_list))
      },
      // 处理未注册字段
      get_register_str() {
        const str = sessionStorage.trans_str
        if (str) {
          const str_arr = str.split(':')[1].split(',')
          str_arr.map(item => {
            const obj = {
              key: item,
              value: item
            }
            this.register_data.push(obj)
          })
        }
      },
      // 获取通用字段
      get_common_str() {
        const lang = JSON.parse(localStorage.lang)
        const common_lang = lang['common']
        const arr = []
        let lang_data = []
        for (const key in common_lang) {
          const obj = {
            date: common_lang[key].date,
            sKey: key,
            sValue: common_lang[key].sValue
          }
          arr.push(obj)
        }
        lang_data = lang_data.concat(arr)
        this.common_data = {
          path: 'common',
          lang_data: lang_data
        }
      },
      // 获取当前页已注册字段
      get_trans_str() {
        const lang = JSON.parse(localStorage.lang)
        const reg_lang = lang[this.path]
        const arr = []
        let lang_data = []
        for (const key in reg_lang) {
          const obj = {
            date: reg_lang[key].date,
            sKey: key,
            sValue: reg_lang[key].sValue
          }
          arr.push(obj)
        }
        lang_data = lang_data.concat(arr)
        this.exist_data = {
          path: this.path,
          lang_data: lang_data
        }
      },
      // 新增一行数据
      add_line() {
        this.table_data.lang_data.push({ sKey: '', sValue: '' })
      },
      // 获取语言包
      get_lang_data() {
        this.$API.get('mesAPI/pb_resource/query_list/').then(res => {
          localStorage.lang = JSON.stringify(res.data)
          this.reload()
        })
      },
      // 查找修改属性
      get_post_data(arr1, arr2) {
        const arr = []
        arr1.forEach(item1 => {
          let isExist = false
          arr2.forEach(item2 => {
            if (item1.sValue === item2.sValue) {
              isExist = true
              return
            }
          })
          if (!isExist) {
            arr.push(item1)
          }
        })
        return arr
      }
    }
  }
</script>
<style scoped>
  .main {
    width: 100%;border: 1px solid #dcdfe6;margin-bottom: 10px;
  }
  .header_bar {
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
  }
  .header {
    padding: 10px;border-bottom: 1px solid #dcdfe6
  }
  .body {
    padding: 10px 10px 20px 10px
  }
</style>
