<!-- 移动燃烧 -->
<script lang="ts" setup>
// 表格数据
const tableData = ref([
  {
    type: '汽油',
    consumption: '',
    emissionsCO: '',
    emissionFactorCO: '1',
    emissionFactorCO_value: '',
    emissionsCH: '',
    emissionFactorCH: '1',
    emissionFactorCH_value: '',
    emissionsNO: '',
    emissionFactorNO: '1',
    emissionFactorNO_value: '',
  },
  {
    type: '柴油',
    consumption: '',
    emissionsCO: '',
    emissionFactorCO: '1',
    emissionFactorCO_value: '',
    emissionsCH: '',
    emissionFactorCH: '1',
    emissionFactorCH_value: '',
    emissionsNO: '',
    emissionFactorNO: '1',
    emissionFactorNO_value: '',
  },
])
const selectData = ref(['汽油', '柴油'])
const confirmArr = ref<string[]>([])
const cancelArr = ref<string[]>([])
// 计算参数
const countParams = [
  {
    type: '原煤',
    CO: 1.981,
    CH: 0.021,
    NO: 0.031,
  },
  {
    type: '洗精煤',
    CO: 2.405,
    CH: 0.026,
    NO: 0.040,
  },
  {
    type: '焦炭',
    CO: 2.860,
    CH: 0.028,
    NO: 0.043,
  },
  {
    type: '天然气',
    CO: 21.622,
    CH: 0.389,
    NO: 0.039,
  },
  {
    type: '其他洗煤',
    CO: 8.955,
    CH: 0.010,
    NO: 0.020,
  },
  {
    type: '煤制品',
    CO: 2.148,
    CH: 0.018,
    NO: 0.027,
  },
  {
    type: '型煤',
    CO: 1.950,
    CH: 0.018,
    NO: 0.026,
  },
  {
    type: '水煤浆',
    CO: 2.397,
    CH: 0.020,
    NO: 0.030,
  },
  {
    type: '煤粉',
    CO: 2.527,
    CH: 0.021,
    NO: 0.031,
  },
  {
    type: '其他焦化产品',
    CO: 3.833,
    CH: 0.038,
    NO: 0.057,
  },
  {
    type: '柴油',
    CO: 3.096,
    CH: 0.128,
    NO: 0.026,
  },
  {
    type: '煤油',
    CO: 3.033,
    CH: 0.129,
    NO: 0.026,
  },
  {
    type: '汽油',
    CO: 2.925,
    CH: 0.129,
    NO: 0.026,
  },
  {
    type: '原油',
    CO: 3.020,
    CH: 0.125,
    NO: 0.025,
  },
  {
    type: '液化天然气',
    CO: 2.889,
    CH: 0.051,
    NO: 0.00515,
  },
  {
    type: '其他煤气',
    CO: 8.955,
    CH: 0.202,
    NO: 0.020,
  },
  {
    type: '高炉煤气',
    CO: 9.784,
    CH: 0.038,
    NO: 0.00377,
  },
  {
    type: '焦炉煤气',
    CO: 8.555,
    CH: 0.174,
    NO: 0.017,
  },
  {
    type: '燃料油',
    CO: 3.170,
    CH: 0.125,
    NO: 0.025,
  },
  {
    type: '液化石油气',
    CO: 3.101,
    CH: 0.050,
    NO: 0.005018,
  },
  {
    type: '炼厂干气',
    CO: 3.012,
    CH: 0.046,
    NO: 0.004606,
  },
  {
    type: '其他石油制品',
    CO: 2.527,
    CH: 0.106,
    NO: 0.021,
  },
]
const sumArr = ref<string[]>([])
defineExpose({
  sumArr,
})
// 总计
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],
    ch: sumArr.value[4],
    no: sumArr.value[6],
  }
  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 = () => {
  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="mobileCombustion">
      <div class="title">
        移动燃烧
        <span>(必填)</span>
      </div>
      <div class="describe">
        核算企业使用燃料运输工具（如卡车、火车、轮船、飞机、巴士和轿车等）产生的温室气体排放，燃料或燃气消耗量以吨（t）或万立方米（10⁴m³）计。CO₂、CH₄、N₂O 排放因子单位为：t/t燃料或t/10⁴m³燃气。
      </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="消耗量(t/10⁴m³)" 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 label="CO₂" align="center">
          <el-table-column prop="emissionsCO" label="排放量(t)" align="center" />
          <el-table-column prop="emissionFactorCO" label="排放因子" 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>
        <el-table-column label="CH₄" align="center">
          <el-table-column prop="emissionsCH" label="排放量(kg)" align="center" />
          <el-table-column prop="emissionFactorCH" label="排放因子" 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>
        <el-table-column label="N₂O" align="center">
          <el-table-column prop="emissionsNO" label="排放量(kg)" align="center" />
          <el-table-column prop="emissionFactorNO" label="排放因子" 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-column>
      </el-table>
      <el-table :data="[{}]" style="width: 100%;" :show-header="false">
        <el-table-column align="left">
          <template #defaule>
            <div class="add" @click="add">
              <icon-button icon="icon-add" title="新增" style="margin-left: 60px;" />
              <span style="margin-left: 10px;">添加燃烧能源</span>
            </div>
          </template>
        </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>