<template>
  <el-dialog title="车位登记" v-model="showDialog" width="800px" @close="closeDialog">
    <el-form ref="formRef" :model="formData" label-position="right" :label-width="'100px'" :rules="formRules"
             label-width="100px">
      <el-tabs tab-position="left" v-model="activeTab">
        <el-tab-pane name="first" label="车位信息">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车位编号" prop="parkingNumber">
                <el-input v-model="formData.parkingNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车位类型" prop="parkingType">
                <el-radio-group v-model="formData.parkingType">
                  <el-radio :label="0">车位</el-radio>
                  <el-radio :label="1">车库</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车位面积" prop="area">
                <el-input v-model="formData.area"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model="formData.contactNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="pictureUrl" label="主展示图">
                <pictureUpload v-model="formData.pictureUrl"></pictureUpload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="parkingUrl" label="车位照片">
                <pictureUpload2 :limit="10" v-model="formData.parkingUrl"></pictureUpload2>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否特价" prop="isSpecial">
                <el-radio-group v-model="formData.isSpecial">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否置顶" prop="isTop">
                <el-radio-group v-model="formData.isTop">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-divider />
            <el-col :span="24">
              <el-form-item label="是否出售" prop="isSale">
                <el-radio-group v-model="formData.isSale">
                  <el-radio-button :label="0" border>否</el-radio-button>
                  <el-radio-button :label="1" border>是</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="售价" prop="salePrice" v-if="formData.isSale == 1">
                <el-input v-model="formData.salePrice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出售状态" prop="saleStatus" v-if="formData.isSale == 1">
                <el-select v-model="formData.saleStatus">
                  <el-option :value="0" label="待售"></el-option>
                  <el-option :value="1" label="已售"></el-option>
                  <el-option :value="2" label="预订"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-divider />
            <el-col :span="24">
              <el-form-item label="是否出租" prop="isHire">
                <el-radio-group v-model="formData.isHire">
                  <el-radio-button :label="0" border>否</el-radio-button>
                  <el-radio-button :label="1" border>是</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租金" prop="hirePrice" v-if="formData.isHire == 1">
                <el-input v-model="formData.hirePrice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出租状态" prop="hireStatus" v-if="formData.isHire == 1">
                <el-select v-model="formData.hireStatus">
                  <el-option :value="0" label="待租"></el-option>
                  <el-option :value="1" label="已租"></el-option>
                  <el-option :value="2" label="预订"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane name="second" label="车位简介">
          <el-form-item label="" prop="parkingShow" label-width="0">
            <editor v-model="formData.parkingShow"></editor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from "/@/api/request";
import { district_list, parking } from "/@/api/controllerUrls";
import { ElMessage } from "element-plus";
import pictureUpload from "/@/components/pictureUpload/index.vue";
import pictureUpload2 from "/@/components/pictureUpload/multiple.vue";
import editor from "/@/components/editor/index.vue";

let showDialog = ref(false);

let formRef = ref();

let type = ref("add");
let activeTab = ref("first");

let emit = defineEmits(["close"]);

defineExpose({
  open
});

function open(type1, data, districtId, communityId, buildingId) {
  type.value = type1;
  if (type1 == "add") {
    formRef.value?.resetFields();
    formData.districtId = districtId;
    formData.communityId = communityId;
    formData.buildingId = buildingId;
  } else {
    getInitData(data.id);
  }

  showDialog.value = true;
}

let formData = reactive({
  districtId: "",
  communityId: "",
  buildingId: "",
  parkingType: 0,
  parkingNumber: "",
  area: "",
  parkingUrl: "",//车位展示图片
  isSpecial: 0,//是否特价车位
  isTop: 0,//是否置顶
  isHire: 0,//是否出租
  hirePrice: 0,//租金
  hireStatus: 0,//出租状态
  isSale: 0,//是否出售
  salePrice: 0,//售价
  saleStatus: 0,//出售状态
  contactNumber: "",//联系电话
  parkingShow: "<p><br></p>"//车位简介
});

let formRules = {
  parkingNumber: [
    { required: true, message: "不能为空" }
  ],
  area: [
    { required: true, message: "不能为空" }
  ],
  contactNumber: [
    { required: true, message: "不能为空" }
  ],
  hirePrice: [
    { required: true, message: "不能为空" }
  ],
  salePrice: [
    { required: true, message: "不能为空" }
  ]
};


function getInitData(event) {
  request.index(parking, {
    id: event
  }, "detail").then((res) => {
    if (res.code == 1) {
      formRef.value?.resetFields();
      for (let key in formData) {
        formData[key] = res.data[key];
      }
      formData.id = event;
    }
  });
}

function submit() {
  formRef.value.validate((valid) => {
    if (valid) {
      if (formData.isHire == 0 && formData.isSale == 0) {
        ElMessage({ type: "warning", message: "请选择售卖类型", grouping: true });
        return;
      }
      if (type.value == "add") {
        request.add(parking, formData).then((res) => {
          if (res.code == 1) {
            showDialog.value = false;
          }
        });
      } else {
        request.edit(parking, formData).then((res) => {
          if (res.code == 1) {
            showDialog.value = false;
          }
        });
      }
    }
  });
}

function closeDialog() {
  emit("close");
}


</script>

<style scoped></style>
