<template>
  <el-table
    stripe
    :data="tableData"
    style="width: 100%"
    v-loading="loading"
    class="table"
    max-height="680"
  >
    <el-table-column prop="itemType" label="设施类型" align="center">
      <template #default="{ row }">{{ findItemTypeText(row.itemType) }}</template>
    </el-table-column>
    <el-table-column prop="itemName" label="单项设施" align="center" />
    <el-table-column label="工程类型" align="center">
      <el-table-column
        v-for="item in sponge_engineering_type"
        :prop="item.value"
        :label="item.label"
        :key="item.value"
        align="center"
      >
        <template #default="{ row }">
          <div class="iconList" :class="{ disabled: opts === 'view' }">
            <div
              class="img"
              :title="icon.text"
              v-for="icon in row[`${item.value}_iconlist`]"
              @click="selectChange(icon.value, row, item.value, icon)"
            >
              <img :src="icon.url" alt="">
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
  <div class="tips">
    <span>注：</span>
    <div class="item" v-for="icon in tipsIconList">
      <div class="img">
        <img :src="icon.url" alt="">
      </div>
      <span class="line">———</span>
      <span>{{ icon.text }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getFacilitiesPolluteRemoveConfigItemList } from '@/api/preassess/removalRate'
import {
  getFacilitiesAdaptabilityConfigItemList,
  facilitiesAdaptabilityConfigItemEdit
} from '@/api/preassess/adaptationConfig'
import { iconList } from './icon'
const { proxy } = getCurrentInstance();
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  opts: {
    type: String,
    default: ''
  }
})
const { id, opts } = props
const { sponge_engineering_type } = proxy.useDict("sponge_engineering_type")
const { sponge_facilities_type } = proxy.useDict("sponge_facilities_type")
const findItemTypeText = (itemType) => {
  const item = sponge_facilities_type.value.find(it => it.value === itemType)
  return item?.label || ''
}
const tableData = ref([])
const loading = ref(false)

const getTableList = async () => {
  loading.value = true
  const res = await getFacilitiesPolluteRemoveConfigItemList({ status: 1 })
  loading.value = false
  if(res.code !== 200) return
  for (const it of res.data) {
    for (const item of sponge_engineering_type.value) {
      it[item.value] = 'suitable'
      it[`${item.value}_iconlist`] = JSON.parse(JSON.stringify(iconList))
    }
  }
  tableData.value = res.data || []
}

const getTableList2 = async () => {
  loading.value = true
  const res = await getFacilitiesAdaptabilityConfigItemList({
    configId: id
  })
  loading.value = false
  if(res.code !== 200) return
  for (const it of res.data) {
    const adaptabilityConfigJson = JSON.parse(it.adaptabilityConfigJson)
    for (const item of sponge_engineering_type.value) {
      const adaptabilityConfigJsonItem = adaptabilityConfigJson.find(ele => ele.key === item.value)
      it[item.value] = adaptabilityConfigJsonItem?.value.replace(/\s*/g,"") || ''
      it[`${item.value}_iconlist`] = JSON.parse(JSON.stringify(iconList))
      const curIcon = it[`${item.value}_iconlist`].find(icon => icon.value === it[item.value])
      setIcon(it[`${item.value}_iconlist`], curIcon)
    }
  }
  tableData.value = res.data || []
  console.log(tableData)
}

const selectChange = async (value, row, prop, icon) => {
  if(opts === 'view') return
  console.log(value, row, prop)
  if(row[prop] === value) return
  row[prop] = value
  setIcon(row[`${prop}_iconlist`], icon)
  if(opts === 'add') return
  const adaptabilityConfigJson = JSON.parse(row.adaptabilityConfigJson)
  const it = adaptabilityConfigJson.find(item => item.key === prop)
  if(!it) return
  it.value = value
  row.adaptabilityConfigJson = JSON.stringify(adaptabilityConfigJson)
  const params = {
    id: row.id,
    configId: row.configId,
    facilitiesPolluteRemoveConfigItemId: row.facilitiesPolluteRemoveConfigItemId,
    adaptabilityConfigJson: row.adaptabilityConfigJson
  }
  console.log(params)
  loading.value = true
  await facilitiesAdaptabilityConfigItemEdit(params)
  loading.value = false
}

const setIcon = (iconList, curIcon) => {
  if(!curIcon) return
  restIcon(iconList)
  curIcon.actived = true
  curIcon.url = curIcon.alternative.active
}

const restIcon = (iconList) => {
  for (const icon of iconList) {
    icon.actived = false
    icon.url = icon.alternative.normal
  }
}

const tipsIconList = JSON.parse(JSON.stringify(iconList))
restIcon(tipsIconList)

onMounted(() => {
  if(id) getTableList2()
  else getTableList()
})

defineExpose({
  tableData,
  sponge_engineering_type
})
</script>

<style lang="scss" scoped>
::v-deep(.group) {
  display: flex;
  flex-direction: column;
  .group-item {
    margin-right: 0 !important;
  }
}
.iconList {
  margin-top: 2px;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .img {
    width: 16px;
    height: 16px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &.disabled {
    .img {
      cursor: not-allowed;
    }
  }
}
.tips {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #777;
  margin-top: 10px;
  .item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-top: 2px;
    .img {
      width: 16px;
      height: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .line {
      color: #999;
      margin: 0 2px;
    }
    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>