<template>
  <el-container class="fullheight" style="border: 1px solid #eee">
    <ht-aside-tree
      type-key="jzfl"
      @node-click="handleNodeClick"
      @check="treeCheck"
    />
    <el-container>
      <el-main>
        <ht-table
          @load="loadData"
          :data="data"
          :pageResult="pageResult"
          :selection="true"
          quick-search-props="code,name"
          :show-export="false"
          :show-custom-column="false"
          :default-querys="defaultQuerys"
          ref="htTable"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
        >
          <template v-slot:toolbar>
            <!-- <el-button-group> -->
            <el-button
              size="small"
              @click="showDialog()"
              icon="el-icon-plus"
              type="primary"
              >添加</el-button
            >
            <el-button
              size="small"
              @click="
                importDialogVisible = true
                typeSelectorCatId = ''
                typeSelectorCatName = ''
              "
              icon="el-icon-download"
              >导入</el-button
            >
            <el-button
              size="small"
              @click="handExport"
              icon="el-icon-upload2"
              :disabled="isDisabled"
              >导出</el-button
            >
            <ht-delete-button
              url="${uc}/uc/matrix/v1/remove"
              :htTable="$refs.htTable"
              :alertMessage="false"
              @after-delete="afterDelete"
              style="margin-left: 10px"
              :disabled="isDisabled"
              >删除</ht-delete-button
            >
            <!-- </el-button-group> -->
          </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
                  type="primary"
                  @click="showDialog(row.id)"
                  title="查看详情"
                  >{{ row.name }}</el-link
                >
              </template>
            </ht-table-column>
            <ht-table-column
              prop="code"
              label="别名"
              :sortable="true"
              :show-overflow-tooltip="true"
            ></ht-table-column>
            <ht-table-column
              prop="typeName"
              label="分类名称"
              :sortable="true"
              :show-overflow-tooltip="true"
            ></ht-table-column>
            <!-- <ht-table-column
              prop="managerName"
              label="管理员"
              :sortable="true"
              :show-overflow-tooltip="true"
            ></ht-table-column> -->
            <ht-table-column prop="status" label="状态" :sortable="true">
              <template v-slot="{row}">
                <el-tag v-if="row.status === 0">待发布</el-tag>
                <el-tag type="success" v-if="row.status === 1">已发布</el-tag>
              </template>
            </ht-table-column>
            <!-- <ht-table-column
              prop="isDele"
              label="删除状态"
              :sortable="true"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                <el-tag v-if="row.isDele === 0">未删</el-tag>
                <el-tag type="danger" v-if="row.isDele === 1">已删</el-tag>
              </template>
            </ht-table-column> -->
            <ht-table-column
              prop="createTime"
              label="创建时间"
              :sortable="true"
              :show-overflow-tooltip="true"
            ></ht-table-column>
            <ht-table-column
              prop="enabled"
              label="启用状态"
              :sortable="true"
              width="180"
            >
              <template v-slot="{row}">
                <ht-switch
                  style="width:100%;"
                  v-if="row.status === 1"
                  v-model="row.enabled"
                  :permission="permissionVal"
                  active-text="启用"
                  inactive-text="禁用"
                  :active-value="1"
                  :inactive-value="0"
                  @change="
                    () => {
                      radioEnabledChange(row)
                    }
                  "
                ></ht-switch>
              </template>
            </ht-table-column>
            <ht-table-column label="操作" width="260" align="left">
              <template v-slot="{row}">
                <div v-if="row.status != 0">
                  <el-button
                    type="text"
                    @click="handleCommand({row: row, action: 'toDataList'})"
                    >人员设置</el-button
                  >
                  <el-button
                    type="text"
                    class="copy-btn"
                    @click="handleCommand({row: row, action: 'setManager'})"
                    >设置管理员</el-button
                  >
                  <el-button
                    type="text"
                    class="copy-btn"
                    @click="
                      handleCommand({row: row, action: 'getFlowBindRelation'})
                    "
                    >绑定的流程</el-button
                  >
                </div>
                <div v-if="row.status === 0">
                  <el-button
                    type="text"
                    @click="handleCommand({row: row, action: 'toDataList'})"
                    >人员设置</el-button
                  >
                  <el-button
                    type="text"
                    class="copy-btn"
                    @click="handleCommand({row: row, action: 'setManager'})"
                    >设置管理员</el-button
                  >
                  <el-dropdown
                    size="mini"
                    class="more-operate-btn__dropdown"
                    trigger="click"
                    @command="handleCommand"
                    v-if="row.status === 0"
                  >
                    <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, action: 'publish'}"
                        v-if="row.status === 0"
                        >发布</el-dropdown-item
                      >
                      <!--  <el-dropdown-item
                      :command="{row: row, action: 'toDataList'}"
                      >人员设置</el-dropdown-item
                    > -->
                      <!-- <el-dropdown-item
                        :command="{row: row, action: 'setManager'}"
                        >设置管理员</el-dropdown-item
                      > -->
                      <el-dropdown-item
                        :command="{row: row, action: 'getFlowBindRelation'}"
                        >绑定的流程</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </ht-table-column>
          </template>
        </ht-table>

        <ht-sidebar-dialog
          width="100%"
          title="矩阵配置"
          class="cd-column__dialog"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :before-close="close"
          :show-close="false"
          append-to-body
        >
          <template slot="title">
            <div class="flex" style="justify-content: space-between">
              <el-page-header
                @back="dialogVisible = false"
                content="矩阵配置"
              ></el-page-header>
              <el-button-group>
                <ht-submit-button
                  url="${uc}/uc/matrix/v1/save"
                  :model="matrix"
                  scope-name="matrixForm"
                  @before-save-data="beforeSaveData"
                  @after-save-data="afterSaveData"
                  :isSubmit="isSubmit"
                  >保 存</ht-submit-button
                >
                <el-button @click="dialogVisible = false">取 消</el-button>
              </el-button-group>
            </div>
          </template>
          <el-form data-vv-scope="matrixForm" ref="matrixForm">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="box-card base-info">
                  <div slot="header" class="clearfix">
                    <span>基本信息</span>
                  </div>
                  <ht-form-item label="矩阵分类">
                    <EipSysTypeSelector
                      placeholder="请选择分类"
                      typeKey="jzfl"
                      v-model="matrix.typeName"
                      :sys-type-id.sync="matrix.typeId"
                      :validate="{required: true}"
                      class="sys-type-selector"
                    />
                  </ht-form-item>
                  <ht-form-item label="矩阵名称">
                    <ht-input
                      v-model="matrix.name"
                      autocomplete="off"
                      :maxlength="28"
                      :showWordLimit="true"
                      :validate="{required: true, max: 28}"
                      placeholder="请输入矩阵名称"
                    />
                  </ht-form-item>
                  <ht-form-item label="矩阵别名">
                    <ht-input
                      v-model="matrix.code"
                      v-pinyin="matrix.name"
                      name="matrixName"
                      :validate="{
                        required: true,
                        regex: {
                          exp: '^[a-zA-Z][a-zA-Z0-9_]{0,28}$',
                          message:
                            '只能输入字母、数字、下划线，且以字母开头,长度不能超过28'
                        }
                      }"
                      :disabled="matrix.id ? true : false"
                      :maxlength="28"
                      :showWordLimit="true"
                      autocomplete="off"
                      placeholder="请输入矩阵别名"
                    />
                  </ht-form-item>
                </el-card>
              </el-col>
              <el-col :span="18">
                <el-tabs v-model="tabStatus" type="border-card">
                  <el-tab-pane label="审批条件(列)" name="cond">
                    <span slot="label">
                      审批条件(列)
                      <el-button
                        size="mini"
                        circle
                        @click="addCol(matrix.condList, '', '审批条件')"
                        title="添加条件字段"
                      >
                        <i class="el-icon-plus"></i>
                      </el-button>
                      <div></div>
                    </span>
                    <el-table :data="matrix.condList" border>
                      <el-table-column label="条件名称" width="245">
                        <template v-slot="{row, $index}">
                          <ht-input
                            v-model="row.name"
                            placeholder="请输入条件名称"
                            autocomplete="off"
                            validate="required"
                            :maxlength="20"
                            show-word-limit
                            @blur="
                              chineseFormat(
                                matrix.condList,
                                row.name,
                                'code',
                                $index
                              )
                            "
                          ></ht-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="code" label="条件别名" width="245">
                        <template v-slot="{row}">
                          <ht-input
                            v-model="row.code"
                            placeholder="请输入条件别名"
                            autocomplete="off"
                            :maxlength="20"
                            show-word-limit
                            :validate="
                              'required: true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头'
                            "
                            :disabled="row.id ? true : false"
                          ></ht-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="ctrlType"
                        label="输入框类型"
                        width="245"
                      >
                        <template v-slot="{row, $index}">
                          <ht-select
                            clearable
                            v-model="row.ctrlType"
                            :options="[
                              {key: 'select', value: '关联查询'},
                              {key: 'dialog', value: '对话框'}
                            ]"
                            validate="required"
                            @change="ctrlTypeChange(matrix.condList, $index)"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="queryAlias"
                        label="数据来源"
                        width="300"
                      >
                        <template v-slot="{row}">
                       <div class="queryAlias">
                           <ht-select
                            clearable
                            filterable
                            v-if="row.ctrlType == 'select'"
                            v-model="row.queryAlias"
                            :options="customQuerys"
                            :props="{key: 'alias', value: 'name'}"
                            validate="required"
                            @change="
                              () => {
                                row.bindKey = ''
                                row.bindValue = ''
                              }
                            "
                          />
                          <ht-select
                            clearable
                            v-if="row.ctrlType == 'dialog'"
                            v-model="row.queryAlias"
                            :options="customDialogs"
                            :props="{key: 'alias', value: 'name'}"
                            @change="
                              () => {
                                row.bindKey = ''
                                row.bindValue = ''
                              }
                            "
                          />
                          <el-button
                            size="mini"
                            style="margin-left: 5px;"
                            icon="el-icon-refresh"
                            @click="refreshConfig(row.ctrlType)"
                          ></el-button>
                       </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="bindKey"
                        label="值来源"
                        width="245"
                      >
                        <template v-slot="{row}">
                          <ht-select
                            clearable
                            v-if="row.ctrlType == 'select'"
                            v-model="row.bindKey"
                            :options="
                              getResultField(row.ctrlType, row.queryAlias)
                            "
                            :props="{key: 'field', value: 'comment'}"
                            validate="required"
                          />
                          <ht-select
                            clearable
                            v-if="row.ctrlType == 'dialog'"
                            v-model="row.bindKey"
                            :options="
                              getResultField(row.ctrlType, row.queryAlias)
                            "
                            :props="{key: 'field', value: 'comment'}"
                            validate="required"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="bindValue"
                        label="名称来源"
                        width="245"
                      >
                        <template v-slot="{row}">
                          <ht-select
                            clearable
                            v-if="row.ctrlType == 'select'"
                            v-model="row.bindValue"
                            :options="
                              getResultField(row.ctrlType, row.queryAlias)
                            "
                            :props="{key: 'field', value: 'comment'}"
                            validate="required"
                          />
                          <ht-select
                            clearable
                            v-if="row.ctrlType == 'dialog'"
                            v-model="row.bindValue"
                            :options="
                              getResultField(row.ctrlType, row.queryAlias)
                            "
                            :props="{key: 'field', value: 'comment'}"
                            validate="required"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="status"
                        label="发布状态"
                        width="80"
                      >
                        <template v-slot="{row}">
                          <el-tag v-if="row.status === 0">待发布</el-tag>
                          <el-tag type="success" v-if="row.status === 1"
                            >已发布</el-tag
                          >
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="180">
                        <template v-slot="{row, $index}">
                          <el-button-group>
                            <el-button
                              icon="el-icon-caret-top"
                              size="mini"
                              title="上移"
                              :disabled="$index === 0"
                              @click="upGo(matrix.condList, $index)"
                            ></el-button>
                            <el-button
                              icon="el-icon-caret-bottom"
                              size="mini"
                              title="下移"
                              :disabled="$index === matrix.condList.length - 1"
                              @click="downGo(matrix.condList, $index)"
                            ></el-button>
                            <el-button
                              size="mini"
                              icon="el-icon-delete"
                              @click="deleteCol(matrix.condList, $index)"
                            ></el-button>
                          </el-button-group>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>

                  <!-- 角色字段 -->
                  <el-tab-pane label="审批角色" name="role">
                    <span slot="label">
                      审批角色
                      <el-button
                        size="mini"
                        circle
                        @click="addCol(matrix.roleList, '', '审批角色')"
                        title="添加角色字段"
                      >
                        <i class="el-icon-plus"></i>
                      </el-button>
                    </span>
                    <el-table :data="matrix.roleList" border>
                      <el-table-column label="角色名">
                        <template v-slot="{row, $index}">
                          <ht-input
                            v-model="row.name"
                            placeholder="请输入角色名"
                            autocomplete="off"
                            validate="required"
                            :maxlength="20"
                            show-word-limit
                            @blur="
                              chineseFormat(
                                matrix.roleList,
                                row.name,
                                'code',
                                $index
                              )
                            "
                          ></ht-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="code" label="角色别名">
                        <template v-slot="{row}">
                          <ht-input
                            v-model="row.code"
                            placeholder="请输入角色别名"
                            autocomplete="off"
                            :maxlength="20"
                            show-word-limit
                            :validate="
                              'required: true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头'
                            "
                            :disabled="row.id ? true : false"
                          ></ht-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="code" label="单选多选">
                        <template v-slot="{row}">
                          <ht-radio
                            v-model="row.selectType"
                            :options="[
                              {key: 1, value: '单选'},
                              {key: 2, value: '多选'}
                            ]"
                            validate="required"
                            v-show="
                              row.selectType
                                ? (row.selectType = row.selectType)
                                : (row.selectType = 1)
                            "
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="status"
                        label="发布状态"
                        width="80"
                      >
                        <template v-slot="{row}">
                          <el-tag v-if="row.status === 0">待发布</el-tag>
                          <el-tag type="success" v-if="row.status === 1"
                            >已发布</el-tag
                          >
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template v-slot="{row, $index}">
                          <el-button-group>
                            <el-button
                              icon="el-icon-caret-top"
                              size="mini"
                              title="上移"
                              :disabled="$index === 0"
                              @click="upGo(matrix.roleList, $index)"
                            ></el-button>
                            <el-button
                              icon="el-icon-caret-bottom"
                              size="mini"
                              title="下移"
                              :disabled="$index == matrix.roleList.length - 1"
                              @click="downGo(matrix.roleList, $index)"
                            ></el-button>
                            <el-button
                              size="mini"
                              icon="el-icon-delete"
                              @click="deleteCol(matrix.roleList, $index)"
                            ></el-button>
                          </el-button-group>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>

                  <!-- 查询条件字段 -->
                  <el-tab-pane label="查询条件" name="searchField">
                    <span slot="label">
                      查询条件
                      <!--                      <el-button size="mini" circle @click="addCol(matrix.roleList)" title="添加查询条件字段">-->
                      <!--                        <i class="el-icon-plus"></i>-->
                      <!--                      </el-button>-->
                    </span>
                    <el-table :data="matrix.roleList" border>
                      <el-table-column label="角色名">
                        <template v-slot="{row, $index}">
                          <ht-input
                            v-model="row.name"
                            placeholder="请输入角色名"
                            autocomplete="off"
                            validate="required"
                            :maxlength="20"
                            show-word-limit
                            @blur="
                              chineseFormat(
                                matrix.roleList,
                                row.name,
                                'code',
                                $index
                              )
                            "
                          ></ht-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template v-slot="{row, $index}">
                          <ht-checkbox
                            v-model="row.searchField"
                            :options="[{value: '作为可选条件', key: '0'}]"
                          ></ht-checkbox>
                          <!--                          <el-button-group>-->
                          <!--                            <el-button-->
                          <!--                                size="mini"-->
                          <!--                                icon="el-icon-delete"-->
                          <!--                                @click="deleteCol(matrix.roleList,$index)"-->
                          <!--                            ></el-button>-->
                          <!--                          </el-button-group>-->
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-form>
        </ht-sidebar-dialog>
      </el-main>
    </el-container>

    <ht-load-data
      ref="customQueryRef"
      url="/form/customQuery/v1/list"
      requestMethod="post"
      context="form"
      @after-load-data="afterCustomQueryLoadData"
    ></ht-load-data>
    <!-- 获取对话框选项列表-->
    <ht-load-data
      ref="customDialogRef"
      url="/form/customDialog/v1/getAll"
      requestMethod="get"
      context="form"
      @after-load-data="afterCustomDialogLoadData"
    ></ht-load-data>
    <ht-user-dialog
      ref="eipUserDialog"
      name="eipUserDialog"
      :single="true"
      @on-confirm="saveManager"
      append-to-body
    />
    <matrix-flow-bind-relation-dialog
      ref="matrixFlowBindRelationDialog"
      :matrix-code="matrixCode"
    />
    <!-- 设置管理员 -->
    <MatrixAuthManager ref="MatrixAuthManager"></MatrixAuthManager>
    <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="jzfl"
          v-model="typeSelectorCatName"
          :sys-type-id.sync="typeSelectorCatId"
          :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-container>
</template>

<script>
const MatrixAuthManager = () => import('@/views/uc/MatrixAuthManager.vue')
const htAsideTree = () => import('@/components/common/HtAsideTree.vue')
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
const eipUserDialog = () => import('@/components/dialog/EipUserDialog.vue')
import {mapState} from 'vuex'
import req from '@/request.js'
import uc from '@/api/uc.js'
import matrixFlowBindRelationDialog from '@/views/uc/MatrixFlowBindRelationDialog'
export default {
  components: {
    matrixFlowBindRelationDialog,
    htAsideTree,
    EipSysTypeSelector,
    eipUserDialog,
    MatrixAuthManager
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      matrixBlank: {
        code: '',
        name: '',
        condList: [
          {
            code: '',
            name: '',
            ctrlType: '',
            queryAlias: '',
            bindKey: '',
            bindValue: ''
          }
        ],
        roleList: [{code: '', name: '', selectType: 1, searchField: '0'}]
      },
      matrix: {},
      treeSidebarData: {},
      tabStatus: 'cond',
      customQuerys: [],
      customDialogs: [], //对话框列表数据
      isSubmit: true,
      typeId: '',
      defaultQuerys: [],
      matrixCode: '',
      isDisabled: true, //按钮的禁用
      selectedList: [],
      importDialogVisible: false,
      typeSelectorCatId: '',
      typeSelectorCatName: '',
      fullscreenLoading: false,
      permissionVal: 'w'
    }
  },
  watch: {
    // 监听选中下
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser,
      uploadHeaders: function(mapState) {
        return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
      },
      imporCheckUrl: function(mapState) {
        return (
          window.context.uc +
          '/uc/matrix/v1/importCheck?typeId=' +
          this.typeSelectorCatId +
          '&typeName=' +
          this.typeSelectorCatName
        )
      }
    })
  },
  methods: {
    refreshConfig(type) {
      if (type == 'select') {
        this.$refs.customQueryRef.getData()
        this.$message.info('关联查询更新配置成功！点击保存后生效')
      } else {
        this.$refs.customDialogRef.getData()
        this.$message.info('对话框更新配置成功！点击保存后生效')
      }
    },
    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) {
            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.uc}/uc/matrix/v1/importSave?cacheFileId=` +
                      response.value +
                      '&confirmImport=true&typeId=' +
                      this.typeSelectorCatId +
                      '&confirmImport=true&typeName=' +
                      this.typeSelectorCatName
                  )
                  .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.uc}/uc/matrix/v1/importSave?confirmImport=false&cacheFileId=` +
                    response.value
                )
                this_.importDialogVisible = false
                this.$refs.upload.clearFiles()
              })
          } else {
            this.$message.error(response.message)
            this.$refs.upload.clearFiles()
          }
        }
      }
    },
    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()
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.zip')) {
        this.$message.warning('只能导入zip文件!')
        return false
      }
      this.imporActionUrl = this.imporCheckUrl
      this.fullscreenLoading = true
    },
    onExceed(file) {
      this.$message.warning('只能选择一个zip文件!')
    },
    submitImport() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的关系矩阵!')
        return false
      }
      if (!this.typeSelectorCatId) {
        this.$message.warning('请选择要导入的分类!')
        return false
      }
      this.$refs.upload.submit()
    },
    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.uc}/uc/matrix/v1/export?ids=${ids}`
      req.download(url)
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    handleCommand(param) {
      switch (param.action) {
        case 'toDataList':
          this.toDataList(param.row)
          break
        case 'publish':
          this.publish(param.row.id)
          break
        case 'setManager':
          this.setManager(param.row.id, param.row.typeId)
          break
        case 'getFlowBindRelation':
          this.getFlowBindRelation(param.row.code)
          break
      }
    },
    getFlowBindRelation(matrixCode) {
      this.matrixCode = matrixCode
      this.$refs.matrixFlowBindRelationDialog.showDialog()
    },
    setManager(id, typeId) {
      this.curId = id

      this.$refs.MatrixAuthManager.showDialog(typeId, id)
      // this.$refs.eipUserDialog.showDialog({})
    },
    saveManager(data) {
      if (data.length == 0 || data.length > 1) {
        this.$message.warning('请选择一个用户')
        return
      }
      data = data[0]
      let id = this.curId
      req
        .get(
          window.context.uc +
            `/uc/matrix/v1/saveManager?id=${id}&userId=${data.id}&fullname=${data.fullname}`
        )
        .then(res => {
          if (res.data.state) {
            this.$message.success(res.data.message)
            this.$refs.htTable.load()
          }
        })
    },
    publish(id) {
      req
        .get(window.context.uc + `/uc/matrix/v1/publish?id=${id}`)
        .then(res => {
          if (res.data.state) {
            this.$message.success(res.data.message)
            this.$refs.htTable.load()
          }
        })
    },
    upGo(fieldData, index) {
      if (index != 0) {
        fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]
      } else {
        fieldData.push(fieldData.shift())
      }
    },
    downGo(fieldData, index) {
      if (index != fieldData.length - 1) {
        fieldData[index] = fieldData.splice(index + 1, 1, fieldData[index])[0]
      } else {
        fieldData.unshift(fieldData.splice(index, 1)[0])
      }
    },
    chineseFormat(list, chinese, prop, index) {
      //如果保存过的则不允许修改code
      if (list[index].id) {
        return
      }
      let timer = null
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(function() {
        req
          .request({
            url: `${window.context.uc}/base/tools/v1/getPinyin`,
            method: 'GET',
            params: {chinese: chinese, type: 0}
          })
          .then(res => {
            if (res.data.state) {
              list[index][prop] = res.data.value
            }
          })
      }, 500)
    },
    deleteCol(list, index) {
      list.splice(index, 1)
    },
    addCol(list, index, column) {
      if (list.length > 15 || list.length == 15) {
        this.$message.warning(`${column}最多15个`)
        return false
      }
      list.push({
        code: '',
        name: '',
        ctrlType: '',
        queryAlias: '',
        bindKey: '',
        bindValue: '',
        selectType: 1
      })
    },
    handleNodeClick(item) {
      if (item.parentId != 0) {
        this.$set(this.defaultQuerys, 0, {
          property: 'type_id_',
          value: item.id,
          operation: 'EQUAL'
        })
      } else {
        //清空旧的查询值
        this.defaultQuerys.splice(0)
      }
      this.$refs.htTable.load()
    },
    treeCheck(item, list) {
      if (list && list.checkedKeys && list.checkedKeys.length > 0) {
        this.$set(this.defaultQuerys, 0, {
          property: 'type_id_',
          value: list.checkedKeys.join(','),
          operation: 'IN'
        })
        this.$refs.htTable.load()
      }
    },
    close() {
      this.dialogVisible = false
    },
    showDialog(id) {
      // 已填清除校验
      this.$root.$validator.reset()
      if (id) {
        this.$http.get('${uc}/uc/matrix/v1/getJson?id=' + `${id}`).then(
          resp => {
            this.matrix = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.matrix = JSON.parse(JSON.stringify(this.matrixBlank))
        //this.matrix = this.matrixBlank;
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.matrix = JSON.parse(JSON.stringify(this.matrixBlank))
      // this.matrix = this.matrixBlank;
      this.dialogVisible = false
    },
    loadData(param, cb) {
      param.querys || (param.querys = [])
      param.querys.push({
        property: 'isDele',
        value: 0,
        operation: 'EQUAL'
      })
      this.$http
        .post('${uc}/uc/matrix/v1/listJson', param)
        .then(resp => {
          let response = resp.data
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    beforeSaveData() {
      this.isSubmit = true
      if (!this.matrix.condList || this.matrix.condList.length == 0) {
        this.isSubmit = false
        this.$message.error('请填写字段名')
      }
      if (this.matrix.condList && this.matrix.condList.length > 0) {
        let code = this.checkPropIsRepeat(this.matrix.condList, 'code')
        if (code) {
          this.isSubmit = false
          this.tabStatus = 'cond'
          this.$message.error(`列字段名[${code}]重复`)
          return false
        }
      }
      if (!this.matrix.roleList || this.matrix.roleList.length == 0) {
        this.isSubmit = false
        this.$message.error('请填写角色字段')
      }
      if (this.matrix.roleList && this.matrix.roleList.length > 0) {
        let code = this.checkPropIsRepeat(this.matrix.roleList, 'code')
        if (code) {
          this.isSubmit = false
          this.tabStatus = 'role'
          this.$message.error(`角色别名[${code}]重复`)
        }
      }
    },
    checkPropIsRepeat(arr, key) {
      var obj = {}
      for (var i = 0; i < arr.length; i++) {
        let code = arr[i][key].toLowerCase()
        if (obj[code]) {
          return arr[i][key]
        } else {
          obj[code] = arr[i]
        }
      }
      return ''
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
    afterCustomQueryLoadData(data) {
      this.customQuerys = data.rows
    },
    afterCustomDialogLoadData(data) {
      this.customDialogs = data
    },
    toDataList(param) {
      if (param.status == 0) {
        req
          .get(window.context.uc + `/uc/matrix/v1/publish?id=${param.id}`)
          .then(res => {
            if (res.data.state) {
              this.$message.success(res.data.message)
              this.$router.push({path: `/matrixData/${param.id}`})
              this.$refs.htTable.load()
            }
          })
      } else {
        this.$router.push({path: `/matrixData/${param.id}`})
      }
    },
    ctrlTypeChange(list, index) {
      list[index].queryAlias && (list[index].queryAlias = '')
      list[index].bindKey && (list[index].bindKey = '')
      list[index].bindValue && (list[index].bindValue = '')
    },
    getResultField(ctrlType, queryAlias) {
      if (ctrlType === 'select') {
        for (let i = 0; i < this.customQuerys.length; i++) {
          let item = this.customQuerys[i]
          if (item.alias === queryAlias) {
            return JSON.parse(item.resultfield || '[]')
          }
        }
      } else if (ctrlType === 'dialog') {
        for (let i = 0; i < this.customDialogs.length; i++) {
          let item = this.customDialogs[i]
          if (item.alias === queryAlias) {
            return JSON.parse(item.resultfield || '[]')
          }
        }
      }
    },
    radioEnabledChange(matrix) {
      if(matrix.enabled==0){
          this.$confirm('禁用该关系矩阵后，会影响已绑定的流程无法获取审批人，是否确认禁用？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            req.put(window.context.uc + '/uc/matrix/v1/', matrix)
          }).catch((err)=>{
            matrix.enabled=1
          })
      }else{
        req.put(window.context.uc + '/uc/matrix/v1/', matrix)
      }
      
      
    },
    afterDelete(message) {
      if (message.includes('不允许删除')) {
        this.$message({
          type: 'warning',
          message: message,
          showClose: true,
          duration: 5000,
          dangerouslyUseHTMLString: true
        })
      } else {
        this.$message({type: 'success', message: message})
      }
    }
  }
}
</script>
<style scoped>
.cd-column__dialog >>> .el-dialog__body {
  height: calc(100vh - 108px);
}
.sys-type-selector {
  width: 215px;
}
.is-circle {
  padding: 9px;
}
.cd-column__dialog /deep/ .el-dialog > .el-dialog__header {
  padding: 8px 20px;
}
.base-info >>> .el-card__body {
  padding-left: 0;
  padding-right: 5px;
}
.fullheight >>> .el-footer.el-aside-footer {
  bottom: 30px;
  position: absolute;
}
.more-operate-btn__dropdown {
  margin-left: 16px;
}
.queryAlias{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>