<template>
  <div id="ApplyBaseInformation">
    <a-card :loading="loading" :bordered="false" class="info-card-container">
      <div class="info-cards-wrapper">
        <!--  正在进行  -->
        <div class="info-card">
          <div class="info-icon" :class="details.f_state === 1 ? 'status-completed' : 'status-progress'">
            <a-icon type="appstore" theme="filled" />
          </div>
          <div class="info-content">
            <div v-if="showProjectPerson" class="info-title">
              {{ details.f_entry_name }}
              <a-popover placement="bottom">
                <template slot="content">
                  <div v-if="details.person.f_projectadmin">项目经理：{{ details.person.f_projectadmin }}</div>
                  <div v-if="details.person.f_shangwuren">客户经理：{{ details.person.f_shangwuren }}</div>
                  <div v-if="details.person.f_salemanager">销售经理：{{ details.person.f_salemanager }}</div>
                  <div v-if="details.person.f_egionaladministrator">大区经理：{{ details.person.f_egionaladministrator }}</div>
                </template>
                <a-icon type="info-circle" class="info-icon-small" />
              </a-popover>
            </div>
            <div v-else class="info-title">{{ details.f_task_name }}</div>
            <div class="info-label" :class="details.f_state === 1 ? 'status-completed-text' : 'status-progress-text'">
              {{ `工单状态：${details.f_state === 1 ? '完工' : '正在进行'}` }}
            </div>
          </div>
        </div>

        <!--  流程信息  -->
        <div v-show="details.f_state !== 1" class="info-card">
          <div class="info-icon workflow-icon">
            <a-icon type="profile" theme="filled" />
          </div>
          <div class="info-content">
            <div class="info-title">{{ details.f_workflow_define_name }}</div>
            <div class="info-label">{{ `当前流程节点：${details.f_sub_state}` }}</div>
          </div>
        </div>

        <!--  创建日期  -->
        <div class="info-card">
          <div class="info-icon date-icon">
            <a-icon type="carry-out" theme="filled" />
          </div>
          <div class="info-content">
            <div class="info-title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
            <div class="info-label">创建日期</div>
          </div>
        </div>

        <!--  截止时间  -->
        <div class="info-card" title="若要修改完成时间，请通知部门领导进行修改！">
          <div class="info-icon time-icon">
            <a-icon type="clock-circle" theme="filled" />
            <a-dropdown>
              <a-icon type="down" class="dropdown-icon" />
              <a-menu slot="overlay">
                <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <div class="info-content">
            <div class="info-title">
              {{ format(details.f_complete_time, 'yyyy-MM-dd') }}
              <!--  修改任务时间  -->
              <a-popover v-if="isCreatedBy" v-model="openCompleteTime" title="修改任务时间" trigger="click">
                <template slot="content">
                  <a-form-item label="任务整体完成时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
                    <a-date-picker
                      v-model="completeTime"
                      :disabled-date="disabledDate"
                      :show-today="false"
                      :allow-clear="false"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    >
                    </a-date-picker>
                  </a-form-item>
                  <a-form-item label="当前环节截止时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
                    <a-date-picker
                      v-model="overdueTime"
                      :disabled-date="disabledDate"
                      :show-today="false"
                      value-format="YYYY-MM-DD 17:00:00"
                    >
                    </a-date-picker>
                  </a-form-item>
                  <a-form-item label="修改原因" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
                    <a-textarea
                      v-model="note"
                      :auto-size="{ minRows: 3, maxRows: 5 }"
                      placeholder="修改原因"
                    />
                  </a-form-item>
                  <div style="text-align: right">
                    <a-button type="primary" size="small" @click="saveCompleteTime">确定</a-button>
                  </div>
                </template>
                <a-icon type="edit" theme="filled" class="edit-icon" />
              </a-popover>
            </div>
            <div class="info-label">截止时间</div>
          </div>
        </div>

        <!--  第五个  -->
        <div v-show="details.f_workflow_parentid" @click="ordRecord" class="info-card">
          <div class="info-icon parent-icon">
            <a-icon type="profile" theme="filled" />
          </div>
          <div class="info-content">
            <div class="info-title">{{ details.f_workflow_parentid }}</div>
            <div class="info-label">父级工单编号</div>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 完成时间修改记录 -->
    <a-modal v-model="changeRecordVisible" title="完成时间修改记录" :footer="null" :z-index="1001" :width="1500">
      <a-table row-key="id" :columns="changeRecordColumns" :data-source="changeRecordDataSource" :loading="changeRecordLoading"></a-table>
    </a-modal>

    <!-- 父级工单 -->
    <a-modal v-model="masterWorkOrderVisible" title="主工单" :footer="null" :z-index="1001" :width="1500">
      <work-order-parent-details :workflow-id="details.f_workflow_parentid"></work-order-parent-details>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@vue2-client/utils/util'
import { postByServiceName } from '@vue2-client/services/api/restTools'
import moment from 'moment'
import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
import WorkOrderParentDetails from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkOrderParentDetails'

export default {
  name: 'WorkflowBaseInformation',
  components: { WorkOrderParentDetails },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['isMobile']),
    showProjectPerson: function () {
      if (!this.details.person) {
        return false
      }
      return Object.keys(this.details.person).length !== 0
    }
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      // 控制加载
      loading: true,
      // 是否显示日期编辑
      openCompleteTime: false,
      // 完成时间
      completeTime: undefined,
      // 当前环节截止时间
      overdueTime: undefined,
      // 修改原因
      note: '',
      // 当前用户是否为创建人
      isCreatedBy: false,
      // 是否显示完成时间修改记录
      changeRecordVisible: false,
      // 是否显示完成时间修改记录
      masterWorkOrderVisible: false,
      // 完成时间修改记录表格列
      changeRecordColumns: [
        { dataIndex: 'f_workflow_id', title: '任务id' },
        { dataIndex: 'f_complete_oldtime', title: '原整体完成时间' },
        { dataIndex: 'f_set_time', title: '修改后完成时间', customRender (text) { return formatDate(text, 'yyyy-MM-dd') } },
        { dataIndex: 'f_name', title: '节点名称' },
        { dataIndex: 'f_handler', title: '节点处理人' },
        { dataIndex: 'f_deadline_old', title: '原节点截止时间' },
        { dataIndex: 'f_deadline', title: '节点修改后时间' },
        { dataIndex: 'f_operator', title: '修改人' },
        { dataIndex: 'f_operation_time', title: '操作时间' },
        { dataIndex: 'f_note', title: '修改原因' }
      ],
      // 完成时间修改记录
      changeRecordDataSource: [],
      // 完成时间修改记录加载状态
      changeRecordLoading: false
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    details: {
      type: Object,
      required: true
    }
  },
  methods: {
    init () {
      this.loading = this.details.f_entry_name === undefined
      // this.isCreatedBy = this.currUser.roles.includes('14524271')
      this.completeTime = undefined
      this.overdueTime = undefined
    },
    // 日期格式化
    format (date, format) {
      return formatDate(date, format)
    },
    disabledDate (date) {
      return date.isBefore(moment(), 'day')
    },
    saveCompleteTime () {
      if (!this.completeTime) {
        this.$message.info('整体完成时间不能为空')
        return
      }
      if (this.note == '') {
        this.$message.info('修改原因不能为空！')
        return
      }
      if (moment(this.completeTime).isBefore(this.overdueTime, 'day')) {
        this.$message.info('当前环节截止时间不能晚于整体完成时间')
        return
      }
      postByServiceName(workFlowViewApi.updateWorkFlowCompleteTime, {
        workflowId: this.details.id,
        completeTime: this.completeTime,
        overdueTime: this.overdueTime,
        name: this.currUser.name,
        note: this.note
      }).then(() => {
        this.$message.success('修改成功')
        this.details.f_complete_time = this.completeTime
        this.openCompleteTime = false
      })
    },
    showChangeRecord () {
      this.changeRecordLoading = true
      this.changeRecordVisible = true
      postByServiceName(workFlowViewApi.getWorkFlowCompleteTimeChange, {
        workflowId: this.details.id
      }).then(res => {
        this.changeRecordDataSource = res
        this.changeRecordLoading = false
      })
    },
    ordRecord () {
      this.masterWorkOrderVisible = true
    }
  },
  watch: {
    visible (newVal) {
      if (newVal) {
        this.init()
      }
    }
  }
}
</script>

<style lang="less">
#ApplyBaseInformation {
  .info-card-container {
    background: transparent;

    .ant-card-body {
      padding: 0;
    }
  }

  .info-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .info-card {
      flex: 1;
      min-width: 180px;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      transition: all 0.2s ease;
      cursor: default;
      border: 1px solid #eaedf2;

      &:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
      }

      .info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 8px;
        font-size: 22px;
        margin-right: 14px;
        color: #fff;
        flex-shrink: 0;
        position: relative;

        &.status-completed {
          background-color: #ebad59;
        }

        &.status-progress {
          background-color: #5B6B8F;
        }

        &.date-icon {
          background-color: #4CAF50;
        }

        &.workflow-icon {
          background-color: #FF9800;
        }

        &.time-icon {
          background-color: #F44336;
        }

        &.parent-icon {
          background-color: #2196F3;
        }

        .dropdown-icon {
          position: absolute;
          right: -8px;
          bottom: -8px;
          color: #8392a5;
          font-size: 14px;
          background: #fff;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #eaedf2;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          cursor: pointer;

          &:hover {
            color: #5B6B8F;
          }
        }
      }

      .info-content {
        flex: 1;
        min-width: 0;

        .info-title {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
          line-height: 1.3;

          .info-icon-small {
            margin-left: 6px;
            color: #8392a5;
            font-size: 16px;
            cursor: pointer;

            &:hover {
              color: #5B6B8F;
            }
          }

          .edit-icon {
            margin-left: 6px;
            color: #8392a5;
            font-size: 16px;
            cursor: pointer;

            &:hover {
              color: #5B6B8F;
            }
          }
        }

        .info-label {
          font-size: 14px;
          color: #8392a5;
          line-height: 1.4;

          &.status-completed-text {
            color: #ebad59;
            font-size: 14px;
            line-height: 1.4;
          }

          &.status-progress-text {
            color: #8392a5;
            font-size: 14px;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>
