<template>
  <div class="app-container my_menu" >
    <el-form :inline="true">
      <el-form-item label="模块">
        <el-select v-model="queryParams.ModuleTypeId" placeholder="模块" clearable size="small">
          <el-option v-for="item of dict.type.ModuleType" :value="item.value" :label="item.raw.ValueCN" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button
        type="info"
        plain
        icon="el-icon-sort"
        size="mini"
        @click="toggleExpandAll"
      >展开/折叠</el-button>
    </div>
    <el-table
      v-if="refreshTable"
      v-adaptive="{bottomOffset:45}"
      v-loading="loading"
      height="100"
      :data="menuList"
      :default-expand-all="isExpandAll"
      row-key="Id"
      :tree-props="{children: 'Children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="ModuleTypeValueCN" label="模块" show-overflow-tooltip align="left" min-width="230px" />
      <el-table-column prop="Description" label="操作名称" :show-overflow-tooltip="true" min-width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.Description }}（{{scope.row.DescriptionCN}}）</span>
        </template>
      </el-table-column>
      <el-table-column prop="DescriptionCN" label="其他" :show-overflow-tooltip="true" min-width="140px">
        <template slot-scope="scope">
          <span v-if="!scope.row.IsEnable" style="cursor:pointer;line-height:20px;text-align:center;font-size: 12px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: 	#DC143C;color: #fff;" title="被禁用">禁</span>
          <span v-if="scope.row.IsHaveSign" style="cursor:pointer;line-height:20px;text-align:center;font-size: 12px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #428bca;color: #fff;" title="需要电签">签</span>
          <span v-if="scope.row.IsHaveReason" style="cursor:pointer;line-height:20px;text-align:center;font-size: 12px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #fab6b6;color: #fff;" title="需要原因">因</span>
          <span v-if="scope.row.IsFinish" style="cursor:pointer;line-height:20px;text-align:center;font-size: 12px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background:#3CB371;color: #fff;" title="已经记录">记</span>
          <span v-if="scope.row.IsJoinPlan" style="cursor:pointer;line-height:20px;text-align:center;font-size: 12px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #FFA500;color: #fff;" title="核对完">核</span>

        </template>
      </el-table-column>
      <el-table-column prop="Identification" label="标识" :show-overflow-tooltip="true" min-width="200px" />
      <el-table-column prop="OptTypeValueCN" label="操作类型" show-overflow-tooltip width="100px" />
      <el-table-column prop="ObjectTypeValueCN" label="对象类型" show-overflow-tooltip min-width="100px" />
      <el-table-column prop="ChildrenTypeValueCN" label="数据类型" show-overflow-tooltip min-width="100px" show-overflow-tooltip />
      <el-table-column
        prop="Sort"
        label="显示顺序"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column label="启用" align="center" prop="CreateTime" min-width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsEnable" size="success">启用</el-tag>
          <el-tag v-else size="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="340" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.ModuleTypeValueCN && scope.row.ObjectTypeValueCN && scope.row.OptTypeValueCN && scope.row.ChildrenTypeValueCN "
            size="mini"
            type="text"
            icon="el-icon-top"
            @click="handleUpMove(scope.row)"
          >上移</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            v-if="!(scope.row.ModuleTypeValueCN && scope.row.ObjectTypeValueCN && scope.row.OptTypeValueCN && scope.row.ChildrenTypeValueCN)"
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
          >新增</el-button>
          <el-button
            v-if="scope.row.ModuleTypeValueCN && scope.row.ObjectTypeValueCN && scope.row.OptTypeValueCN && scope.row.ChildrenTypeValueCN "
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleChildren(scope.row)"
          >Children</el-button>
          <el-button
            v-if="scope.row.ModuleTypeValueCN && scope.row.ObjectTypeValueCN && scope.row.OptTypeValueCN && scope.row.ChildrenTypeValueCN "
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleCopy(scope.row)"
          >复制到</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" top="100px" :close-on-click-modal="false" id="check_config" :visible.sync="open" :width="form.DataType === 'Table' ? '1280px' : '680px'" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col v-show="title !== '复制'" :span="24">
              <el-divider content-position="left">基本信息</el-divider>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="form.ConfigType == 'M' ? title !== '复制' ? '选择父节点' : '复制到' : '操作名称'">
                <treeselect
                  :disabled="form.ConfigType === 'C'"
                  v-model="form.ParentId"
                  :options="menuOptions"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级操作"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item label="操作名称" prop="Description">
                <el-input v-model="form.Description" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item label="操作名称(CN)" prop="Description">
                <el-input v-model="form.DescriptionCN" placeholder="请输入操作名称(CN)" />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item label="标识" prop="Identification">
                <el-input v-model="form.Identification" placeholder="请输入标识" />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="24">
              <el-form-item label="字段key">
                <el-input v-model="form.Code" placeholder="请输入字段key" />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="12">
              <el-form-item label="字段英文">
                <el-input v-model="form.Value" placeholder="请输入字段英文" />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="12">
              <el-form-item label="字段中文">
                <el-input v-model="form.ValueCN" placeholder="请输入字段中文" />
              </el-form-item>
            </el-col>
            <el-col v-show="title !== '复制'" :span="24">
              <el-divider content-position="left">属性</el-divider>
            </el-col>
            <!--分割线-->
            <el-col v-show="form.ConfigType === 'M' && title !== '复制'" :span="12">
              <el-form-item label="功能模块" prop="menuType">
                <el-select v-model="form.ModuleTypeId" placeholder="模块" clearable size="small" @change="changeModule">
                  <el-option v-for="item of dict.type.ModuleType" :value="item.value" :label="item.raw.ValueCN" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'M' && title !== '复制'" :span="12">
              <el-form-item label="操作类型" prop="menuType">
                <el-select v-model="form.OptTypeId" placeholder="操作类型" clearable size="small" @change="changeDescription">
                  <el-option v-for="item of dict.type.OptType" :value="item.value" :label="item.raw.ValueCN" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'M' && title !== '复制'" :span="12">
              <el-form-item label="对象类型" prop="menuType">
                <el-select v-model="form.ObjectTypeId" placeholder="对象类型" clearable size="small" @change="changeDescription">
                  <el-option v-for="item of dict.type.ObjectType" v-if="ChildGroup === item.raw.ChildGroup" :value="item.value" :label="item.raw.ValueCN" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'M' && title !== '复制'" :span="12">
              <el-form-item label="数据类型" prop="menuType">
                <el-select v-model="form.ChildrenTypeId" placeholder="操作子类" clearable size="small" @change="changeDescription">
                  <el-option v-for="item of dict.type.ChildrenType" :value="item.value" :label="item.raw.ValueCN" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item>
                <span slot="label">
                  是否电签
                </span>
                <el-switch
                  v-model="form.IsHaveSign"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item>
                <span slot="label">
                  是否有原因
                </span>
                <el-switch
                  v-model="form.IsHaveReason"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="24">
              <el-form-item>
              <span slot="label">
                数据来源
              </span>
                <el-radio-group v-model="form.IsShowParent">
                  <el-radio :label="0">业务数据</el-radio>
                  <el-radio :label="1">通用数据</el-radio>
                  <el-radio :label="2">列表数据</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="12">
              <el-form-item>
                <span slot="label">
                  依赖父数据
                </span>
                <el-switch
                  v-model="form.IsShowByTrialConfig"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.IsShowByTrialConfig" :span="12">
              <el-form-item>
              <span slot="label">
                依赖字段
              </span>
                <el-input v-model="form.TrialConfigRelyFieldName" placeholder="请输入依赖字段" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="margin-bottom: 10px;">
              <el-row style="background: #f8f8f8;padding: 0 20px;border-radius: 10px;">
                <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="24">
                  <el-form-item label="前端展示类型">
                    <el-radio-group v-model="form.DataType" style="line-height: 30px;padding-top: 10px;" @change="(v) => {if (v === 'Table'){rowDrop2()}}">
                      <el-radio :label="''">字符串</el-radio>
                      <el-radio label="Array">数组(类似QC问题审核)</el-radio>
                      <el-radio label="Dialog">对话</el-radio>
                      <el-radio label="Link">外链</el-radio>
                      <el-radio label="DialogTable">弹框列表</el-radio>
                      <el-radio label="Table">表格</el-radio>
                      <el-radio label="Router">路由</el-radio>
                      <el-radio label="Image">图片</el-radio>
                      <el-radio label="ImageList">图片数组</el-radio>
                      <el-radio label="OSS">OSS</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-row v-show="form.DataType === 'Router'" v-if="form.UrlConfig">
                    <el-col :span="12">
                      <el-form-item>
                      <span slot="label">
                        路由地址
                      </span>
                        <el-input v-model="form.UrlConfig.RoutePath" placeholder="路由地址" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" style="display: flex;align-items: center;justify-content: flex-end">
                      <el-form-item>
                      <span slot="label">
                        是否有参数
                      </span>
                        <el-switch
                          v-model="form.UrlConfig.IsHaveParameters"
                        >
                        </el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="form.UrlConfig.IsHaveParameters" style="display: flex;align-items: center;justify-content: flex-end;">
                      <el-button type="primary" size="mini" style="position: relative;top: 5px;" @click="addParameter">
                        增加参数
                      </el-button>
                    </el-col>
                  </el-row>
                  <el-row v-show="form.DataType === 'Router'" v-if="form.UrlConfig && form.UrlConfig.IsHaveParameters" v-for="(item,index) of form.UrlConfig ? form.UrlConfig.ParameterList : []">
                    <el-col :span="10">
                      <el-form-item>
                      <span slot="label">
                        参数名{{index + 1}}
                      </span>
                        <el-input style="width: 150px;" v-model="form.UrlConfig.ParameterList[index].UrlParameterName" placeholder="参数名" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10" >
                      <el-form-item>
                      <span slot="label">
                        参数值{{index + 1}}
                      </span>
                        <el-input style="width: 150px;" v-model="form.UrlConfig.ParameterList[index].UrlParameterValueName" placeholder="参数值" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleParameterListDelete(index)"
                      >删除</el-button>
                    </el-col>
                  </el-row>
                </el-col>
                <el-button v-show="form.DataType === 'Table'" type="primary" size="mini" style="position: relative;top: -15px" @click="addCol">
                  增加列
                </el-button>
                <el-row v-show="form.DataType === 'Table'" v-if="rowDrop2TableIsShow">
                  <el-table
                    :data="form.TableConfigList"
                    stripe
                    height="280"
                  >
                    <el-table-column
                      prop="IsList"
                      min-width="120"
                      label="是否是数组"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsList"
                          >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="ListName"
                      min-width="120"
                      label="数组"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input :disabled="!scope.row.IsList" v-model="scope.row.ListName" placeholder="数组"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="IsFixedColumn"
                      min-width="140"
                      label="是否固定列名"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsFixedColumn"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="FixedColumnName"
                      min-width="120"
                      label="固定列名"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input :disabled="!scope.row.IsFixedColumn" v-model="scope.row.FixedColumnName" placeholder="固定列名"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="ColumnName"
                      min-width="120"
                      label="列字段名"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input :disabled="scope.row.IsFixedColumn" v-model="scope.row.ColumnName" placeholder="列字段名"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="ColumnValue"
                      min-width="120"
                      label="列显示值"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ColumnValue" placeholder="列显示值"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="IsMerge"
                      min-width="80"
                      label="是否合并"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsMerge"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="MergeColumnName"
                      min-width="120"
                      label="合并组"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input :disabled="!scope.row.IsMerge" v-model="scope.row.MergeColumnName" placeholder="合并组"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="IsPicture"
                      min-width="120"
                      label="是否图片"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsPicture"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="IsDynamicTranslate"
                      min-width="140"
                      label="是否动态翻译"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsDynamicTranslate"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="IsNeedTransalate"
                      min-width="120"
                      label="是否翻译"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.IsNeedTransalate"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="TranslateDictionaryName"
                      min-width="120"
                      label="翻译字典"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-input :disabled="!scope.row.IsNeedTransalate" v-model="scope.row.TranslateDictionaryName" placeholder="合并组"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="MergeColumnName"
                      min-width="80"
                      label="操作"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-delete"
                          @click="handleTableConfigListDelete(scope.row, scope.$index)"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-row>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.DataType === 'Array'" :span="12">
                  <el-form-item>
                  <span slot="label">
                    子数据Lable
                  </span>
                    <el-input v-model="form.ChildDataLabel" placeholder="请输入子数据Lable" />
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.DataType === 'Array'" :span="12">
                  <el-form-item>
                    <span slot="label">
                      子数据Value
                    </span>
                    <el-input v-model="form.ChildDataValue" placeholder="请输入子数据Value" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" style="margin-bottom: 10px;">
              <el-row style="background: #f8f8f8;padding: 0 20px;border-radius: 10px;">
                <el-col v-show="form.ConfigType === 'C' && title !== '复制'" :span="24">
                  <el-form-item label="后端翻译类型">
                    <el-radio-group v-model="form.EnumType">
                      <el-radio :label="''">字符串</el-radio>
                      <el-radio label="Date">时间类型</el-radio>
                      <el-radio label="Dictionary">字典或枚举</el-radio>
                      <el-radio label="Foreign">系统数据</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Dictionary'" :span="12">
                  <el-form-item label="字典表名">
                    <el-input v-model="form.DictionaryCode" placeholder="请输入字典表名" />
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Dictionary'" :span="12">
                  <el-form-item label="翻译字段">
                    <el-input v-model="form.DictionaryType" placeholder="请输入翻译字段" />
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Date'" :span="24">
                  <el-form-item label="时间格式化">
                    <el-select v-model="form.DateType" placeholder="时间格式化" clearable size="small" @change="changeDescription">
                      <el-option value="Date" label="日期" />
                      <el-option value="DateTime" label="日期时间" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Foreign'" :span="12">
                  <el-form-item label="数据库表">
                    <el-input v-model="form.ForeignKeyTableName" placeholder="请输入数据库表" />
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Foreign'" :span="12">
                  <el-form-item label="字段form">
                    <el-input v-model="form.ForeignKeyValue" placeholder="请输入数据库字段form" />
                  </el-form-item>
                </el-col>
                <el-col v-show="form.ConfigType === 'C' && title !== '复制' && form.EnumType === 'Foreign'" :span="12">
                  <el-form-item label="字段to">
                    <el-input v-model="form.ForeignKeyText" placeholder="请输入数据库字段to" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col v-show="title !== '复制'" :span="24">
              <el-form-item label="显示排序" prop="ShowOrder">
                <el-input-number v-model="form.Sort" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col v-show="title !== '复制'" :span="24">
              <el-form-item>
              <span slot="label">
                是否启用
              </span>
                <el-switch
                  v-model="form.IsEnable"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
            <!--分割线-->
            <el-col v-show="title !== '复制' && form.ConfigType == 'M'" :span="24">
              <el-divider content-position="left">其他信息</el-divider>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item>
              <span slot="label">
                是否核对
              </span>
                <el-switch
                  v-model="form.IsJoinPlan"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="form.ConfigType == 'M' && title !== '复制'" :span="12">
              <el-form-item>
              <span slot="label">
                是否记录
              </span>
                <el-switch
                  v-model="form.IsFinish"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="title !== '复制'" type="primary" @click="submitForm">确 定</el-button>
        <el-button v-else type="primary" @click="submitCopy">复 制</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :title="drawer_cfg.title"
      :visible.sync="drawer_cfg.drawerChild"
      direction="rtl"
      size="80%"
    >
      <div style="padding: 0 40px;display: flex;flex-direction: column">
        <div style="text-align: right;height: 50px;">
          <el-select v-model="copeParams.FromItemId" collapse-tags filterable placeholder="完全拷贝对象" clearable size="small">
            <el-option v-for="item of list" v-if="drawer_cfg.drawerChild && item.ConfigType === 'M' && item.ObjectTypeId === selectRow.ObjectTypeId && item.OptTypeId && item.ChildrenTypeId " :value="item.Id" :label="item.Description" />
          </el-select>
          <el-button type="primary" size="mini" style="margin-right: 10px" @click="handleOverCope(selectRow)">完全拷贝</el-button>
          <el-select v-model="copeParams.DataSourceGuids" multiple collapse-tags filterable placeholder="拷贝对象" clearable size="small">
            <el-option v-for="item of list" v-if="drawer_cfg.drawerChild && item.ConfigType === 'M' && item.ObjectTypeId === selectRow.ObjectTypeId && item.OptTypeId && item.ChildrenTypeId " :value="item.Id" :label="item.Description" />
          </el-select>
          <el-button type="primary" size="mini" @click="handleCope(selectRow)">拷贝</el-button>
          <el-button type="primary" size="mini" @click="handleAdd(selectRow)">新建</el-button>
        </div>
        <div style="flex: 1">
          <el-table
            v-if="tableShow"
            v-adaptive="{bottomOffset:0}"
            v-loading="loading"
            :data="childrenList"
            :row-key="selectRow ? selectRow.Id : '1'"
            class="singleTable"
            height="100"
          >
            <el-table-column prop="Code" label="字段名" min-width="120px" :show-overflow-tooltip="true" />
            <el-table-column prop="Value" label="字段英文" min-width="120px" :show-overflow-tooltip="true" />
            <el-table-column prop="ValueCN" label="字段中文" min-width="120px" :show-overflow-tooltip="true" />
            <el-table-column
              prop="Sort"
              label="显示顺序"
              min-width="80"
              show-overflow-tooltip
            />
            <el-table-column label="启用" align="center" prop="CreateTime" min-width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.IsEnable" size="success">启用</el-tag>
                <el-tag v-else size="danger">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否使用父数据" align="center" prop="CreateTime" min-width="130">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.IsShowParent === 1" size="success">通用数据</el-tag>
                <el-tag v-if="scope.row.IsShowParent === 0" size="danger">业务数据</el-tag>
                <el-tag v-if="scope.row.IsShowParent === 2" size="warning">列表数据</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否依赖父数据" align="center" prop="CreateTime" min-width="130">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.IsShowByTrialConfig" size="success">依赖</el-tag>
                <el-tag v-else size="danger">不依赖</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="字典依赖" align="center" prop="CreateTime" min-width="130">
              <template slot-scope="scope">
                <span v-if="scope.row.EnumType && scope.row.DictionaryCode">
                  {{ scope.row.DictionaryCode }}[{{ scope.row.DictionaryType }}]
                </span>
                <span v-else>
                  不依赖
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="TrialConfigRelyFieldName" label="依赖字段" min-width="120px" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" min-width="180" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { fullyReplicated, changeFrontAuditSort, copyFrontAuditConfigItem, getFrontAuditConfigList, addOrUpdateFrontAuditConfig, deleteFrontAuditConfig, copyOtherToThisItem, getAuditConfigChildList, setDictionaryValue } from '@/api/dictionary/checkConfig'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Sortable from 'sortablejs'
import BaseModel from "@/components/BaseModel";

export default {
  name: 'CheckConfig',
  dicts: ['OptType', 'ObjectType', 'ModuleType', 'ChildrenType'],
  components: { Treeselect, BaseModel },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 菜单表格树数据
      menuList: [],

      list: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 菜单状态数据字典
      visibleOptions: [],
      // 查询参数
      queryParams: {
        ModuleTypeId: null,
        ConfigType: 'M'
      },
      copeParams: {
        DataSourceGuids: [],
        AddItemGuid: null,
        FromItemId: null,
        ToItemId: null
      },
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
      childrenList: [],
      // 表单参数
      form: {
      },
      selectRow: null,
      model_cfg: { visible: false, showClose: true, width: '680px', title: '', appendToBody: true },
      drawer_cfg: { drawerChild: false, parentId: '', title: '' },
      // 表单校验
      rules: {
      },
      ChildGroup: null,
      tableShow: false,
      rowDrop2TableIsShow: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addParameter() {
      this.form.UrlConfig.ParameterList.push({
        UrlParameterName: null,
        UrlParameterValueName: null
      })
    },
    handleParameterListDelete(index) {
      this.$confirm('确定删除该项路由参数吗？保存配置后生效。').then(() => {
        this.form.UrlConfig.ParameterList.splice(index, 1)
      })
    },
    handleTableConfigListDelete(row, index) {
      this.$confirm('确定删除该项表格配置吗？保存配置后生效。').then(() => {
        this.form.TableConfigList.splice(index, 1)
      })
    },
    addCol() {
      this.form.TableConfigList.push({
        IsList: false,
        ListName: null,
        IsFixedColumn: false,
        FixedColumnName: null,
        ColumnName: null,
        ColumnValue: null,
        IsMerge: false,
        MergeColumnName: null,
        IsPicture: false,
        IsDynamicTranslate: false,
        IsNeedTransalate: false,
        TranslateDictionaryName: null
      })
    },
    submitCopy() {
      copyFrontAuditConfigItem({
        ParentId: this.form.ParentId,
        ChildId: this.form.Id
      }).then(res => {
        this.$message.success('复制成功')
        this.open = false
        this.getList()
      })
    },
    handleCopy(row) {
      this.reset()
      this.getTreeselect()
      this.form = Object.assign({}, row)
      this.open = true
      this.title = '复制'
    },
    findNearestNumber(arr, target) {
      return arr.reduce((pre, curr) => {
        console.log(pre, curr)
        return pre - target > curr - target ? curr : pre
      })
    },
    handleUpMove(row) {
      var index
      var target
      var list = this.list.filter((v, i) => {
        return row.ModuleTypeId === v.ModuleTypeId && v.ModuleTypeValueCN && v.ObjectTypeValueCN && v.OptTypeValueCN && v.ChildrenTypeValueCN
      })
      list.forEach((v, i) => {
        if (row.Id === v.Id) {
          index = i
        }
      })
      console.log(index)
      if (index === 0) {
        this.$alert('该行排序已是最高')
        return
      } else {
        target = list[index - 1]
      }
      console.log(list)
      var params = [
          { Id: target.Id, Sort: row.Sort },
          { Id: row.Id, Sort: target.Sort }
        ];
      // var params = list.map((v, i) => {
      //   // console.log(index, i)
      //   // if (i === index) {
      //   //   return {
      //   //     Id: v.Id,
      //   //     Sort: index - 1
      //   //   }
      //   // }
      //   // if (index - 1 === i) {
      //   //   return {
      //   //     Id: v.Id,
      //   //     Sort: index
      //   //   }
      //   // }
      //   return {
      //     Id: v.Id,
      //     Sort: i
      //   }
      // })
      this.loading = true
      changeFrontAuditSort(params).then(res => {
        this.loading = false
        this.getList()
      }).catch(() => { this.loading = false })
    },
    rowDrop2() {
      this.$nextTick(() => {
        const tbody = document.querySelector('.el-dialog__body .el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          animation: 500,
          forceFallback: true,
          delay: 500,
          onEnd({ newIndex, oldIndex }) {
            var list = Object.assign([], _this.form.TableConfigList)
            const currRow = list.splice(oldIndex, 1)[0]
            list.splice(newIndex, 0, currRow)
            var params = list.map((v, i) => {
              return v
            })
            _this.rowDrop2TableIsShow = false
            _this.$nextTick(() => {
              _this.$set(_this.form, 'TableConfigList', params)
              _this.rowDrop2TableIsShow = true
              _this.rowDrop2()
            })
            _this.loading = true
          }
        })
      })
    },
    rowDrop() {
      const tbody = document.querySelector('.singleTable .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 500,
        forceFallback: true,
        delay: 500,
        onEnd({ newIndex, oldIndex }) {
          var list = Object.assign([], _this.childrenList)
          const currRow = list.splice(oldIndex, 1)[0]
          list.splice(newIndex, 0, currRow)
          var params = list.map((v, i) => {
            return {
              Id: v.Id,
              Sort: i
            }
          })
          _this.loading = true
          changeFrontAuditSort(params ).then(res => {
            _this.loading = false
            _this.getList()
          }).catch(() => { _this.loading = false })
        }
      })
    },
    handleOverCope(row) {
      if (!this.copeParams.FromItemId) {
        this.$alert('请选择完全拷贝对象')
        return
      }
      this.copeParams.ToItemId = row.Id
      this.loading = true
      fullyReplicated(this.copeParams).then(res => {
        this.loading = false
        this.$message.success('完全Copy成功')
        this.copeParams.FromItemId = null
        if (this.selectRow) {
          this.handleChildren(this.selectRow, true)
        }
      }).catch(() => { this.loading = false })
    },
    handleCope(row) {
      if (this.copeParams.DataSourceGuids.length === 0) {
        this.$alert('请选择拷贝对象')
        return
      }
      this.copeParams.AddItemGuid = row.Id
      this.loading = true
      copyOtherToThisItem(this.copeParams).then(res => {
        this.loading = false
        this.$message.success('Copy成功')
        this.copeParams.DataSourceGuids = []
        if (this.selectRow) {
          this.handleChildren(this.selectRow, true)
        }
      }).catch(() => { this.loading = false })
    },
    changeModule(v1) {
      this.ChildGroup = this.dict.type.ModuleType.find(v => {
        return v.value == v1
      }).raw.ChildGroup
      this.form.ObjectTypeId = null
    },
    handleChildren(row, v, v1) {
      this.selectRow = row
      this.tableShow = false
      getAuditConfigChildList(row.Id).then(res => {
        this.$set(this, 'childrenList', res.Result)
        this.tableShow = true
        if (!v) {
          this.drawer_cfg = { drawerChild: true, parentId: row.Id, title: row.Description, parent: row }
        }
        this.$nextTick(() => {
          this.rowDrop()
        })
      })
    },
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
    normalizer(node) {
      if (node.Children && !node.Children.length) {
        delete node.Children
      }
      return {
        id: node.Id,
        label: node.Description,
        children: node.Children
      }
    },
    toTree(arr, ParentId) {
      function loop(ParentId) {
        const res = []
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i]
          item.hasChildren = false
          if (item.ParentId !== ParentId) {
            continue
          }
          item.Children = loop(item.Id)
          res.push(item)
        }
        return res
      }
      return loop(ParentId)
    },
    // 选择图标
    selected(name) {
      this.form.MenuIcon = name
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getFrontAuditConfigList(this.queryParams).then(res => {
        this.list = res.Result
        // var old = res.Result.filter((v) => {return v.ConfigType === 'M'})
        this.menuList = this.toTree(this.list, '00000000-0000-0000-0000-000000000000')
        if (this.selectRow) {
          this.handleChildren(this.selectRow, true)
        }
        const menu = { Id: '00000000-0000-0000-0000-000000000000', Description: '根节点', Children: [] }
        menu.Children = this.menuList
        this.menuOptions = Object.assign([], [menu])
        this.loading = false
      }).catch(function() {})
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      this.loading = true
      getFrontAuditConfigList({}).then(res => {
        const menu = { Id: '00000000-0000-0000-0000-000000000000', Description: '根节点', Children: [] }
        menu.Children = this.toTree(res.Result, '00000000-0000-0000-0000-000000000000')
        this.menuOptions = Object.assign([], [menu])
        this.loading = false
      }).catch(function() {})
    },
    // 菜单显示状态字典翻译
    visibleFormat(row, column) {
      if (row.MenuType === 'F') {
        return ''
      }
      return this.selectDictLabel(this.visibleOptions, row.visible)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        Id: null,
        ParentId: '00000000-0000-0000-0000-000000000000',
        ConfigType: 'M',
        Description: null,
        DescriptionCN: null,
        InterfaceName: null,
        IsEnable: true,
        ModuleTypeId: null,
        OptTypeId: null,
        ChildrenTypeId: null,
        ObjectTypeId: null,
        IsShowParent: 0,
        Sort: 0,
        Code: null,
        Value: null,
        ValueCN: null,
        EnumType: '',
        IsShowByTrialConfig: false,
        TrialConfigRelyFieldName: null,
        Identification: null,
        IsForwardPosition: false,
        IsHaveSign: false,
        IsHaveReason: false,
        IsJoinPlan: false,
        IsFinish: false,
        IsSpecialType: false,
        DataType: '',
        ChildDataLabel: null,
        ChildDataValue: null,
        DateType: null,
        DictionaryCode: null,
        DictionaryType: null,
        ForeignKeyTableName: null,
        ForeignKeyValue: null,
        ForeignKeyText: null,
        TableConfigList: [],
        UrlConfig: {
          RoutePath: null,
          IsHaveParameters: false,
          ParameterList: []
        },
        IsTableFiled: null,
        TableFiledName: null
      }
      this.resetForm('form')
    },
    findName(id, dict, type) {
      if (id) {
        return this.dict.type[dict].find(v => {
          return v.value === id
        }).raw[type]
      }
      return ''
    },
    changeDescription() {
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.getTreeselect()
      if (row) {
        try {
          var max = Math.max.apply(Math, row.Children.map(i => { return i.Sort }))
        } catch (e) {
          var max = Math.max.apply(Math, this.childrenList.map(i => { return i.Sort }))
        }
        this.form.Sort = max + 1
        this.form.ParentId = row.Id
        this.form.ModuleTypeId = row.ModuleTypeId
        this.form.OptTypeId = row.OptTypeId
        this.form.ChildrenTypeId = row.ChildrenTypeId
        if (row.ModuleTypeId && row.OptTypeId && row.ChildrenTypeId && row.ObjectTypeId) {
          this.form.ConfigType = 'C'
        }
      }
      if (this.form.ModuleTypeId && this.form.ConfigType === 'M') {
        // this.form.Identification = row.OptType + row.ModuleType + row.ChildrenType + row.ObjectType
        this.ChildGroup = this.dict.type.ModuleType.find(v => {
          return v.value == this.form.ModuleTypeId
        }) ? this.dict.type.ModuleType.find(v => {
            return v.value == this.form.ModuleTypeId
          }).raw.ChildGroup : ''
      }
      console.log(this.form.ParentId)
      this.open = true
      this.title = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.getTreeselect()
      this.form = Object.assign({}, row)
      if (this.form.ModuleTypeId) {
        if (this.form.ConfigType === 'M') {
          if (!this.form.Identification) {
            // this.form.Identification = `${row.OptTypeValue}|${row.ObjectTypeValue}|${row.ChildrenTypeValue}|${row.ModuleTypeValue}`
          }
        }
        this.ChildGroup = this.dict.type.ModuleType.find(v => {
          return v.value == this.form.ModuleTypeId
        }) ? this.dict.type.ModuleType.find(v => {
            return v.value == this.form.ModuleTypeId
          }).raw.ChildGroup : ''
      }
      this.open = true
      this.title = '修改'
      this.rowDrop2()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          addOrUpdateFrontAuditConfig(this.form).then(response => {
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.open = false
            this.getList()
          })
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.Description + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        return deleteFrontAuditConfig(row.Id)
      }).then(() => {
        this.loading = false
        this.getList()
        this.$message.success('删除成功')
      }).catch(() => { this.loading = false })
    }
  }
}
</script>
<style lang="scss">
  .vue-treeselect div{
    line-height: 40px;
  }
  #check_config .el-dialog__body{
    padding: 0 20px;
  }
</style>
