<template>
  <div id="ApplyBaseInformation">
    <a-card :loading="loading" :bordered="false" class="info-tag-box">
      <!--  第一个  -->
      <div class="info-tag" :style="{ background: details.f_state === 1 ? '#ffa427' : '#6877ee' }">
        <div><a-icon type="appstore" theme="filled" style="font-size: 16px" /></div>
        <div class="content">
          <div v-if="showProjectPerson" class="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" style="font-size: 17px" />
            </a-popover>
          </div>
          <div v-else class="title">{{ details.f_task_name }}</div>
          <div class="sub-text">{{ details.f_state === 1 ? '完工' : '正在进行' }}</div>
        </div>
      </div>
      <!--  第二个  -->
      <div class="info-tag" style="background: #34d6af">
        <div><a-icon type="carry-out" theme="filled" style="font-size: 16px" /></div>
        <div class="content">
          <div class="title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
          <div class="sub-text">创建日期</div>
        </div>
      </div>
      <!--  第三个  -->
      <div v-show="details.f_state !== 1" class="info-tag" style="background: #ffa427">
        <div><a-icon type="profile" theme="filled" style="font-size: 16px" /></div>
        <div class="content">
          <div class="title">{{ details.f_workflow_define_name }}</div>
          <div class="sub-text">{{ details.f_sub_state }}</div>
        </div>
      </div>
      <!--  第四个  -->
      <div class="info-tag" style="background: #ff5f27" title="若要修改完成时间，请通知部门领导进行修改！">
        <div>
          <a-icon type="clock-circle" theme="filled" style="font-size: 16px" />
          <a-dropdown>
            <a-icon type="down" style="float: right;" />
            <a-menu slot="overlay">
              <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <div class="content">
          <div class="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>
                <!--<a-form-item label="修改原因" :label-col="{span: 10}" :wrapper-col="{span: 14}">-->
                <!--<a-badge :count="messageList.length" :offset="[4,-4]" :number-style="{backgroundColor: '#b2b2b2'}"></a-badge>-->
                <!--</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-complete-time" />
            </a-popover>
          </div>
          <div class="sub-text">完成时间</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>
  </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: 'WorkflowBaseInformationDetails',
  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,
      // 完成时间修改记录表格列
      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: {
    details: {
      type: Object,
      required: true
    }
  },
  methods: {
    init () {
      this.loading = this.details.f_entry_name === undefined
      console.log(this.currUser)
      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
      })
    }
  },
  watch: {
    details: {
      deep: true,
      handler (newVal) {
        if (newVal.person) {
          // 删除值为空的键
          for (const key in newVal.person) {
            if (!newVal.person[key]) {
              delete newVal.person[key]
            }
          }
        }
        this.init()
      }
    }
  }
}
</script>

<style lang="less">
#ApplyBaseInformation {
  .info-tag-box {
    background: transparent;
    .ant-card-body {
      display: flex;
      justify-content: flex-start;
      padding: 0;
    }
  }
  .info-tag {
    min-width: 200px;
    height: 110px;
    padding: 10px;
    color: #ffffff;
    .content {
      text-align: center;
      .title {
        margin-top: 4px;
        font-size: 22px;
      }
      .sub-text {
        margin-top: 6px;
        font-size: 14px;
      }
      .edit-complete-time {
        cursor: pointer;
        transition: color 0.2s;
        &:hover {
          color: rgb(24, 144, 255);
        }
      }
    }
    &:not(:first-child) {
      margin-left: 22px;
    }
  }
}
</style>
