<!-- 光伏 -->
<script lang="ts" setup>
// 表格数据
const data = [
  {
    type: '光伏',
    capacity: '', // 装机容量
    duration: '', // 日照时长
    emissionsCO: '',
    emissionFactorCO: '1',
    emissionFactorCO_value: '',
  },
  {
    type: '风电',
    capacity: '', // 装机容量
    duration: '', // 日照时长
    emissionsCO: '',
    emissionFactorCO: '1',
    emissionFactorCO_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.001,
  },
  {
    type: '风电',
    CO: 0.001,
  },
]
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 === 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[4],
  //   ch: 0,
  //   no: 0,
  // }
  // sessionStorage.setItem('光伏', JSON.stringify(value))
  return sums
}
const watchCapacity = (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 * (current.duration ? Number(current.duration) : 1)).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(event) * (current.emissionFactorCO_value ? Number(current.emissionFactorCO_value) : 0) * (current.duration ? Number(current.duration) : 1)).toFixed(3)
  }
}
const watchDuration = (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 * (current.capacity ? Number(current.capacity) : 1)).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(event) * (current.emissionFactorCO_value ? Number(current.emissionFactorCO_value) : 0) * (current.capacity ? Number(current.capacity) : 1)).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(current.duration) * Number(current.capacity) * count.CO).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(event) * Number(current.duration) * Number(current.capacity)).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.duration) * Number(current.capacity) * count.CO).toFixed(3)
  }
  else {
    current.emissionsCO = (Number(current.duration) * Number(current.capacity) * (current.emissionFactorCO_value ? Number(current.emissionFactorCO_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 = () => {
  confirmArr.value.forEach((item) => {
    tableData.value.push(
      {
        type: item,
        capacity: '', // 装机容量
        duration: '', // 日照时长
        emissionsCO: '',
        emissionFactorCO: '1',
        emissionFactorCO_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="photovoltaic" class="title">
      碳抵消-光伏&风电
      <span>(选填)</span>
    </div>
    <div class="describe">
      核算企业使用光伏、风电等清洁能源产生的碳抵消（碳减排）量。日照时间指光伏电站所在地区的光照小时数，运行时长则指风电电站运行时长，请根据核算选择的时间频度（年或月）准确填写。排放因子单位为：tCO₂/MWh。
    </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="capacity" label="装机容量(kW)" align="center">
        <template #default="scope">
          <el-input v-model.trim="scope.row.capacity" @input="($event) => { watchCapacity($event, scope.$index) }" />
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="日照/运行时长(h)" align="center">
        <template #default="scope">
          <el-input v-model.trim="scope.row.duration" @input="($event) => { watchDuration($event, scope.$index) }" />
        </template>
      </el-table-column>
      <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="emissionsCO" label="CO₂排放量(t)" align="center" />
    </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>
  </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>