<template>
  <div class="operate">
    <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts.type == 'view'">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名称:" prop="projectNo" class="formItem140">
            <el-select
              v-model="form.projectNo"
              placeholder="请选择项目名称"
              style="width: 100%"
              filterable
              @change="projectChange"
              :disabled="opts.type == 'view' || opts.type == 'edit'"
            >
              <el-option v-for="dict in projectList" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目编码:" prop="projectNo" class="formItem140">
            <el-input v-model="form.projectNo" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建设状态:" prop="buildStatus" class="formItem140">
            <el-input v-model="form.buildStatusName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目估算（万元）:" prop="valuation" class="formItem140">
            <el-input v-model="form.valuation" placeholder="请输入项目估算" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="formItem140">
            <el-input v-model="form.projectOperationPattern" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设单位:" prop="chargeDepartment" class="formItem140">
            <el-input v-model="form.chargeDepartment" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="责任人:" prop="chargeUser" class="formItem140">
            <el-input v-model="form.chargeUser" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式:" prop="phone" class="formItem140">
            <el-input v-model="form.phone" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="box" v-for="(item, i) in form.projectProcessAttachmentSaveRequestList">
        <el-row :gutter="20">
          <el-col :span="20">
            <!-- 必填  :rules="rules['filieDescription']"-->
            <el-form-item
              :label="`${item.name}:`"
              :prop="'projectProcessAttachmentSaveRequestList.' + i + '.' + 'filieDescription'"
              class="formItem140"
            >
              <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" placeholder="请输入资料说明" />
              <el-button type="warning" @click="uploadGo(item, i)" style="margin-left: 10px">上传文件</el-button>
              <!-- 文件列表展示 -->
              <div class="ggFileListShow">
                <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
                  <p class="name ellipsis" :title="img.name">{{ img.name || '--' }}</p>
                  <el-icon @click="deleteGG(item.fileList, index)"><CircleCloseFilled /></el-icon>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-form-item label="项目位置:" prop="projectLocation" class="formItem140">
        <div class="mapBox">
          <MapBox
            ref="mapBoxRef"
            :isShowSearch="false"
            :isShowTool="false"
            :isSelectAddress="true"
            @getPlace="getAddress"
            :previousPoint="previousPoint"
            :previousPointName="previousPointName"
            :isOpenDeaw="false"
          ></MapBox>
        </div>
      </el-form-item>
    </el-form>
    <!-- 从工改附件、自定义上传中选择 -->
    <el-dialog v-model="showDetail" title="工改项目信息附件情况" :close-on-click-modal="false" width="1300px">
      <GGFileUpload v-if="showDetail" @closeGGDialog="closeGGDialog" :fileObj="fileObj"></GGFileUpload>
    </el-dialog>
  </div>
</template>

<script setup>
import { required } from '@/utils/validate-helper';
import {
  getProjectInfoNewList,
  getDicts,
  projectApprovalAdd,
  projectApprovalEdit,
  projectApprovalDetail,
} from '@/api/project/projectApproval';
import { useDicts } from '@/hooks';
import MapBox from '@/components/Map';
import { inheritAttr } from '@/utils/v3';
import GGFileUpload from '@/components/ImageFileUpload/ggFileUpload.vue'; //工改数据平台文件

const { proxy } = getCurrentInstance();
const showDetail = ref(false);
const fileObj = ref({});
const { findText } = useDicts(proxy);
const previousPoint = ref('');
const previousPointName = ref('');
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({}),
  },
  opts: {
    type: Object,
    default: () => ({}),
  },
});
const { curRow, opts } = props;
const emit = defineEmits(['close']);
const form = reactive({
  projectName: '',
  projectNo: '',
  projectNo: '',
  buildStatus: '',
  buildStatusName: '',
  valuation: '',
  projectOperationPattern: '',
  chargeDepartment: '',
  chargeUser: '',
  phone: '',
  sysFileSaveRequestList: [],
  projectLocation: '',
  projectProcessAttachmentSaveRequestList: [],
});

watch(
  () => form.projectLocation,
  () => {
    nextTick(() => {
      proxy.$refs.ruleForm.validateField('projectLocation');
    });
  }
);

const rules = reactive({
  projectNo: required('项目名称'),
  projectNo: required('项目编码'),
  buildStatus: required('建设状态'),
  valuation: required('项目估算'),
  projectOperationPattern: required('项目运作模式'),
  chargeDepartment: required('建设单位'),
  chargeUser: required('责任人'),
  phone: required('联系方式'),
  filieDescription: required('内容'),
  projectLocation: required('项目位置'),
});

const projectList = ref([]);

const mapForm = reactive({
  geometry: '',
});

// 选择附件上传,对应动态参数添加
function uploadGo(item, index) {
  fileObj.value.refType = item.dictType;
  fileObj.value.refField = item.dictData;
  fileObj.value.fileList = item.fileList;
  fileObj.value.index = index; //动态的第几个
  showDetail.value = true;
}
// 文件列表删除
function deleteGG(list, index) {
  list.splice(index, 1);
}
// 确定之后选择的附件
const closeGGDialog = e => {
  form.projectProcessAttachmentSaveRequestList[fileObj.value.index].fileList = e;
  showDetail.value = false;
};

// 地图点击获取经纬度
function getAddress(val) {
  form.projectLocation = val.lonLat[0] + ',' + val.lonLat[1];
}

const getProjectList = async () => {
  const res = await getProjectInfoNewList();
  if (res?.code !== 200) return;
  projectList.value = res?.data || [];
  if (opts.type === 'add' && projectList.value.length) {
    projectChange(projectList.value[0].projectNo);
    fileObj.value.refId = projectList.value[0].id; //项目返回的id值
  }
};

const projectChange = val => {
  mapForm.geometry = '';
  form.projectLocation = '';
  const obj = projectList.value.find(item => item.projectNo === val);
  console.log('projectChange---', obj);
  previousPoint.value = obj.projectLocation;
  previousPointName.value = obj.projectName;
  fileObj.value.refId = obj.id; //项目返回的id值
  inheritAttr(obj, form);
  form.buildStatusName = findText('build_status', form.buildStatus);
  form.projectOperationPattern = findText('project_operation_pattern', form.projectOperationPattern);

  getDictMaps('pro_project_approval');

  nextTick(() => {
    viewPosition(form.projectLocation);
  });
};

const viewPosition = projectLocation => {
  if (!projectLocation) return;
  let data = [];
  if (projectLocation.includes('POINT')) {
    data = [
      {
        type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
        id: 'point',
        style: {
          radius: 10,
          clampToGround: false,
          material: 'rgba(255, 0, 0, 1)',
        },
        geometrys: projectLocation,
      },
    ];
  } else if (projectLocation.includes('LINE')) {
    data = [
      {
        type: NewFiberMap.Enum.VectorType.POLYLINE,
        id: 'line',
        geometrys: projectLocation,
        style: {
          width: 5,
          material: 'rgba(255,0,0,1)',
          clampToGround: true,
        },
      },
    ];
  } else if (projectLocation.includes('POLYGON')) {
    data = [
      {
        type: NewFiberMap.Enum.VectorType.POLYGON,
        style: { material: 'rgba(255,0,0,1)', color: 'rgba(255,0,0,1)' },
        geometrys: projectLocation,
        id: 'area',
      },
    ];
  }
  if (data.length) {
    setTimeout(() => {
      let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
      toCenterByGeoJson(geojson);
      newfiberMap.geojsonToMap(geojson);
    }, 500);
  }
};

const toCenterByGeoJson = geojson => {
  let coords = turf.getCoords(geojson.features[0].geometry).flat();
  let flag = geojson.features.length == 1 && coords.length == 2;
  if (!!geojson.features.length && !flag) {
    newfiberMap.getMap().camera.flyTo({
      destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
    });
  } else {
    newfiberMap.setCenter({
      roll: 0.01658908985506884,
      pitch: -87.24924906709752,
      heading: 5.026928271138224,
      lng: coords[0],
      lat: coords[1],
      height: 943.5996932813425,
    });
  }
};

const getDictMaps = async dictType => {
  const res = await getDicts(dictType);
  if (res?.code !== 200) return;
  if (res?.data) {
    form.projectProcessAttachmentSaveRequestList = [];
    for (const item of res.data) {
      form.projectProcessAttachmentSaveRequestList.push({
        fileList: [],
        dictData: item.dictValue,
        dictType: item.dictType,
        filieDescription: '',
        projectNo: '',
        name: item.dictLabel,
      });
    }
  }
  setTimeout(() => {
    if (proxy.$refs.ruleForm) {
      proxy.$refs.ruleForm.clearValidate();
    }
  });
};

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      const params = JSON.parse(JSON.stringify(form));
      for (const item of params.projectProcessAttachmentSaveRequestList) {
        item.projectNo = params.projectNo;
        for (const it of item.fileList) {
          params.sysFileSaveRequestList.push(it);
        }
      }
      console.log(params);
      let methed = '';
      if (curRow?.id) {
        params.id = curRow.id;
        methed = projectApprovalEdit;
      } else {
        methed = projectApprovalAdd;
      }
      const res = await methed(params);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess('操作成功！');
      emit('close');
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 获取详情数据
const getDetail = async () => {
  const res = await projectApprovalDetail(curRow.id);
  if (res?.code !== 200) return;
  fileObj.value.refId = res.data.projectId; //项目返回的id值
  previousPoint.value = res.data.projectLocation;
  previousPointName.value = res.data.projectName;
  inheritAttr(res.data, form);
  const fileGroup = res.data.fileGroup;
  const res1 = await getDicts('pro_project_approval');
  form.buildStatusName = findText('build_status', form.buildStatus);
  const dicts = res1.data;
  for (const key in fileGroup) {
    if (Object.hasOwnProperty.call(fileGroup, key)) {
      const element = fileGroup[key];
      for (const item of element) {
        const info = dicts.find(it => it.dictValue === item.dictData);
        form.projectProcessAttachmentSaveRequestList.push({
          fileList: item.fileList,
          dictData: item.dictData,
          dictType: item.dictType,
          filieDescription: item.filieDescription,
          projectNo: item.projectNo,
          name: info.dictLabel,
        });
      }
    }
  }
  nextTick(() => {
    viewPosition(form.projectLocation);
  });
};

onMounted(() => {
  getProjectList(); //获取项目列表
  if (curRow?.id) {
    getDetail();
  }
});

defineExpose({
  submit,
});
</script>

<style lang="scss" scoped>
.operate {
  .mapBox {
    width: 100%;
    height: 500px;
  }
  .box {
    margin-bottom: 10px;
  }
}
</style>