<template>
  <div class="apply-detail" style="height: 100%; position: relative">
    <div class="dialog-body-header flex justify-between
        align-center
        padding-lr-lg
        padding-bottom
        solid-bottom
      ">
      <div>
        <div>
          <span>工单编号：</span>
          <el-link v-copy="apply.applyNo">{{ apply.applyNo }}</el-link>
          <!--  v-copyText:callback="copyTextSuccess" -->
          <!-- <el-link v-copy="apply.applyNo">{{ apply.applyNo }}</el-link> -->
          <!-- <button v-copy="apply.applyNo" @click="copyText(apply.applyNo)">{{ apply.applyNo }}</button> -->
        </div>
        <div class="text-bold text-xxl text-el-primary flex margin-top-xs">
          <span>{{ apply.userNickName }}</span>
          的
          <TextTag :options="apply_type" :value="apply.applyType" column="value" label="label" :text="true" />
        </div>
      </div>
      <div></div>
    </div>

    <div class="dialog-body-content flex" :class="`${store.state.app.device === 'desktop' ? '' : 'flex-direction'}`">
      <div class="flex-twice" :class="`${store.state.app.device === 'desktop' ? 'solid-right' : 'solid-bottom'
  }`">
        <div class="padding-lg">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="申请人">{{ apply.userNickName }}</el-descriptions-item>
            <el-descriptions-item label="审批类型">
              <dict-tag :options="apply_type" :value="apply.applyType" />
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">
              <template #default="scope">
                <span>{{ parseTime(apply.applyEstablishTime) }}</span>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="结束时间">
              <template #default="scope">
                <span>{{ parseTime(apply.applyCompleteTime) }}</span>
              </template>
            </el-descriptions-item>
            <slot name="descriptions"></slot>

          </el-descriptions>
          <!-- <div class="text-bold"> {{ apply }}</div> -->
          <slot></slot>
        </div>
      </div>
      <div style="width:30%;max-width:400px">
        <div class="padding-lg">
          <div class="padding-bottom" style="color: var(--el-text-color-primary); font-size: 14px">
            流程
          </div>
          <WfJobList :list="apply.wfJobList" />
        </div>
      </div>
    </div>

    <div class="
        apply-state
        flex
        align-center
        justify-center
        text-center
      " :class="getColor(apply.applyState)">
      <div>
        <div class="cn text-xl">
          <span v-if="apply.applyState == 10">审核中</span>
          <span v-else-if="apply.applyState == 20">已通过</span>
          <span v-else-if="apply.applyState == 30">已驳回</span>
          <span v-else-if="apply.applyState == 50">已撤回</span>
        </div>
        <div class="en">
          <span v-if="apply.applyState == 10">processing</span>
          <span v-else-if="apply.applyState == 20">agreed</span>
          <span v-else-if="apply.applyState == 30">rejected</span>
          <span v-else-if="apply.applyState == 50">revoked</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  MoreFilled,
  Promotion,
  Check,
  Close,
  SwitchButton,
} from "@element-plus/icons-vue";
import WfJobList from "@/components/WfJobList/index";

const props = defineProps({
  apply: {
    type: Object,
    default: { a: "asd" },
  }, // 背景图
});
const { proxy } = getCurrentInstance();
const { com_apply_state, apply_type } = proxy.useDict('com_apply_state', 'apply_type');

const store = useStore();

const baseUrl = import.meta.env.VITE_APP_BASE_API;


const { apply } = toRefs(props);

function getColor(state) {
  switch (state) {
    case 0:
    case "0":
      return "info"
    case 10:
    case "10":
      return "warning"
    case 20:
    case "20":
      return "primary"
    case 30:
    case "30":
      return "danger"
    case 40:
    case "40":
      return "success"
    case 50:
    case "50":
      return "info"
    default:
      return "info"
  }
}

/** 复制代码成功 */
function copyTextSuccess() {
  proxy.$modal.msgSuccess("复制成功");
}

const copyText = (text) => {
  if (!document.queryCommandSupported('copy')) {
    // 不支持
    return false
  }

  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.readOnly = 'readOnly'
  document.body.appendChild(textarea)
  textarea.select() // 选择对象
  textarea.setSelectionRange(0, text.length) // 核心
  const result = document.execCommand('copy') // 执行浏览器复制命令
  textarea.remove()
  // console.log(text)
  return result
}
</script>

<style lang="scss">
.apply-detail {
  .apply-state {
    position: absolute;
    top: 40px;
    right: 30px;
    width: 120px;
    height: 120px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    transform: rotateZ(-45deg);

    .cn {
      font-weight: bold;
    }

    .en {
      //   width: 200%;
    }

    &.primary {
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
    }

    &.warning {
      border-color: var(--el-color-warning);
      color: var(--el-color-warning);
    }

    &.info {
      border-color: var(--el-color-info);
      color: var(--el-color-info);
    }

    &.danger {
      border-color: var(--el-color-danger);
      color: var(--el-color-danger);
    }

    &.success {
      border-color: var(--el-color-success);
      color: var(--el-color-success);
    }
  }
}
</style>
