<template>
  <!-- 抽屉 -->
  <a-drawer
    :visible="visible"
    :width="isMobile ? screenWidth : screenWidth * 0.95"
    title="流程详情"
    @close="onClose"
    :get-container="false"
  >
    <div>
      <!-- 基础信息 -->
      <workflow-base-information-details
        v-if="details"
        ref="baseInformation"
        :workflow-id="workflowId"
        :details="details"
        :visible="visible"
      />
      <div :style="{ height: screenHeight * 0.9 + 'px' }">
        <a-card style="margin-top: 20px">
          <a-tabs :activeKey="activeKey" @change="changeTab">
            <!--   第二个标签页，显示流程信息，根据当前节点显示历史记录、填写表单、控制流程按钮   -->
            <a-tab-pane key="1" tab="查看 / 编辑进度">
              <WorkFlowHandleReso
                v-if="
                  activeKey === '1' && details.f_state && steps
                "
                ref="workflowHandle"
                :workflow-id="workflowId"
                :workflowState="details.f_state === 1"
                :complete-time="details.f_complete_time"
                :stepsForChild="steps"
                :visible="visible"
                :taskName="details.f_task_name"
                :details="details"
                @refresh="stepChanged"
              />
            </a-tab-pane>
            <a-tab-pane key="2" tab="任务流转记录">
              <workflow-log v-if="activeKey === '2'" :workflow-id="workflowId" />
            </a-tab-pane>
            <a-tab-pane key="4">
              <span slot="tab">
                <span>任务留言</span>
                <a-badge :count="messageList.length" :offset="[4, -4]" :number-style="{ backgroundColor: '#b2b2b2' }"></a-badge>
              </span>
              <a-row>
                <a-col :span="14">
                  <leave-message
                    :projectName="details.f_task_name"
                    :data="messageList"
                    :loading="messageLoading"
                    :submit-message="submitMessage"
                    @refresh="getMessage"
                    :workflow-id="workflowId"
                  />
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { mapState } from 'vuex'
import workflowBaseInformationDetails from './WorkFlowBaseInformationDetails.vue'
import WorkFlowHandleReso from './WorkFlowHandleReso.vue'
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
import { postByServiceName } from '@vue2-client/services/api/restTools'
import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
import ApplyWorkflowLog from './WorkflowLog.vue'
import WorkflowLog from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkflowLog.vue'
import LeaveMessage from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/LeaveMessage.vue'

export default {
  name: 'WorkflowDetail',
  components: {
    LeaveMessage,
    WorkflowLog,
    workflowBaseInformationDetails,
    WorkFlowHandleReso,
    XFormTable,
    ApplyWorkflowLog
    // LeaveMessage
  },
  data () {
    return {
      // 页面宽度
      screenWidth: document.documentElement.clientWidth,
      // 页面高度
      screenHeight: document.documentElement.clientHeight,
      // 控制当前标签页
      activeKey: '2',
      // 保存流程和留言信息
      steps: undefined,
      // 基础信息
      details: {},
      // 给XFormTable增加额外查询条件
      fixedAddForm: {},
      fixedQueryForm: {},
      // 留言数据
      messageList: [],
      messageLoading: true,
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['isMobile'])
  },
  props: {
    workflowId: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 内部组件更新了当前步骤后的回调
    stepChanged () {
      this.loading = true
      this.init()
    },
    // 获取所有步骤
    getSteps () {
      return postByServiceName(workFlowViewApi.getStepNoteAndHandler, {
        workflowId: this.workflowId
      })
        .then(res => {
          this.steps = res
          console.log('所有步骤', this.steps)
        }, err => {
          console.log(err)
        })
    },
    // 关闭抽屉的回调
    onClose () {
      if (this.$refs.workflowHandle !== undefined) {
        this.$refs.workflowHandle.onClose()
      }
      this.$emit('update:visible', false)
      this.activeKey = '2'
      this.details = {}
      this.fixedAddForm = {}
      this.fixedQueryForm = {}
      this.steps = undefined
      this.messageList = []
    },
    // 获取基础信息
    getBaseInfo () {
      this.loading = true
      return postByServiceName(workFlowViewApi.getWorkFlowBasicInfo, {
        workflowId: this.workflowId
      })
        .then(res => {
          res.f_sub_state = this.steps.find(item => item.id === res.f_step_id)?.name
          this.details = res
        }, err => {
          console.log(err)
        })
    },
    // 初始化两张固定表
    async init () {
      this.getMessage()
      await this.getSteps()
      await this.getBaseInfo()
      this.fixedQueryForm.a_f_workflow_id = this.workflowId
      this.fixedAddForm.a_f_workflow_id = this.workflowId
      if (this.$refs.xFormTableOne !== undefined) {
        this.$refs.xFormTableOne.$refs.xTable.refresh(true)
      }
      if (this.$refs.xFormTableTwo !== undefined) {
        this.$refs.xFormTableTwo.$refs.xTable.refresh(true)
      }
    },
    // 切换标签页
    changeTab (id) {
      this.activeKey = id
    },
    // 获取留言
    getMessage () {
      this.messageLoading = true
      postByServiceName(workFlowViewApi.getWorkFlowLeaveMessage, {
        workflowId: this.workflowId
      }).then(res => {
        this.messageList = res
        this.messageLoading = false
      })
    },
    // 提交留言
    submitMessage (data) {
      data.f_workflow_id = this.workflowId
      return postByServiceName('/entity/t_workflow_leave_message', data)
    }
  },
  watch: {
    visible (newVal) {
      if (newVal) {
        this.init()
      }
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .step-label {
  &:not(:first-child) {
    margin-left: 16px;
  }

  .step-icon {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 8px;

    &.blue {
      border: 3px solid rgb(24, 144, 255);
    }

    &.green {
      border: 3px solid rgb(82, 196, 26);
    }

    &.gray {
      border: 3px solid rgb(191, 191, 191);
    }
  }
}
</style>
