<!-- 信访举报管理详情 -->
<template>
  <xn-form-container :title="'基本设置'" :width="800" :visible="visible" :destroy-on-close="true" @close="onClose">
    <a-form :model="formState" ref="formStateRef" name="basic" autocomplete="off">
      <div class="form">
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="被举报人" name="reportedPerson" :label-col="{ span: 10 }">
              <a-input style="width: 250px" :disabled="true" v-model:value="formState.reportedPerson" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="form-item" label="被举报部门" name="ioDepartmentFunctionId" :label-col="{ span: 10 }">
              <a-input style="width: 250px" :disabled="true" v-model:value="formState.ioDepartmentFunctionId" />
            </a-form-item>
          </a-col>
        </a-row>
        <!--  -->
      </div>
      <div class="attachment"></div>
      <!-- 头条内容 -->
      <div style="margin-left: 34px;">举报内容</div>
      <div class="input">
        <a-textarea placeholder="请输入内容" v-model:value="formState.complaintContent" :disabled="true" allow-clear />
      </div>
      <a-row>
        <a-col :span="12">
          <a-form-item class="form-item" label="联系方式" name="contactInformation" :label-col="{ span: 6 }">
            <a-input style="width: 240px" :disabled="true" v-model:value="formState.contactInformation" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item class="form-item" label="回复人" name="respondent" :label-col="{ span: 6 }">
            <a-input style="width: 240px" :disabled="disabled" v-model:value="objData.respondent" />
          </a-form-item>
        </a-col>
      </a-row>
      <div style="margin-left: 34px;">回复内容</div>
      <div class="input">
        <a-textarea placeholder="请输入内容" v-model:value="objData.responseContent" :disabled="disabled" allow-clear />
      </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/petitionApi.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 formStateRef = ref(null)
    const formState = ref({
      reportedPerson: '',
      ioDepartmentFunctionId: '',
      complaintContent: '',
      contactInformation: '',

      isResponded: 0,
    })
    const objData = ref({
      respondent: '',
      responseContent: ''
    })
    // 查看数据
    const detail = async (v) => {
      const res = await business.complaintView({ id: v })
      formState.value = res
      objData.value = {
        id: v,
        respondent: res.respondent,
        responseContent: res.responseContent
      }
    }
    // 清除数据
    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 () => {
        // formState.value.isResponded = status
        objData.value.isResponded = 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.complaintEdit(val)
      }
    }

    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }

    return {
      formStateRef,
      formState,
      objData,
      onFinish,
      onFinishFailed,
      disabled,
      onOpen,
      visible,
      onClose
    }
  }
}
</script>
<style lang="less" scoped>
.box1 {
  display: flex;
  justify-content: space-between;

  .box-left {
    width: 350px;
    align-items: center;
  }

  .box-right {
    width: 350px;
    margin-right: 10px;
    align-items: center;
  }
}

.common {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;

  .title {
    width: 130px;
    text-align: right;
    margin-right: 5px;
  }
}

.input {
  height: 200px;
  margin-right: 10px;
  margin-left: 40px;
  margin-top: 20px;
  margin-bottom: 32px;

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

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

  .snowy-buttom-left {
    margin-left: 100px;
  }

  .acc {
    width: 80px;
    height: 40px;
  }
}

.form {
  display: flex;
  flex-wrap: wrap;

  // justify-content: center;
  .form-item {
    width: 250px;
    margin-right: 120px;
  }
}

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

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

.ant-select {
  width: 250px;
}

.ant-input {
  width: 250px;
}

.ant-form-item-label {
  width: 150px;
}

.attachment {
  margin-top: 30px;
  margin-left: 15px;
}
</style>
