<template>
  <div id="app" style="position: relative">
    <router-view />
    <div v-show="show" v-if="$route.matched.length > 0" v-adaptive @click="openI18n" style="
        position: fixed;
        bottom: 50px;
        left: 50px;
        z-index: 100000;
        width: 50px;
        height: 50px;
        background: #409eff88;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      ">
      i18n
    </div>
    <el-drawer :title="$t('il8n:title')" :visible.sync="drawer" direction="rtl" size="80%">
      <div style="width: 800px">
        <el-form label-width="100px" @submit.native.prevent size="small" :inline="true" class="demo-form-inline">
          <el-form-item :label="$t('il8n:search:keyword')">
            <el-input v-model="key" @input="keyChange" />
          </el-form-item>
          <el-form-item :label="$t('il8n:search:state')">
            <el-select v-model="State" clearable filterable @change="handleStateChange">
              <el-option v-for="item of $d.InternationalizationKeyState"
                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" v-adaptive="{ bottomOffset: 50 }" height="100" style="width: 100%"
        @sort-change="handleSortByColumn">
        <el-table-column prop="Code" :label="$t('il8n:table:label')" width="300" show-overflow-tooltip
          sortable="custom">
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="Description"-->
        <!--          label="路由"-->
        <!--          show-overflow-tooltip-->
        <!--          width="180">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{scope.row.Description}}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="Value" :label="$t('il8n:table:en')" sortable="custom">
          <template slot-scope="scope">
            <el-input v-model="scope.row.Value" @input="
              (e) => {
                $set(scope.row, 'Value', e)
              }
            " size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ValueCN" :label="$t('il8n:table:cn')" sortable="custom">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ValueCN" @input="
              (e) => {
                $set(scope.row, 'ValueCN', e)
              }
            " size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
          <template slot-scope="scope">
            <el-select v-model="scope.row.State" clearable filterable size="mini">
              <el-option v-for="item of $d.InternationalizationKeyState"
                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="Version" :label="$t('il8n:table:Version')" sortable="custom">
        </el-table-column>
      </el-table>
      <div style="text-align: right; padding-top: 10px; padding-right: 10px">
        <el-button size="mini" @click="drawer = false">{{ $t('common:button:cancel') }}
        </el-button>
        <el-button size="mini" type="primary" @click="handleSave">{{
          $t('common:button:save')
        }}</el-button>
      </div>
    </el-drawer>
    <feedBack v-if="$route.matched.length > 0" />
    <!-- <timeTag /> -->
  </div>
</template>

<script>
import {
  batchAddOrUpdateFrontInternationalization,
  getFrontInternationalizationList,
} from '@/api/dictionary/dictionary'
import { getTrialExtralConfig } from '@/api/trials'
import feedBack from '@/views/trials/trials-layout/components/feedBack'
// import timeTag from '@/components/timeTag'
import Vue from 'vue'
import i18n from './lang'
export default {
  name: 'App',
  components: {
    feedBack,
    // timeTag
  },
  data() {
    return {
      drawer: false,
      tableData: [],
      show: false,
      key: null,
      arr: [],
      il8nExternal: false,
      State: null,
    }
  },
  mounted() {
    this.show = process.env.VUE_APP_OSS_PATH === '/test/dist'
    Vue.prototype.$openI18n = this.openI18n
  },
  // watch: {
  //   '$route.query': {
  //     async handler() {
  //       if (!this.$route.query.trialId) {
  //         this.$store.dispatch('trials/setConfig', {})
  //       }
  //       if (
  //         this.$route.query.trialId &&
  //         this.$route.query.trialId !==
  //           this.$store.state.trials.config.trialId &&
  //         this.$store.state.trials.whiteList.indexOf(this.$route.path) === -1
  //       ) {
  //         let res = await getTrialExtralConfig({
  //           TrialId: this.$route.query.trialId,
  //         })
  //         console.log(222222222222)
  //         res.Result.aa = { 阅片人: '采集人', 申办方: 'aaa' }
  //         if (res.IsSuccess) {
  //           this.$store.dispatch('trials/setConfig', {
  //             trialId: this.$route.query.trialId,
  //             ...res.Result,
  //           })
  //         }
  //       }
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },
  methods: {
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.tableData.sort((a, b) =>
          a[column.prop].localeCompare(b[column.prop])
        )
      } else {
        this.tableData.sort((a, b) =>
          b[column.prop].localeCompare(a[column.prop])
        )
      }
    },
    handleStateChange() {
      this.tableData.forEach((item) => {
        item.State = this.State
      })
    },
    changeValue(target, attr, e) {
      this.$set(target, attr, e)
    },
    keyChange(v) {
      if (this.key) {
        this.tableData = Object.assign(
          [],
          this.arr.filter(
            (v) =>
              (v.Code &&
                ~v.Code.toLowerCase().indexOf(this.key.toLowerCase())) ||
              (v.Value &&
                ~v.Value.toLowerCase().indexOf(this.key.toLowerCase())) ||
              (v.ValueCN &&
                ~v.ValueCN.toLowerCase().indexOf(this.key.toLowerCase()))
          )
        )
      } else {
        this.tableData = Object.assign([], this.arr)
      }
    },
    handleSave() {
      this.$confirm(this.$t("i18n:confirm:updatei18n"))
        .then(() => {
          batchAddOrUpdateFrontInternationalization(this.tableData).then(
            async (res) => {
              var zhMessages = {},
                enMessages = {}
              var Internationalization =
                await getFrontInternationalizationList()
              Vue.prototype.$tl = Internationalization.Result
              this.tableData.forEach((v) => {
                // zhMessages[v.Description + '_' + v.Code] = v.ValueCN
                // enMessages[v.Description + '_' + v.Code] = v.Value
                zhMessages[v.Code] = v.ValueCN
                enMessages[v.Code] = v.Value
              })
              i18n.mergeLocaleMessage('zh', zhMessages)
              i18n.mergeLocaleMessage('en', enMessages)
              this.drawer = false
              this.$message.success(this.$t("i18n:message:updatei18nSuccessfully"))
              if (this.il8nExternal) {
                this.$EventBus.$emit('il8nUpdate')
              }
            }
          )
        })
        .catch((err) => {
          console.log(err)
        })
    },
    openI18n(ARRAY) {
      this.tableData = []
      this.il8nExternal = false
      this.State = null
      this.key = null
      this.drawer = true
      let arr = []
      let tableData = []
      if (ARRAY && Array.isArray(ARRAY)) {
        this.il8nExternal = true
        let data = ARRAY.map((v) => {
          let a = { ...v }

          return a
        })
        tableData = data.map((item) => {
          return {
            Code: item.Code,
            Description: item.Description,
            FrontType: item.FrontType,
            Module: item.Module,
            Value: item.Value,
            ValueCN: item.ValueCN,
            State: item.State,
            Version: item.Version,
            InternationalizationType: item.InternationalizationType,
          }
        })
        this.tableData = Object.assign([], tableData)
        this.arr = Object.assign([], tableData)
        return false
      } else {
        tableData = this.$tl.map((v) => {
          let a = { ...v }
          // if (!a.Description) {
          //   a.Description = this.$route.path
          // }
          return a
        })
      }
      tableData = tableData.filter((v) => {
        // return  ~this.$path.indexOf(v.Description + '_' + v.Code)
        return ~this.$path.indexOf(v.Code)
      })
      this.$path.forEach((v) => {
        let o = tableData.find((a) => {
          return a.Code === v
        })
        if (o) {
          arr.push(o)
        } else {
          arr.push({
            Code: v,
            Description: null,
            Value: null,
            ValueCN: null,
            State: 0,
            Version: this.$version.Version,
            InternationalizationType: 0,
          })
        }
      })
      this.arr = arr
      if (this.key) {
        this.tableData = Object.assign(
          [],
          this.arr.filter(
            (v) =>
              ~v.Code.indexOf(this.key) ||
              ~v.Value.indexOf(this.key) ||
              ~v.ValueCN.indexOf(this.key)
          )
        )
      } else {
        this.tableData = Object.assign([], this.arr)
      }
      // console.log(JSON.stringify(this.$path))
      // console.log(JSON.stringify(this.tableData))
    },
  },
}
</script>

<style lang="scss">
$light_gray: #606266;

.el-tooltip__popper {
  max-width: 400px;
}

.my_multiple {
  .el-input--medium .el-input__inner {
    height: 36px !important;
  }

  .el-select__tags {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input[type='number'] {
  -moz-appearance: textfield !important;
}

.viewer-fixed.viewer-container {
  z-index: 10000;
}

textarea {
  white-space: break-spaces;
  word-break: normal;
}

* {
  word-break: normal !important;
}

.box-body .el-button.is-circle:not(.is-disabled) i:before {
  color: #428bca;
}

.box-body .el-button.is-circle i.el-icon-question:before {
  color: #fff;
}

.system-title {
  font-size: 35px;
  color: $light_gray;
  text-align: center;
  font-weight: bold;
  font-family: 'Times New Roman';
  text-shadow: 1px 0.5px 1.5px #666;
}

.title-logo {
  height: 40px;
}

.title-logo {
  height: 40px;
}
</style>
