<!-- 领导信箱管理详情 -->
<template>
  <xn-form-container :title="'基本设置'" :width="1000" :visible="visible" :destroy-on-close="true" @close="onClose">
    <a-form :model="formState" ref="formStateRef" name="basic" autocomplete="off">
      <div class="form" v-if="formState.replyStatus == 0">
        <!-- 包含标题 -->
        <div class="box-title">
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="信件标题">{{ formState.title }}</a-descriptions-item>
            <a-descriptions-item label="提交时间">{{ formState.letterTime }}</a-descriptions-item>
            <a-descriptions-item label="信件内容">{{ formState.content }}</a-descriptions-item>
            <!-- 更多的数据项 -->
          </a-descriptions>
        </div>
      </div>
      <div v-else class="form">
        <!-- 包含标题 -->
        <div class="box-title">
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="信件标题">{{ formState.title }}</a-descriptions-item>
            <a-descriptions-item label="提交时间">{{ formState.letterTime }}</a-descriptions-item>
            <a-descriptions-item label="信件内容">{{ formState.content }}</a-descriptions-item>
            <a-descriptions-item label="答复内容">{{ formState.replyContent }}</a-descriptions-item>
            <a-descriptions-item label="回复人">{{ formState.replyUser }}</a-descriptions-item>
            <a-descriptions-item label="办结日期">{{ formState.replyTime }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div v-if="formState.replyStatus == 0">
        <div class="radio-box">
          <p class="radio-text">{{ '审核状态:' }}</p>
          <a-radio-group :disabled="disabled" v-model:value="objData.auditStatus" button-style="solid">
            <a-radio-button class="radio-btn" :value="1">通过</a-radio-button>
            <a-radio-button :value="2">不通过</a-radio-button>
          </a-radio-group>
        </div>
        <a-form-item class="form-item" label="回复人" name="replyUser">
          <a-input :disabled="disabled" style="width: 260px" v-model:value="objData.replyUser" placeholder="请输入" />
        </a-form-item>
        <a-form-item class="form-item" label="回复内容" name="replyContent">
          <a-textarea :disabled="disabled" style="resize:none;" :rows="6" v-model:value="objData.replyContent" />
        </a-form-item>
      </div>
      <a-form-item>
        <div class="item-submit">
          <a-button class="btn1" :disabled="disabled" type="primary" @click="onFinish(0)">保存</a-button>
          <a-button class="btn1" :disabled="disabled" @click="onFinish(1)">回复</a-button>
        </div>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
    </template>
  </xn-form-container>
</template>
<script lang="js">
import business from '@/api/interaction.info/mailboxApi.js'
import { ref } from 'vue'
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
export default {
  name: 'FromName',
  components: {},
  emits: ['change'],
  setup(props, { emit }) {
    const disabled = ref(false)
    const visible = ref(false)
    const records = ref('')
    const onOpen = (record, flag, view, row) => {
      records.value = record
      visible.value = flag
      disabled.value = view
      if (row) {
        detail(row.id)
      }
    }
    const formState = ref({
      title: '',
      letterTime: '',
      content: '',
      replyContent: '',
      replyUser: '',
      replyTime: '',
      replyStatus: 0
    })
    const objData = ref({
      auditStatus: null,
      replyUser: '',
      replyContent: '',
    })
    const formStateRef = ref(null)
    // 查看数据
    const detail = async (v) => {
      const res = await business.mailboxView({ id: v })
      formState.value = res
      objData.value = {
        id: v,
        auditStatus: res.auditStatus,
        replyUser: res.replyUser,
        replyContent: res.replyContent,
      }
    }
    // 清除数据
    const rest = () => {
      for (let key in formState.value) {
        formState.value[key] = ''
      }
      for (let key in objData.value) {
        objData.value[key] = ''
      }
    }
    const onClose = () => {
      visible.value = false
      rest()
    }

    watch(
      () => visible.value,
      (newVal) => {
        if (!newVal) {
          setTimeout(() => {
            rest()
          }, 0)
        }
      },
      { deep: true }
    )

    const onFinish = async (status) => {
      formStateRef.value.validate().then(async () => {
        objData.value.replyStatus = status
        await handleAdd(objData.value)
        emit('change')
        rest()
        onClose()
        try {
          console.log(2)
        } catch (err) {
          console.log(err)
        }
      })
    }

    const handleAdd = async (val, status) => {
      if (records.value == 'edit') {
        const res = await business.mailboxEdit(val)
      }
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }

    return {
      formStateRef,
      formState,
      objData,
      onFinish,
      onFinishFailed,
      disabled,
      onOpen,
      visible,
      onClose
    }
  }
}
</script>
<style lang="less" scoped>
.input {
  margin-right: 10px;
  margin-left: 40px;
  margin-top: 20px;

  .ant-input-affix-wrapper {
    height: 100px;
  }
}

.btnBox {
  text-align: center;
  margin-top: 100px;

}

.form {
  width: 980px;
  margin-bottom: 32px;

  .form-item {
    width: 250px;
    margin-right: 120px;
  }
}

.item-submit {
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .btn1 {
    width: 100px;
    margin-right: 20px;
  }
}

/deep/.ant-form-item-label {
  width: 70px;
}

.box-title {
  display: flex;
}


.form-box {
  padding-left: 5%;
}

.form-text {
  padding-left: 19%;
}

.radio-box {
  margin-bottom: 20px;
  display: flex;
}

.radio-text {
  line-height: 34px;
  margin-right: 12px;
}

.radio-btn {
  margin-right: 38px;
  width: 76px;
  text-align: center;
}


/deep/.ant-descriptions {
  width: 900px;
}

/deep/.ant-descriptions-item-content {
  height: 48px;
}

/deep/.ant-descriptions-item-label {
  width: 60px;
}

/deep/ .ant-descriptions-item-content {
  width: 280px;
}
</style>
