<script lang="ts" setup name="ReceiveDialog">
import { ref } from 'vue'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  approveOpinion: {
    type: String,
  },
})
const emits = defineEmits(['closeDialog', 'updateConfirm'])
const userStore = useUserStore()
const date = dayjs(`${new Date()}`).format('YYYY.MM.DD')
const dialogTableVisible = ref(false)// 控制对话框显隐
const selectRadio = ref()// 同意驳回拒绝
const textarea = ref('')// 审批结论
watch(() => props.isShowDialog, (newValue) => {
  dialogTableVisible.value = newValue
})
watch(() => props.approveOpinion, (newValue) => {
  selectRadio.value = newValue
})
// 关闭对话框
const close = () => {
  console.log('close-dialog')
  emits('closeDialog')
}
// 确认
const confirm = () => {
  console.log('确认')
  const param = {
    selectRadio: selectRadio.value,
    textarea,
    userStore,
    date,
  }
  console.log(param)
  // emits('updateConfirm', param)
  // 调接口
  close()
}
</script>

<template>
  <el-dialog v-model="dialogTableVisible" title="审批操作" class="receive-dialog" @close="close">
    <div class="receive-dialog-item">
      <span class="text">审批意见：</span>
      <!-- 1同意2驳回0拒绝 -->
      <el-radio-group v-model="selectRadio">
        <el-radio label="1" :disabled="selectRadio !== '1'">
          同意
        </el-radio>
        <el-radio label="2" :disabled="selectRadio !== '2'">
          驳回
        </el-radio>
        <el-radio label="0" :disabled="selectRadio !== '0'">
          拒绝
        </el-radio>
      </el-radio-group>
    </div>

    <div class="receive-dialog-item">
      <span class="text">审批结论：</span>
      <el-input
        v-model="textarea"
        :rows="3"
        type="textarea"
        placeholder="请输入审批结论"
      />
    </div>

    <div class="receive-dialog-item">
      <span class="text">审批人：{{ userStore.name }}</span>
      <span class="text">审批时间：{{ date }}</span>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
.receive-dialog {
  .receive-dialog-item {
    display: flex;
    align-items: center;
    margin-bottom: 28px;

    .text {
      margin-right: 30px;
      white-space: nowrap;
    }
  }
}
</style>