<template>
  <div class="multilingual_container body_container">
    <a-row :gutter="12">
      <a-col :span="8">
        <a-input-search
          allowClear
          v-model="pager.queryParams.F_code_like"
          :placeholder="$t('请输入编码')"
          @search="querySearch"
        />
      </a-col>
      <a-col
        :span="16"
        align="right"
      >
        <a-space :size="12">
          <a-button
            type="primary"
            icon="import"
            @click="toImport"
            >{{ $t('导入') }}</a-button
          >
          <a-button
            type="primary"
            icon="export"
            :loading="exportLoading"
            @click="toExport"
            >{{ $t('导出') }}</a-button
          >
          <template v-if="$storage.get('SYS_Authority_Disable') == 'false'">
            <a-button
              type="primary"
              icon="profile"
              @click="toBatchSet"
              >{{ $t('批量设置') }}</a-button
            >
          </template>
          <a-button
            type="primary"
            icon="search"
            @click="querySearch"
            >{{ $t('查询') }}</a-button
          >
          <a-button
            type="primary"
            icon="plus"
            @click="toEdit({})"
            >{{ $t('新增') }}</a-button
          >
        </a-space>
      </a-col>
    </a-row>

    <a-tabs
      v-model="pager.queryParams.F_type_eq"
      @change="querySearch"
    >
      <a-tab-pane
        v-for="item in $winexI18n.languageTypes"
        :key="item.value"
        :tab="item.name"
      ></a-tab-pane>
    </a-tabs>

    <a-spin :spinning="loading">
      <div class="table_list">
        <vxe-table
          ref="tableList"
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :checkbox-config="{ checkMethod: checkMethod }"
          :data="dataList"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column
            field="code"
            :title="$t('编码')"
          ></vxe-column>
          <vxe-column
            field="type"
            :title="$t('类型')"
            v-if="false"
          >
            <template #default="{ row }">
              {{ filterType(row.type) }}
            </template>
          </vxe-column>
          <vxe-column
            field="content"
            :title="$t('键值')"
          ></vxe-column>

          <vxe-column
            v-if="false"
            field="status"
            :title="$t('状态')"
          >
            <template #default="{ row }">
              <a-tag
                class="tag_and"
                v-if="row.status == '1'"
                >{{ $t('锁定') }}</a-tag
              >
              <a-tag
                class="tag_entry"
                v-else
                >{{ $t('未锁定') }}</a-tag
              >
            </template>
          </vxe-column>
          <vxe-column
            :title="$t('操作')"
            width="160"
            align="center"
          >
            <template #default="{ row }">
              <a-button
                class="btn"
                type="link"
                @click="toEdit(row)"
                >{{ $t('编辑') }}</a-button
              >
              <a-popconfirm
                :title="$t('确认删除这条内容吗')"
                :ok-text="$t('确定')"
                :cancel-text="$t('取消')"
                @confirm="toDelete(row)"
              >
                <a-button
                  class="btn a_danger"
                  type="link"
                  >{{ $t('删除') }}</a-button
                >
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t('暂无数据') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <!-- 详情 -->
    <detail
      :show.sync="detailInfo.show"
      :info="detailInfo.info"
      @change="getList"
    ></detail>
    <!-- 批量设置 -->
    <batch-translate
      :show.sync="batchInfo.show"
      :type="batchInfo.type"
      @change="getList"
    ></batch-translate>
    <!-- 批量导入 -->
    <batch-import
      :show.sync="importShow"
      @change="getList"
    ></batch-import>
  </div>
</template>
<script>
  const detail = require('./components/detail').default;
  const batchTranslate = require('./components/batchTranslate').default;
  const batchImport = require('./components/batchImport').default;
  const $appService = require('w-vue-basis/src/api/appService');

  export default {
    name: 'multilingual',
    components: {
      detail,
      batchTranslate,
      batchImport,
    },
    computed: {},
    data() {
      return {
        loading: false,
        total: 0,
        pager: {
          pageNum: 1,
          pageSize: 15,
          queryParams: {
            F_code_like: undefined,
            F_type_eq: 'zh_CN',
          },
        },
        dataList: [],
        detailInfo: {
          show: false,
          info: {},
        },
        batchInfo: {
          show: false,
          info: [],
        },
        importShow: false,
        exportLoading: false,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      filterType(val) {
        let item = this.$winexI18n.languageTypes.find((v) => {
          return v.value == val;
        });
        return item ? item.name : $t('未知');
      },
      /**
       * @Author: y_zp
       * @description: 获取列表
       */
      getList() {
        this.loading = true;
        $appService
          .getSysLangList(this.pager)
          .then((req) => {
            this.total = Number(req.count);
            this.dataList = req.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      querySearch() {
        this.pager.pageNum = 1;
        this.getList();
      },
      /**
       * @Author: y_zp
       * @description: 编辑
       */
      toEdit(row) {
        this.detailInfo = {
          show: true,
          info: { ...row },
        };
      },
      /**
       * @Author: y_zp
       * @description: 删除
       */
      toDelete(row) {
        $appService.deleteSysLang(row.id).then((req) => {
          this.$message.success($t('删除成功'));
          this.getList();
        });
      },
      /**
       * @Author: y_zp
       * @description: 批量设置
       */
      toBatchSet() {
        this.batchInfo = {
          show: true,
        };
      },
      /**
       * @Author: y_zp
       * @description: 导入
       */
      toImport() {
        this.importShow = true;
      },
      /**
       * @Author: y_zp
       * @description: 导出
       */
      toExport() {
        this.exportLoading = true;
        $appService
          .getSysLangList({
            pageNum: 1,
            pageSize: 500000,
            queryParams: {
              F_type_eq: this.pager.queryParams.F_type_eq
            }
          })
          .then((req) => {
            let info = req.data;
            let jsonData = {};
            info.forEach(item => {
              jsonData[item.code] = item.content;
            });
            const jsonString = JSON.stringify(jsonData, null, 2);
            const blob = new Blob([jsonString], {type: 'application/json'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = this.pager.queryParams.F_type_eq  + '.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
          }).finally(() => {
            this.exportLoading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 已锁定的需解锁
       */
      checkMethod({ row }) {
        return row.status == '0';
      },
    },
  };
</script>
<style lang="less" scoped>
  .multilingual_container {
    .table_list {
      height: calc(100vh - 270px);
    }
  }
</style>
