<!-- 系统配置 - 统一翻译 -->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="inputbox">
      <div>{{ '名称' }}</div>
      <div class="theinput">
        <el-input
          clearable
          class="input-with-select"
          v-model="queryParams.name"
        >
        </el-input>
      </div>
      <div class="theinput2" style="display: flex">
        <div style="margin: 0 10px 0 40px">{{ '语言' }}</div>
        <el-select
          clearable
          v-model="queryParams.languagesValue"
          slot="append"
          placeholder=""
        >
          <el-option
            v-for="item in yuzhongList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div>
        <el-button class="my_search" @click="gettransactionList">
          {{ '搜索' }}</el-button
        >
        <el-button class="my_reset" @click="reClear">
          {{ '重置' }}</el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <!-- <el-button size="small" class="thebtn1">{{'添加'}}</el-button> -->
          <el-button
            size="mini"
            class="thebtn3"
            v-hasPermi="['delivery:fhexpress:import']"
            @click="handleImport"
            v-has-buttons="['TranslateImport']"
          >
            {{ '导入' }}</el-button
          >
          <el-button
            size="small"
            class="thebtn2"
            @click="handleExport"
            v-has-buttons="['TranslateExport']"
          >
            {{ '导出' }}</el-button
          >
          <el-button size="small" class="thebtn1" @click="handleExport2">
            {{ '下载模板' }}</el-button
          >
        </div>
      </div>
      <div class="maintable">
        <el-table
          :data="tableData"
          v-loading="loading"
          height="700px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            prop="chinese"
            :label="$t('MN_F_T_467')"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.chinese"
                :disabled="!scope.row.ifupdate"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="30" label=""> </el-table-column>
          <el-table-column
            align="center"
            prop="traditional"
            :label="'繁体中文'"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.traditional"
                :disabled="!scope.row.ifupdate"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="30" label=""> </el-table-column>

          <el-table-column
            align="center"
            prop="english"
            :label="'英文'"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.english"
                :disabled="!scope.row.ifupdate"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="30" label=""> </el-table-column>

          <el-table-column
            align="center"
            prop="russian"
            :label="'俄文'"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.russian"
                :disabled="!scope.row.ifupdate"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="30" label=""> </el-table-column>

          <el-table-column
            align="center"
            prop="kazakh"
            :label="'哈萨克斯坦文'"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.kazakh"
                :disabled="!scope.row.ifupdate"
              ></el-input>
            </template>
          </el-table-column>
          <!--          <el-table-column align="center" prop="french" label="法文">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input-->
          <!--                v-model="scope.row.french"-->
          <!--                :disabled="!scope.row.ifupdate"-->
          <!--              ></el-input>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column align="center" prop="portuguese" label="葡萄牙语">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input-->
          <!--                v-model="scope.row.portuguese"-->
          <!--                :disabled="!scope.row.ifupdate"-->
          <!--              ></el-input>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column align="center" prop="spanish" label="西班牙语">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input-->
          <!--                v-model="scope.row.spanish"-->
          <!--                :disabled="!scope.row.ifupdate"-->
          <!--              ></el-input>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column align="center" prop="arabic" label="阿拉伯语">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input-->
          <!--                v-model="scope.row.arabic"-->
          <!--                :disabled="!scope.row.ifupdate"-->
          <!--              ></el-input>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="center" prop="" label=""> </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                style="color: #6962f6"
                @click="clickup(scope.row)"
                type="text"
                size="small"
                v-if="!scope.row.ifupdate"
              >
                {{ '修改' }}
              </el-button>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.ifupdate"
                style="color: red"
                @click.native.prevent="update(scope.row, tableData)"
                >{{ '确定' }}</el-button
              >
              <!-- <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
                style="color: #c73030"
              >
                删除
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="gettransactionList"
    />
    <el-dialog
      :title="upload.title"
      :close-on-click-modal="false"
      :visible.sync="upload.open"
      width="600px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-exceed="handleExceed"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          {{ '将文件拖到此处，或' }}
          <em>{{ '点击上传' }}</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size: 12px" @click="importTemplate">
            {{ '下载模板' }}</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          {{ '提示：仅允许导入“xls”或“xlsx”格式文件！' }}
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">{{
          '确认'
        }}</el-button>
        <el-button @click="upload.open = false">{{
          '取消'
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import { getToken } from "@/utils/auth";
import FileUpload from "@/components/FileUpload";
import {
  gettransactionList,
  getLanguagesList,
  updateTransaction,
} from "@/api/translate";
export default {
  name: "Tyfy",
  components: {
    FileUpload,
    topBar,
  },
  data() {
    return {
      moren: "tyfy",
      topList: [
        {
          name: '统一翻译',
          path: "tyfy",
        },
      ],
      tableData: [],
      loading:false,
      yuzhongList: [], //语种列表
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        name: "",
        languagesValue: "",
      },
      total: 0,
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          "/system/manage/transaction/importData",
      },
    };
  },
  created() {
    this.gettransactionList();
    this.getLanguagesList();
  },
  methods: {
    //重置
    reClear() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        name: "",
        languagesValue: "",
      };
    },
    //点击单行内修改
    clickup(row) {
      row.ifupdate = !row.ifupdate;
    },
    //确定修改
    update(row) {
      row.ifupdate = !row.ifupdate;
      updateTransaction(row).then((res) => {
        console.log("🌈", res);
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '翻译导入';
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      // importDeliveryTemplate().then(response => {
      //   this.download(response.msg);
      // });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      var fileName = response.fileName;
      if (fileName != undefined && fileName != "") {
        // 读取已上传的excel文件
        readExcel(fileName, this.iids).then((response) => {
          this.orderList = response;
        });
      }
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, '导入结果', {
        dangerouslyUseHTMLString: true,
      });
      this.getList();
    },
    // 上传文件数量超出后的动作
    handleExceed() {
      this.upload.isUploading = false;
      this.msgInfo('仅可上传一个文件哦');
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //获取统一翻译列表
    gettransactionList() {
      this.loading = true
      gettransactionList(this.queryParams).then((res) => {
        this.loading = false
        res.rows.forEach((element) => {
          element.ifupdate = false;
        });
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    //获取语种下拉列表
    getLanguagesList() {
      getLanguagesList().then((res) => {
        this.yuzhongList = res.data;
      });
    },

    //导出
    handleExport() {
      this.download(
        "/system/manage/transaction/export",
        {
          ...this.queryParams,
        },
        `${'统一翻译'}${new Date().getTime()}.xlsx`
      );

      // const queryParams = this.queryParams;
      // this.$confirm('是否确认导出所有数据项?', '警告', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: "warning",
      // })
      //   .then(function () {
      //     // return exportTranslateData(queryParams);
      //   })
      //   .then((response) => {
      //     this.download(response.msg);
      //   });
    },
    //下载模板
    handleExport2() {
      this.download(
        "/system/manage/transaction/download",
        {
          ...this.queryParams,
        },
        `${'统一翻译'}${new Date().getTime()}.xlsx`
      );
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #333;
  background: rgb(0, 0, 0, 0.1) !important;
}
::v-deep .theinput2 .el-input__icon {
  font-size: 16px;
  margin-top: 4px;
  color: #000 !important;
}
::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.page {
  background: #f9f9f9;
  font-size: 14px;
  padding: 20px;
  .inputbox {
    background: #ffffff;
    padding: 10px 20px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    .theinput {
      margin-left: 6px;
      width: 500px;
    }
    .theinput2 {
      margin-right: 40px;
      line-height: 30px;
    }
    .thebtn {
      width: 68px;
      border-radius: 4px;
    }
    .btn1 {
      color: #ffffff;
      background: #c8161d;
    }
  }
  .main {
    .maintop {
      display: flex;
      // padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          background: #009b58;
          color: #ffffff;
          border-radius: 4px;
        }
        .thebtn2 {
          background: #ffad41;
          color: #ffffff;
          border-radius: 4px;
        }
        .thebtn3 {
          background: #ff6723;
          color: #ffffff;
          border-radius: 4px;
        }
      }
    }
    .maintable {
      //max-height: 550px;
      overflow: auto;
    }
  }
}
</style>
