<!-- 购入热力 -->
<script lang="ts" setup>
// 表格数据
const data = [
  {
    type: '热力',
    consumption: '',
    emissionsCO: '',
    emissionFactorCO: '1',
    emissionFactorCO_value: '',
    emissionsCH: '',
    emissionFactorCH: '1',
    emissionFactorCH_value: '',
    emissionsNO: '',
    emissionFactorNO: '1',
    emissionFactorNO_value: '',
  },
]
const select = ['热力']
const localData = JSON.parse(sessionStorage.getItem('购入热力-table') as string)
const tableData = ref(localData || data)
const selectData = ref(localData ? localData.map((item: any) => item.type) : select)
const confirmArr = ref<string[]>([])
const cancelArr = ref<string[]>([])
// 计算参数
const countParams = [
  {
    type: '热力',
    CO: 0.100,
    CH: 0.00136,
    NO: 0.00132,
  },
]
const sumArr = ref<string[]>([])
defineExpose({
  sumArr, tableData,
})
// 总计
const summary = (params: any) => {
  const { columns, data } = params
  const sums: string[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '总计'
    }
    else if (index === 2 || index === 6 || index === 4) {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          }
          else {
            return prev
          }
        }, 0).toFixed(3)
      }
      else {
        sums[index] = 'N/A'
      }
    }
    else {
      sums[index] = ''
    }
  })
  sumArr.value = sums
  // const value = {
  //   name: '购入热力',
  //   co: sumArr.value[2] ? sumArr.value[2] : 0,
  //   ch: sumArr.value[4] ? sumArr.value[4] : 0,
  //   no: sumArr.value[6] ? sumArr.value[6] : 0,
  // }
  // sessionStorage.setItem('购入热力', JSON.stringify(value))
  return sums
}
// 排放量变化
const watchConsumption = (event: any, index: number) => {
  // 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  // CO₂
  if (current.emissionFactorCO === '1') {
    current.emissionsCO = (Number(event) * count.CO).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(event) * (current.emissionFactorCO_value ? Number(current.emissionFactorCO_value) : 0)).toFixed(3)
  }
  // CH₄
  if (current.emissionFactorCH === '1') {
    current.emissionsCH = (Number(event) * count.CH).toFixed(3)
  }
  else {
    current.emissionsCH = (Number(event) * (current.emissionFactorCH_value ? Number(current.emissionFactorCH_value) : 0)).toFixed(3)
  }
  // N₂O
  if (current.emissionFactorNO === '1') {
    current.emissionsNO = (Number(event) * count.NO).toFixed(3)
  }
  else {
    current.emissionsNO = (Number(event) * (current.emissionFactorNO_value ? Number(current.emissionFactorNO_value) : 0)).toFixed(3)
  }
}
// CO₂ 自测值
const emissionFactorCO = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (current.emissionFactorCO === '1') {
    current.emissionsCO = (Number(event) * count.CO).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(event) * (current.consumption ? Number(current.consumption) : 0)).toFixed(3)
  }
}
// CO₂ SELECT变换
const emissionFactorCO1 = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (event === '1') {
    current.emissionsCO = (Number(current.consumption) * count.CO).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(current.consumption) * (current.emissionFactorCO_value ? Number(current.emissionFactorCO_value) : 0)).toFixed(3)
  }
}
// CH₄ 自测值
const emissionFactorCH = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (current.emissionFactorCH === '1') {
    current.emissionsCH = (Number(event) * count.CH).toFixed(3)
  }
  else {
    current.emissionsCH = (Number(event) * (current.consumption ? Number(current.consumption) : 0)).toFixed(3)
  }
}
// CH₄SELECT变换
const emissionFactorCH1 = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (event === '1') {
    current.emissionsCH = (Number(current.consumption) * count.CH).toFixed(3)
  }
  else {
    current.emissionsCH = (Number(current.consumption) * (current.emissionFactorCH_value ? Number(current.emissionFactorCH_value) : 0)).toFixed(3)
  }
}
//  N₂O自测值
const emissionFactorNO = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (current.emissionFactorNO === '1') {
    current.emissionsNO = (Number(event) * count.NO).toFixed(3)
  }
  else {
    current.emissionsNO = (Number(event) * (current.consumption ? Number(current.consumption) : 0)).toFixed(3)
  }
}
// N₂O SELECT变换
const emissionFactorNO1 = (event: any, index: number) => {
// 当前变化的排放量的行
  const current = tableData.value[index]
  // 变化的type
  const type = current.type
  // type对应的计算参数
  const count = countParams.filter(item => item.type === type)[0]
  if (event === '1') {
    current.emissionsNO = (Number(current.consumption) * count.NO).toFixed(3)
  }
  else {
    current.emissionsNO = (Number(current.consumption) * (current.emissionFactorNO_value ? Number(current.emissionFactorNO_value) : 0)).toFixed(3)
  }
}
// 隔行变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2) {
    return 'success-row '
  }
  else {
    return ''
  }
}
const dialogTableVisible = ref(false)
// 添加燃烧能源
const add = () => {
  dialogTableVisible.value = true
  confirmArr.value = []
  cancelArr.value = []
}
// 确认
const confirm = () => {
  // selectData.value.forEach((item) => {
  //   if (tableData.value.some(child => child.type === item)) {
  //     tableData.value = tableData.value.filter(item => item.type !== item)
  //   }
  //   else {
  //     tableData.value.push(
  //       {
  //         type: item,
  //         consumption: '',
  //         emissionsCO: '',
  //         emissionFactorCO: '1',
  //         emissionFactorCO_value: '',
  //         emissionsCH: '',
  //         emissionFactorCH: '1',
  //         emissionFactorCH_value: '',
  //         emissionsNO: '',
  //         emissionFactorNO: '1',
  //         emissionFactorNO_value: '',
  //       },
  //     )
  //   }
  // })
  confirmArr.value.forEach((item) => {
    tableData.value.push(
      {
        type: item,
        consumption: '',
        emissionsCO: '',
        emissionFactorCO: '1',
        emissionFactorCO_value: '',
        emissionsCH: '',
        emissionFactorCH: '1',
        emissionFactorCH_value: '',
        emissionsNO: '',
        emissionFactorNO: '1',
        emissionFactorNO_value: '',
      },
    )
  })
  cancelArr.value.forEach((item) => {
    tableData.value = tableData.value.filter(child => child.type !== item)
  })
  dialogTableVisible.value = false
}
const isSelect = computed(() => {
  return (row: any) => {
    if (selectData.value.filter(item => item === row.type).length) {
      return true
    }
    else {
      return false
    }
  }
})
const handler = (row: any) => {
  if (selectData.value.includes(row.type)) {
    cancelArr.value.push(row.type)
    selectData.value = selectData.value.filter(item => item !== row.type)
  }
  else {
    confirmArr.value.push(row.type)
    selectData.value.push(row.type)
  }
}
</script>

<template>
  <app-container>
    <div id="heating">
      <div class="title">
        购入热力
        <span>(选填)</span>
      </div>
      <div class="describe">
        核算企业拥有或运营的设备消耗外购热力所产生的排放，消耗量以百万千焦（GJ）计。CO₂、CH₄、N₂O 排放因子单位为：tCO₂/GJ或gCH₄/GJ或gN₂O/GJ。
      </div>
      <el-table :data="tableData" style="width: 100%;" :show-summary="true" :summary-method="summary" border :row-class-name="tableRowClassName">
        <el-table-column prop="type" label="类型" align="center" />
        <el-table-column prop="consumption" label="消耗量(GJ)" align="center">
          <template #default="scope">
            <el-input v-model.trim="scope.row.consumption" @input="($event) => { watchConsumption($event, scope.$index) }" />
          </template>
        </el-table-column>
        <el-table-column prop="emissionsCO" label="CO₂排放量(t)" align="center" />
        <el-table-column prop="emissionFactorCO" label="排放因子(CO₂)" align="left">
          <template #default="scope">
            <el-select v-model.trim="scope.row.emissionFactorCO" style="width: 100%;" @change="($event) => { emissionFactorCO1($event, scope.$index) }">
              <el-option label="缺省值" value="1" />
              <el-option label="自测值" value="2" />
            </el-select>
            <el-input v-if="scope.row.emissionFactorCO === '2'" v-model="scope.row.emissionFactorCO_value" style="width: 70%;" class="input" @input="($event) => { emissionFactorCO($event, scope.$index) }" />
          </template>
        </el-table-column>
        <el-table-column prop="emissionsCH" label="CH₄排放量(kg)" align="center" />
        <el-table-column prop="emissionFactorCH" label="排放因子(CH₄)" align="left">
          <template #default="scope">
            <el-select v-model.trim="scope.row.emissionFactorCH" style="width: 100%;" @change="($event) => { emissionFactorCH1($event, scope.$index) }">
              <el-option label="缺省值" value="1" />
              <el-option label="自测值" value="2" />
            </el-select>
            <el-input v-if="scope.row.emissionFactorCH === '2'" v-model="scope.row.emissionFactorCH_value" style="width: 70%;" class="input" @input="($event) => { emissionFactorCH($event, scope.$index) }" />
          </template>
        </el-table-column>
        <el-table-column prop="emissionsNO" label="N₂O排放量(kg)" align="center" />
        <el-table-column prop="emissionFactorNO" label="排放因子(N₂O)" align="left">
          <template #default="scope">
            <el-select v-model="scope.row.emissionFactorNO" style="width: 100%;" @change="($event) => { emissionFactorNO1($event, scope.$index) }">
              <el-option label="缺省值" value="1" />
              <el-option label="自测值" value="2" />
            </el-select>
            <el-input v-if="scope.row.emissionFactorNO === '2'" v-model="scope.row.emissionFactorNO_value" style="width: 70%;" class="input" @input="($event) => { emissionFactorNO($event, scope.$index) }" />
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="[{}]" style="width: 100%;" :show-header="false">
        <el-table-column align="left">
          <div class="add" @click="add">
            <icon-button icon="icon-add" title="新增" style="margin-left: 60px;" />
            <span style="margin-left: 10px;">添加燃烧能源</span>
          </div>
        </el-table-column>
      </el-table>
      <!-- 添加燃烧能源 -->
      <el-dialog v-model="dialogTableVisible" title="添加燃烧能源">
        <div class="container">
          <div v-for="item in countParams" :key="item.type" class="item" :class="isSelect(item) ? 'item-select' : 'item-noselect'" @click="handler(item)">
            {{ item.type }}
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary" @click="confirm">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </app-container>
</template>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  font-weight: 700;
  line-height: 2;

  // span {
  //   color: #e83232;
  // }
}

.describe {
  line-height: 2;
}

.input {
  position: absolute;
  left: 12px;
  z-index: 2;
}

.add {
  vertical-align: middle;

  /* text-align: center; */
  &:hover {
    cursor: pointer;
  }
}

.container {
  width: 100%;
  // height: 100px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #ccc;

  .item-select {
    border: 1px solid #67c23a;
    background-color: #d1edc4;
  }

  .item-noselect {
    border: 1px solid #3d7eff;
    background-color: #d6e5fc;
  }

  .item {
    border-radius: 4px;
    height: 30px;
    width: 100px;
    line-height: 30px;
    text-align: center;
    margin: 6px;

    &:hover {
      cursor: pointer;
    }
  }
}
</style>

