<template>
  <el-table stripe :data="tableData" style="width: 100%" v-loading="loading" class="table" max-height="680">
    <el-table-column prop="itemType" label="设施类型">
      <template #default="{ row }">{{ findItemTypeText(row.itemType) }}</template>
    </el-table-column>
    <el-table-column prop="itemName" label="单项设施" />
    <el-table-column label="工程类型">
      <el-table-column v-for="item in sponge_engineering_type" :prop="item.value" :label="item.label" :key="item.value">
        <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>
: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>