<template>
  <div class="fullheight simple-flow-table">
    <ht-aside-tree
      cat-id="6"
      @node-click="handleNodeClick"
      @delete="
        selectTypeIds = ''
        $refs.htTable.load()
      "
      @check="check"
    />
    <div class="simple-flow-table_main">
      <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        quick-search-props="name,alias"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
        @row-click="rowClick"
      >
        <template v-slot:toolbar>
          <el-button-group>
            <el-button size="small" @click="showDialog()" icon="el-icon-plus"
              >添加</el-button
            >
            <ht-delete-button
              url="${form}/formSimpleDesign/v1/physicsRemoveAllVersionByIds"
              :htTable="$refs.htTable"
              style="margin: 0"
              >删除</ht-delete-button
            >
          </el-button-group>
        </template>
        <template>
          <ht-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          />
          <ht-table-column
            prop="name"
            label="名称"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
            <template v-slot="{row}">
              <el-link type="primary" @click="eidtFlow(row)" title="编辑详情">{{
                row.name
              }}</el-link>
            </template>
          </ht-table-column>
          <ht-table-column
            prop="categoryName"
            label="分类"
            :sortable="true"
            :show-overflow-tooltip="true"
          />
          <ht-table-column
            prop="desc"
            label="描述"
            :sortable="true"
            :show-overflow-tooltip="true"
          />
        </template>
        <ht-table-column width="170" label="操作">
          <template v-slot="{row}">
            <el-dropdown
              size="mini"
              split-button
              v-if="row.status != 'draft'"
              @command="handleCommand"
              @click="handleCommand({row: row, command: 'designer'})"
            >
              <span> <i class="el-icon-edit"></i>设计编辑 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  icon="el-icon-edit"
                  :command="{row: row, command: 'baseInfo'}"
                  >编辑基本信息</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-delete"
                  :command="{row: row, command: 'delete'}"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </ht-table-column>
      </ht-table>
    </div>

    <!-- 新增简历流程名称和别名弹窗 -->
    <el-dialog
      :title="formData.id ? '编辑流程' : '新增流程'"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="500px"
    >
      <el-form v-form data-vv-scope="simpleFlowForm" class="add-flow-form">
        <ht-form-item label="流程名称" prop="name" label-width="120px">
          <ht-input
            v-model="formData.name"
            :maxlength="50"
            style="width: 250px"
            autocomplete="off"
            :validate="{required: true}"
            placeholder="请输入流程名称"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="流程别名" label-width="120px" prop="alias">
          <!-- isExist: '${portal}/sys/sysModule/v1/isExist?alias=' -->
          <ht-input
            v-model="formData.alias"
            style="width: 250px"
            v-pinyin="formData.name"
            :maxlength="50"
            autocomplete="off"
            :validate="{
              required: true,
              alpha_dash: true,
              regex: {
                exp: /^[^0-9][\w]{1,30}$/,
                message: '只能由字母开头的不超过30位的字母、数字、下划线组成。',
              },
            }"
            placeholder="请输入流程别名"
          />
        </ht-form-item>

        <ht-form-item label="分类" label-width="120px">
          <eip-sys-type-selector
            placeholder="请选择分类"
            type-key="FLOW_TYPE"
            v-model="formData.categoryName"
            :sys-type-id.sync="formData.categoryId"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item label="描述" label-width="120px">
          <ht-input
            v-model="formData.desc"
            type="textarea"
            :maxlength="255"
            autocomplete="off"
            placeholder="请输入流程描述"
          ></ht-input>
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="handleClose">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${form}/formSimpleDesign/v1/save"
          :model="formData"
          scope-name="simpleFlowForm"
          @after-save-data="afterSaveData"
          @before-save-data="beforeSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>
    <!-- 简易流程 -->
    <simple-flow
      v-if="isSimpleFlowShow"
      :flowData="selectedRow"
      :isSimpleFlowShow.sync="isSimpleFlowShow"
    ></simple-flow>
  </div>
</template>
<script>
import req from '@/request.js'
import flow from '@/api/flow.js'
const SimpleFlow = () => import('@/views/flow/simpleFlow/SimpleFlow.vue')
const htAsideTree = () => import('@/components/common/HtAsideTree.vue')
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')

export default {
  components: {
    SimpleFlow,
    htAsideTree,
    EipSysTypeSelector,
  },
  data() {
    return {
      selectedRow: null,
      isSimpleFlowShow: false,
      selectTypeIds: '', // 分类id
      formData: {
        name: '',
        alias: '',
        categoryName: '',
        categoryId: '',
        desc: '', // 描述
      },
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    deleteFlow(defId) {
      let this_ = this
      this.$confirm('删除后不可恢复，是否确定删除?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        closeOnClickModal: false,
      }).then(() => {
        req
          .remove(
            window.context.form +
              '/formSimpleDesign/v1/physicsRemoveAllVersionByIds?ids=' +
              defId
          )
          .then((response) => {
            if (response.data && response.data.state) {
              this_.$message.success('删除成功')
              this_.$refs.htTable.load()
            }
          })
      })
    },
    handleCommand(params) {
      switch (params.command) {
        case 'baseInfo': //编辑
          this.showDialog(params.row)
          break
        case 'designer': //新增
          this.eidtFlow(params.row)
          break
        case 'delete': //新增
          this.deleteFlow(params.row.id)
          break
        default:
          break
      }
    },
    check(data, checkObj) {
      this.selectTypeIds = checkObj.checkedKeys.join(',')
      this.$refs.htTable.load()
    },
    // 分类树点击事件
    handleNodeClick(node) {
      if (node.id == '6') {
        this.selectTypeIds = ''
      } else {
        this.selectTypeIds = node.id
      }
      this.$refs.htTable.doQuickSearch()
    },
    eidtFlow(row) {
      this.selectedRow = row
      this.isSimpleFlowShow = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    beforeSaveData() {},
    afterSaveData(data) {
      // 有id就编辑 否则新增
      if (this.formData.id) {
      } else {
        // 新增成功后自动跳转打开 设计页面
        this.selectedRow = this.formData
        this.isSimpleFlowShow = true
      }
      this.dialogVisible = false
      this.$refs.htTable.load()
    },
    rowClick(row) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    showDialog(row) {
      if (row) {
        this.formData = row
      } else {
        this.formData = {
          name: '',
          alias: '',
          categoryName: '',
          categoryId: '',
          desc: '', // 描述
        }
      }
      this.dialogVisible = true
    },
    loadData(param, cb) {
      param.querys = param.querys || []
      if (this.selectTypeIds) {
        let hasTypeQuery = false
        for (const query of param.querys) {
          if (query.property == 'categoryId') {
            query.value = this.selectTypeIds
            hasTypeQuery = true
            break
          }
        }
        if (!hasTypeQuery) {
          param.querys.push({
            group: 'main',
            operation: 'IN',
            property: 'categoryId',
            relation: 'AND',
            value: this.selectTypeIds,
          })
        }
      } else {
        param.querys = param.querys.filter((q) => {
          return q.property != 'categoryId'
        })
      }
      flow
        .getSimpleFlowList(param)
        .then((res) => {
          if (res.data) {
            let response = res.data
            this.data = response.rows

            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          }
        })
        .finally(() => cb())
    },
  },
}
</script>
<style lang="scss" scoped>
.simple-flow-table {
  display: flex;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  .simple-flow-table_main {
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
  }
}
::v-deep .add-flow-form {
  .el-form-item--small.el-form-item {
    margin-bottom: 23px;
  }
}
</style>