<template>
  <div style="height: calc(100% - 48px); margin: 24px 10px">
    <ht-table
      @load="loadData"
      :data="versionList"
      :selectable="false"
      :pageResult="pageResult"
      :nopagination="false"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
      :header-cell-class-name="headerCellClassName"
    >
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column
        prop="name"
        align="center"
        :show-overflow-tooltip="true"
        label="流程名称"
      />
      <ht-table-column
        prop="defKey"
        width="180"
        align="center"
        label="流程key"
      />
      <ht-table-column
        prop="status"
        label="流程状态"
        width="120"
        :render-header="renderHeaderMethod"
        :filters="[
          {text: '已发布', value: 'deploy'},
          {text: '未发布', value: 'draft'},
          {text: '禁用', value: 'forbidden'},
          {text: '禁止实例', value: 'forbidden_instance'}
        ]"
      >
        <template v-slot="{row}">
          <el-tag type="success" v-if="row.status == 'deploy'">已发布</el-tag>
          <el-tag type="info" v-if="row.status == 'draft'">未发布</el-tag>
          <el-tag type="danger" v-if="row.status == 'forbidden'">禁用</el-tag>
          <el-tag type="warning" v-if="row.status == 'forbidden_instance'"
            >禁止实例</el-tag
          >
        </template>
      </ht-table-column>
      <ht-table-column
        prop="version"
        width="80"
        align="center"
        label="版本号"
      />
      <ht-table-column
        prop="isMain"
        label="是否主版本"
        width="120"
        :render-header="renderHeaderMethod"
        :filters="[
          {text: '主版本', value: 'Y'},
          {text: '非主版本', value: 'N'},
        ]"
      >
        <template v-slot="{row}">
          <el-tag type="success" v-if="row.isMain == 'Y'">主版本</el-tag>
          <el-tag type="info" v-if="row.isMain == 'N'">非主版本</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column width="460" label="操作" align="left">
        <template v-slot="{row}">
<!--          <el-button-->
<!--            size="mini"-->
<!--            icon="el-icon-edit"-->
<!--            @click="hisVersionDefDetail(row.id)"-->
<!--            >明细</el-button-->
<!--          >-->
          <el-button
              size="mini"
              :disabled="authorizeRight && !authorizeRight.m_start"
              @click="startFlow(row)"
              >启动</el-button
          >
          <el-button
              size="mini"
              :disabled="authorizeRight && !authorizeRight.m_edit"
              @click="design(row)"
          >设计</el-button
          >
          <el-button
            size="mini"
            :disabled="authorizeRight && !authorizeRight.m_edit"
            v-if="row.isMain == 'N'"
            @click="switchMainVersion(row.id)"
            >设为主版本</el-button
          >
          <el-button
            size="mini"
            @click="hisVersionDefDetail(row.id)"
            >明细</el-button
          >
          <el-button
            size="mini"
            :disabled="authorizeRight && !authorizeRight.m_del"
            type="danger"
            v-if="row.isMain == 'N'"
            @click="remove(row)"
            >删除</el-button
          >
        </template>
      </ht-table-column>
    </ht-table>
    <el-dialog
      title="版本明细"
      :visible.sync="dialogDetailVisible"
      append-to-body
      :before-close="close"
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <el-form :model="data" data-vv-scope="settingSave">
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <th width="160px">流程名称:</th>
              <td>{{ data.name }}</td>
              <th width="160px">流程业务主键:</th>
              <td>{{ data.defKey }}</td>
            </tr>
            <tr>
              <th width="160px">流程描述:</th>
              <td>{{ data.desc }}</td>
              <th width="160px">创建时间:</th>
              <td>{{ data.createTime }}</td>
            </tr>
            <tr>
              <th width="160px">流程状态:</th>
              <td>
                <span v-if="data.status == 'draft'">草稿</span>
                <span v-if="data.status == 'deploy'">发布</span>
                <span v-if="data.status == 'forbidden'">禁用</span>
                <span v-if="data.status == 'forbidden_instance'">禁止实例</span>
              </td>
              <th width="160px">更新时间:</th>
              <td>{{ data.updateTime }}</td>
            </tr>
            <tr>
              <th width="160px">版本 - 是否主版本:</th>
              <td>
                <span v-if="data.isMain == 'Y'">是</span>
                <span v-if="data.isMain == 'N'">否</span>
              </td>
              <th width="160px">测试状态:</th>
              <td>
                <span v-if="data.testStatus == 'run'">正式</span>
                <span v-if="data.testStatus == 'test'">测试</span>
              </td>
            </tr>
            <tr>
              <th width="160px">版本 - 当前版本号:</th>
              <td>{{ data.version }}</td>
              <th width="160px">版本 - 主版本流程ID:</th>
              <td>{{ data.mainDefId }}</td>
            </tr>
            <tr>
              <th width="160px">版本 - 变更理由:</th>
              <td>{{ data.reason }}</td>
              <th width="160px">流程定义ID:</th>
              <td>{{ data.defId }}</td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </el-dialog>
    <!--  修改日志  -->
    <ModifyLog :title="msgDelete"  ref="modifyLog" @onConfirm="afterSaveModifyLog"/>
  </div>
</template>

<script>
  import {Message} from 'element-ui'
  import req from '@/request.js'
  import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
  import ModifyLog from '@/components/VueBpmn/BpmnModifyLog.vue'
  import {mapState} from "vuex";
  import BpmnEdit from "@/components/VueBpmn/BpmnEdit";
  export default {
    name: 'FlowVersionList',
    props: {
      defId: {
        type: String,
        required: true,
      },
      authorizeRight: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    components: {
      ModifyLog,
    },
    mixins: [tableHeaderFilter],
    data() {
      return {
        data: {}, //版本明细信息
        dialogDetailVisible: false, //是否显版本明细
        versionList: [], //列表数据
        pageResult: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        deleteId:'',
        msgDelete: '是否确认删除'
      }
    },
    computed: mapState({
      account: (state) => state.login.currentUser.account,
      token: (state) => state.login.currentUser.token,
      frontUrl: function () {
        return `${window.context.front}/matter/startProcess?token=${this.token}`
      },
    }),
    methods: {
      //设为主版本
      switchMainVersion(id) {
        const this_ = this
        req
          .get('${bpmModel}/flow/def/v1/switchMainVersion?defId=' + id)
          .then((rep) => {
            rep = rep.data
            if (rep.state) {
              if (rep.message) {
                Message.success(rep.message)
                this_.$refs.htTable.load() //重新加载列表数据
              }
            } else {
              Message.error(rep.message)
            }
          })
      },
      //查看明细
      hisVersionDefDetail(id) {
        const this_ = this
        req.get('${bpmModel}/flow/def/v1/defGet?defId=' + id).then((rep) => {
          this_.data = rep.data
          this_.dialogDetailVisible = true
        })
      },
      //删除版本管理
      remove(row) {
        const this_ = this
        this.$http
          .get(
            '${bpmRunTime}/runtime/instance/v1/getInstancesByDefId?defId=' +
              row.id +
              '&status='
          )
          .then((resp) => {
            this_.msgDelete = '是否确认删除？'
            if (resp && resp.data && resp.data.length > 0) {
              this_.msgDelete = '该操作会导致此版本流程实例不可用!'
            }
            this.deleteId = row.id
            this.$confirm(this.msgDelete, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.afterSaveModifyLog()
            })
            // let modelData ={
            //   taskId : row.defKey
            // }
            // this.$refs.modifyLog.showRecordDialog(modelData, 'write')
          })
      },
      afterSaveModifyLog(){
        const this_ = this
        let url =
            '${bpmModel}/flow/def/v1/removeByDefIds?ids=' +
            this.deleteId +
            '&isVersion=true'
        req.remove(url).then(function (rep) {
          rep = rep.data
          if (rep.state) {
            if (rep.message) {
              // this_.$refs.modifyLog.saveReferenceRecord()
              Message.success(rep.message)
              //如果删除defId和当前defId相同
              if(this_.deleteId == this_.defId){
                this_.versionList = this_.versionList.filter(item=>item.defId != this_.defId)
                if(this_.versionList.length>0){
                  this_.defId = this_.versionList[0].defId
                }
              } else {
                this_.$refs.htTable.load() //重新加载列表数据
              }
            }
          }
        })
      },
      //关闭侧边栏
      close() {
        this.dialogDetailVisible = false
      },
      startFlow(row) {
        this.startDef = row.id
        let url = `${this.frontUrl}&defId=${row.defId}`
        window.open(url, '_blank')
      },
      design(row){
        this.$emit("design", row)
      },
      //页面加载显示数据
      loadData(param, cb) {
        const this_ = this
        req
          .post(
            '${bpmModel}/flow/def/v1/versions?defId=' + this_.defId + '&defKey=',
            param
          )
          .then((response) => {
            this_.versionList = response.data.rows
            this_.pageResult = {
              page: response.data.page,
              pageSize: response.data.pageSize,
              total: response.data.total,
            }
          })
          .finally(() => cb())
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep {
    .cell > .el-table__column-filter-trigger {
      display: none;
    }
  }
  .el-main {
    padding-top: 0px;
  }
  .urgent-text .inputs {
    width: 100%;
  }
</style>