<template>
  <div class="exemptionList">
    <div class="top">
      <el-form ref="queryFormRef" :model="form" v-show="showSearch">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目名称:" prop="projectName" class="formItem">
              <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="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>
    <card-list class="card-list" ref="cardListRef" />
    <el-row class="row">
      <el-button
        type="primary"
        plain
        icon="Plus"
        @click="openDialog({}, 'add')"
        >新增</el-button
      >
      <el-button
        type="danger"
        plain
        icon="Delete"
        @click="batchDel"
        >批量删除</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="projectTypeName" show-overflow-tooltip />
        <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
        <el-table-column label="建设类别" align="center" prop="buildCategory" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('build_category', row.buildCategory) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属排水分区" align="center" prop="drainagePartition" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('drainage_partition', row.drainagePartition) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目起止日期" align="center" prop="projectTime" 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="createTime" show-overflow-tooltip />
        <el-table-column label="任务类型" align="center" prop="name9" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('task_type', row.taskType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目库类型" align="center" prop="projectLibraryType" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('project_library_type', row.projectLibraryType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="建设进度" align="center" prop="projectProgress" show-overflow-tooltip />
        <el-table-column label="操作" align="center" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
            <!-- <el-button type="primary" link @click="openDialog(row, 'edit')">编辑</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="visible0"
      title="新增豁免清单"
      :close-on-click-modal="false"
      width="30%"
      class="dialog"
      :before-close="close"
    >
      <el-row>
        <el-col :span="22">
          <el-form
            ref="dialogFormRef"
            :model="dialogForm"
            :rules="dialogRules"
          >
            <el-form-item label="项目名称:" prop="projectNo" class="formItem">
              <el-select
                v-model="dialogForm.projectNo"
                placeholder="请选择项目"
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.projectNo"
                  :label="item.projectName"
                  :value="item.projectNo"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visible1"
      title="查看项目"
      :close-on-click-modal="false"
      width="60%"
      class="dialog"
    >
      <detail
        :cur-row="curRow"
        :types="projectTypes"
        :build-category="build_category"
        :project-library-type="project_library_type"
        :project-content-type="project_content_type"
        v-if="visible1"
      />
    </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>
  </div>
</template>

<script setup>
import { ref, shallowRef, reactive, watch, computed } from 'vue'
import { usePagination, useAdaption, useDicts } from '@/hooks'
import { required } from '@/utils/validate-helper'
import CardList from './cardList.vue'
import MapBox from '@/components/Map'
import detail from './details.vue'

import {
  getProjectInfoNewPage,
  projectTypeList,
  projectInfoNewDel
} from '@/api/projectInformationNew'
import { getProjectInfoNewList } from '@/api/projectApproval'
import { updateProjectExemptItem } from '@/api/exemptionList'
const { proxy } = getCurrentInstance();
const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy)
const showSearch = ref(true)
const { maxHeight, onResize } = useAdaption(proxy, 'table_box')
watch(showSearch, onResize)

const form = reactive({
  projectName: '',
  projectTypeId: ''
})
const params = computed(() => {
  return {
    dataScope: '1',
    exemptItem: 1,
    ...form
  }
})
const curRow = shallowRef({})
const checkedList = shallowRef([])
const projectTypes = ref([])
const projectList = shallowRef([])
const visible0 = ref(false)
const visible1 = ref(false)
const visible2 = ref(false)

const dialogForm = reactive({
  projectNo: ''
})
const dialogRules = reactive({
  projectNo: required('项目名称')
})
const {
  pageNum,
  pageSize,
  tableData,
  total,
  loading,
  getTableList
} = usePagination(getProjectInfoNewPage, params)

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

const getProjectList = async () => {
  const res = await getProjectInfoNewList({ dataScope: '1', exemptItem: 0 })
  if(res?.code !== 200) return
  projectList.value = res?.data || []
}

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

const openDialog = (data, type) => {
  curRow.value = data
  if(type === 'view'){
    visible1.value = true
  } else {
    visible0.value = true
    getProjectList()
  }
}

const close = (type) => {
  visible0.value = false
  proxy.$refs.dialogFormRef.resetFields()
}

const handleOk = () => {
  proxy.$refs.dialogFormRef.validate(async (valid, fields) => {
    if(valid){
      console.log('submit!', dialogForm)
      const formData = new FormData()
      formData.append('projectNo', dialogForm.projectNo)
      const res = await updateProjectExemptItem(formData)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功！')
      close()
      proxy.$refs.cardListRef.getData(onResize)
      search()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const del = (row) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    const formData = new FormData()
    formData.append('projectNo', row.projectNo)
    const res = await updateProjectExemptItem(formData)
    if(res?.code !== 200) return
    proxy.$modal.msgSuccess('操作成功！')
    proxy.$refs.cardListRef.getData(onResize)
    getTableList()
  })
  .catch(() => {});
}

const batchDel = () => {
  const checkedList = proxy.$refs.multipleTableRef.getSelectionRows()
  if(!checkedList.length) return proxy.$modal.msgError('请选择一条数据！')
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    const formData = new FormData()
    const projectNos = checkedList.map(item => item.projectNo)
    formData.append('projectNo', projectNos.join())
    const res = await updateProjectExemptItem(formData)
    if(res?.code !== 200) return
    proxy.$modal.msgSuccess('操作成功！')
    proxy.$refs.cardListRef.getData(onResize)
    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('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
    })
  }
}
onMounted(async () => {
  proxy.$refs.cardListRef.getData(onResize)
  getTableList()
  // getProjectList()
  getProjectTypeList()
})
</script>

<style lang="scss" scoped>
.exemptionList {
  padding: 20px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  .top {
    flex-shrink: 0;
  }
  .card-list {
    flex-shrink: 0;
  }
  .table {
    flex: 1;
    :deep(.pagination) {
      margin-top: 0;
      margin-right: 10px;
      .el-pagination {
        right: 20px;
      }
    }
  }
  :deep(.formItem) {
    .el-form-item__label {
      width: 110px;
      word-break: keep-all;
    }
  }
}
:deep(.el-dialog__body) {
  background-color: #eef1fb;
}

.row {
  margin: 10px 0;
}
</style>