<template>
  <el-container class="fullheight" style="border: 1px solid #eee">
    <ht-aside-tree cat-id="7" @node-click="handleNodeClick" @check="check" />
    <el-container>
      <el-main>
        <ht-table
          @load="loadData"
          :data="data"
          :pageResult="pageResult"
          :selection="true"
          quick-search-props="name,formKey"
          :default-querys="[{property: 'formType', value: 'mobile'}]"
          :default-sorter="[{direction: 'DESC', property: 'updateTime'}]"
          :show-export="false"
          @row-click="rowClick"
          ref="htTable"
          @select="tableSelect"
          @select-all="tableSelect"
          @selection-change="handleSelectionChange"
          :header-cell-class-name="headerCellClassName"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              @click="openAddDailog"
              icon="el-icon-plus"
              type="primary"
              >添加</el-button
            >
            <el-button
              size="small"
              @click="
                importDialogVisible = true
                formTypeSelectorCatId = ''
                formTypeSelectorCatName = ''
              "
              icon="el-icon-download"
              >导入</el-button
            >
            <el-button
              size="small"
              @click="handExport"
              icon="el-icon-upload2"
              :disabled="isDisabled"
              >导出</el-button
            >
            <el-button
              @click="openTypeSetDialog()"
              :disabled="isDisabled"
              icon="icon-shezhifenlei"
              >设置分类</el-button
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="更新表单模板后可批量更新表单至新模板效果"
              placement="top-start"
            >
              <el-button
                @click="batchSave()"
                :disabled="isDisabled"
                icon="icon-pilianggengxin"
                >批量更新</el-button
              >
            </el-tooltip>
            <ht-delete-button
              style="margin-left:10px"
              :url="formDeleteUrl"
              :htTable="$refs.htTable"
              :disabled="isDisabled"
              :checkRight="true"
              >删除</ht-delete-button
            >
          </template>
          <template>
            <ht-table-column
              type="index"
              width="50"
              align="center"
              label="序号"
            />
            <ht-table-column
              prop="name"
              label="名称"
              :sortable="true"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                <el-link
                  @click="handleCommand({row: row, command: 'edit'})"
                  v-if="$checkRight(row,'3')"               
                  type="primary"
                  >{{ row.name }}</el-link
                >
                <template v-else>{{ row.name }}</template>
              </template>
            </ht-table-column>
            <ht-table-column prop="formKey" label="别名" :sortable="true" />
            <ht-table-column
              prop="status"
              label="状态"
              width="80"
              :render-header="renderHeaderMethod"
              :filters="[
                {text: '草稿', value: 'draft'},
                {text: '已发布', value: 'deploy'}
              ]"
            >
              <template v-slot="{row}">
                <span :class="{'green-color': row.status == 'deploy'}">{{
                  row.status == 'deploy' ? '已发布' : '草稿'
                }}</span>
              </template>
            </ht-table-column>
            <ht-table-column prop="version" label="版本" width="200">
              <template v-slot="{row}">
                <el-tag type="info" class="version-tag"
                  >主版本:{{ row.version }}</el-tag
                >
                <el-tag
                  style="margin-left: 10px; cursor: pointer"
                  class="version-tag"
                  title="查看表单的所有版本"
                  @click="
                    resourceRight = row.resourceRight
                    formKey = row.formKey
                    formVersionVisible = true
                  "
                  type="info"
                  >版本管理({{ row.versionCount }})</el-tag
                >
              </template>
            </ht-table-column>
            <ht-table-column
              prop="typeName"
              label="分类"
              :sortable="true"
              width="140"
            />
            <ht-table-column prop="desc" label="描述" :hidden="true" />
            <ht-table-column width="220" label="操作" align="left">
              <!-- <template v-slot="{row}">
                <el-dropdown
                  size="mini"
                  split-button
                  @command="handleCommand"
                  @click="handleCommand({row: row, command: 'preview'})"
                >
                  <span> <i class="el-icon-tickets"></i>预览 </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      icon="el-icon-menu"
                      :command="{row: row, command: 'publish'}"
                      v-if="row.status == 'draft'"
                      >发布</el-dropdown-item
                    >
                    <el-dropdown-item
                      icon="el-icon-menu"
                      :command="{row: row, command: 'copy'}"
                      >复制</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="row.status == 'deploy'"
                      icon="el-icon-menu"
                      :command="{row: row, command: 'formRight'}"
                      >表单权限</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template> -->
              <template v-slot="{row}">
                <el-button
                  type="text"
                  @click="handleCommand({row: row, command: 'preview'})"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  class="copy-btn"
                  v-if="row.status == 'draft' && $checkRight(row,'3')"
                  @click="handleCommand({row: row, command: 'publish'})"
                  >发布</el-button
                >
                <el-button
                  type="text"
                  class="copy-btn"
                  v-if="row.status == 'deploy' && $checkRight(row,'3')"
                  @click="handleCommand({row: row, command: 'formRight'})"
                  >表单权限</el-button
                >
                <el-button
                  type="text"
                  class="copy-btn"
                  @click="handleCommand({row: row, command: 'copy'})"
                  >复制</el-button
                >
                <!-- <el-dropdown
                  size="mini"
                  trigger="click"
                  class="more-operate-btn__dropdown"
                  @command="handleCommand"
                >
                  <span class="more-operate-btn"
                    >更多操作<i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-dropdown-menu
                    slot="dropdown"
                    class="operate-dropdown__button"
                  >
                    <el-dropdown-item :command="{row: row, command: 'copy'}"
                      >复制
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </template>
            </ht-table-column>
          </template>
        </ht-table>
      </el-main>
      <FlowFormAuth ref="flowFormAuth" />
    </el-container>
    <!-- 添加表单  -->
    <el-dialog
      width="30%"
      title="新建表单"
      :visible="dialogVisible"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form :model="bpmForm" data-vv-scope="addBpmForm">
        <ht-form-item label="选择数据模型" label-width="120px">
          <eip-bo-selector
            v-model="bpmForm.bos"
            placeholder="请选择数据模型"
            :validate="{required: true}"
          ></eip-bo-selector>
        </ht-form-item>

        <ht-form-item label="表单名称" label-width="120px">
          <ht-input
            v-model="bpmForm.formName"
            autocomplete="off"
            :validate="{required: true}"
            placeholder="请输入名称"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="表单别名" label-width="120px">
          <ht-input
            v-model="bpmForm.formKey"
            v-pinyin="bpmForm.formName"
            autocomplete="off"
            :validate="{
              required: true,
              alpha_num: true,
              isExist: '${form}/form/form/v1/checkKey?key='
            }"
            placeholder="请输入别名"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="表单分类" label-width="120px">
          <EipSysTypeSelector
            placeholder="请选择表单分类"
            cat-id="7"
            v-model="bpmForm.typeName"
            :sys-type-id.sync="bpmForm.typeId"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item label="描述" label-width="120px">
          <ht-input
            type="textarea"
            v-model="bpmForm.desc"
            placeholder="请输入描述"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{
          $t('eip.common.cancel')
        }}</el-button>
        <el-button @click="toFormDesigner()">下一步</el-button>
      </div>
    </el-dialog>
    <eip-bo-dialog
      ref="eipBoDialog"
      name="eipBoDialog"
      @onConfirm="handleDialogSure"
      :single="false"
      append-to-body
    />
    <el-dialog
      class="form-editor-dialog"
      fullscreen
      destroy-on-close
      :visible="formEditorDialogVisible"
      :before-close="handleCloseFormEditor"
    >
      <FormDesigner
        :visibleDialog.sync="formEditorDialogVisible"
        :form-id.sync="formId"
        :form-def-id.sync="formDefId"
        :bos="bpmForm.bos"
        :add-bpm-form="bpmForm"
        :form-type="'mobile'"
      />
    </el-dialog>
    <el-dialog
      title="表单版本管理"
      class="form-version__dialog"
      width="60%"
      destroy-on-close
      :visible.sync="formVersionVisible"
      v-if="formVersionVisible"
      :before-close="handleCloseFormVersion"
      top="8vh"
    >
      <FormVersionManager
        :visible.sync="formVersionVisible"
        :isMobile="true"
        :resourceRight="resourceRight"
        :form-key="formKey"
        @update-table="updateTable"
      />
    </el-dialog>
    <eip-sys-type-dialog
      ref="typeSetDialog"
      name="typeSetDialog"
      :cat-id="'7'"
      @onConfirm="sysTypeDialogOnConfirm"
    />
    <el-dialog
      width="60%"
      title="复制表单"
      :visible="dialogSaveCopyVisible"
      :before-close="handleCloseSaveCopy"
      :destroy-on-close="true"
    >
      <form v-form data-vv-scope="saveCopyForm">
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <th width="140px">原表单名称:</th>
              <td>{{ formRow.name }}</td>
              <th width="140px" class="is-required">新表单名称</th>
              <td>
                <ht-input
                  v-model="newForm.name"
                  :validate="{required: true}"
                  :maxlength="50"
                />
              </td>
            </tr>
            <tr>
              <th width="140px" class="is-required">原表单别名:</th>
              <td>{{ formRow.formKey }}</td>
              <th width="140px" class="is-required">新表单别名</th>
              <td>
                <ht-input
                  v-model="newForm.formKey"
                  v-pinyin="newForm.name"
                  autocomplete="off"
                  :validate="{
                    required: true,
                    regex: {
                      exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                      message: '只能输入字母、数字、下划线，且以字母开头'
                    },
                    isExist: '${form}/form/form/v1/checkKey?key='
                  }"
                  :maxlength="50"
                  placeholder="请输入别名"
                ></ht-input>
              </td>
            </tr>
            <tr>
              <th width="140px" class="is-required">原表单分类:</th>
              <td>{{ formRow.typeName }}</td>
              <th width="140px" class="is-required">新表单分类</th>
              <td>
                <EipSysTypeSelector
                  placeholder="请选择表单分类"
                  cat-id="7"
                  v-model="newForm.typeName"
                  :sys-type-id.sync="newForm.typeId"
                  :validate="{required: true}"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseSaveCopy">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${form}/form/form/v1/saveCopy"
          :model="newForm"
          v-preventReClick
          scope-name="saveCopyForm"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="导入表单"
      :visible.sync="importDialogVisible"
      width="40%"
      top="30vh"
      :close-on-click-modal="false"
      v-if="importDialogVisible"
    >
      <div style="height: 150px; padding-left: 20px">
        <eip-sys-type-selector
          placeholder="请选择分类"
          type-key="FORM_TYPE"
          v-model="formTypeSelectorCatName"
          :sys-type-id.sync="formTypeSelectorCatId"
          :validate="{required: true}"
        />
        <br />
        <br />
        <el-upload
          style="display: inline-block"
          :action="imporCheckUrl"
          :on-success="hadleUploadResult"
          :on-error="hadleUploadResult"
          :headers="uploadHeaders"
          :on-exceed="onExceed"
          accept=".zip"
          :before-upload="beforeUpload"
          :limit="1"
          :data="{isCheck: true}"
          :auto-upload="false"
          ref="upload"
        >
          <el-button size="small" icon="el-icon-upload">选择表单</el-button>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitImport"
          element-loading-text="拼命导入中"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="errorDialog"
      title="批量保存错误提示"
      :close-on-click-modal="false"
      @close="
        () => {
          errorDialog = false
          $refs.htTable.load()
        }
      "
    >
      <ht-table
        :data="errorList"
        ref="errorTable"
        :nopagination="true"
        :selectable="false"
        :showExport="false"
        :showCustomColumn="false"
        @load="
          (param, cb) => {
            cb && cb()
          }
        "
      >
        <template>
          <ht-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          />
          <ht-table-column prop="name" label="名称">
            <template v-slot="{row}">
              {{ row.name + '[' + row.formKey + ']' }}
            </template>
          </ht-table-column>
          <ht-table-column
            prop="error"
            label="错误提示"
            :show-overflow-tooltip="true"
            min-width="200"
          >
          </ht-table-column>
        </template>
      </ht-table>
    </el-dialog>
    <mobile-preview-form-dialog
      :formId="formId"
      ref="mobilePreviewForm"
    ></mobile-preview-form-dialog>
  </el-container>
</template>
<script>
import {mapState} from 'vuex'
import form from '@/api/form.js'
import req from '@/request.js'
const htAsideTree = () => import('@/components/common/HtAsideTree.vue')
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
const FormDesigner = () => import('@/components/form/FormDesigner.vue')
const EipBoSelector = () => import('@/components/selector/EipBoSelector.vue')
const FlowFormAuth = () => import('@/components/flow/FlowFormAuth.vue')
const FormVersionManager = () => import('@/views/form/FormVersionManager.vue')
const eipSysTypeDialog = () =>
  import('@/components/dialog/EipSysTypeDialog.vue')
const eipBoDialog = () => import('@/components/dialog/EipBoDialog.vue')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'

const MobilePreviewFormDialog = () =>
  import('@/components/form/MobilePreviewFormDialog.vue')
export default {
  components: {
    htAsideTree,
    EipSysTypeSelector,
    FormDesigner,
    EipBoSelector,
    FlowFormAuth,
    FormVersionManager,
    eipSysTypeDialog,
    eipBoDialog,
    MobilePreviewFormDialog
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      formTypeSelectorCatName: '',
      fullscreenLoading: false,
      importDialogVisible: false,
      asideShow: true,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      dialogVisible: false,
      formEditorDialogVisible: false,
      dialogSaveCopyVisible: false,
      formId: null,
      formDefId: null,
      bpmForm: {
        formKey: '',
        bos: '',
        desc: '',
        formType: 'mobile'
      },
      typeIdQuery: null,
      formVersionVisible: false,
      formKey: null,
      resourceRight:[],
      updateTableData: [],
      formRow: {},
      newForm: {id: '', name: '', formKey: '', typeId: '', typeName: ''},
      errorDialog: false,
      errorList: [],
      isDisabled: true, //按钮的禁用
      selectedList: []
    }
  },
  watch: {
    formEditorDialogVisible: function(newVal, oldVal) {
      if (newVal == false && oldVal == true) {
        this.handleCloseFormEditor()
      }
    },
    // 监听选中下
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser,
      formDeleteUrl: function() {
        return `${window.context.form}/form/form/v1/remove`
      },
      uploadHeaders: function(mapState) {
        return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
      },
      imporCheckUrl: function(mapState) {
        return (
          window.context.form +
          '/form/form/v1/importCheck?typeId=' +
          this.formTypeSelectorCatId
        )
      }
    })
  },
  mounted() {
    this.$validator = this.$root.$validator
    if (this.$route.query.formId && this.$route.query.defId) {
      let row = {
        id: this.$route.query.formId,
        defId: this.$route.query.defId
      }
      this.handleCommand({row: row, command: 'edit'})
      this.$router.push('mobileFormManager')
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    handleImportSuccess(msg) {
      if (msg) {
        this.$message({
          type: 'success',
          message: msg,
          showClose: true,
          duration: 5000,
          dangerouslyUseHTMLString: true
        })
      } else {
        this.$message.success('表单导入成功')
      }
      this.importDialogVisible = false
      this.$refs.htTable.load()
      this.$refs.upload.clearFiles()
    },
    updateTable() {
      this.$refs.htTable.load()
    },
    submitImport() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的表单!')
        return false
      }
      if (!this.formTypeSelectorCatId) {
        this.$message.warning('请选择要导入的分类!')
        return false
      }
      this.$refs.upload.submit()
    },
    onExceed(file) {
      this.$message.warning('只能选择一个zip文件!')
    },
    hadleUploadResult(response, file, fileList) {
      var height =
        (document.documentElement.clientHeight || document.body.clientHeight) *
          0.85 +
        'px'
      this.fullscreenLoading = false
      let this_ = this
      if (response.state) {
        this_.handleImportSuccess(response.value)
      } else {
        if (response.message) {
          if (response.message.indexOf('是否继续为其新增版本') > 0||
            response.message.indexOf('建模实体') > 0) {
            this.$confirm(
              '<div style="overflow-x:hidden;overflow-y:auto ;max-height:' +
                height +
                '">' +
                response.message +
                '</div>',
              '提示',
              {
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
                type: 'warning',
                closeOnClickModal: false
              }
            )
              .then(() => {
                this_.fullscreenLoading = true
                this_.$http
                  .post(
                    `${window.context.form}/form/form/v1/importSave?cacheFileId=` +
                      response.value +
                      '&confirmImport=true&typeId=' +
                      this.formTypeSelectorCatId
                  )
                  .then(function(resp) {
                    this_.fullscreenLoading = false
                    let data = resp.data
                    if (data.state) {
                      this_.handleImportSuccess(data.value)
                    } else {
                      this_.$message.error(data.message)
                    }
                  })
              })
              .catch(action => {
                this_.$http.post(
                  `${window.context.form}/form/form/v1/importSave?confirmImport=false&cacheFileId=` +
                    response.value
                )
                this_.importDialogVisible = false
                this.$refs.upload.clearFiles()
              })
          } else {
            this.$message.error(response.message)
            this.$refs.upload.clearFiles()
          }
        }
      }
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.zip')) {
        this.$message.warning('只能导入zip文件!')
        return false
      }
      this.imporActionUrl = this.imporCheckUrl
      this.fullscreenLoading = true
    },
    //表格选中数据
    tableSelect(selection) {
      this.updateTableData = selection
    },
    handExport() {
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let ids = []
      for (let item of selection) {
        ids.push(item['id'])
      }
      if (ids.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let url = `${window.context.form}/form/form/v1/exportForm?formIds=${ids}`
      req.download(url)
    },
    handleDialogSure(data, boo) {
      if (Array.isArray(data)) {
        this.bpmForm.bos = data
        this.bpmForm.templateConf = {}
      } else {
        this.bpmForm.bos = data.selection
        this.bpmForm.templateConf = data.templateConf
      }
      this.bpmForm.formType = 'mobile'
      //this.bpmForm.name = this.bpmForm.formName;
      this.formId = ''
      this.formDefId = ''
      this.formEditorDialogVisible = true
      if (!boo) {
        this.$refs.eipBoDialog.handleClose()
      }
    },
    //设置分类
    openTypeSetDialog() {
      this.updateTableData = this.$refs.htTable.$refs.htTable.selection
      if (this.updateTableData.length == 0) {
        this.$message({
          message: '请先选择需要设置分类的数据',
          type: 'warning'
        })
        return
      }
      var ids = this.getHasRightIds(false)
      if (!ids || ids.length == 0) {
        return;
      }
      this.$refs.typeSetDialog.showDialog({})
    },
    sysTypeDialogOnConfirm(data) {
      var id = this.getHasRightIds()
      let this_ = this
      this.$http
        .get(
          '${portal}/sys/sysType/v1/updateEntitySysType?typeID=' +
            data.id +
            '&entityIds=' +
            id.join(',')
        )
        .then(function(resp) {
          if (resp.data && resp.data.state) {
            this_.$message({message: resp.data.message, type: 'success'})
            setTimeout(function() {
              this_.dialogVisible = false
              this_.$refs.htTable.load()
            }, 3000)

            return
          }
          this_.$message.error(resp.data.message)
        })
    },
    handleCloseFormVersion() {
      this.formVersionVisible = false
      this.$refs.htTable.load()
    },
    formAuth(formKey) {
      let param = {
        flowKey: '',
        formKey: formKey,
        nodeId: '',
        parentflowKey: '',
        type: '1'
      }
      this.$refs.flowFormAuth.showDialog(param)
    },
    handleNodeClick(node) {
      if (node.typeKey == 'FORM_TYPE') {
        this.typeIdQuery = null
      } else {
        this.bpmForm.typeName = node.name
        this.typeIdQuery = {
          property: 'typeId',
          value: node.id,
          group: 'typeId',
          operation: 'EQUAL',
          relation: 'AND'
        }
      }
      this.$refs.htTable.load()
    },
    check(data, checkObj) {
      if (checkObj.checkedKeys.length == 0) {
        this.typeIdQuery = null
      } else {
        this.typeIdQuery = {
          property: 'typeId',
          value: checkObj.checkedKeys.join(','),
          group: 'typeId',
          operation: 'IN',
          relation: 'AND'
        }
      }
      this.$refs.htTable.load()
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    loadData(param, cb) {
      let _param = {}
      _param = {..._param, ...param}
      if (this.typeIdQuery) {
        _param.querys.push(this.typeIdQuery)
      }
      this.$addRightMarkIntoFilter(_param)
      form
        .getPageJson(_param)
        .then(response => {
          this.data = response.rows

          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    handleCommand(params) {
      this.formRow = params.row
      switch (params.command) {
        case 'edit':
          this.bpmForm.bos = []
          this.formId = params.row.id
          this.formDefId = params.row.defId
          this.formEditorDialogVisible = true
          break
        case 'preview':
          window.open(
            window.context.manage + `/formPreview/${params.row.id}?mobile=true`,
            '_blank'
          )
          this.formId = params.row.id
          break
        case 'publish':
          this.$confirm('是否确定发布表单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.$http
                .post(
                  '${form}/form/form/v1/publish',
                  {},
                  {formId: params.row.id}
                )
                .then(response => {
                  if (response.data.state) {
                    this.$message({
                      type: 'success',
                      message: response.data.message
                    })
                    this.$refs.htTable.load()
                  } else {
                    this.$message.$error(response.data.message)
                  }
                })
            })
            .catch(() => {})

          break
        case 'formRight':
          this.formAuth(params.row.formKey)
          break
        case 'mobileForm':
          this.$confirm('是否确定生成手机表单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.createMobileForm(params.row)
            })
            .catch(() => {})

          break
        case 'copy':
          this.saveCopy()
          break
        default:
          break
      }
    },
    saveCopy() {
      this.newForm.id = this.formRow.id
      this.dialogSaveCopyVisible = true
    },
    handleCloseSaveCopy() {
      this.newForm = {id: '', name: '', formKey: '', typeId: '', typeName: ''}
      this.dialogSaveCopyVisible = false
      this.$refs.htTable.load()
    },
    afterSaveData() {
      this.handleCloseSaveCopy()
    },
    handleClose() {
      this.dialogVisible = false
    },
    openAddDailog() {
      this.$refs.eipBoDialog.showDialog([], 'mobile')
      // this.dialogVisible = true;
      this.$set(this.bpmForm, 'formKey', '')
      this.$set(this.bpmForm, 'bos', '')
      this.$set(this.bpmForm, 'desc', '')
      this.$set(this.bpmForm, 'formName', '')
      this.$set(this.bpmForm, 'name', '')
      if (this.bpmForm.typeName) {
        this.$set(this.bpmForm, 'typeName', this.bpmForm.typeName)
      } else {
        this.$set(this.bpmForm, 'typeName', '')
      }
      this.$set(this.bpmForm, 'typeId', '')
      this.$set(this.bpmForm, 'id', '')
      this.$set(this.bpmForm, 'defId', '')
      this.$set(this.bpmForm, 'rev', 1)
    },
    handleCloseFormEditor() {
      this.formEditorDialogVisible = false
      this.$refs.htTable.load()
    },
    toFormDesigner() {
      this.$validator.validateAll('addBpmForm').then(result => {
        if (result) {
          this.bpmForm.formType = 'mobile'
          this.bpmForm.name = this.bpmForm.formName
          this.formId = ''
          this.formDefId = ''
          this.formEditorDialogVisible = true
          this.handleClose()
        } else {
          this.$message.error('表单未正确填写')
        }
      })
    },
    getHasRightIds(alertMessage = true){
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let ids = []
      let notRightNames = []
      for (let item of selection) {
        if (this.$checkRight(item,'3')) {
            ids.push(item['id'])
        }else{
            notRightNames.push(item.name)
        }
      }
      if (notRightNames.length > 0) {
          if (alertMessage || notRightNames.length == selection.length) {
            this.$message.error('以下数据无权限更新,已跳过：['+notRightNames.join(',')+']')
          }
         
          if (notRightNames.length == selection.length) {
            return null
          }
      }
      return ids;
    },
    batchSave() {
      let ids = this.getHasRightIds(false)
      if (!ids || ids.length == 0) {
        return;
      }
      this.$confirm('将重新保存选中的表单，确定继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.getHasRightIds()
          const loading = this.$loading({
            lock: true,
            text: '正在批量保存表单。。。',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          form
            .batchSave({ids: ids})
            .then(resp => {
              if (resp.data && resp.data.state) {
                if (typeof resp.data.value === 'string') {
                  this.$message.success(resp.data.value)
                  this.$refs.htTable.load()
                } else {
                  this.errorList = resp.data.value
                  this.errorDialog = true
                  setTimeout(() => {
                    this.$message.warning('部分表单保存失败，详情请查看列表。')
                  }, 800)
                }
              }
            })
            .finally(() => {
              loading.close()
            })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dropdown-menu__item {
  text-align: left;
  width: 100px;
}

.form-editor-dialog >>> .el-dialog__header {
  display: none;
}

.form-version__dialog /deep/ > .el-dialog > .el-dialog__body {
  padding: 0 10px;
}

.form-editor-dialog >>> .el-dialog__body {
  padding: 0;
  height: 100%;
}

@media (max-width: 1366px) {
  /deep/ .search-container__col {
    flex-wrap: wrap;

    .el-button-group {
      margin-top: 10px;
    }
  }
}

::v-deep .inputs.ht-form-inputs__inline {
  position: relative;
}
</style>
