<template>
  <div>
    <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("view.view_title") }}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" plain size="small" @click="copyView">{{ $t("btns.copy") }}</el-button>
        <el-button type="primary" size="small" @click="addView">{{ $t("btns.new") }}</el-button>
        <el-button type="danger" plain size="small" @click="showDeleteConfirm">{{ $t("btns.delete") }}</el-button>
      </div>
    </div>
    <div class="obpm-content mt-2">
      <div class="search">
        <el-form ref="form" :inline="true" :model="searchParams" class="demo-form-inline" size="mini" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="searchParams.searchword" :placeholder="$t('placeholder.name')" @keyup.enter.native="getViewList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getViewList" type="primary" plain>{{ $t("btns.query") }}</el-button>
            <el-button @click="resetName">{{ $t("btns.reset") }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="obpm-content-table">
        <template>
          <el-table ref="tableList" :data="data.datas" size="small" @selection-change="handleSelectionChange" @cell-click="onRowClick" :height="tableHeight" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" :label="$t('view.name')"> </el-table-column>
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column prop="description" :label="$t('view.description')"> </el-table-column>
          </el-table>
        </template>
        <el-pagination
          class="text-right pt-1"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNo"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="10"
          background
          layout="total, prev, pager, next, sizes"
          :total="data.pageCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getModuleViewList, deleteModuleView, copyView } from "@/service/ViewApi.js"
import viewDetail from "@/components/Modules/View.vue"
import { delMsg } from "@/utils/elementui"
export default {
  name: "viewlist",
  components: {
    viewDetail,
  },
  data() {
    return {
      searchParams: {
        appId: "",
        moduleId: "",
        searchword: "",
        pageNo: 1,
        linesPerPage: 10,
      },
      params: {
        id: "",
        name: "",
        description: "",
        pagination: true,
        linesPerPage: 10,
        showTotalRow: true,
        refresh: true,
        readonly: true,
        relatedMap: "",
        displayType: "",
        showWaterMark: true,
        waterMarkScript: "",
        searchFormId: "",
        styleId: "",
        relatedForm: "",
        templateForm: "",
        permissionType: "",
        filterScript: "",
        sqlFilterScript: "",
        procedureFilterScript: "",
        filterCondition: "",
        commonFilterCondition: "",
        authorityCondition: "",
        openType: "",
        editMode: "",
      },
      data: {},
      multipleSelectionId: [],
      multipleSelectionArray: [],
      tableHeight: 100,
    }
  },

  mounted() {
    this.getScollerHeight()
    let appId = sessionStorage.getItem("appId")
    let moduleId = this.$route.query.moduleId
    let searchParams = {
      ...this.searchParams,
      appId: appId,
      moduleId: moduleId,
    }

    this.searchParams = searchParams
    this.getViewList()
  },

  methods: {
    //给form改变formVisible用
    changeviewVisible() {
      this.getViewList()
    },
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        //60 头部， 32 面包屑， 41 第一层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页
        this.tableHeight = clientHeight - 60 - 32 - 41 - 50 - 71 - 20 - 40 + "px"
      }, 100)
    },

    /**
     * 获取视图列表
     */
    getViewList() {
      getModuleViewList(this.searchParams, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.data = response.data.data
          }
        },
      })
    },

    /**
     * 重置查询名称值
     */
    resetName() {
      let searchParams = {
        ...this.searchParams,
        searchword: "",
      }
      this.searchParams = searchParams
      this.getViewList()
    },

    /**
     * 勾选行时响应
     */
    handleSelectionChange(val) {
      let multipleSelectionId = []
      if (val.length) {
        val.map((e) => {
          multipleSelectionId.push(e.id)
        })
      }
      this.multipleSelectionArray = val
      this.multipleSelectionId = multipleSelectionId
    },

    /**
     * 删除角色
     */
    async showDeleteConfirm() {
      let multipleSelectionId = this.multipleSelectionId
      if (multipleSelectionId.length > 0) {
        try {
          await delMsg(this.$t("msg.delConfirm"), this.$t("msg.tip"))
          const response = await deleteModuleView(multipleSelectionId)
          if (response.data.errcode == 0) {
            this.getViewList()
            this.$message.success(this.$t("msg.del_ss"))
          }
        } catch (e) {
          console.log(e)
        }
      } else {
        this.$message.error(this.$t("msg.check_data"))
      }
    },

    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let searchParams = {
        ...this.searchParams,
        pageNo: val,
      }
      this.searchParams = searchParams
      this.getViewList()
    },

    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val) {
      let searchParams = {
        ...this.searchParams,
        linesPerPage: val,
      }
      this.searchParams = searchParams
      this.getViewList()
    },

    /**
     * 选中数据源回显
     */
    onRowClick(row, column, cell) {
      if (cell.cellIndex == 2) return false
      let appId = sessionStorage.getItem("appId")
      let moduleId = this.$route.query.moduleId
      let params = {
        ...row,
        appId: appId,
        moduleId: moduleId,
        viewId: row.id,
      }
      this.$router.push({ path: "/home/softwaresdetails/view", query: { edit: false,moduleId: this.$route.query.moduleId, params: params } })
    },

    /**
     * 复制视图
     */
    copyView() {
      let multipleSelectionId = this.multipleSelectionId
      if (multipleSelectionId.length > 0) {
        copyView(multipleSelectionId, {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              this.getViewList()
              this.$message({
                message: this.$t("msg.copy_ss"),
                type: "success",
              })
            }
          },
        })
      } else {
        this.$message({
          message: this.$t("msg.select_more"),
        })
      }
    },
    /**
     * 新建视图
     */
    addView() {
      let appId = sessionStorage.getItem("appId")
      let moduleId = this.$route.query.moduleId
      let params = {
        appId: appId,
        moduleId: moduleId,
      }
      this.$store.dispatch("rightHelpPageParams", { title: this.$t("msg.view_info"), url: "application/application_module_view_basicinfo_help.html" })
      this.$router.push({ path: "/home/softwaresdetails/view", query: { edit: false, moduleId: this.$route.query.moduleId, params: params } })
    },
  },

  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>
