<template>
  <div>
    <!-- 第一层弹窗 -->
    <el-dialog :title="$t('multilanguage.select_title')" :visible.sync="multiVisible" width="40%" top="40px" :before-close="closeMultiLanguage" :append-to-body="isNested">
      <div class="obpm-main mt-3">
        <div id="contentTable" class="dialog-content">
          <el-form :model="multForm" size="mini" ref="multRuleFrom">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="label">
                  <el-input class="controlWidth" v-model="multForm.label" @change="queryMultData()" @clear="resetApplictions" clearable :placeholder="$t('placeholder.label')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="text">
                  <el-input
                    class="controlWidth"
                    :placeholder="$t('placeholder.text')"
                    v-model="multForm.text"
                    @change="queryMultData()"
                    @clear="resetApplictions"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="type">
                  <el-select
                    class="controlWidth"
                    v-model="multForm.type"
                    :placeholder="$t('placeholder.select_type')"
                    @change="queryMultData()"
                    @clear="resetApplictions"
                    clearable
                  >
                    <el-option label="English" value="1"></el-option>
                    <el-option label="简体中文" value="2"></el-option>
                    <el-option label="繁體中文" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button @click="queryMultData" type="primary" plain>{{$t("btns.query")}}</el-button>
                  <el-button @click="resetField">{{$t("btns.reset")}}</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            
            
          </el-form>
          <!-- 表格 -->
          <el-table ref="multipleTable" :data="languageData.data" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="label" :label="$t('multilanguage.label')">
              <template slot-scope="scope">
                <el-link :style="{ color: '#66b1ff' }" @click="handleClick(scope.row)" :underline="false">{{ scope.row.label }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="text" :label="$t('multilanguage.text')"></el-table-column>
            <el-table-column prop="language" :label="$t('multilanguage.type')"></el-table-column>
            <el-table-column :label="$t('multilanguage.edit')">
              <template slot-scope="scope">
                <el-link :style="{ color: '#66b1ff' }" @click="showEditMultDialog(scope.row)" :underline="false">{{$t('multilanguage.edit')}}</el-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 页码 -->
          <div style="text-align: right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="languageData.pageNo"
              :page-sizes="[10, 25, 50, 100]"
              :page-size="10"
              background
              layout="total, prev, pager, next, sizes"
              :total="languageData.rowCount"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer"  class="bar d-inline-block float-right">
        <el-button size="small" @click="resetMultiLanguage">{{$t('btns.clean')}}</el-button>
        <el-button type="danger" plain size="small" @click="removeMultiLanguage">{{$t("btns.delete")}}</el-button>
      </div>
    </el-dialog>

    <!-- 第二层弹窗 -->
    <el-dialog :title="$t('multilanguage.select_title')" :visible.sync="editMultDialog" width="45%" append-to-body @close="logoutEditDiolag('editMultFrom')">
      <el-form label-width="60px" :model="editForm" size="small" ref="editMultFrom" :rules="editMultRules">
        <el-form-item :label="$t('multilanguage.label')" prop="label">
          <el-input v-model="editForm.label"></el-input>
        </el-form-item>
        <el-form-item :label="$t('multilanguage.text')" prop="text">
          <el-input v-model="editForm.text"></el-input>
        </el-form-item>
        <el-form-item :label="$t('multilanguage.type')" prop="language">
          <el-select v-model="editForm.language">
            <el-option label="English" value="1"></el-option>
            <el-option label="简体中文" value="2"></el-option>
            <el-option label="繁體中文" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"  class="bar d-inline-block float-right">
        <el-button @click="logoutEditDiolag('editMultFrom')" size="small">{{$t("btns.exit")}}</el-button>
        <el-button type="primary" plain @click="saveNewLanguage('editMultFrom')" size="small">{{$t("btns.save")}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {  editgetMultiLanguage, saveEditMultiLanguage } from "@/service/MultiLanguageAPI.js";
import {spaceCheck} from "@/utils/utils.js";
export default {
  data() {
    return {
      multForm: {
        label: "", // 标签
        text: "", // 文本
        type: "", // 类型
      },
      editMultDialog: false,
      editForm: {}, // 编辑内容
      params: {
        id: "",
        label:'',
        text:'',
        type:'',
        currpage: 1,
        pagelines: 10,
      },
      multiChecked: [], //选中的复选框
      editMultRules: {
        label: [
          { required: true, message: this.$t('msg.name_notnull'), trigger: "blur" },
          { validator: spaceCheck, trigger: "blur" },
          ],
        text: [
          { required: true, message: this.$t('msg.content_notempty'), trigger: "blur" },
          { validator: spaceCheck, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //重置查询条件
    resetField(){
      this.multForm= {
        label: "", // 标签
        text: "", // 文本
        type: "", // 类型
      }
      this.queryMultData();
    },
    /**
     * 点击标签选中值
     */
    handleClick(row) {
      this.$emit("selectRowValue", row);
      this.$emit("closeMultiLanguage");
    },
    /**
     * 删除多语言
     */
    removeMultiLanguage() {
      if (this.multiChecked.length === 0) {
        this.$message.error(this.$t('msg.least_one'))
      } else {
        let arr = [];
        this.multiChecked.forEach((item) => {
          arr.push(item.id);
        });
        this.$emit('delMultiLanguage', arr)
      }
    },
    /**
     * 复选框选中的值
     */
    handleSelectionChange(val) {
      this.multiChecked = val;
    },
    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val) {
      let params = {
        ...this.params,
        pagelines: val,
      };
      this.$emit('changeLanguageParams', params)
    },

    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let params = {
        ...this.params,
        currpage: val,
      };
      this.$emit('changeLanguageParams', params)
    },
    /**
     * 查询
     */
    queryMultData() {
      let params = {
        ...this.params,
        ...this.multForm,
      };
      this.$emit('changeLanguageParams', params)
    },
    /**
     * 重置查询
     */
    resetApplictions() {
      let params = {
        ...this.params,
        label:'',
        text:'',
        type:'',
      };
      this.$emit('changeLanguageParams', params)
    },

    /**
     * 多语言的编辑弹框
     */
    showEditMultDialog(row) {
      this.getMultiLanguageDetail(row.id);
      // 发送请求
      setTimeout(() => {
        this.$emit("closeMultiLanguage");
        this.editMultDialog = true;
      }, 200);
    },
    /**
     * 第二层弹框退出
     */
    logoutEditDiolag(formName) {
      this.editForm = {
        id: "",
        label: "", // 标签
        text: "", // 文本
        type: "", // 类型
        language: "",
      };
      this.$refs[formName].resetFields();
      setTimeout(() => {
        this.editMultDialog = false;
        this.$emit("showMultiVisible");
      }, 200);
    },

    /**
     * 保存更新成功
     */
    saveNewLanguage(formName) {
      let that=this;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            ...this.editForm,
            parentId: sessionStorage.getItem("appId"),
            type: parseInt(this.editForm.language) || this.editForm.type,
            language: "",
          };
          const response = await saveEditMultiLanguage(params);
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.ss'));
            setTimeout(() => {
              that.editMultDialog = false;
              that.$emit("showMultiVisible");
            }, 600);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 关闭第一层多语言弹框
     */
    closeMultiLanguage() {
      this.$emit("closeMultiLanguage");
      this.multiChecked = [];
      this.$refs.multipleTable.clearSelection();
      this.multForm = {
        label: "", // 标签
        text: "", // 文本
        type: "", // 类型
      };
    },

    /**
     * 重置多语言的数据
     */
    resetMultiLanguage(){
      this.$emit("closeMultiLanguage");
      this.$emit("resetMultiLanguage")
    },
    
    /**
     * 获取多语言详情
     */
    async getMultiLanguageDetail(languageId) {
      const response = await editgetMultiLanguage(languageId);
      if (response.data.errcode == 0) {
        let obj = response.data.data;
        if (obj.type == 1) {
          obj.language = "English";
        } else if (obj.type == 2) {
          obj.language = "简体中文";
        } else if (obj.type == 3) {
          obj.language = "繁體中文";
        }
        this.editForm = obj;
      }
    },
  },
  props: {
    multiVisible: Boolean,
    isNested: {
      type: Boolean,
      default: false,
    },
    languageData: Object
  },
};
</script>
