<template>
  <!-- 抽屉 -->
  <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="2" tab="查看 / 编辑进度">
            <workflow-handle
              v-if="
                activeKey === '1' &&
                  details.f_state !== undefined &&
                  steps !== undefined
              "
              ref="workflowHandle"
              :workflow-id="workflowId"
              :workflowState="details.f_state === 1"
              :complete-time="details.f_complete_time"
              :stepsForChild="steps"
              :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="3">
            <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>
</template>

<script>
import { mapState } from 'vuex'
import workflowBaseInformationDetails from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowBaseInformationDetails.vue'
import workflowHandle from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandle.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 LeaveMessage from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/LeaveMessage.vue'
// import LeaveMessage from '@vue2-client/components/LeaveMessage'

export default {
  name: 'WorkOrderParentDetails',
  components: {
    LeaveMessage,
    workflowBaseInformationDetails,
    workflowHandle,
    XFormTable,
  },
  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
    },
  },
  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)
        })
    },
    // 获取基础信息
    getBaseInfo () {
      this.loading = true
      return postByServiceName(workFlowViewApi.getApplyBasicInfo, {
        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 () {
      console.log('数据', this.details)
      console.log('流程', this.steps)
      this.messageLoading = true
      postByServiceName(workFlowViewApi.getApplyLeaveMessage, {
        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>
