<template>
  <div class="water-analysis-page" :calss="{ iconCLass: typeList.type == 2 }">
    <div class="top">
      <el-form
        label-width="auto"
        label-position="right"
        :rules="Formrules"
        ref="ruleForm"
        inline
        :model="FormList"
        :key="isKey"
        :disabled="typeList.type==1" 
      >
        <el-divider content-position="left">基本信息</el-divider>
        <el-form-item
          label="社会统一信用代码:"
          prop="creditCode"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.creditCode"
            placeholder="请输入社会统一信用代码"
          />
        </el-form-item>
        <el-form-item label="单位名称:" prop="unitName" style="width: 45%">
          <el-input v-model="FormList.unitName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="类型:" prop="unitType" style="width: 45%">
          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.unitType"
            placeholder="请选择类型"
          >
            <el-option
              v-for="dict in unit_type"
              :key="dict.stCode"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位属性:" prop="unitProperty" style="width: 45%">
          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.unitProperty"
            placeholder="请选择单位属性"
          >
            <el-option
              v-for="dict in unit_property"
              :key="dict.stCode"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话:" prop="unitPhone" style="width: 45%">
          <el-input v-model="FormList.unitPhone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="信用度:" prop="creditLine" style="width: 45%">
          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.creditLine"
            placeholder="请选择信用度"
          >
            <el-option
              v-for="dict in credit_line"
              :key="dict.stCode"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人:" prop="legalPerson" style="width: 45%">
          <el-input v-model="FormList.legalPerson" placeholder="请输入法人" />
        </el-form-item>
        <el-form-item label="经营状态:" prop="manageStatus" style="width: 45%">
          <el-select
            clearable
            v-model="FormList.manageStatus"
            placeholder="请选择经营状态"
            style="width: 100%"
          >
            <el-option
              v-for="dict in manage_status"
              :key="dict.stCode"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 地图弹框 -->
        <el-form-item
          label="地址:"
          prop="unitAddress"
          @click="clickMap(1)"
          style="width: 45%"
        >
          <el-input v-model="FormList.unitAddress" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item
          label="注册资本:"
          prop="registeredCapital"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.registeredCapital"
            placeholder="请输入注册资本"
          >
          <template #append>
          万元
          </template>
          </el-input>
        </el-form-item>
        <el-form-item label="成立日期:" prop="registryDate" style="width: 45%">
          <el-date-picker
            style="width: 100%"
            clearable
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="FormList.registryDate"
            type="date"
           
            range-separator="到"
            placeholder="成立日期"
          />
        </el-form-item>
        <el-form-item
          label="营业期限:"
          prop="businessAllotedTime"
          style="width: 45%"
        >
          <el-date-picker
            style="width: 100%"
            clearable
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="FormList.businessAllotedTime"
            type="date"
           
            range-separator="到"
            placeholder="营业期限"
          />
        </el-form-item>
        <el-form-item label="营业范围:" prop="businessScope" style="width: 93%">
          <el-input
            type="textarea"
            v-model="FormList.businessScope"
            placeholder="请输入营业范围"
          />
        </el-form-item>
        <el-form-item label="备注:" prop="remark" style="width: 93%">
          <el-input
            type="textarea"
            v-model="FormList.remark"
            placeholder="请输入备注"
          />
        </el-form-item>
            <el-form-item label="单位荣誉附件:" style="width: 93%">
              <el-upload
              v-model:file-list="fileList1"
              class="upload-demo"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              multiple
              :on-preview="handlePreview"
              style="width: 100%"
              :before-remove="beforeRemove"
            >
              <el-button type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持CSV格式,可一次性上传多个文件
                </div>
              </template>
            </el-upload>
        </el-form-item>
        <el-divider content-position="left">主要联系人</el-divider>
        <el-form-item
          label="姓名:"
          prop="primaryConcatPersonName"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.primaryConcatPersonName"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item
          label="职位:"
          prop="primaryConcatPersonPosition"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.primaryConcatPersonPosition"
            placeholder="请输入职位"
          />
        </el-form-item>
        <el-form-item
          label="联系方式:"
          prop="primaryConcatPersonInformation"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.primaryConcatPersonInformation"
            placeholder="请输入联系方式"
          />
        </el-form-item>
        <el-form-item
          label="邮箱:"
          prop="primaryConcatPersonEmail"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.primaryConcatPersonEmail"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item
          label="电话:"
          prop="primaryConcatPersonTelephone"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.primaryConcatPersonTelephone"
            placeholder="请输入电话"
          />
        </el-form-item>
        <el-form-item
          label="备注:"
          prop="primaryConcatPersonRemark"
          style="width: 93%"
      type="textarea"

        >
          <el-input
            v-model="FormList.primaryConcatPersonRemark"
            placeholder="请输入备注"
          />
        </el-form-item>
        <el-divider content-position="left">开票信息</el-divider>
        <el-form-item
          label="开票公司名称:"
          prop="makeCompanyName"
          style="width: 45%"
        >
          <el-input
            v-model="FormList.makeCompanyName"
            placeholder="请输入开票公司名称"
          />
        </el-form-item>
        <el-form-item
          label="纳税人识别号:"
          prop="taxpayerId"
          style="width: 45%"
        >
          <el-input v-model="FormList.taxpayerId" placeholder="请输入纳税人识别号" />
        </el-form-item>
        <el-form-item
          label="开户地址:"
          prop="openAddress"
          @click="clickMap(2)"
          style="width: 45%"
        >
          <el-input v-model="FormList.openAddress" placeholder="请输入开户地址" />
        </el-form-item>
        <el-form-item label="电话:" prop="makeCompanyPhone" style="width: 45%">
          <el-input v-model="FormList.makeCompanyPhone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item
          label="开户银行:"
          prop="openAccountBank"
          style="width: 45%"
        >
          <el-input v-model="FormList.openAccountBank" placeholder="请输入开户银行" />
        </el-form-item>
        <el-form-item label="银行账号:" prop="bankAccount" style="width: 45%">
          <el-input v-model="FormList.bankAccount" placeholder="请输入银行账号" />
        </el-form-item>
      </el-form>
      <div style="text-align: right; width: 100%" v-show="!typeList">
        <el-button v-show="typeList.type != 1" type="primary" @click="submit"
          >保存</el-button
        >
        <el-button @click="onModalCloseClick">关闭</el-button>
      </div>
    </div>
    <el-dialog
      v-model="isMap"
      title="地址"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="800px"
    >
      <div
        class="nf-o-d-content-right map-is-collapse"
        :class="{ 'map-is-collapse': isCollapse }"
      >
        <AliMap></AliMap>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  onMounted,
  toRefs,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { projectInfoAdd, projectInfoEdit } from "@/api/dwwh";
import AliMap from "@/components/AliMap/index.vue";
import bus from "@/bus";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const { typeList } = defineProps(["typeList"]);
console.log(typeList, "typeListtypeListtypeList");
const { unit_type, unit_property, credit_line, manage_status } = proxy.useDict(
  "unit_type",
  "unit_property",
  "credit_line",
  "manage_status"
);
const emits = defineEmits();
const ruleForm = ref(null);
let isMap = ref(false);
let FormList = ref({});
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const Formrules = reactive({
  creditCode: [
    { required: true, message: "社会统一信用代码不能为空", trigger: "blur" },
  ],
  unitName: [{ required: true, message: "单位名称不能为空", trigger: "blur" }],
  unitType: [{ required: true, message: "类型不能为空", trigger: "change" }],
  unitAddress: [{ required: true, message: "地址不能为空", trigger: ['blur','change'] }],

  primaryConcatPersonName: [
    { required: true, message: "主要联系人姓名不能为空", trigger: "blur" },
  ],
  primaryConcatPersonTelephone: [
    { required: true, message: "主要联系人电话不能为空", trigger: "blur" },
  ],
  primaryConcatPersonInformation:[
    { required: true, message: "主要联系人方式不能为空", trigger: "blur" },
  ],
});
function onModalCloseClick() {
  FormList.value = {};
 
  emits("onModalClose");
  nextTick(()=>{ 
     ruleForm.value.resetFields()
  })
}
const fileList1 = ref([]);
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true
}
function submit() {
  console.log(2121212,typeList.type)
  proxy.$refs["ruleForm"].validate((valid) => {
    if (valid) {
      FormList.value.fileSaveRequestList = [];
      fileList1.value.forEach((element) => {
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proProjectCompany";
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      if (typeList.type) {
        projectInfoEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
            FormList.value = {};
          }
        });
      } else {
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
            FormList.value = {};
          }
        });
      }
    }
  });
}
function desertFilds(){ 
    fileList1.value=[]
    proxy.$refs.ruleForm.resetFields()
}
defineExpose({ submit,desertFilds });
let addressM = ref(0);
function clickMap(v) {
    isMap.value = true;
    addressM.value = v;
}
onMounted(() => {
  bus.on("mapPointClick", ({ lat, lng, address = "武汉市xx" }) => {
    if (addressM.value == 1) {
      FormList.value.unitAddress = address;
    } else {
      FormList.value.openAddress = address;
    }
    isMap.value = false;
  });
  FormList.value = typeList ||{};
  fileList1.value = typeList.fileList1||[];

});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;

  .top {
   // margin-bottom: 15px;
  }

  .el-input__inner {
    // color: #fff;//
  }
}

.pagination {
  float: right;
  margin-top: 10px;
}

.iconCLass {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}

.tabs {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}

// .action-span {
//
//     }
</style>