<script lang="ts" setup>
import { computed, onBeforeMount, reactive, ref, toRefs, unref } from 'vue'
import { useDialog, useMessage } from 'naive-ui'
import { useDictionary } from '@/store/modules/dictonary'
import { audit } from '@/api/task/task'

const emit = defineEmits<{
  (e: 'commit', rejectId: any, backId: any, isOther: boolean)
}>()
const message = useMessage()

const dictonaryStore = useDictionary()
const state: any = reactive({
  detail: {},
})
const { detail } = toRefs(state)
const show = ref(false)
const cardStyle = {
  'width': '520px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '0px',
}

function showModal(value) {
  console.log(value)
  state.detail = value
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
  closeModal,
})

const backOptions = ref<any[]>([])
const reasonOptions = ref<any[]>([])
const selectBackId = ref(null)
const selectRejectId = ref(null)
const selectItem = ref(null)
const otherValue = ref(null)
const showOther = computed(() => {
  return (selectItem.value as any)?.label === '其他'
})

const comomitValue = computed(() => {
  return (selectItem.value as any)?.label === '其他'
    ? otherValue.value
    : selectRejectId.value
})

async function handleSumbit(e: MouseEvent) {
  e.preventDefault()

  // selectRejectId.value === 'other'
  // emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
  console.log(state.detail)
  console.log(comomitValue)
  const param = {
    formid: [state.detail.id],
    taskId: ['66b06dda-e673-11ee-a934-0242bc74e4f3'],
    approvd: false,
    taskComment: comomitValue.value,
    taskname: showOther.value ? state.detail.detail.tasks : ['其他'],
  }
  audit(param).then((res) => {
    const { code } = res
    if (code === 'OK')
      closeModal()
    else message.error(res.message)
  })
}

onBeforeMount(async () => {
  const rejectList = await dictonaryStore.fetchTFList()
  const backList = await dictonaryStore.fetchBackList()

  reasonOptions.value = rejectList
  backOptions.value = backList

  // TODO 删除此项 通过name=其他 判断
  // 添加其他选项
  // reasonOptions.value.push({
  //   label: '其他',
  //   value: 'other',
  // })
})

async function selectChange(id) {
  console.log(id, 'selectChange')
  selectItem.value = reasonOptions.value.find(v => v.id == id)
}
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center">
    <n-card
      :style="cardStyle"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <div class="wrapper">
        <div class="wrapper-header">
          <span class="wrapper-left">选择不通过原因</span>
          <div class="wrapper-right">
            <div class="wrapper-right-close" @pointerdown="closeModal">
              <div class="wrapper-right-icon" />
            </div>
          </div>
        </div>
        <div class="wrapper-content">
          <span>处理方式</span>
          <n-select
            v-model:value="selectBackId"
            filterable
            style="margin-top: 10px"
            :options="backOptions"
          />
        </div>
        <div class="wrapper-content">
          <span>不通过原因</span>
          <n-select
            v-model:value="selectRejectId"
            filterable
            style="margin-top: 10px"
            :options="reasonOptions"
            @change="selectChange"
          />
          <n-input
            v-show="showOther"
            v-model:value="otherValue"
            type="textarea"
            placeholder="备注内容"
            style="margin-top: 10px"
          />
        </div>

        <!-- <div class="wrapper-content">
          <n-input
          type="textarea"
          placeholder="备注内容" v-model="showOther"></n-input>
        </div> -->
      </div>
      <template #footer>
        <div class="wrapper-footer">
          <n-button type="info" @click="handleSumbit">
            确认
          </n-button>
          <n-button secondary style="margin-left: 15px" @click="closeModal">
            取消
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  &-left {
    font-weight: bold;
    font-size: 16px;
  }

  &-right {
    &-close {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    &-icon {
      background: #000;
      display: inline-block;
      width: 18px;
      height: 1px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      margin-bottom: 8px;

      &:after {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        background: #000;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
      }
    }
  }

  &-content {
    padding: 18px 10px;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  &-info {
    font-weight: bold;
    position: relative;

    &:before {
      background-color: #1980ff;
      content: "";
      width: 5px;
      border-radius: 2px;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }
}

::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
  border: 0px;
}

::v-deep(.n-card > .n-card-header) {
  --n-padding-top: 0px;
  --n-padding-bottom: 12px;
}

::v-deep(.n-divider:not(.n-divider--vertical)) {
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>
