<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">页面列表</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="cerateForm">{{ $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.name" :placeholder="$t('placeholder.nAnddes')" @keyup.enter.native="getFromList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getFromList" 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 v-loading="loading" ref="tableList" :data="data.datas" @selection-change="handleSelectionChange" @cell-click="onRowClick" :height="tableHeight" style="width: 100%" size="small">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" :label="$t('form.name')"> </el-table-column>
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column prop="" :label="$t('form.type')">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">{{ $t("form.normal_forms") }}</span>
                <span v-else-if="scope.row.type == 2">{{ $t("form.tab") }}</span>
                <span v-else-if="scope.row.type == 256">{{ $t("form.search_form") }}</span>
                <span v-else-if="scope.row.type == 65536">{{ $t("form.normal_mapping") }}</span>
                <span v-else-if="scope.row.type == 1048576">{{ $t("form.template_form") }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" :label="$t('form.version')">
              <template slot-scope="scope">
                <span v-if="scope.row.showType == 'new'">{{ $t("form.drag_form") }}</span>
                <span v-else-if="scope.row.showType == 'old'">{{ $t("form.print_form") }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="description" :label="$t('form.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.rowCount"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="请选择新建的表单类型" :visible.sync="chooseFormTypeVisible">
      <div class="obpm-mode d-flex">
        <div class="obpm-form d-flex border mr-2">
          <img class="obpm-img" src="../../assets/images/oldForm.png" alt="" />
          <img class="obpm-imghover" src="../../assets/images/oldForm_hover.png" alt="" />
          <h2>{{ $t("form.print_form_design") }}</h2>
          <div class="createbtn" @click="chooseFormTypeOk('old')">
            {{ $t("view.create") }}
          </div>
        </div>
        <div class="obpm-newForm d-flex border">
          <img class="obpm-img" src="../../assets/images/newForm.png" alt="" />
          <img class="obpm-imghover" src="../../assets/images/newForm_hover.png" alt="" />
          <h2>{{ $t("form.drag_form_design") }}</h2>
          <div class="createbtn" @click="chooseFormTypeOk('new')">
            {{ $t("view.create") }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getModuleFormList, deleteModuleForm } from "@/service/FormApi.js"
import { delMsg } from "@/utils/elementui"
export default {
  name: "pagelist",
  data() {
    return {
      searchParams: {
        appId: "",
        moduleId: "",
        name: "",
        description: "",
        type: "",
        pageNo: 1,
        linesPerPage: 10,
      },
      params: {
        appId: "",
        moduleId: "",
        id: "",
        name: "",
        type: 1,
        showLog: false,
        showWaterMark: false,
        openComment: false,
        waterMarkScript: "",
        version: 3,
        mappingStr: "",
        checkout: false,
        orderno: 1,
        permissionType: "",
        layoutType: "",
        typeName: "",
        inited: false,
        showType: "old",
      },
      data: {},
      multipleSelectionId: [],
      multipleSelectionArray: [],
      tableHeight: 100,
      chooseFormTypeVisible: false,
      showType: "old", //新建的时候的表单类型
      loading: true,
    }
  },
  watch: {},
  mounted() {
    this.getScollerHeight()
    let appId = sessionStorage.getItem("appId")
    // console.log("formList",appId)
    let moduleId = this.$route.query.moduleId
    let searchParams = {
      ...this.searchParams,
      appId: appId,
      moduleId: moduleId,
    }
    let params = {
      ...this.params,
      appId: appId,
      moduleId: moduleId,
    }
    this.searchParams = searchParams
    this.params = params
    this.getFromList()
  },
  created() {},
  methods: {
    /**
     * 动态计算页面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)
    },

    /**
     * 获取表单列表
     */
    getFromList() {
      this.loading = true
      getModuleFormList(this.searchParams, {
        onSucess: (response) => {
          this.loading = false
          if (response.data.errcode == 0) {
            this.data = response.data.data
          }
        },
      })
    },
    /**
     * 重置查询名称值
     */
    resetName() {
      let searchParams = {
        ...this.searchParams,
        name: "",
        description: "",
        searchword: "",
      }
      this.searchParams = searchParams
      this.getFromList()
    },
    /**
     * 勾选行时响应
     */
    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 deleteModuleForm(multipleSelectionId)
          if (response.data.errcode == 0) {
            this.getFromList()
            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.getFromList()
    },

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

    /**
     * 选中数据源回显
     */
    onRowClick(row, column, cell) {
      if (cell.cellIndex == 2) return false

      // this.formDetailRef = row.id
      let params = {
        ...this.params,
        id: row.id, //表单id
        name: row.name, //表单名称
        templatecontext: row.templatecontext, //源代码文本
        description: row.description, //描述
        type: row.type, //类型
        styleId: row.styleId, //样式库id
        showLog: row.showLog, //显示日志操作
        showWaterMark: row.showWaterMark, //是否显示水印
        openComment: row.openComment, //是否开通评论
        waterMarkScript: row.waterMarkScript, //水印脚本
        isopenablescript: row.isopenablescript, //是否可打开脚本
        iseditablescript: row.iseditablescript, //是否可编辑脚本
        mappingStr: row.mappingStr, //映射表数据
        orderno: row.orderno, //排序号
        permissionType: row.permissionType, //权限
        layoutType: row.layoutType, //手机端表单控件布局样式
        showType: row.showType, //新旧版参数
      }
      this.$router.push({ path: "/home/softwaresdetails/page", query: { edit: true, moduleId: this.$route.query.moduleId, params: params} })
      console.log("onRowClick")
    },

    /**
     * 新建表单
     */
    cerateForm() {
      this.chooseFormTypeVisible = true
    },
    /**
     * 选择新建表单的显示类型（新版表单设计器和旧版表单设计器）
     *  */
    chooseFormTypeOk(type) {
      this.showType = this.params.showType = type
      this.chooseFormTypeVisible = false
      this.$router.push({ path: "/home/softwaresdetails/page", query: { edit: false, moduleId: this.$route.query.moduleId, params: this.params } })
    },
  },
}
</script>
