<template>
  <el-drawer v-model="_visible" title="土地信息" :size="800" @close="handleClose">
    <el-card>
      <div class="title_">基础信息</div>
      <el-form ref="baseForm" :model="baseInfo" class="base_form" label-width="120px" :rules="rules">
        <el-form-item label="土地名称" prop="landName">
          <el-input v-model="baseInfo.landName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="所属网格" prop="gridId">
          <CustomSelect
            v-model:value="baseInfo.gridId"
            :set="{
              url: '/land-resource/gridManage/page',
              props: {
                value: 'id',
                label: 'gridName',
              },
            }"
            placeholder="请选择所属网格"
          />
        </el-form-item>
        <el-form-item label="用地分类" prop="landClassificationType">
          <LandClassificationType v-model:value="baseInfo.landClassificationType" placeholder="请选择用地分类" />
        </el-form-item>
        <el-form-item label="位置" prop="villageCode">
          <el-input v-model="baseInfo.villageCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否土地流转" prop="isTransfer">
          <LandIsTranfer v-model:value="baseInfo.isTransfer" />
        </el-form-item>
        <el-form-item label="面积" prop="area">
          <el-input v-model="baseInfo.area" placeholder="请输入面积"></el-input>
        </el-form-item>
        <el-form-item label="产权人" prop="owner">
          <el-input v-model="baseInfo.owner" placeholder="请输入产权人姓名"></el-input>
        </el-form-item>
        <el-form-item label="土壤类型">
          <el-input v-model="baseInfo.soilType" placeholder="请输入土壤类型"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card>
      <div class="title_">土地产权信息</div>
      <el-form ref="propertyForm" :model="propertyInfo" class="property_form" label-width="120px">
        <el-form-item label="产权人姓名" prop="propertyName">
          <el-input v-model="propertyInfo.propertyName" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="产权人联系电话" prop="propertyPhone">
          <el-input v-model="propertyInfo.propertyPhone" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="产权编号" prop="landCode" class="land_code">
          <el-input v-model="propertyInfo.landCode" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="产权证书" prop="propertyCertificateUrl" class="attrs_content">
          <el-upload class="custom-form__uploader" action="#" :show-file-list="false" accept="image/*" :limit="20" :http-request="rowUploadPicture">
            <el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
          </el-upload>
          <div v-for="item in propertyInfo.propertyCertificateUrl" :key="`attr_${item.id}`" class="attrs_content__item">
            <img :src="item.url" :alt="item.name" style="width: 100%; height: 100%" />
            <el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <section class="btns">
      <el-button type="primary" @click="handleSubmit">保存并提交审核</el-button>
      <el-button type="warning" @click="handleSubmit">保存草稿</el-button>
      <el-button @click="handleClose">取消</el-button>
    </section>
  </el-drawer>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import LandClassificationType from '@/components/LandClassificationType.vue';
import CustomSelect from '@/components/CustomSelect.vue';
import LandIsTranfer from '@/components/LandIsTranfer.vue';
import { lnadSave, exportLands } from '@/apis/land';
import { ElMessage } from 'element-plus';
import { CommonUpload } from '@/apis';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['close']);
/* --------------- data --------------- */
// #region

const _visible = ref(false);
const baseInfo = reactive({
  landName: '',
  gridId: '',
  landClassificationType: '',
  villageCode: '',
  isTransfer: '',
  area: '',
  owner: '',
  soilType: '',
});
const propertyInfo = reactive({
  propertyName: '',
  propertyPhone: '',
  landCode: '',
  propertyCertificateUrl: [],
});
watch(
  () => props.visible,
  () => {
    _visible.value = props.visible;
  }
);
watch(
  () => baseInfo,
  () => {
    console.log('---', baseInfo);
  }
);
const baseForm = ref();
const propertyForm = ref();
const rules = reactive({
  landName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  gridId: [{ required: true, message: '请选择所属网格', trigger: 'blur' }],
  landClassificationType: [{ required: true, message: '请选择用地分类', trigger: 'blur' }],
  villageCode: [{ required: true, message: '请输入位置', trigger: 'blur' }],
});
// #endregion

/* --------------- methods --------------- */
// #region
const rowUploadPicture = async ({ file }) => {
  const formData = new FormData();
  formData.append('file', file);
  const res = await CommonUpload(formData);
  if (res.code === 200) {
    propertyInfo.propertyCertificateUrl.push({
      ...res.data,
      id: 'id_' + Date.now(),
    });
    console.log('---', res);
    // state.form.productUrl = res.data.url;
    // const base64 = await imageToBase64(file);
    // state.form.base64 = base64;
  }
};
function handleClearAttr(id) {
  propertyInfo.propertyCertificateUrl = propertyInfo.propertyCertificateUrl.filter((item) => item.id !== id);
}
async function handleSubmit() {
  baseForm.value.validate().then(async () => {
    const data = {
      ...baseInfo,
      ...propertyInfo,
      isDraftsSave: 0,
    };
    let ids = '';
    propertyInfo.propertyCertificateUrl.map((item) => (ids += item.id));
    data.propertyCertificateUrl = ids;
    const res = await lnadSave(data);
    if (res.code == 200) {
      ElMessage.success('保存成功');
      resFrom();
    }
  });
}
function handleClose() {
  resFrom();
  emit('close');
}
function resFrom() {
  baseForm.value.resetFields();
  propertyForm.value.resetFields();
}

// #endregion
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.title_ {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
}
.base_form,
.property_form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.btns {
  margin-top: 12px;
  display: grid;
  justify-content: center;
  grid-template-columns: auto auto auto;
  gap: 12px;
}
.attrs_content__item {
  position: relative;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  img {
    border-radius: 2px;
  }
  .clear_btn {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 18px;
    color: #f15c5c;
    opacity: 0;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
  }
  &:hover {
    .clear_btn {
      opacity: 1;
    }
  }
}
::v-deep() {
  .land_code {
    .el-form-item__content {
      align-items: baseline;
    }
  }
  .attrs_content {
    .el-form-item__content {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      > div {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
