import { reactive } from 'vue'
import { useDicts } from '@/hooks'
import { optTextMap } from '@/utils/map'
import { statusMap, levelMap, verticalRationalityMap,cadParseStatusMap } from './map'
import { intelligentApproveDel } from '@/api/preassess/noopReview'
import popover from '@/components/popover'
export default function useColumns(proxy,getTableList) {
  const visible = ref(false)
  const row = ref({})
  const opts = reactive({
    type: '',
    text: ''
  })
  const {
    drainage_partition,
    sponge_engineering_type,
    findText
  } = useDicts(proxy)
  const columns = reactive([
    {
      prop: 'projectName',
      label: '建设工程',
      render: ({ row }) => {
        return <span style="color: #409eef">{ row.projectName }</span>
      },
      width: 200,
      fixed: 'left'
    },
    {
      prop: 'totalAnnualRunoffGrade',
      label: '年径流总量控制率',
      width: 100,
      align: 'center',
      headerRender: () => {
        return (
          <Fragment>
            <span>年径流总量控制率</span>
            <popover width={ 240 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span style="font-weight: 700">达标测算的年径流总量控制率</span>
              <br /><br />
              <span>低于目标值，评【差】</span>
              <br />
              <span>高于目标值5%以内，评【中】</span>
              <br />
              <span>高于目标值10%以内，评【良】</span>
              <br />
              <span>高于目标值10%以上，评【优】</span>
              <br />
              <span>包含下限、不包含上限</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.totalAnnualRunoffGrade) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.totalAnnualRunoffGrade).type}
              >{ levelMap.get(row.totalAnnualRunoffGrade).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'pollutionRemovalGrade',
      label: '年径流污染控制率',
      width: 100,
      align: 'center',
      headerRender: () => {
        return (
          <Fragment>
            <span>年径流污染控制率</span>
            <popover width={ 240 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span style="font-weight: 700">达标测算的年径流污染控制率</span>
              <br /><br />
              <span>低于目标值，评【差】</span>
              <br />
              <span>高于目标值5%以内，评【中】</span>
              <br />
              <span>高于目标值10%以内，评【良】</span>
              <br />
              <span>高于目标值10%以上，评【优】</span>
              <br />
              <span>包含下限、不包含上限</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.pollutionRemovalGrade) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.pollutionRemovalGrade).type}
              >{ levelMap.get(row.pollutionRemovalGrade).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'hardGroundGrade',
      label: '硬质地面率',
      align: 'center',
      width: 120,
      headerRender: () => {
        return (
          <Fragment>
            <span>硬质地面率</span>
            <popover width={ 240 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span style="font-weight: 700">达标测算的硬质地面率</span>
              <br /><br />
              <span>高于目标值，评【差】</span>
              <br />
              <span>低于目标值5%以内，评【中】</span>
              <br />
              <span>低于目标值10%以内，评【良】</span>
              <br />
              <span>低于目标值10%以上，评【优】</span>
              <br />
              <span>包含下限、不包含上限</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.hardGroundGrade) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.hardGroundGrade).type}
              >{ levelMap.get(row.hardGroundGrade).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'investmentRationalityRate',
      label: '投资合理性',
      align: 'center',
      width: 120,
      headerRender: () => {
        return (
          <Fragment>
            <span>投资合理性</span>
            <popover width={ 320 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span style="font-weight: 700">建设工程海绵投资金额 / 达标测算的设施调蓄量</span>
              <br /><br />
              <span>推荐值上下2.5%以内，评【优】</span>
              <br />
              <span>推荐值上下5%以内，评【良】</span>
              <br />
              <span>推荐值上下10%以内，评【中】</span>
              <br />
              <span>推荐值上下10%以上，评【差】</span>
              <br />
              <span>包含下限、不包含上限</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.investmentRationalityRate) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.investmentRationalityRate).type}
              >{ levelMap.get(row.investmentRationalityRate).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'disposalOfGuestWaterGrade',
      label: '处置客水',
      align: 'center',
      width: 100,
      headerRender: () => {
        return (
          <Fragment>
            <span>处置客水</span>
            <popover width={ 340 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span style="font-weight: 700">图中拾取的处置客水量</span>
              <br /><br />
              <span>在达标测算目标调蓄量以上（包含），5%以内（不包含）评【中】</span>
              <br />
              <span>在达标测算目标调蓄量*5%以上（包含），10%以内（不包含）评【良】</span>
              <br />
              <span>在达标测算目标调蓄量*10%以上（包含）评【优】</span>
              <br />
              <span>包含下限、不包含上限</span>
              <br /> <br />
              <span>年径流总量控制为差的，此项不参与评级，鼠标悬停提示，年径流总量控制未达标，不具备处置客水条件</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.disposalOfGuestWaterGrade) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.disposalOfGuestWaterGrade).type}
              >{ levelMap.get(row.disposalOfGuestWaterGrade).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'facilityDistributionRationality',
      label: '设施分布合理性',
      width: 140,
      align: 'center',
      headerRender: () => {
        return (
          <Fragment>
            <span>设施分布合理性</span>
            <popover width={ 340 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>按绿地率、屋面率、地面率，推荐的下沉绿地率、绿色屋顶率、透水铺装率，通过容积法计算每个分区合理的的年径流总量控制率用容积法计算每个分区填报的调蓄量对应的年径流总量控制率</span>
              <br /><br />
              <span>当80%（包含）以上的分区达标时，评【优】</span>
              <br />
              <span>当60%（包含）以上的分区达标时，评【良】</span>
              <br />
              <span>当50%（包含）以上的分区达标时，评【中】</span>
              <br />
              <span>当40%（包含）以上的分区达标时，评【差】</span>
              <br />
              <span>包含下限、不包含上限</span>
              <br /> <br />
              <span>年径流总量控制为差的，此项不参与评级，鼠标悬停提示，年径流总量控制未达标，不具备评价设施分布合理性条件</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          levelMap.get(row.facilityDistributionRationality) ?
            <Fragment>
              <el-tag
                type={levelMap.get(row.facilityDistributionRationality).type}
              >{ levelMap.get(row.facilityDistributionRationality).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'verticalRationality',
      label: '竖向合理性',
      align: 'center',
      width: 120,
      headerRender: () => {
        return (
          <Fragment>
            <span>竖向合理性</span>
            <popover width={ 340 }>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>当存在竖向不合理的分区时，评【存在不合理】</span>
              <br />
              <span>当分区竖向全部合理时，评【合理】</span>
            </popover>
          </Fragment>
        )
      },
      render: ({ row }) => {
        return (
          verticalRationalityMap.get(row.verticalRationality) ?
            <Fragment>
              <el-tag
                type={verticalRationalityMap.get(row.verticalRationality).type}
              >{ verticalRationalityMap.get(row.verticalRationality).text }</el-tag>
            </Fragment>
          : <span>-</span>
        )
      }
    },
    {
      prop: 'cadParseStatus',
      label: 'CAD解析状态',
      render: ({ row }) => {
        return (
          row.cadParseStatus ?
            <Fragment>
              <el-tag type={cadParseStatusMap.get(row.cadParseStatus).type}>{ cadParseStatusMap.get(row.cadParseStatus).text }</el-tag>
            </Fragment>
          : null
        )
      },
      width: 100,
      align: 'center'
    },
    {
      prop: 'engineeringType',
      label: '工程类型',
      render: ({ row }) => {
        return <span>{ findText('sponge_engineering_type', row.engineeringType) }</span>
      },
      width: 100,
      align: 'center'
    },
    {
      prop: 'drainagePartition',
      label: '建设分区',
      render: ({ row }) => {
        return <span>{ findText('drainage_partition', row.drainagePartition) }</span>
      },
      width: 100,
      align: 'center'
    },
    {
      prop: 'buildCategory',
      label: '建设类型',
      render: ({ row }) => {
        return <span>{ findText('build_category', row.buildCategory) }</span>
      },
      width: 100,
      align: 'center'
    },
    {
      prop: 'constructionUnit',
      label: '施工单位',
      align: 'center',
      width: 240
    },
    {
      prop: 'dutyPerson',
      label: '责任人',
      align: 'center',
      width: 100
    },
    {
      prop: 'updateTime',
      label: '修改日期',
      width: 160,
      align: 'center'
    },
    {
      prop: 'status',
      label: '状态',
      width: 100,
      fixed: 'right',
      render: ({ row }) => {
        return (
          row.status ?
            <Fragment>
              <el-tag type={statusMap.get(row.status).type}>{ statusMap.get(row.status).text }</el-tag>
            </Fragment>
          : null
        )
      }
    },
    {
      label: '操作',
      render: ({ row }) => {
        return (
          <Fragment>
            <el-button type="primary" link onClick={ () => openDialog(row, 'view') }>查看</el-button>
            <el-button type="primary" link onClick={ () => openDialog(row, 'edit') } disabled={ row.status === '1' }>修改</el-button>
            <el-button type="danger" link onClick={ () => del(row) }>删除</el-button>
          </Fragment>
        )
      },
      width: 160,
      fixed: 'right'
    }
  ])

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

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

  return {
    columns,
    openDialog,
    visible,
    row,
    opts,
    drainage_partition,
    sponge_engineering_type
  }
}