<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.requestType == 1">
        <!-- 包含标题 -->
        <div class="box-title">
          <p class="text-box text-box1">{{ '申请人信息' }}</p>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item :span="2">
              <a-radio-group :disabled="true" v-model:value="formState.requestType">
                <a-radio :value="1">{{ '公民' }}</a-radio>
                <a-radio :value="2">{{ '法人/其他组织' }}</a-radio>
              </a-radio-group>
            </a-descriptions-item>
            <a-descriptions-item label="姓名">{{ formState.name }}</a-descriptions-item>
            <a-descriptions-item label="工作单位">{{ formState.workUnit }}</a-descriptions-item>
            <a-descriptions-item label="证件号码">{{ formState.identificationNumber }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ formState.contactNumber }}</a-descriptions-item>
            <a-descriptions-item label="邮政编码">{{ formState.postalCode }}</a-descriptions-item>
            <a-descriptions-item label="联系地址">{{ formState.contactAddress }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="电子邮件">{{ formState.email }}</a-descriptions-item>
            <!-- 更多的数据项 -->
          </a-descriptions>
        </div>
        <div class="box-title">
          <p class="text-box text-box2">{{ '所需信息情况' }}</p>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item :span="2" label="所需信息的名称">{{ formState.informationName }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="所需信息的内容描述">
              <a-textarea :disabled="true" style="resize:none;" :rows="6"
                v-model:value="formState.informationDescription" />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="所需信息的信息用途">
              <a-radio-group :disabled="true" v-model:value="formState.informationUsage">
                <a-radio :value="1">{{ '自身生活需要' }}</a-radio>
                <a-radio :value="2">{{ '自身生产需要' }}</a-radio>
                <a-radio :value="3">{{ '自身科研需要' }}</a-radio>
                <a-radio :value="4">{{ '查验自身信息' }}</a-radio>
              </a-radio-group></a-descriptions-item>
            <!-- 更多的数据项 -->
          </a-descriptions>
        </div>
      </div>
      <div v-else class="form">
        <!-- 包含标题 -->
        <div class="box-title">
          <p class="text-box text-title">{{ '申请人信息' }}</p>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item :span="2">
              <a-radio-group :disabled="true" v-model:value="formState.requestType">
                <a-radio :value="1">{{ '公民' }}</a-radio>
                <a-radio :value="2">{{ '法人/其他组织' }}</a-radio>
              </a-radio-group>
            </a-descriptions-item>
            <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
            <a-descriptions-item label="组织机构代码">{{ formState.organizationCode }}</a-descriptions-item>
            <a-descriptions-item label="营业执照注册号">{{ formState.businessLicenseNumber }}</a-descriptions-item>
            <a-descriptions-item label="法人代表">{{ formState.legalRepresentative }}</a-descriptions-item>
            <a-descriptions-item label="法人代表身份证号">{{ formState.identificationNumber }}</a-descriptions-item>
            <a-descriptions-item label="联系人姓名">{{ formState.contactPersonName }}</a-descriptions-item>
            <a-descriptions-item label="联系人电话">{{ formState.contactPersonPhone }}</a-descriptions-item>
            <a-descriptions-item label="联系地址">{{ formState.contactAddress }}</a-descriptions-item>
            <a-descriptions-item label="电子邮件">{{ formState.email }}</a-descriptions-item>
            <a-descriptions-item label="邮政编码">{{ formState.postalCode }}</a-descriptions-item>
            <!-- 更多的数据项 -->
          </a-descriptions>
        </div>
        <div class="box-title">
          <p class="text-box text-box3">{{ '所需信息情况' }}</p>
          <a-descriptions :column="2" bordered>
            <a-descriptions-item :span="2" label="所需信息的名称">{{ formState.informationName }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="所需信息的内容描述">
              <a-textarea :disabled="true" style="resize:none;" :rows="6"
                v-model:value="formState.informationDescription" />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="所需信息的信息用途">
              <a-radio-group :disabled="true" v-model:value="formState.informationUsage">
                <a-radio :value="1">{{ '自身生活需要' }}</a-radio>
                <a-radio :value="2">{{ '自身生产需要' }}</a-radio>
                <a-radio :value="3">{{ '自身科研需要' }}</a-radio>
                <a-radio :value="4">{{ '查验自身信息' }}</a-radio>
              </a-radio-group>
            </a-descriptions-item>
            <!-- 更多的数据项 -->
          </a-descriptions>
        </div>
      </div>
      <row>
        <a-form-item class="form-item" label="回复人" name="replyPerson" :label-col="{ span: 3 }">
          <a-col :span="18">
            <a-input :disabled="disabled" style="width: 260px" v-model:value="objData.replyPerson" placeholder="请输入" />
          </a-col>
        </a-form-item>
      </row>
      <row>
        <a-form-item class="form-item" label="回复内容" name="replyContent" :label-col="{ span: 3 }">
          <a-col :span="24">
            <a-textarea :disabled="disabled" style="resize:none;" :rows="6" v-model:value="objData.replyContent" />
          </a-col>
        </a-form-item>
      </row>
      <row class="row-text">
        <a-col :span="12">
          <a-form-item class="form-box" label="申请单查询码">
            <a-input :disabled="true" style="width: 300px" v-model:value="objData.queryCode" placeholder="自动生成" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item class="form-text" label="申请单密码">
            <a-input :disabled="true" style="width: 300px" v-model:value="objData.queryPassword" placeholder="自动生成" />
          </a-form-item>
        </a-col>
      </row>
      <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/policy.info/applicationDisclosureApi.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({
      requestType: null,
      name: '',
      workUnit: '',
      organizationCode: '',
      identificationNumber: "",
      contactNumber: '',
      businessLicenseNumber: '',
      legalRepresentative: '',
      contactPersonName: '',
      contactPersonPhone: '',
      contactAddress: '',
      email: '',
      postalCode: '',
      informationName: '',
      informationUsage: null,
      informationDescription: '',
      replyStatus: 0
    })
    const objData = ref({
      replyPerson: '',
      replyContent: '',
      queryCode: '',
      queryPassword: '',
    })
    const formStateRef = ref(null)
    // 查看数据
    const detail = async (v) => {
      const res = await business.requestView({ id: v })
      formState.value = res
      objData.value = {
        id: v,
        replyPerson: res.replyPerson,
        replyContent: res.replyContent,
        queryCode: res.queryCode,
        queryPassword: res.queryPassword,
      }
    }
    // 清除数据
    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.requestEdit(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;
  }
}

.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;
  }
}

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

.box-title {
  display: flex;
}

.text-box {
  width: 60px;
  letter-spacing: 5px;
  padding-right: 2%;
  font-size: 18px;
  color: #418bc3;
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  writing-mode: vertical-rl;
  margin-bottom: 0px
}

.text-title {
  padding-top: 12%;
}

.text-box1 {
  padding-top: 8%;
}

.text-box2 {
  padding-top: 8%;
}

.text-box3 {
  padding-top: 8%;
}

.row-text {
  display: flex;
  justify-content: space-around;
}

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

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

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

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

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

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