<script setup>

import {Search} from "@element-plus/icons-vue";
const form = reactive({
  // a: '8亿吨',
  // ab:'3亿吨',
  // abcdeqwer:"5000亿元"
});
</script>

<template>
  <el-row :gutter="5">
    <el-col :span="24" style="height: 50px;line-height: 50px">
      <div style="display: flex;justify-content: space-between">
        <div>规划边界类配置</div>
        <div style="display: flex;gap: 20px;">
          <el-button type="primary">保存</el-button>
          <el-button type="info">重置</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="24" style="display: grid;grid-template-columns: 22% 20% 20% 20% 15%; gap: 10px">
      <el-card style="height: 660px">
        <template #header>
          <div style="display: flex;justify-content: space-between;">
            <div>环境影响边界参数</div>
            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
          </div>
        </template>
        <template #default>
          <div class="qqq">温室气体排放约束</div>
          <el-input v-model="form.a" placeholder="温室气体排放约束例如:8亿吨">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <br>
          <br>
          <div class="qqq">空气污染物排放限制</div>
          <el-input v-model="form.ab" placeholder="空气污染物排放限制例如:3亿吨">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
<!--          <div style="margin-top: 30px;display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                褐煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                洗精煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                型煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                焦炭-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--            <el-checkbox>-->
<!--              <template #default>-->
<!--                无烟煤-->
<!--              </template>-->
<!--            </el-checkbox>-->
<!--          </div>-->
<!--          <div style="color: #1111bb;text-align: center;margin-top: 300px">-->
<!--            查看更多化石燃料...-->
<!--          </div>-->
        </template>
      </el-card>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>技术发展约束参数</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">新能源技术发展预期</div>
            <el-input v-model="form.abc" placeholder="新能源技术发展预期例如:500万吨">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">储能装机规模约束</div>
            <el-input v-model="form.abcd" placeholder="储能装机规模约束例如:3%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
<!--            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  电力-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--            </div>-->
          </template>
        </el-card>
        <el-card style="height: 340px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>政策要求边界参数</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">碳定价机制</div>
            <el-input v-model="form.abcde" placeholder="碳定价机制例如:500GW">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">政府补贴政策</div>
            <el-input v-model="form.abcdeq" placeholder="政府补贴政策例如:30%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </template>
        </el-card>
      </div>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>市场需求与经济约束参数</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">能源需求增长率</div>
            <el-input v-model="form.abcdeqw" placeholder="能源需求增长率例如:3%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">电力市场价格波动范围</div>
            <el-input v-model="form.abcdeqwe" placeholder="电力市场价格波动范围例如:10%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">资本投资预算限制</div>
            <el-input v-model="form.abcdeqwer" placeholder="资本投资预算限制例如:5000亿元">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
<!--            <div style="display: grid;grid-template-columns: 50% 49% ;row-gap: 1%;column-gap: 10%">-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含CaCO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含MgCO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含Na2CO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含BaCO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含Li2CO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  含K2CO3-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--            </div>-->
<!--            <div style="color: #1111bb;text-align: center;margin-top: 100px">-->
<!--              查看更多碳酸盐...-->
<!--            </div>-->
          </template>
        </el-card>
        <el-card style="height: 340px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>资源可获得性与区域性限制</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">可开发能源资源总量</div>
            <el-input v-model="form.abcdeqwera" placeholder="可开发能源资源总量例如:150GW">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
<!--            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  高压法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  中压法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  常压法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  综合法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  低压法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  氧化法-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--            </div>-->
          </template>
        </el-card>
      </div>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>能源供应链约束参数</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">能源进口依赖度限制</div>
            <el-input v-model="form.abcdeqweraz" placeholder="能源进口依赖度限制例如:40%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">能源储备水平要求</div>
            <el-input v-model="form.abcdeqwerazd" placeholder="能源储备水平要求例如:30天">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
<!--            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  无烟煤-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  无烟煤-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  无烟煤-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  煤制品-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  燃料油-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  石油焦-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  冰醋酸-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  二甲苯-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  天然气-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--            </div>-->
          </template>
        </el-card>
        <el-card style="height: 340px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>社会经济发展与人口相关参数</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div class="qqq">人口增长率</div>
            <el-input v-model="form.abcdeqwerazdxc" placeholder="人口增长率例如:1%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">城乡居民能源消费差异</div>
            <el-input v-model="form.abcdeqwerazdxcc" placeholder="城乡居民能源消费差异例如:1.5倍">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <br>
            <br>
            <div class="qqq">就业与经济结构变化</div>
            <el-input v-model="form.abcdeqwerazdxccz" placeholder="就业与经济结构变化例如:30%">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
<!--            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  硝酸氧化-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--              <el-checkbox>-->
<!--                <template #default>-->
<!--                  其他-->
<!--                </template>-->
<!--              </el-checkbox>-->
<!--            </div>-->
          </template>
        </el-card>
      </div>
      <el-card style="height: 660px">
        <template #header>
          <div style="display: flex;justify-content: space-between;">
            <div>回收利用 - 不考虑自用</div>
            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
          </div>
        </template>
        <template #default>
          <el-input v-model="form.abcdeqwerazdxcczx" placeholder="回收利用的气体">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <div style="margin-top: 30px;display: grid;grid-template-columns: 50% 49%;row-gap: 1%;column-gap: 10%">
            <el-checkbox>
              <template #default>
                CO2
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                HFCs
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                CH4
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                PFCs
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                N2O
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                SF6
              </template>
            </el-checkbox>
          </div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.qqq{
  font-weight: 700;
  height: 32px;
  line-height: 32px;
  align-items: flex-start;
  box-sizing: border-box;
  color: #606266;
}
</style>