<template>
  <div class="approval">
    <div class="top">
      <el-form ref="ruleForm" :model="form" v-show="showSearch">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目名称:" prop="projectName" class="formItem110">
              <el-input
                v-model="form.projectName"
                placeholder="请输入项目名称"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="formItem110">
              <el-select
                v-model="form.projectOperationPattern"
                placeholder="请选择项目运作模式"
                style="width: 100%"
              >
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="dict in project_operation_pattern"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设单位:" prop="chargeDepartment">
              <el-input
                v-model="form.chargeDepartment"
                placeholder="请输入建设单位"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="责任人:" prop="chargeUser" class="formItem110">
              <el-input
                v-model="form.chargeUser"
                placeholder="请输入责任人"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设状态:" prop="buildStatus" class="formItem110">
              <el-select
                v-model="form.buildStatus"
                placeholder="请选择建设状态"
                style="width: 100%"
              >
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="dict in build_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目类型:" prop="projectTypeId">
              <el-select
                v-model="form.projectTypeId"
                placeholder="请选择项目类型"
                style="width: 100%"
              >
                <el-option label="全部" value="" />
                <el-option
                  v-for="dict in projectTypes"
                  :key="dict.id"
                  :label="dict.projectTypeName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="search">
                查询</el-button
              >
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row class="row">
      <el-button
        type="primary"
        plain
        icon="Plus"
        @click="openDialog({}, 'add')"
        >新增项目立项</el-button
      >
      <el-button
        type="primary"
        plain
        icon="Edit"
        @click="editSchedule"
        >修改进度</el-button
      >
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetQuery"
      ></right-toolbar>
    </el-row>
    <div class="table" ref="table_box">
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        :max-height="maxHeight"
        ref="multipleTableRef"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column label="项目编码" prop="projectNo" show-overflow-tooltip />
        <el-table-column label="项目类型" align="center" prop="projectTypeId" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ projectTypes.find(it => it.id === row.projectTypeId)?.projectTypeName || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目估算（万元）" align="center" prop="valuation" show-overflow-tooltip />
        <el-table-column label="项目运作模式" align="center" prop="projectOperationPattern" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('project_operation_pattern', row.projectOperationPattern) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="建设单位" align="center" prop="chargeDepartment" show-overflow-tooltip />
        <el-table-column label="项目位置" align="center" prop="projectLocation" show-overflow-tooltip>
          <template #default="{ row }">
            <el-button type="primary" link @click="viewPosition(row.projectLocation)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="责任人" align="center" prop="chargeUser" show-overflow-tooltip />
        <el-table-column label="联系方式" align="center" prop="phone" show-overflow-tooltip />
        <el-table-column label="建设状态" align="center" prop="buildStatus" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('build_status', row.buildStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可研批复文件" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-button type="primary" link @click="viewFile(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog(row, 'edit')">编辑</el-button>
            <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
            <el-button type="danger" link @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination class="pagination" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
    </div>
    <el-dialog
      v-model="visible"
      :title="`${opts.text}项目立项`"
      :close-on-click-modal="false"
      width="70%"
      :before-close="close"
      class="dialog"
    >
      <operate
        ref="operateRef"
        :cur-row="curRow"
        v-if="visible"
        @close="close"
        :opts="opts"
      />
      <template #footer v-if="opts.type !== 'view'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visible1"
      title="修改建设进度"
      :close-on-click-modal="false"
      width="40%"
      :before-close="dialogClose"
      class="dialog"
    >
      <el-form ref="dialogRuleFormRef" :model="dialogForm" :rules="dialogRules" v-if="visible1">
        <el-form-item label="建设状态:" prop="buildStatus">
          <el-select
            v-model="dialogForm.buildStatus"
            placeholder="请选择建设状态"
            style="width: 100%"
          >
            <el-option
              v-for="dict in build_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="建设进度:" prop="projectProgress">
          <div style="display: flex;width: 100%">
            <el-slider v-model="dialogForm.projectProgress" style="flex: 1;" />
            <span style="margin-left: 10px;">{{ dialogForm.projectProgress + '%' }}</span>
          </div>
        </el-form-item>
        <el-form-item label="完成项目总投资（含主体工程）（万元）:" prop="accomplishTotalInvest">
          <el-input v-model="dialogForm.accomplishTotalInvest" placeholder="请输入完成项目总投资" />
        </el-form-item>
        <el-form-item label="完成海绵相关投资（不含主体工程）（万元）:" prop="accomplishSpongeInvest">
          <el-input v-model="dialogForm.accomplishSpongeInvest" placeholder="请输入完成海绵相关投资" />
        </el-form-item>
        <el-form-item label="建设过程中照片:" prop="underWay">
          <div class="upload">
            <el-upload
              class="avatar-uploader"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              :before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
              :on-success="(response) => onSuccess(response, 'underWay')"
              :on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
              :show-file-list="false"
              :disabled="!!dialogForm.underWay"
            >
              <div class="img" v-if="dialogForm.underWay">
                <img :src="dialogForm.underWay" class="avatar" />
                <div class="mask">
                  <el-icon
                    class="icon"
                    :size="20"
                    @click="removeFile('underWay')"
                  ><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="建设完成后照片:" prop="complete">
          <div class="upload">
            <el-upload
              class="avatar-uploader"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              :before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
              :on-success="(response) => onSuccess(response, 'complete')"
              :on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
              :show-file-list="false"
              :disabled="!!dialogForm.complete"
            >
              <div class="img" v-if="dialogForm.complete">
                <img :src="dialogForm.complete" class="avatar" />
                <div class="mask">
                  <el-icon
                    class="icon"
                    :size="20"
                    @click="removeFile('complete')"
                  ><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <template #footer v-if="opts.type !== 'view'">
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogSubmit">确 定</el-button>
          <el-button @click="dialogClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visible2"
      title="查看位置"
      :close-on-click-modal="false"
      width="60%"
      class="dialog"
    >
      <div class="mapBox" v-if="visible2">
        <MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="false"></MapBox>
      </div>
    </el-dialog>
    <el-dialog
      v-model="visible3"
      title="查看文件"
      :close-on-click-modal="false"
      width="60%"
      class="dialog"
    >
    <div class="fileSaveRequestList">
      <div class="file-item" v-for="item in fileList">
        <span>{{ item.name }}</span>
        <el-button type="primary" link @click="handlePreview(item)">下载</el-button>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, shallowRef } from 'vue'
import { usePagination, useAdaption, useDicts } from '@/hooks'
import operate from './operate.vue'
import { required } from '@/utils/validate-helper'
import { optTextMap } from '@/utils/map'
import {
  getProjectApprovalPage,
  projectApprovalDel
} from '@/api/projectApproval'
import {
  projectInfoNewDetail,
  getFileLIst,
  updateProjectBuildStatus,
  projectTypeList
} from '@/api/projectInformationNew'
import MapBox from '@/components/Map'
import uploadHeader from '@/utils/getUploadHeader'
import { inheritAttr } from '@/utils/v3'
const { proxy } = getCurrentInstance();
const {
  project_operation_pattern,
  build_status,
  findText
} = useDicts(proxy)
const { maxHeight, onResize } = useAdaption(proxy, 'table_box')
const showSearch = ref(true)
const visible = ref(false)
const opts = reactive({
  type: '',
  text: ''
})
const curRow = shallowRef({})
const visible1 = ref(false)
const form = reactive({
  projectName: '',
  projectOperationPattern: '',
  chargeDepartment: '',
  chargeUser: '',
  buildStatus: '',
  projectTypeId: '',
})

const dialogForm = reactive({
  projectNo: '',
  buildStatus: '',
  projectProgress: 0,
  accomplishTotalInvest: '',
  accomplishSpongeInvest: '',
  underWay: '',
  complete: '',
  sysFileSaveRequestList: [
    {
      extension: '',
      name: '',
      originalName: '',
      refField: 'constraction',
      refType: 'projectInfoNew',
      size: '',
      url: ''
    },
    {
      extension: '',
      name: '',
      originalName: '',
      refField: 'postConstraction',
      refType: 'projectInfoNew',
      size: '',
      url: ''
    }
  ]
})


const dialogRules = reactive({
  buildStatus: required('建设状态'),
  projectProgress: required('建设进度'),
  accomplishTotalInvest: required('完成项目总投资'),
  accomplishSpongeInvest: required('完成海绵相关投资'),
  underWay: required('建设过程中照片'),
  complete: required('建设完成后照片'),
})

const params = computed(() => {
  return JSON.parse(JSON.stringify(form))
})

const {
  pageNum,
  pageSize,
  tableData,
  total,
  loading,
  getTableList
} = usePagination(getProjectApprovalPage, params)

const projectTypes = ref([])

const visible2 = ref(false)
const checkedList = shallowRef([])

const visible3 = ref(false)
const fileList = ref([])

const viewFile = (row) => {
  console.log(row)
  fileList.value = row.fileSaveRequestList
  visible3.value = true
}

const handlePreview = (file) => {
    if(opts.type === 'view') return
    // window.open(file.url, '_blank')
    proxy.$modal
    .confirm(`下载此文件: ${file.name}？`)
    .then(() => {
      window.open(file.url)
    })
  }

const getProjectTypeList = async () => {
  const res = await projectTypeList({ status: '0' })
  if(res?.code !== 200) return
  projectTypes.value = res?.data || []
}

const openDialog = (data, type) => {
  visible.value = true
  opts.type = type
  opts.text = optTextMap.get(type)
  curRow.value = data
}

const close = () => {
  visible.value = false
  opts.type = ''
  opts.text = ''
  search()
}

const search = () => {
  pageNum.value = 1
  getTableList()
}
const resetQuery = () => {
  proxy.$refs.ruleForm.resetFields()
  search()
}

const submit = () => {
  proxy.$refs.operateRef.submit()
}

const editSchedule = async () => {
  const list = proxy.$refs.multipleTableRef.getSelectionRows()
  if(!list.length) return proxy.$modal.msgError('请选择一条数据！')
  if(list.length > 1) return proxy.$modal.msgError('只能选择一条数据！')
  visible1.value = true
  checkedList.value = list
  const res = await projectInfoNewDetail(list[0].projectNo)
  if(res?.code !== 200) return
  console.log(res.data)
  inheritAttr(res.data, dialogForm)
  getFileInfo(res.data.id, 'projectInfoNew', 'constraction', (data) => {
    console.log(data)
    dialogForm.underWay = data?.[0]?.url || ''
    if(data?.[0]) {
      dialogForm.sysFileSaveRequestList[0].extension = data[0].extension
      dialogForm.sysFileSaveRequestList[0].name = data[0].name
      dialogForm.sysFileSaveRequestList[0].originalName = data[0].originalName
      dialogForm.sysFileSaveRequestList[0].size = data[0].size
      dialogForm.sysFileSaveRequestList[0].url = data[0].url
    }
  })
  getFileInfo(res.data.id, 'projectInfoNew', 'postConstraction', (data) => {
    console.log(data)
    dialogForm.complete = data?.[0]?.url || ''
    if(data?.[0]) {
      dialogForm.sysFileSaveRequestList[1].extension = data[0].extension
      dialogForm.sysFileSaveRequestList[1].name = data[0].name
      dialogForm.sysFileSaveRequestList[1].originalName = data[0].originalName
      dialogForm.sysFileSaveRequestList[1].size = data[0].size
      dialogForm.sysFileSaveRequestList[1].url = data[0].url
    }
  })
}

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 removeFile = (prop) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {1
    dialogForm[prop] = ''
    if(prop === 'underWay'){
      dialogForm.sysFileSaveRequestList[0].extension = ''
      dialogForm.sysFileSaveRequestList[0].name = ''
      dialogForm.sysFileSaveRequestList[0].originalName = ''
      dialogForm.sysFileSaveRequestList[0].size = ''
      dialogForm.sysFileSaveRequestList[0].url = ''
    } else {
      dialogForm.sysFileSaveRequestList[1].extension = ''
      dialogForm.sysFileSaveRequestList[1].name = ''
      dialogForm.sysFileSaveRequestList[1].originalName = ''
      dialogForm.sysFileSaveRequestList[1].size = ''
      dialogForm.sysFileSaveRequestList[1].url = ''
    }
    nextTick(() => {
      proxy.$refs.dialogRuleFormRef.validateField(prop)
    })
  })
  .catch(() => {});

}

const dialogClose = () => {
  visible1.value = false
  checkedList.value = []
}

const dialogSubmit = () => {
  proxy.$refs.dialogRuleFormRef.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!', dialogForm)
      const res = await updateProjectBuildStatus({ projectNo: checkedList.value[0].projectNo,  ...dialogForm })
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功！')
      getTableList()
      dialogClose()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const beforeUpload = (rawFile) => {
  console.log(rawFile)
}

const onSuccess = (response, prop) => {
  console.log(response)
  const { data } = response
  dialogForm[prop] = data.url
  if(prop === 'underWay'){
    dialogForm.sysFileSaveRequestList[0].extension = data.extension
    dialogForm.sysFileSaveRequestList[0].name = data.name
    dialogForm.sysFileSaveRequestList[0].originalName = data.originalName
    dialogForm.sysFileSaveRequestList[0].size = data.size
    dialogForm.sysFileSaveRequestList[0].url = data.url
  } else {
    dialogForm.sysFileSaveRequestList[1].extension = data.extension
    dialogForm.sysFileSaveRequestList[1].name = data.name
    dialogForm.sysFileSaveRequestList[1].originalName = data.originalName
    dialogForm.sysFileSaveRequestList[1].size = data.size
    dialogForm.sysFileSaveRequestList[1].url = data.url
  }
  nextTick(() => {
    proxy.$refs.dialogRuleFormRef.validateField(prop)
  })

}

const onError = (error, uploadFile, uploadFiles) => {
  console.log(error, uploadFile, uploadFiles)
}


const del = (row) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    const res = await projectApprovalDel(row.id)
    if(res?.code !== 200) return
    proxy.$modal.msgSuccess('操作成功！')
    getTableList()
  })
  .catch(() => {});
}


const viewPosition = (projectLocation) => {
  console.log(projectLocation)
  visible2.value = true
  nextTick(() => {
    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('POLYLINE')) {
      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
    })
  }
}

watch(showSearch, onResize)

onMounted(() => {
  getTableList()
  getProjectTypeList()
})
</script>

<style lang="scss" scoped>
.approval {
  padding: 20px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  .top,
  .row {
    flex-shrink: 0;
  }
  .table {
    flex: 1;
    :deep(.pagination) {
      margin-top: 0;
      margin-right: 10px;
      .el-pagination {
        right: 20px;
      }
    }
  }
  :deep(.formItem110) {
    .el-form-item__label {
      width: 110px;
      word-break: keep-all;
      white-space: nowrap;
    }
  }

  :deep(.formItem140) {
    .el-form-item__label {
      width: 140px;
      word-break: keep-all;
      white-space: nowrap;
    }
  }
}

:deep(.el-dialog__body) {
  background-color: #eef1fb;
}


.upload {
  position: relative;
  .fileName {
    position: absolute;
    left: 0;
    top: 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    .del {
      flex-shrink: 0;
      color: #f56c6c;
      cursor: pointer;
      margin-left: 10px;
    }
  }
}

.img {
  position: relative;
  width: 178px;
  height: 178px;
  img {
    width: 100%;
    height: 100%;
  }
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
  &:hover {
    .mask {
      display: block;
    }
  }
}

.fileSaveRequestList {
  .file-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

</style>