<template>
  <div class="details">
    <el-form ref="ruleForm" :model="form">
      <el-tabs v-model="activeName" type="card" class="demo-tabs">
        <el-tab-pane label="基础信息" name="1">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目类别:" prop="projectTypeName" class="mb5">
                  <span>{{ form.projectTypeName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目名称:" prop="projectName" class="mb5">
                  <span>{{ form.projectName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建设类别:" prop="buildCategory" class="mb5">
                  <span>{{ findText('build_category', form.buildCategory) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属排水分区:" prop="drainagePartition" class="mb5">
                  <span>{{ findText('drainage_partition', form.drainagePartition) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目起止日期:" prop="time" class="mb5">
                  <span>{{ form.time }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规划条件:" prop="planCondition" class="mb5">
                  <span>{{ form.planCondition }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目库类型:" prop="projectLibraryType" class="mb5">
                  <span>{{ findText('project_library_type', form.projectLibraryType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型:" prop="taskType" class="mb5">
                  <span>{{ findText('task_type', form.taskType) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="项目概况:" prop="projectOverview" class="mb5">
                <span>{{ form.projectOverview }}</span>
              </el-form-item>
            </el-row>
            <el-row>
              <div>项目位置：</div>
              <div class="mapBox">
                <MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="false"></MapBox>
              </div>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目内容" name="2">
          <el-card class="box-card" shadow="never" v-for="(item, index) in projectContentList">
            <template #header>
              <div class="card-header">
                <span>{{ item.label }}</span>
              </div>
            </template>
            <el-table :data="form[`list${index + 2}`]">
              <el-table-column v-for="it in item.list" :label="it.propertyName" :prop="it.propertyKey" />
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="项目投资" name="3">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="投资批复文件名称（已批复项目填写）:" prop="investFileName" class="mb5">
                  <span>{{ form.investFileName }}</span>
                  <span v-if="fileInfo.name">{{ fileInfo.name }}</span>
                  <el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="handlePreview(fileInfo)">预览</el-button>
                  <el-button v-if="fileInfo.name" type="primary" link class="ml10" @click="downloadClick(fileInfo)">下载</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目总投资（含主体工程）（万元）:" prop="totalInvest" class="mb5">
                  <span>{{ form.totalInvest }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地方政府投资（万元）" prop="govermentInvest" class="mb5">
                  <span>{{ form.govermentInvest }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="社会资本投入（万元）:" prop="socialInvest" class="mb5">
                  <span>{{ form.socialInvest }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="海绵相关投资（不含主体工程）（万元）" prop="spongeInvest" class="mb5">
                  <span>{{ form.spongeInvest }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="mb5">
                  <span>{{ findText('project_operation_pattern', form.projectOperationPattern) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="责任部门" name="4">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="责任部门:" prop="chargeDepartment" class="mb5">
                  <span>{{ form.chargeDepartment }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="责任人:" prop="chargeUser" class="mb5">
                  <span>{{ form.chargeUser }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系方式:" prop="phone" class="mb5">
                  <span>{{ form.phone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计单位:" prop="designUnit" class="mb5">
                  <span>{{ projectCompanyList.find(item => item.id === form.designUnit)?.unitName || '' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="施工单位:" prop="constructUnit" class="mb5">
                  <span>{{ projectCompanyList.find(item => item.id === form.constructUnit)?.unitName || '' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运维单位:" prop="operationUnit" class="mb5">
                  <span>{{ projectCompanyList.find(item => item.id === form.operationUnit)?.unitName || '' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="建设进度" name="5">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建设状态:" prop="buildStatus" class="mb5">
                  <span>{{ findText('build_status', form.buildStatus) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建设进度:" prop="projectProgress" class="mb5">
                  <div style="width: 100%">
                    <el-progress :percentage="form.projectProgress" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="完成项目总投资（含主体工程）（万元）:" prop="accomplishTotalInvest" class="mb5">
              <span>{{ form.accomplishTotalInvest }}</span>
            </el-form-item>
            <el-form-item label="完成海绵相关投资（不含主体工程）（万元）:" prop="accomplishSpongeInvest" class="mb5">
              <span>{{ form.accomplishSpongeInvest }}</span>
            </el-form-item>
            <el-form-item label="建设过程中照片:" class="mb5">
              <div class="img_box" v-if="constractionFlieList.length">
                <div class="img" v-for="item in constractionFlieList">
                  <img :src="item.url" alt="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="建设完成后照片:" class="mb5">
              <div class="img_box" v-if="postConstractionFlieList.length">
                <div class="img" v-for="item in postConstractionFlieList">
                  <img :src="item.url" alt="" />
                </div>
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目立项" name="6">
          <el-form-item label="项目立项时间:" prop="startTime" class="mb5">
            <span>{{ form.startTime }}</span>
          </el-form-item>
          <el-form-item label="可研批复文件:" prop="name29" class="mb5" v-if="form.fileGroup.pro_project_approval">
            <div class="fileListBox">
              <span>{{ form.fileGroup.pro_project_approval[0].filieDescription }}</span>
              <div class="fileList">
                <div class="file" v-for="file in form.fileGroup.pro_project_approval[0].fileList">
                  <span>{{ file.name }}</span>
                  <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
                  <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="规划许可" name="7">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="项目面积:" prop="projectArea" class="mb5">
                  <span>{{ form.projectArea + 'm²' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用地类型:" prop="spongeLandType" class="mb5">
                  <span>{{ findText('sponge_land_type', form.spongeLandType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="绿地率:" prop="greenRate" class="mb5">
                  <span>{{ form.greenRate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider content-position="left">建设目标</el-divider>
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="年径流总量控制率:" prop="annualRunoffTotalControlRate" class="mb5">
                  <span>{{ form.annualRunoffTotalControlRate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年径流污染去除率:" prop="annualRunoffPollutionControlRate" class="mb5">
                  <span>{{ form.annualRunoffPollutionControlRate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="硬化地面率:" prop="hardGroundRate" class="mb5">
                  <span>{{ form.hardGroundRate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider content-position="left">规划阶段资料</el-divider>
          <div class="pl20" v-if="form.fileGroup.planning_stage && planning_stage?.length">
            <el-form-item
              :label="planning_stage.find(it => it.value === item.dictData)?.label || ''"
              prop="name29"
              class="mb5"
              v-for="item in form.fileGroup.planning_stage"
            >
              <div class="fileListBox">
                <span style="margin-right: 10px">{{ item.filieDescription }}</span>
                <div class="fileList">
                  <div class="file" v-for="file in item.fileList">
                    <span>{{ file.name }}</span>
                    <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
                    <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="施工许可" name="8">
          <div class="pl20" v-if="form.fileGroup.construction_permits && construction_permits?.length">
            <el-form-item
              :label="construction_permits.find(it => it.value === item.dictData)?.label || ''"
              prop="name29"
              class="mb5"
              v-for="item in form.fileGroup.construction_permits"
            >
              <div class="fileListBox">
                <span style="margin-right: 10px">{{ item.filieDescription }}</span>
                <div class="fileList">
                  <div class="file" v-for="file in item.fileList">
                    <span>{{ file.name }}</span>
                    <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
                    <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="工程建设" name="9">
          <el-table :data="form.list7">
            <el-table-column label="巡查记录编号"  prop="projectTypeId" show-overflow-tooltip />
            <el-table-column label="巡检人"  prop="projectName" show-overflow-tooltip />
            <el-table-column label="巡检日期"  prop="buildCategory" show-overflow-tooltip />
            <el-table-column label="项目整体进度描述"  prop="drainagePartition" show-overflow-tooltip />
            <el-table-column label="图片"  prop="time" show-overflow-tooltip />
            <el-table-column label="问题数量"  prop="planCondition" show-overflow-tooltip />
            <el-table-column label="操作"  show-overflow-tooltip>
              <template #default="{ row }">
                <el-button type="primary" link>查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination class="pagination" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
        </el-tab-pane> -->
        <el-tab-pane label="竣工验收" name="10">
          <el-divider content-position="left">建设内容</el-divider>
          <div class="pl20">
            <el-form-item label="建设指标达成情况:" prop="achievementTarget" class="mb5">
              <span>{{ form.achievementTarget }}</span>
            </el-form-item>
            <el-form-item label="海绵设施类型及规模:" prop="spongeTypeScale" class="mb5">
              <span>{{ form.spongeTypeScale }}</span>
            </el-form-item>
            <el-form-item label="其他情况说明:" prop="otherDescription" class="mb5">
              <span>{{ form.otherDescription }}</span>
            </el-form-item>
          </div>
          <el-divider content-position="left">验收资料</el-divider>
          <div class="pl20" v-if="form.fileGroup.acceptance_material && acceptance_material?.length">
            <el-form-item
              :label="acceptance_material.find(it => it.value === item.dictData)?.label || ''"
              prop="name29"
              class="mb5"
              v-for="item in form.fileGroup.acceptance_material"
            >
              <div class="fileListBox">
                <span style="margin-right: 10px">{{ item.filieDescription }}</span>
                <div class="fileList">
                  <div class="file" v-for="file in item.fileList">
                    <span>{{ file.name }}</span>
                    <el-button type="primary" link class="ml10" @click="handlePreview(file)">预览</el-button>
                    <el-button type="primary" link class="ml10" @click="downloadClick(file)">下载</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { projectInfoNewDetail, getFileLIst, getProjectCompanyList } from '@/api/project/projectInformationNew';
import { inheritAttr } from '@/utils/v3';
import { useDicts } from '@/hooks';
import MapBox from '@/components/Map';
const { proxy } = getCurrentInstance();
const { findText } = useDicts(proxy);
const { planning_stage } = proxy.useDict('planning_stage');
const { construction_permits } = proxy.useDict('construction_permits');
const { acceptance_material } = proxy.useDict('acceptance_material');
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({}),
  },
  types: {
    type: Array,
    default: () => [],
  },
  buildCategory: {
    type: Array,
    default: () => [],
  },
  projectLibraryType: {
    type: Array,
    default: () => [],
  },
  projectContentType: {
    type: Array,
    default: () => [],
  },
});
const { curRow } = props;
const activeName = ref('1');
const form = reactive({
  projectTypeId: '',
  projectTypeName: '',
  projectName: '',
  buildCategory: '',
  drainagePartition: '',
  time: '',
  planCondition: '',
  projectLibraryType: '',
  taskType: '',
  projectOverview: '',
  projectLocation: '',
  investFileName: '',
  totalInvest: '',
  govermentInvest: '',
  socialInvest: '',
  spongeInvest: '',
  projectOperationPattern: '',
  chargeDepartment: '',
  chargeUser: '',
  phone: '',
  designUnit: '',
  constructUnit: '',
  operationUnit: '',
  buildStatus: '',
  projectProgress: 10,
  accomplishTotalInvest: '',
  accomplishSpongeInvest: '',
  startTime: '',
  fileGroup: {},
  name29: '',
  projectArea: '',
  spongeLandType: '',
  greenRate: '',
  annualRunoffTotalControlRate: '',
  annualRunoffPollutionControlRate: '',
  hardGroundRate: '',
  achievementTarget: '',
  spongeTypeScale: '',
  otherDescription: '',
});

const projectItemDescriptionConfigList = ref([]);
const projectContentList = ref([]);

const fileInfo = reactive({
  extension: '',
  name: '',
  originalName: '',
  refField: 'postConstraction',
  refType: 'projectInfoNew',
  size: '',
  url: '',
});

const fileInfo1 = reactive({
  extension: '',
  name: '',
  originalName: '',
  refField: 'postConstraction',
  refType: 'projectInfoNew',
  size: '',
  url: '',
});

const fileInfo2 = reactive({
  extension: '',
  name: '',
  originalName: '',
  refField: 'postConstraction',
  refType: 'projectInfoNew',
  size: '',
  url: '',
});
const fileList = ref([]);
const constractionFlieList = computed(() => {
  return fileList.value.filter(item => item.refField === 'constraction');
});
const postConstractionFlieList = computed(() => {
  return fileList.value.filter(item => item.refField === 'postConstraction');
});
const projectCompanyList = ref([]);

const getDetail = async () => {
  const res = await projectInfoNewDetail(curRow.projectNo);
  if (res?.code !== 200) return;
  console.log(res.data);
  inheritAttr(res.data, form);
  const item = props.types.find(it => it.id === form.projectTypeId);
  form.projectTypeName = item?.projectTypeName || '';
  form.time = res.data.startTime + '至' + res.data.endTime;
  viewMap(form.projectLocation);

  projectItemDescriptionConfigList.value = res?.data?.projectItemDescriptionList || [];
  console.log(projectItemDescriptionConfigList);
  projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => {
    const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
    const obj = {};
    for (const item of list) {
      obj[item.propertyKey] = item.propertyValue;
    }
    form[`list${i + 2}`] = [obj];
    return {
      list: JSON.parse(JSON.stringify(list)),
      label: item.label,
    };
  });

  getFileInfo(res.data.id, 'projectInfoNew', 'investmentApproval', data => {
    console.log(data);
    form.fileName = data?.[0]?.name || '';
    if (data?.[0]) {
      fileInfo.extension = data[0].extension;
      fileInfo.name = data[0].name;
      fileInfo.originalName = data[0].originalName;
      fileInfo.size = data[0].size;
      fileInfo.url = data[0].url;
    }
  });

  fileList.value = res.data.sysFileList || [];
};

const viewMap = projectLocation => {
  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 getFileInfo = async (id, refType, refField, callback) => {
  const res = await getFileLIst({ refId: id, refType, refField });
  if (res?.code !== 200) return;
  callback && callback(res.data);
};

const downloadClick = file => {
  const a = document.createElement('a');
  a.href = file.url;
  a.download = file.name;
  a.style.display = 'none';
  document.body.appendChild(a);
  console.log(a.download);
  a.click(); // 点击下载
  document.body.removeChild(a); // 下载完成移除元素
};

const handlePreview = file => {
  proxy.$modal.confirm(`下载此文件: ${file.name}？`).then(() => {
    window.open(file.url);
  });
};

const getProjectCompanyLists = async () => {
  const res = await getProjectCompanyList();
  if (res?.code !== 200) return;
  projectCompanyList.value = res?.data || [];
};

onMounted(async () => {
  await getProjectCompanyLists();
  getDetail();
});
</script>

<style lang="scss" scoped>
.details {
  .pl20 {
    padding-left: 20px;
  }
  .mb5 {
    margin-bottom: 5px;
  }

  .ml10 {
    margin-left: 10px;
  }

  .box-card {
    margin-top: 10px;
    &:first-of-type {
      margin-top: 0;
    }
  }

  :deep(.pagination) {
    height: 52px;
    margin-top: 10px;
    .el-pagination {
      right: 20px;
    }
  }
}
.mapBox {
  width: 100%;
  height: 400px;
}

.fileListBox {
  display: flex;
}
.img_box {
  display: flex;
  flex-wrap: wrap;
  .img {
    width: 178px;
    height: 178px;
    margin-right: 10px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>