<template>
  <div class="obpm-excelConf">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t("excelconf.title")}}</div>
      </div>
      <div class="bar d-inline-block float-right" v-if="type=='list'">
        <el-button type="primary" size="small" @click='addNew'>{{$t("btns.add")}}</el-button>
        <el-button type="danger" plain size="small" @click="remove" >{{$t("btns.delete")}}</el-button>
      </div>
      <div class="bar d-inline-block float-right" v-if="type=='detail'">
        <el-button type="primary" size="small" @click='onSave'>{{$t("btns.save")}}</el-button>
        <el-button size="small" @click="onExit">{{$t("btns.exit")}}</el-button>
      </div>
    </div>
    <publicTable ref="publictable" 
      @onRowClick='onRowClick' 
      @handleSelectionChange='handleSelectionChange'
      @handleSizeChange='handleSizeChange'
      @handleCurrentChange='handleCurrentChange'
      @updataParams='updataParams'
      @getData='getExcelConftions'
      v-if="type=='list'"
    ></publicTable>
    <div v-else>
      <iframe
        ref="excelConfig"
        :src="src"
        width="100%"
        :height="iframeHeight"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
import { getExcelConfList,deleteExcelConfList } from "@/service/AdvancedToolAPI.js";
import {getContextPath} from "@/service/ModulesApi.js";
import publicTable from "@/components/Common/publicTable.vue";
import {delMsg} from '@/utils/elementui'
export default {
  name: "excelConf",
  data () {
    return {
      tableHeight: "100",
      params: {
        id: "",
        inputName: "",
        currpage: 1,
        pagelines: 10
      },
      multipleSelection: [],   //将获取选中的数组放进去
      contextPath:getContextPath(),
      src:`./excelHtml/excelHtmlTem.html?contextPath=${getContextPath()}`,
      iframeHeight:400,
      type:'list',
      row:null,
      tableData:{params:[{name:'inputName',label:this.$t('label.name'),value:""}]},

    }
  },
  
  components:{
    publicTable,
  },
  mounted(){
    this.getScollerHeight();
    this.getExcelConftions();
  },
  methods:{
    //更新参数
    updataParams(obj){
      Object.assign(this.params,obj)
    },
    //添加
    addNew(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('label.import_config'), url: "application/application_info_advancedTools_excelConf_info_help.html" });
      this.type='detail';
      this.src+=`&application=${sessionStorage.getItem("appId")}&excelConfigId=`
    },
    /**
     * 保存
     */
    onSave(){
      this.$refs.excelConfig.contentWindow.document.getElementById("save_btn").click();
      
    },
    //退出
    onExit(){
      this.type='list';
      this.getExcelConftions();
    },
    /**
     * 点击数据
     */
    onRowClick(row){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('label.import_config'), url: "application/application_info_advancedTools_excelConf_info_help.html" });
      this.type='detail';
      this.src+=`&application=${sessionStorage.getItem("appId")}&excelConfigId=${row.id}`
    },
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 32分页
        this.tableData.tableHeight = (clientHeight - 60 - 32 - 41 - 40 - 50 - 71 - 20 - 40) + 'px';
        this.$nextTick(() => {
          if(this.$refs.publictable)
            this.$refs.publictable.init(this.tableData);
        })
        this.iframeHeight= (clientHeight - 60 - 32 - 41 - 40);
      }, 100)
    },
    /**
     *  获取Excel列表的数据
     */
    async getExcelConftions(){
      let appId = sessionStorage.getItem("appId");
      const response = await getExcelConfList(this.params, appId)
      if (response.data.errcode == 0) {
        let data = response.data.data;
        this.tableData.columns=[{prop:'name',label:this.$t('excelconf.name')}];
        this.tableData.data=data;
        this.$nextTick(() => { 
          if(this.$refs.publictable)
            this.$refs.publictable.init(this.tableData);
        })
      }
    },
    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let params = {
        ...this.params,
        currpage: val
      }
      this.params = params;
      this.getExcelConftions()
    },

    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val){
      let params = {
        ...this.params,
        pagelines: val
      }
      this.params = params;
      this.getExcelConftions()
    },
    /**
     * selectInputName
     * 名称查询
     */
    selectInputName(){
      this.getExcelConftions();
      
    },
    /**
     * 获取选中的表格数据
     */
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    /**
     * 移除
     */
    async remove(){
      let selectData = this.multipleSelection;
      let data = [];
      for(let i=0;i<selectData.length;i++){
        data.push(selectData[i].id);
      }
      if(data.length > 0){
        try{
          await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
          const response = await deleteExcelConfList(data)
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.remove_ss'));
            this.getExcelConftions();
          }
        }catch(e){
          console.log(e)
        }
      }else{
        this.$message.error(this.$t('msg.check_data'))
      }
    },
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>