<script setup lang="ts" name="supplyCard">
import { reactive, inject } from 'vue'
import { selectDictLabel } from '@/common/utils/ruoyi'
import { completeTask, refuseFlow } from '@/api/flowEngine/flowInterface'
import DictTag from '@/components/DictTag/index.vue'
const emit = defineEmits<{
  'approve-success': [data: typeof props.approveCardData, buttonDTO: {
    button_english: string
    button_name: string
    button_params: string
    button_target: any
  }]
}>()

const props = defineProps<{
  // loading?: any
  type: string // 1:待办 2:已办 3:已发 4:抄送
  approveCardData: any
}>()

const process_group = inject('process_group')
const states = inject('states')
const onDetail = inject<(approveCardData: typeof props.approveCardData, type: string) => void>('onDetail')!
const loading = reactive({
  refuse: false, // 拒绝
  pass: false // 同意
})

function onClickDetail(approveCardData: typeof props.approveCardData, type: string) {
  if (loading.pass || loading.refuse) return
  onDetail(approveCardData, type)
}

// 处理 拒绝/同意
function handleApprove(buttonDTO) {
  if (buttonDTO === 'pass') {
    loading.pass = true
    // 同意
    completeTask({
      instanceId: props.approveCardData.instanceId,
      taskId: props.approveCardData.taskId,
      auditOpinion: props.approveCardData.auditOpinion ?? '同意',
      doUserId: props.approveCardData.userId,
      doUserName: props.approveCardData.userName,
      // 自定义参数 必填pass
      customData: {
        pass: '1'
      },
      addUserList: []
    }).then(res => {
      // showSuccessToast(res.msg)
      uni.showToast({
        title:res.msg
      })
      emit('approve-success', props.approveCardData, buttonDTO)
    }).finally(() => {
      loading.pass = false
    })
  } else if (buttonDTO === 'refuse') {
    loading.refuse = true
    // 拒绝
    refuseFlow({
      instanceId: props.approveCardData.instanceId,
      taskId: props.approveCardData.taskId,
      auditOpinion: props.approveCardData.auditOpinion ?? '拒绝',
      doUserId: props.approveCardData.userId,
      doUserName: props.approveCardData.userName,
      // 自定义参数 必填pass
      customData: {
        pass: '0'
      },
      addUserList: []
    }).then(res => {
        uni.showToast({
          title:res.msg
        })
      emit('approve-success', props.approveCardData, buttonDTO)
    }).finally(() => {
      loading.refuse = false
    })
  }
}
</script>

<template>
  <div class="supply-card-container container__card" @click="onClickDetail(props.approveCardData, props.type)">
    <div class="name-container">
      <div class="left">
        <div class="qiye-head">
          <text style="font-size: 30rpx;" class="iconfont icon-approve-head qiye-head-icon"></text>
          <!-- <svg-icon icon="approve-head" class="qiye-head-icon" />
            -->
        </div>
        <div class="qiye-name ellipsis">{{ props.approveCardData.businessName }}</div>
        <!-- <div>{{ selectDictLabel(process_group, props.approveCardData.processGroup) }}</div> -->
        <DictTag :options="process_group" class="dict-tag" :value="props.approveCardData.processGroup" />
      </div>
      <div class="right">
        <!-- <van-button size="mini" type="primary" @click="handlePageApprove">去处理</van-button> -->
      </div>
    </div>
    <van-divider />
    <div class="info-container">
      <!-- 待办 / 已办 -->
      <template v-if="!props.approveCardData.state">
        <div v-if="!props.approveCardData.state" class="info-item">
          <div class="label">到达时间:</div>
          <div class="value ellipsis">{{ props.approveCardData.startTime }}</div>
        </div>
        <div v-if="!props.approveCardData.state && ['1'].includes(props.approveCardData.completeStatus)" class="info-item">
          <div class="label">处理时间:</div>
          <div class="value ellipsis">{{ props.approveCardData.endTime }}</div>
        </div>
        <div class="info-item">
          <div class="label">任务名称:</div>
          <div class="value ellipsis">{{ props.approveCardData.processNodeName }}</div>
        </div>
        <div class="info-item">
          <div class="label">审批人:</div>
          <div class="value ellipsis">{{ props.approveCardData.userName }}</div>
        </div>
      </template>
      <!-- 已发 -->
      <template v-if="props.approveCardData.state">
        <div class="info-item">
          <div class="label">流程名称:</div>
          <div class="value ellipsis">{{ props.approveCardData.processName }}</div>
        </div>
        <div class="info-item">
          <div class="label">审核状态:</div>
          <div class="value ellipsis">{{ selectDictLabel(states, props.approveCardData.state) }}</div>
        </div>
        <div class="info-item">
          <div class="label">发起时间:</div>
          <div class="value ellipsis">{{ props.approveCardData.createTime }}</div>
        </div>
      </template>
    </div>
    <div v-if="props.approveCardData.state" class="buttons">
      <van-button disabled size="small" class="buttons-button">{{ selectDictLabel(states, props.approveCardData.state) }}</van-button>
    </div>
    <!-- 待办 -->
    <div v-if="props.approveCardData.todoButtonDTOList" class="buttons">
      <van-button
        :custom-style="'width: 100%'"
        :loading="loading.refuse"
        loading-text="拒绝"
        :disabled="loading.pass"
        class="buttons-button"
        size="small"
        plain
        type="default"
        @click.stop="handleApprove('refuse')">拒绝</van-button>
      <van-button
        :custom-style="'width: 100%'"
        :loading="loading.pass"
        loading-text="同意"
        :disabled="loading.refuse"
        class="buttons-button"
        size="small"
        plain
        type="primary"
        @click.stop="handleApprove('pass')">同意</van-button>
      <!-- <template v-for="(item, index) in (props.approveCardData.todoButtonDTOList || [])" :key="index">
        <van-button
          class="buttons-button"
          size="small"
          plain
          :type="buttonName[item.button_english] || ''"
          @click="handleApprove(item)">{{ item.button_name }}</van-button>
      </template> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
@primary: #4773FC;

.supply-card-container{
  margin-top: 30rpx;
  padding: 24rpx 24rpx;
  &:first-child {
    margin-top: 0;
  }
  .name-container{
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      width: 100%;
      .qiye-head {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40rpx;
        height: 40rpx;
        border-radius: 8rpx;
        background-color: fade(#4773FC, 20%);
        &-icon {
          font-size: 28rpx;
          color: #4773FC;
        }
      }
      .qiye-name {
        margin-right: 20rpx;
        font-size: 32rpx;
        color: rgba(51, 51, 51, 1);
        margin-left: 16rpx;
      }
    }
    .right{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .status-dongjie {
      width: 112rpx;
      height: 56rpx;
      border-radius: 12rpx;
      background: rgba(255, 237, 237, 1);
      font-size: 24rpx;
      color: rgba(255, 77, 79, 1);
    }
    .status-jihuo {
      width: 112rpx;
      height: 56rpx;
      border-radius: 12rpx;
      background: rgba(242, 251, 255, 1);
      font-size: 24rpx;
      color: rgba(24, 144, 255, 1);
    }
    .status-tingyong {
      width: 112rpx;
      height: 56rpx;
      border-radius: 12rpx;
      background: rgba(255, 247, 230, 1);
      font-size: 24rpx;
      color: rgba(250, 173, 20, 1);
    }
  }
  .info-container {
    .info-item {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      &:first-child {
        margin-top: 0;
      }
      .label {
        margin-left: 16rpx;
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
      }
      .value {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
  .register-container {
    display: flex;
    align-items: center;
    .label {
      font-size: 24rpx;
      color: rgba(153, 153, 153, 1);
    }
    .value {
      font-size: 24rpx;
      color: rgba(153, 153, 153, 1);
      margin-left: 24rpx;
    }
  }
}
:deep(.van-divider){
  margin: 18rpx 4rpx;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  .buttons-button {
    flex: 1;
    margin-left: 16rpx;
    &:first-child {
      margin-left: 0;
    }
  }

}

.dict-tag {
  :deep(.van-tag) {
    color: #ff976a;
    border-color: #ff976a;
  }
}

.ellipsis {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
