<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">EIP(α)</div>
      </div>
      <div class="bar d-inline-block float-right" v-if="type == 'list'">
        <el-button type="primary" size="small" @click="addNew">{{
          $t('btns.new')
        }}</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="showCode">{{$t('btns.showcode')}}</el-button>
        <el-button type="primary" size="small" @click="onSave" :loading="btnLoading">{{
          $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="getEipList"
      v-if="type == 'list'"
    ></publicTable>
    <div v-else>
      <!-- 嵌入iframe -->
      <iframe
        id="camelIframe"
        ref="camelDetail"
        :src="src"
        width="100%"
        :height="iframeHeight"
        frameborder="0"
        :style="iframeStyle"
      ></iframe>
    </div>
  </div>
</template>
<script>
import {
  getEipList,
  deleteEipList,
  updataEip,
  createEip,
} from '@/service/AdvancedToolAPI.js'
import { getContextPath } from '@/service/ModulesApi.js'
import publicTable from '@/components/Common/publicTable.vue'
import { nameCheck } from '@/utils/utils.js'
import {delMsg} from '@/utils/elementui'

export default {
  name: 'excelConf',
  data() {
    return {
      tableHeight: '100',
      src: '',
      iframeHeight: 400,
      iframeStyle: '', //iframe全屏样式
      params: {
        id: '',
        inputName: '',
        currpage: '',
        pagelines: '',
      },
      multipleSelection: [], //将获取选中的数组放进去
      type: 'list',
      row: null,
      tableData: { params: [{ name: 'inputName', label: this.$t('label.name'), value: '' }] },
      detail: {
        id: '',
        name: '',
        xml: '',
        description: '',
      },
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: 'blur' },
        ],
      },
      appId: sessionStorage.getItem('appId'),
      btnLoading: false, // 按钮显示加载图标
    }
  },

  components: {
    publicTable,
  },
  mounted() {
    this.getScollerHeight()
    this.getEipList()
  },
  methods: {
    /**
     * 显示源代码
     */
    showCode(){
      this.$refs.camelDetail.contentWindow.document.getElementById("showCode").click()
    },
    //更新参数
    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 = `./camelHtml/dist/index.html?contextPath=${getContextPath()}&appId=${
        this.appId
      }`
    },
    /**
     * 保存
     */
    async onSave() {
      this.$refs.camelDetail.contentWindow.document.getElementById("save_btn").click();
      console.log(window.camelData)
      this.detail = {
        ...this.detail,
        name: window.camelData.name,
        description: window.camelData.description,
        xml: window.camelData.xml
      }
      if (this.detail.id != '') {
        this.btnLoading = true
        const response = await updataEip(this.detail, this.detail.id, this.appId)
        this.btnLoading = false
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.ss'))
        }
      } else {
        this.btnLoading = true
        const response = await createEip(this.detail, this.appId)
        this.btnLoading = false
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.ss'))
          this.detail.id = response.data.id
        }
      }
    },
    //退出
    onExit() {
      this.type = 'list'
      this.getEipList()
      this.detail = {
        id: '',
        name: '',
        xml: '',
        description: '',
      }
    },
    /**
     * 点击数据
     */
    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.detail = row
      this.src = `./camelHtml/dist/index.html?contextPath=${getContextPath()}&appId=${
        this.appId
      }&eipId=${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.$refs.publictable.init(this.tableData)
        this.iframeHeight = clientHeight - 60 - 32 - 41 - 50 - 40 // 8: 删除画布内容会错位
      }, 100)
    },
    /**
     *  获取Excel列表的数据
     */
    async getEipList() {
      const response = await getEipList(this.params, this.appId)
      if (response.data.errcode == 0) {
        let data = response.data.data
        this.tableData.columns = [
          { prop: 'name', label: this.$t('eip.name') },
        ]
        this.tableData.data = data
        this.$refs.publictable.init(this.tableData)
      }
    },
    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let params = {
        ...this.params,
        currpage: val,
      }
      this.params = params
    },

    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val) {
      let params = {
        ...this.params,
        pagelines: val,
      }
      this.params = params
    },
    /**
     * selectInputName
     * 名称查询
     */
    selectInputName() {
      this.getEipList()
    },
    /**
     * 获取选中的表格数据
     */
    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 deleteEipList(data)
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.remove_ss'))
            this.getEipList()
          }
        }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>