<template>
  <div class="water-analysis-page" :class="{ 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%">
          <ImageFileUpload
            :fileType="['txt', 'doc', 'xls', 'docx', 'pdf']"
            v-model:saveFileArr="FormList.fileSaveRequestList"
            :listType="'text'"
            :refType="'proProjectCompany'"
          />
        </el-form-item>
        <el-divider content-position="left">主要联系人</el-divider>
        <el-form-item label="姓名:" prop="primaryConcatPersonUserName" style="width: 45%">
          <el-select v-model="FormList.primaryConcatPersonUserName" placeholder="请选择" style="width: 100%" filterable>
            <el-option
              v-for="dict in userLists"
              :key="dict.userName"
              :label="dict.nickName + dict.phonenumber"
              :value="dict.userName"
            ></el-option>
          </el-select>
        </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="请输入联系方式" maxlength="11" />
        </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" 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"
    >
      <MapPosition v-if="isMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isMap = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessageBox } from 'element-plus';
import { projectInfoAdd, projectInfoEdit } from '@/api/project/dwwh';
import { listUser } from '@/api/system/user.js';
import MapPosition from '@/components/Map/index.vue';
import bus from '@/utils/mitt';

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 userLists = ref([]);
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'] }],
  primaryConcatPersonUserName: [{ 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();
  });
}

function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true;
}
// 获取位置
function getAddress(val) {
  FormList.value.unitAddress = val.caseAddress;
}
function submit() {
  console.log(2121212, typeList.type);
  proxy.$refs['ruleForm'].validate(valid => {
    if (valid) {
      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() {
  FormList.value.fileSaveRequestList = [];
  proxy.$refs.ruleForm.resetFields();
}
defineExpose({ submit, desertFilds });
let addressM = ref(0);
function clickMap(v) {
  isMap.value = true;
  addressM.value = v;
}
// 获取联系人
async function getUserList() {
  let res = await listUser();
  if (res && res.code == 200) {
    userLists.value = res.data || [];
  }
}
onMounted(() => {
  getUserList();
  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 || {};
  FormList.value.fileSaveRequestList = typeList.fileList1 || [];
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}

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

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

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

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