<template>
  <el-container class="custom-query-list fullheight" form-manager>
    <ht-aside-tree cat-id="18" @node-click="handleNodeClick" @check="check" />
    <el-container>
      <el-main>
        <ht-table
          ref="identityTable"
          @load="loadData"
          :data="data"
          :pageResult="pageResult"
          :selection="true"
          quick-search-props="name,alias"
          :show-export="false"
          :defaultSorter="[{property: 'CREATE_TIME_', direction: 'DESC'}]"
          @row-click="rowClick"
          :header-cell-class-name="headerCellClassName"
          @selection-change="handleSelectionChange"
        >
          <template v-slot:toolbar>
              <el-button icon="el-icon-plus" @click="handleCommand({command: 'add'})" type="primary">添加</el-button>
              <el-button icon="el-icon-back" @click="handleCommand({command: 'import'})">导入</el-button>
              <el-button icon="el-icon-right" @click="handleCommand({command: 'export'})" :disabled="isDisabled">导出</el-button>
              <ht-delete-button :url="identityDeleteUrl" :htTable="$refs.identityTable" style="margin-left:10px;" :disabled="isDisabled">删除</ht-delete-button>
          </template>
          <template>
            <ht-table-column type="index" width="50" align="center" label="序号" />
            <ht-table-column
              prop="name"
              label="名称"
              width="300"
              :sortable="true"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                <el-link
                  @click="handleCommand({row: row, command: 'edit'})"
                  type="primary"
                  >{{ row.name }}</el-link
                >
              </template>
            </ht-table-column>
            <ht-table-column prop="alias" label="别名" :sortable="true" />
            <ht-table-column
              prop="genType"
              label="生成类型"
              :render-header="renderHeaderMethod"
              :filters="[{text: '递增', value: 0}, {text: '每天生成', value: 1}, {text: '每月生成', value: 2}, {text: '每年生成', value: 3}]"
            >
              <template v-slot="{row}">
                <el-tag type="success" v-if="row.genType === 0">递增</el-tag>
                <el-tag type="primary" v-if="row.genType === 1">每天生成</el-tag>
                <el-tag type="warning" v-if="row.genType === 2">每月生成</el-tag>
                <el-tag type="danger" v-if="row.genType === 3">每年生成</el-tag>
              </template>
            </ht-table-column>
            <ht-table-column prop="regulation" label="规则" sortable />
            <ht-table-column prop="noLength" label="长度" sortable />
            <ht-table-column prop="typeName" label="分类" :sortable="true" />
            <!-- <ht-table-column width="150" label="操作">
                  <template v-slot="{row}">
                    <el-button size="mini" class="el-icon-edit"  @click="handleCommand({row:row,command:'edit'})">编辑</el-button>
                    <el-dropdown
                      size="mini"
                      split-button
                      @command="handleCommand"
                      @click="handleCommand({row:row,command:'edit'})"
                    >
                      <span>
                        <i class="el-icon-edit"></i>编辑
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-menu" :command="{row:row,command:'get'}">查看</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
            </ht-table-column>-->
          </template>
        </ht-table>
      </el-main>
    </el-container>
    <el-dialog
      width="50%"
      :title="identiyTitle"
      :visible="dialogVisible"
      v-if="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      top="6vh"
    >
      <el-form
        :disabled="identityDisabled"
        v-model="identity"
        data-vv-scope="editIdentityForm"
      >
        <ht-form-item
          label="流水号分类"
          prop="name"
          label-width="120px"
          class="identity-input-width"
        >
          <eip-sys-type-selector
            placeholder="请选择分类"
            type-key="IDENTITY_MANAGER_TYPE"
            v-model="identity.typeName"
            :sys-type-id.sync="identity.typeId"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item
          label="流水号名称"
          prop="name"
          label-width="120px"
          class="identity-input-width"
        >
          <ht-input
            v-model="identity.name"
            autocomplete="off"
            :validate="{required: true}"
            placeholder="请输入名称"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item
          label="流水号别名"
          prop="alias"
          label-width="120px"
          class="identity-input-width"
        >
          <ht-input
            v-model="identity.alias"
            v-pinyin="identity.name"
            autocomplete="off"
            :validate="{
              required: true,
              regex: {
                exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                message: '只能输入字母、数字、下划线，且以字母开头'
              }
            }"
            placeholder="请输入别名"
            :disabled="identity.id ? true : false"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item
          label="流水号规则"
          label-width="120px"
          class="identity-item-bottom identity-input-width"
        >
          <ht-input
            width="100%"
            v-model="identity.regulation"
            :validate="{required: true}"
            placeholder="请输入流水号规则"
            :maxlength="100"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label label-width="120px" class="identity-item-bottom">
          <ul>
            <li>{yyyy}{MM}{dd}{NO}</li>
            <li>{yyyy}:表示年份</li>
            <li>
              {MM} :表示月份，如果月份小于10，则加零补齐，如1月份表示为01。
            </li>
            <li>{mm} :表示月份，月份不补齐，如1月份表示为1。</li>
            <li>{DD} :表示日，如果小于10号，则加零补齐，如1号表示为01。</li>
            <li>{dd} :表示日，日期不补齐，如1号表示为1。</li>
            <li>{NO} :表示流水号，前面补零。</li>
            <li>{no} :表示流水号，后面补零。</li>
            <li>
              {xx.xxx}
              :表示表单中的字符，xx为业务对象别名，xxx为字段名称。例如：{student.name}
            </li>
          </ul>
        </ht-form-item>
        <ht-form-item
          label="生成类型"
          label-width="120px"
          class="identity-item-bottom identity-input-width"
        >
          <ht-radio
            :validate="{required: true}"
            v-model="identity.genType"
            :options="genTypes"
          />
        </ht-form-item>
        <ht-form-item label label-width="120px" class="identity-item-bottom">
          <ul>
            <li>1.每天生成。每天从初始值开始计数。</li>
            <li>2.递增，流水号一直增加。</li>
          </ul>
        </ht-form-item>
        <ht-form-item
          label="流水号长度"
          label-width="120px"
          class="identity-item-bottom identity-input-width"
        >
          <ht-input
            type="number"
            :min="1"
            :max="9"
            v-model="identity.noLength"
            placeholder="请输入流水号长度"
          />
        </ht-form-item>
        <ht-form-item label label-width="120px" class="identity-item-bottom">
          <ul>
            <li>
              这个长度表示当前流水号的长度数，只包括流水号部分{NO},如果长度为5，当前流水号为5，则在流水号前补4个0，表示为00005。
            </li>
            <li>
              {no}如果长度为5，当前流水号为501，则在流水号后面补5个0，表示为50100000。
            </li>
          </ul>
        </ht-form-item>
        <ht-form-item
          label="初始值"
          label-width="120px"
          class="identity-item-bottom identity-input-width"
        >
          <ht-input
            :validate="'required: true|regex:^[0-9]*$,只能输入数字'"
            v-model="identity.initValue"
            :maxlength="identity.noLength || 1"
            placeholder="请输入初始值"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label label-width="120px" class="identity-item-bottom">
          <ul>
            <li>
              这个初始值表示流水号部分{NO}的初始值。如
              2015102700001,初始值为1，则流水号部分的初始值为00001
            </li>
          </ul>
        </ht-form-item>
        <ht-form-item
          label="步长"
          label-width="120px"
          class="identity-item-bottom identity-input-width"
        >
          <ht-input
            :validate="'required: true|regex:^[0-9]*$,只能输入数字'"
            v-model="identity.step"
            placeholder="请输入步长"
            :maxlength="4"
          />
        </ht-form-item>
        <ht-form-item label label-width="120px" class="identity-item-bottom">
          <ul>
            <li>
              流水号每次递加的数字，默认步长为1。比如步长为2，则每次获取流水号则在原来的基础上加2。
            </li>
          </ul>
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancle('dialogVisible')">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          v-show="!identityDisabled"
          :url="saveIdentityUrl()"
          :model="identity"
          :is-submit="isSubmit"
          :request-method="requestMethod"
          scope-name="editIdentityForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>
    <!-- 加载数据 用作编辑流水号和查看流水号-->
    <ht-load-data
      :url="loadDataUrl"
      context="portal"
      @after-load-data="afterLoadData"
    ></ht-load-data>
    <el-dialog
      title="上传文件"
      :visible="uploadDialogVisible"
      :before-close="beforeClose"
      name="uploadDialog"
      top="30vh"
      width="40%"
      custom-class="upload-dialog"
    >
      <eip-sys-type-selector
        placeholder="请选择分类"
        type-key="IDENTITY_MANAGER_TYPE"
        v-model="formTypeSelectorCatName"
        :sys-type-id.sync="formTypeSelectorCatId"
        :validate="{required: true}"
      />
      <br />
      <br />
      <el-upload
        :action="uploadUrl"
        :http-request="handleImport"
        accept=".zip"
        :file-list="fileList"
        :limit="1"
        :auto-upload="false"
        :on-exceed="onExceed"
        ref="elUpload"
        class="upload-dialog__content"
      >
        <el-button size="small" icon="el-icon-upload">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadSubmit">上传</el-button>
        <el-button type="default" @click="beforeClose">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="温馨提示"
      :visible="myDialogVisible"
      :before-close="beforeClose2"
      name="myDialogVisible"
      width="30%"
      custom-class="upload-dialog"
      top="30vh"
    >
      <span>部分流水号已存在，请确认重复项的导入操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" @click="beforeClose2">取消</el-button>
        <el-button type="primary" @click="confirmSubmit('jump')"
          >跳过重复项</el-button
        >
        <el-button type="primary" @click="confirmSubmit('cover')"
          >覆盖更新</el-button
        >
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import {Message} from 'element-ui'
import sys from '@/api/portal.js'
import req from '@/request.js'
import portal from '@/api/portal.js'
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
const htAsideTree = () => import('@/components/common/HtAsideTree.vue')
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
export default {
  name: 'meta-identity',
  components: {htAsideTree, EipSysTypeSelector},
  mixins: [tableHeaderFilter],
  data() {
    return {
      formTypeSelectorCatId: '',
      formTypeSelectorCatName: '',
      typeIdQuery: null,
      identityDisabled: false,
      identiyTitle: '',
      loadDataUrl: '',
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      isSubmit: true,
      identity: {
        name: '',
        alias: '',
        regulation: '',
        genType: '',
        noLength: '',
        initValue: '',
        step: ''
      },
      genTypes: [
        {key: 3, value: '每年生成'},
        {key: 2, value: '每月生成'},
        {key: 1, value: '每天生成 '},
        {key: 0, value: '递增'}
      ],
      uploadDialogVisible: false,
      uploadAddress: '',
      myDialogVisible: false,
      fileList: [],
      uploadUrl: window.context.portal + '/sys/identity/v1/import',
        isDisabled:true,
      selectedList:[]
    }
  },
  computed: {
    requestMethod: function() {
      return 'POST'
    },
    identityDeleteUrl: function() {
      return window.context.portal + '/sys/identity/v1/remove'
    }
  },
  watch: {
    'identity.noLength': function(val, oldVal) {
      //如果流程号长度有变更且流水号长度是缩短的情况，则清空初始值
      if (oldVal > val) {
        this.identity.initValue = ''
      }
    },
    selectedList:{
      handler(val){
        this.isDisabled = val.length < 1 ? true : false
      },
      deep:true
    }
  },
  methods: {
    handleNodeClick(node) {
      if (node.typeKey == 'FORM_TYPE') {
        this.typeIdQuery = null
      } else {
        // this.bpmForm.typeName = node.name
        // this.bpmForm.typeId = node.id
        this.typeIdQuery = {
          property: 'typeId',
          value: node.id,
          group: 'typeId',
          operation: 'EQUAL',
          relation: 'AND'
        }
      }
      this.$refs.identityTable.load()
    },
    check(data, checkObj) {
      console.log('checkObj', checkObj)
      if (checkObj.checkedKeys.length == 0) {
        this.typeIdQuery = null
      } else {
        this.typeIdQuery = {
          property: 'typeId',
          value: checkObj.checkedKeys.join(','),
          group: 'typeId',
          operation: 'IN',
          relation: 'AND'
        }
      }
      this.$refs.identityTable.load()
    },
     handleSelectionChange(selection){
      this.selectedList = selection
    },
    //鼠标选中行改变复选框
    rowClick(row, column, event) {
      this.$refs.identityTable.$refs.htTable.toggleRowSelection(row)
    },
    beforeSaveData() {
      this.isSubmit = true
    },
    saveIdentityUrl: function() {
      return window.context.portal + '/sys/identity/v1/save'
    },
    confirmSubmit(arg) {
      const this_ = this
      let url =
        window.context.portal +
        '/sys/identity/v1/importData?unZipFilePath=' + this.uploadAddress +
         '&status=' + arg +
        '&typeId=' + this.formTypeSelectorCatId
      req.post(url).then(function(rep) {
        rep = rep.data
        if (rep && rep.state) {
          Message.success(rep.message)
        } else {
          Message.error(rep.message || '保存失败')
        }
        this_.myDialogVisible = false
        this_.fileList = []
        this_.uploadDialogVisible = false
        this_.$refs.identityTable.load()
      })
    },
    afterSaveData() {
      this.dialogVisible = false
      this.$refs.identityTable.load()
    },
    afterLoadData(data) {
      // 编辑流水号
      if (this.dialogVisible) {
        this.identity = data
        setTimeout(() => this.$validator.validateAll('editIdentityForm'))
      }
    },
    dialogCancle(dialogVisible) {
      this.loadDataUrl = ''
      this[dialogVisible] = false
      setTimeout(() => (this.identityDisabled = false), 500)
    },
    handleClose() {
      this.loadDataUrl = ''
      this.dialogVisible = false
      setTimeout(() => (this.identityDisabled = false), 500)
    },
    showDialog(row) {
      this.dialogVisible = true
      if (row) {
        this.loadDataUrl = `/sys/identity/v1/getJson?id=${row.id}`
      }
    },
    loadData(param, cb) {
      let _param = {querys: []}
      _param = {..._param, ...param}
      if (this.typeIdQuery && this.typeIdQuery.value != '18') {
       const typeIdObj =  _param.querys.find(item=>item.property === 'typeId')
      if(typeIdObj){
        _param.querys = _param.querys.filter(item=>item.property !== 'typeId')
      }
        _param.querys.push(this.typeIdQuery)
      }else{
        _param.querys = _param.querys.filter(item=>item.property !== 'typeId')
      }
      sys
        .getIdentityPageJson(_param)
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    export() {
      let selection = this.$refs.identityTable.$refs.htTable.selection
      if (!selection || selection.length == 0) {
        this.$message({type: 'warning', message: '请至少选择一条记录'})
        return
      }
      let ids = []
      for (let i = 0; i < selection.length; i++) {
        ids.push(selection[i].id)
      }
      req.download(
        window.context.portal +
          '/sys/identity/v1' +
          '/export?ids=' +
          ids.join(',')
      )
    },
    beforeClose() {
      this.uploadDialogVisible = false
      this.fileList = []
      // this.loadData();
    },
    beforeClose2() {
      this.myDialogVisible = false
    },
    handleImport(param) {
      let formData = new FormData()
      formData.append('file', param.file)
      formData.append('typeId', this.formTypeSelectorCatId)
      portal.importIdentity(formData).then(resp => {
        if (resp.state) {
          if (resp.message && resp.message == 'confirmUpload') {
            this.uploadAddress = resp.value
            this.myDialogVisible = true
          } else {
            this.$message({type: 'success', message: resp.message})
            this.fileList = []
            this.uploadDialogVisible = false
            this.$refs.identityTable.load() //重新加载列表数据
          }
        } else {
          //this.$message({type:"warning",message:"导入失败"})
          this.beforeClose()
        }
      })
    },
    handleCommand(params) {
      switch (params.command) {
        case 'edit':
          this.identiyTitle = '编辑流水号'
          this.showDialog(params.row)
          break
        case 'add':
          this.identity = {
            name: '',
            alias: '',
            regulation: '',
            genType: '',
            noLength: '',
            initValue: '',
            step: ''
          }
          this.identiyTitle = '添加流水号'
          this.showDialog()
          break
        case 'get':
          this.identiyTitle = '查看流水号'
          this.isSubmit = false
          this.identityDisabled = true
          this.showDialog(params.row)
          break
        case 'import':
          this.uploadDialogVisible = true
          break
        case 'export':
          this.export()
          break
        default:
          break
      }
    },
    uploadSubmit() {
      if (this.$refs.elUpload.uploadFiles.length == 0) {
        this.$message({type: 'warning', message: '请上传文件'})
      }
      this.$refs.elUpload.submit()
    },
    onExceed() {
      this.$message.warning('只能选择一个zip文件!')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .cell>.el-table__column-filter-trigger{
    display: none;
  }
}

ul {
  padding: 0px;
  margin: 0px;
}

li {
  list-style-type: none;
}

.identity-item-bottom {
  margin-bottom: 5px;
}

.identity-input-width .inputs {
  width: 100%;
}
@media (max-width: 1024px) {
  /deep/ .search-container__col {
    flex-wrap: wrap;
    .el-button-group {
      margin-top: 10px;
    }
  }
}
/deep/.el-dialog__wrapper {
  overflow: unset !important;
}
/deep/.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  height: calc(100% - 140px);
  overflow-y: auto;
}
/deep/.el-dialog {
  height: 90%;
  min-height: 400px;
}
/deep/.el-dialog__body .selector-table {
  height: 100% !important;
}
/deep/.el-dialog .el-dialog__body .select-tree-div {
  height: calc(100% - 60px);
  min-height: unset;
}
@media (max-height: 960px) {
  /deep/.el-dialog__body .el-container {
    height: 100% !important;
  }
}
/deep/ [name='uploadDialog'] {
  // height:30%;
}
/deep/ .el-dialog.upload-dialog {
  height: unset;
  /deep/.el-dialog__body {
    height: unset;
  }
  .upload-dialog__content {
    height: 150px;
  }
  min-height: unset;
}
/deep/.inputs.ht-form-inputs__inline {
  position: relative;
}
</style>
