<template>
  <div>
    <el-drawer
      size="45%"
      :title="(authId ? '编辑' : '添加') + '分管授权'"
      :visible="dialogVisible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      custom-class="authorization-dialog-wrap"
    >
      <el-form
        v-form
        data-vv-scope="editFlowAuthForm"
        class="drawer-content"
        label-position="left"
        label-width="120px"
      >
        <el-row type="flex">
          <el-col>
            <el-form-item label="权限描述:" required>
              <ht-input
                v-model="flowAuth.authorizeDesc"
                validate="required"
                :maxlength="200"
                :showWordLimit="true"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="权限类型:" required>
              <div>
                <el-checkbox
                  v-for="(key, value) in authorizeTypes"
                  v-model="authorizeTypes_[value]"
                  @change="authorizeTypesChange"
                  :key="value"
                  >{{ key }}</el-checkbox
                >
                <span style="margin-left: 5px; color: red"
                  >注：勾选任务时必须勾选实例，任务的部门权限来源于实例</span
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="授权人员名称:" required>
              <div style="margin-bottom: 10px">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="showAuthDialog"
                  >选择人员</el-button
                >
              </div>
              <el-table
                :data="calOwnerNameJson"
                border
                :header-cell-style="{backgroundColor: 'rgba(244,244,244,0.39)'}"
              >
                <el-table-column prop="title">
                  <template slot="header"> 权限分类 </template>
                </el-table-column>
                <el-table-column prop="name" label="授权给"></el-table-column>
                <!-- <el-table-column prop="name" label="实例查询权限范围" >
                      <template v-slot="{ row, column, $index }">
                        <eip-org-selector
                          v-if="row.type != 'everyone'"
                          v-model="row.authOrgName"
                          :config="{id:'calOwnerNameJson['+$index+'].authOrg'}"
                          append-to-body
                        />
                      </template>
                    </el-table-column>-->
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="授权流程类型:" required>
              <ht-radio
                v-model="flowAuth.multiple"
                :options="[
                  {key: '1', value: '流程'},
                  {key: '2', value: '分类'}
                ]"
                validate="required"
              ></ht-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item
              label="授权流程名称:"
              v-show="flowAuth.multiple == '1'"
              required
            >
              <div style="margin-bottom: 10px">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="showFlowDialog"
                  >选择流程</el-button
                >
                <el-button @click="clearAll" size="mini"
                  >一键清除授权内容</el-button
                >
              </div>

              <el-table
                :data="defNameJson"
                :header-cell-style="{backgroundColor: 'rgba(244,244,244,0.39)'}"
              >
                <el-table-column prop="defName" width="160" :show-overflow-tooltip="true">
                  <template slot="header"> 流程名称 </template>
                  <template v-slot="{row}"> {{row.defName}}({{row.defKey}})</template>
                </el-table-column>
                <el-table-column label="授权内容">
                  <el-table-column :render-header="renderLastHeader">
                    <template v-slot="{row, column, $index}">
                      <div v-show="authorizeTypes_.management">
                        <el-checkbox
                          @change="
                            checked => handleDefauthSelect(checked, row, 'def')
                          "
                          >全部</el-checkbox
                        >
                        <span
                          style="
                            margin-right: 7px;
                            color: #909399;
                            font-weight: 700;
                          "
                          >定义</span
                        >
                        <el-checkbox v-model="row.right.m_edit"
                          >编辑</el-checkbox
                        >
                        <el-checkbox v-model="row.right.m_del"
                          >删除</el-checkbox
                        >
                        <el-checkbox v-model="row.right.m_start"
                          >启动</el-checkbox
                        >
                        <!-- <el-checkbox v-model="row.right.m_set">设置</el-checkbox> -->
                        <el-checkbox
                          v-model="row.right.m_clean"
                          style="marginright: 0"
                          >清除数据</el-checkbox
                        >
                      </div>
                      <div
                        v-show="authorizeTypes_.instance"
                        class="process-example"
                      >
                        <span
                          style="
                            margin-right: 7px;
                            color: #909399;
                            font-weight: 700;
                          "
                          >实例</span
                        >
                        <el-checkbox v-model="row.right.i_del"
                          >删除</el-checkbox
                        >
                        <el-checkbox v-model="row.right.i_org"
                          >本部门</el-checkbox
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template v-slot="{row, column, $index}">
                    <el-button
                      type="text"
                      @click="defNameJson.remove(defNameJson[$index])"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item
              label="授权流程名称:"
              v-show="flowAuth.multiple == '2'"
              required
            >
              <div style="margin-bottom: 10px">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="showSysTypeDialog"
                  >选择流程</el-button
                >
                <el-button size="mini" @click="clearAll"
                  >一键清除授权内容</el-button
                >
              </div>
              <el-table
                :data="defAllNameJson"
                :header-cell-style="{backgroundColor: 'rgba(244,244,244,0.39)'}"
              >
                <el-table-column prop="defName" width="160">
                  <template slot="header"> 流程分类名称 </template>
                </el-table-column>
                <el-table-column label="授权内容">
                  <el-table-column :render-header="renderLastHeader">
                    <template v-slot="{row, column, $index}">
                      <div
                        v-show="authorizeTypes_.management"
                        class="authorized-content"
                      >
                        <el-checkbox
                          @change="
                            checked => handleDefauthSelect(checked, row, 'type')
                          "
                          >全部</el-checkbox
                        >
                        <span
                          style="
                            margin-right: 7px;
                            color: #909399;
                            font-weight: 700;
                          "
                          >定义</span
                        >
                        <el-checkbox v-model="row.right.m_edit"
                          >编辑</el-checkbox
                        >
                        <el-checkbox v-model="row.right.m_del"
                          >删除</el-checkbox
                        >
                        <el-checkbox v-model="row.right.m_start"
                          >启动</el-checkbox
                        >
                        <!-- <el-checkbox v-model="row.right.m_set"
                          >设置</el-checkbox
                        > -->
                        <el-checkbox v-model="row.right.m_clean"
                          >清除数据</el-checkbox
                        ><span style="marginleft: 2px"></span>
                      </div>
                      <div
                        v-show="authorizeTypes_.instance"
                        class="second-checkbox"
                        style="margin-left: 58px"
                      >
                        <span
                          style="
                            margin-right: 7px;
                            color: #909399;
                            font-weight: 700;
                          "
                          >实例</span
                        >
                        <el-checkbox
                          v-model="row.right.i_del"
                          style="marginright: 0"
                          >删除</el-checkbox
                        ><span></span>
                        <el-checkbox
                          v-model="row.right.i_org"
                          style="marginleft: 29px"
                          >本部门</el-checkbox
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template v-slot="{row, column, $index}">
                    <el-button
                      type="text"
                      @click="defAllNameJson.remove(defAllNameJson[$index])"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogCancle('dialogVisible')">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${bpmModel}/flow/defAuthorize/v1/save"
          :model="flowAuth"
          :is-submit="isSubmit"
          :loading="buttonLoading"
          :disabled="buttonDisabled"
          scope-name="editFlowAuthForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-drawer>
    <!-- 选择对话框  -->
    <eip-auth-dialog
      ref="eipAuthDialog"
      name="eipAuthDialog"
      @onConfirm="dialogOnConfirm"
      append-to-body
    />
    <!-- 流程选择对话框  -->
    <eip-flow-dialog
      ref="eipFlowDialog"
      name="eipFlowDialog"
      @onConfirm="dialogOnConfirm"
      append-to-body
    />

    <!-- 分类对话框  -->
    <eip-sys-type-dialog
      ref="flowTypeDialog"
      name="flowTypeDialog"
      show-checkbox
      type-key="FLOW_TYPE"
      @onConfirm="dialogOnConfirm"
    ></eip-sys-type-dialog>

    <ht-load-data ref="htLoadData"></ht-load-data>
  </div>
</template>
<script>
import req from '@/request.js'
import {Base64} from 'js-base64'
import utils from '@/hotent-ui-util.js'
const eipAuthDialog = () => import('@/components/dialog/EipAuthDialog.vue')
const eipFlowDialog = () => import('@/components/dialog/EipFlowDialog.vue')
const eipSysTypeDialog = () =>
  import('@/components/dialog/EipSysTypeDialog.vue')
export default {
  components: {
    eipAuthDialog,
    eipFlowDialog,
    eipSysTypeDialog
  },
  name: 'def-authorize-dialog',
  data() {
    return {
      dialogVisible: false,
      dialogVisibleMenuPerm: false,
      flowAuth: {
        authorizeTypes: {start: true},
        defAllNameJson: [],
        defNameJson: [],
        multiple: '1'
      },
      authorizeTypes_: {start: true},
      authorizeTypes: {
        start: '启动',
        management: '定义',
        task: '任务',
        instance: '实例'
      },
      calOwnerNameJson: [],
      defAllNameJson: [],
      defNameJson: [],
      isSubmit: true,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      authId: '',
      buttonLoading: false,
      buttonDisabled: false
    }
  },
  methods: {
    showDialog(id, defRow) {
      this.dialogVisible = true
      this.initData(id, defRow)
    },
    initData(id, defRow) {
      this.dialogVisible = true
      const me = this
      if (id) {
        this.authId = id
        this.$refs.htLoadData
          .loadData('${bpmModel}/flow/defAuthorize/v1/defAuthorizeGet?id=' + id)
          .then(data => {
            me.flowAuth = data
            me.authorizeTypes_ = JSON.parse(data.authorizeTypes)
            me.flowAuth.authorizeTypes = me.authorizeTypes_
            me.defNameJson = JSON.parse(data.defNameJson)

            // right 转为对象
            me.defNameJson.forEach(item => {
              if (item.right && item.right.constructor == String) {
                item.right = JSON.parse(item.right)
              }
            })

            me.defAllNameJson = JSON.parse(data.defAllNameJson)

            // right 转为对象
            me.defAllNameJson.forEach(item => {
              if (item.right && item.right.constructor == String) {
                item.right = JSON.parse(item.right)
              }
            })

            me.calOwnerNameJson = JSON.parse(data.ownerNameJson)
          })
      } else {
        this.authId = ''
        me.flowAuth = {
          authorizeTypes: {start: true},
          defAllNameJson: [],
          defNameJson: [],
          multiple: '1'
        }
        me.defNameJson = []
        me.defAllNameJson = []
        me.calOwnerNameJson = []
        me.authorizeTypes_ = {start: true}
        if (defRow && defRow.defKey) {
          let defaultRight = {
            m_edit: false,
            m_del: false,
            m_start: false,
            m_set: false,
            m_clean: false,
            i_del: false,
            i_log: false,
            i_org: false
          }
          me.defNameJson.push({
            defName: defRow.name,
            defKey: defRow.defKey,
            right: defaultRight
          })
        }
      }
    },
    dialogCancle(dialogVisible) {
      this[dialogVisible] = false
      this.$emit('onConfirm', false)
    },
    renderLastHeader(h) {
      //下拉框选项
      let managementFilters = [
        {key: 'm_edit', value: '编辑', falseLabel: 'un_m_edit'},
        {key: 'm_del', value: '删除', falseLabel: 'un_m_del'},
        {key: 'm_start', value: '启动', falseLabel: 'un_m_start'}
      ]
      // if (this.flowAuth.multiple == 2) {
      //   managementFilters.push({
      //     key: 'm_set',
      //     value: '设置',
      //     falseLabel: 'un_m_set'
      //   })
      // }
      let managementAllFilters = [
        {key: 'm_all', value: '全部', falseLabel: 'un_m_all'}
      ]
      managementFilters.push({
        key: 'm_clean',
        value: '清除数据',
        falseLabel: 'un_m_clean'
      })
      let instanceFilters = [
        {key: 'i_del', value: '删除', falseLabel: 'un_i_del'}
      ]
      let instanceOrgFilters = [
        {key: 'i_org', value: '本部门', falseLabel: 'un_i_org'}
      ]
      return h(
        'div',
        {
          class: 'header-authorized-content'
        },
        [
          [
            managementAllFilters.map(item => {
              if (this.authorizeTypes_.management) {
                return h('el-checkbox', {
                  props: {
                    trueLabel: item.key,
                    falseLabel: item.falseLabel,
                    label: item.value
                  },
                  on: {
                    change: this.updateAllSelectedAll // 选中事件
                  }
                })
              }
            })
          ],
          h(
            'span',
            {
              //div里面有一个文字提示：多选所属内容
              style: {marginRight: '4px'},
              class: 'authorized-content-text'
            },
            this.appendHtml(1)
          ),
          [
            managementFilters.map(item => {
              if (this.authorizeTypes_.management) {
                return h('el-checkbox', {
                  props: {
                    trueLabel: item.key,
                    falseLabel: item.falseLabel,
                    label: item.value
                  },
                  on: {
                    change: this.updateAllSelected // 选中事件
                  }
                })
              }
            })
          ],
          h('span', {class: 'header-span'}, this.appendHtml(2)),
          h('div', {}, ''),
          h('span', {class: 'instance-span'}, this.appendHtml(3)),
          [
            instanceFilters.map(item => {
              if (this.authorizeTypes_.instance) {
                return h('el-checkbox', {
                  props: {
                    trueLabel: item.key,
                    falseLabel: item.falseLabel,
                    label: item.value
                  },
                  on: {
                    change: this.updateAllSelected // 选中事件
                  }
                })
              }
            })
          ],
          h('span', {class: 'last-brackets-span'}, this.appendHtml(4)),
          [
            instanceOrgFilters.map(item => {
              if (this.authorizeTypes_.instance) {
                return h('el-checkbox', {
                  props: {
                    trueLabel: item.key,
                    falseLabel: item.falseLabel,
                    label: item.value
                  },
                  on: {
                    change: this.updateAllSelectedAll // 选中事件
                  }
                })
              }
            })
          ]
        ]
      )
    },
    appendHtml(op) {
      if (op == 1 && this.authorizeTypes_.management) {
        return '定义 '
      } else if (op == 2 && this.authorizeTypes_.management) {
        return ' '
      } else if (op == 3 && this.authorizeTypes_.instance) {
        return '实例 '
      } else if (op == 4 && this.authorizeTypes_.instance) {
        return ' '
      }
      return ''
    },
    updateAllSelectedAll(oValue) {
      let res = true
      if (oValue.indexOf('un_') != -1) {
        res = false
      }
      let jsonName =
        this.flowAuth.multiple == 1 ? 'defNameJson' : 'defAllNameJson'
      let _this = this
      let idx = 0
      this[jsonName].forEach(item => {
        if (oValue.indexOf('i_org') != -1) {
          _this.$set(_this[jsonName][idx].right, 'i_org', res)
          idx++
        } else {
          item.right['m_edit'] = res
          item.right['m_del'] = res
          item.right['m_start'] = res
          item.right['m_clean'] = res
          if (this.flowAuth.multiple != 1) {
            item.right['m_set'] = res
          }
        }
      })
    },
    updateAllSelected(oValue) {
      let res = true
      if (oValue.indexOf('un_') != -1) {
        res = false
      }
      var name = oValue.replace('un_', '')
      if (this.flowAuth.multiple == 1) {
        this.defNameJson.forEach(item => {
          item.right[name] = res
        })
      } else {
        this.defAllNameJson.forEach(item => {
          item.right[name] = res
        })
      }
    },
    showSysTypeDialog() {
      this.$refs.flowTypeDialog.showDialog()
    },
    showAuthDialog() {
      let conf = {
        right: [],
        permissionList: [
          {type: 'everyone', title: '所有人'},
          {type: 'user', title: '用户'},
          {type: 'org', title: '组织'},
          {type: 'pos', title: '岗位'},
          {type: 'role', title: '角色'}
          // ,{ type: "none", title: "无" }
        ]
      }
      if (this.calOwnerNameJson) {
        conf.right = this.calOwnerNameJson
      }
      this.$refs.eipAuthDialog.showDialog(conf)
    },
    dialogOnConfirm(data, name) {
      if (name == 'eipAuthDialog') {
        this.calOwnerNameJson = data
      }
      if (name == 'eipFlowDialog') {
        data.forEach(element => {
          let isEquals = false
          this.defNameJson.forEach(item => {
            if (!isEquals && item.defKey == element.defKey) {
              isEquals = true
            }
          })

          if (!isEquals) {
            let defaultRight = {
              m_edit: false,
              m_del: false,
              m_start: false,
              m_set: false,
              m_clean: false,
              i_del: false,
              i_log: false,
              i_org: false
            }
            this.defNameJson.push({
              defName: element.name,
              defKey: element.defKey,
              right: defaultRight
            })
          }
        })
      }

      if (name == 'flowTypeDialog') {
        data.forEach(element => {
          if (element.parentId == '0') {
            return
          }
          let isEquals = false
          this.defAllNameJson.forEach(item => {
            if (!isEquals && item.defKey == element.id) {
              isEquals = true
            }
          })

          if (!isEquals) {
            let defaultRight = {
              m_edit: false,
              m_del: false,
              m_start: false,
              m_set: false,
              m_clean: false,
              i_del: false,
              i_log: false,
              i_org: false
            }
            this.defAllNameJson.push({
              defName: element.name,
              defKey: element.id,
              right: defaultRight
            })
          }
        })
      }
    },
    showFlowDialog() {
      this.$refs.eipFlowDialog.showDialog()
    },
    async beforeSaveData() {
      this.isSubmit = true
      this.buttonLoading = true
      this.buttonDisabled = true
      let isSelectType = false
      for (const type in this.authorizeTypes_) {
        if (this.authorizeTypes_[type]) {
          isSelectType = true
        }
      }
      if (!isSelectType) {
        this.$message.error('请选择权限类型')
        this.isSubmit = false
        this.buttonLoading = false
        this.buttonDisabled = false
        return
      }

      if (this.calOwnerNameJson.length == 0) {
        this.$message.error('请选择授权人员')
        this.isSubmit = false
        this.buttonLoading = false
        this.buttonDisabled = false
        return
      }

      if (this.flowAuth.multiple == '1') {
        if (this.defNameJson.length == 0) {
          this.$message.error('请选择授权流程')
          this.isSubmit = false
          this.buttonLoading = false
          this.buttonDisabled = false
          return
        }
        this.flowAuth.defAllNameJson = []
      } else {
        if (this.defAllNameJson.length == 0) {
          this.$message.error('请选择授权分类')
          this.isSubmit = false
          this.buttonLoading = false
          this.buttonDisabled = false
          return
        }
        this.flowAuth.defNameJson = []
      }
      this.flowAuth.ownerNameJson = JSON.stringify(this.calOwnerNameJson)

      this.flowAuth.defNameJson = JSON.stringify(this.defNameJson)
      this.flowAuth.defAllNameJson = JSON.stringify(this.defAllNameJson)
      this.flowAuth.authorizeTypes = JSON.stringify(this.authorizeTypes_)
    },
    afterSaveData() {
      this.dialogVisible = false
      this.$emit('onConfirm', true)
      setTimeout(() => {
        this.buttonLoading = false
        this.buttonDisabled = false
      }, 1000)
    },
    handleDefauthSelect(value, row, type) {
      if (value) {
        row.right.m_edit = true
        row.right.m_del = true
        row.right.m_start = true
        row.right.m_clean = true
        if (type == 'type') {
          row.right.m_set = true
        }
      } else {
        row.right.m_edit = false
        row.right.m_del = false
        row.right.m_start = false
        row.right.m_clean = false
        if (type == 'type') {
          row.right.m_set = false
        }
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit('onConfirm', false)
    },
    authorizeTypesChange() {
      if (
        this.authorizeTypes_.task === true &&
        !this.authorizeTypes_.instance
      ) {
        this.$set(this.authorizeTypes_, 'instance', true)
      }
    },
    clearAll() {
      this.$confirm('确认删除下面的授权内容吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.defNameJson = []
          this.defAllNameJson = []
          this.$message({
            type: 'success',
            message: '清除成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.second-checkbox {
  margin-left: 48px;
}
/deep/.header-span {
  margin-left: -28px;
}
/deep/.instance-span {
  margin-left: 60px;
  margin-right: 3px;
}
/deep/.last-brackets-span {
  margin-right: 24px;
  margin-left: -28px;
}
/deep/.el-dialog__wrapper {
  overflow: unset !important;
}
/deep/.el-dialog__body {
  height: calc(100% - 170px);
  overflow-y: auto;
}
/deep/.el-dialog {
  height: 90%;
  min-height: 400px;
  margin-top: 3vh !important;
}
/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;
  }
}
::v-deep .el-drawer__body {position: relative;
  padding: 24px;
  border-top: 1px solid #dcdee0;
}
.drawer-content {
  height: calc(100% - 48px);
  overflow: auto;
  .el-table {
    width: auto;
  }
}
::v-deep .el-checkbox {
  margin-right: 7px;
}
.process-example {
  margin-left: 59px;
}
.dialog-footer {
  text-align: right;
  line-height: 48px;
}
::v-deep .el-textarea__inner {
  resize: both;
  max-width: 700px;
}
.inputs.ht-form-inputs__inline {
  width: 100%;
}
::v-deep .el-form-item__label {
  color: #888888;
}
</style>
