<template>
  <div class="policyForm">
    <div class="title">
      <div>基础信息</div>
      <img src="@/assets/images/titleLine.png" alt="" />
    </div>
    <a-form
      :model="formState"
      layout="inline"
      label-align="right"
      :label-col="{ style: { width: '100px' } }"
    >
          <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 18}">
            <a-input v-model:value="formState.name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
          <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="低谷电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
            <a-input v-model:value="formState.name" suffix="元/kWh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="平段电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
            <a-input v-model:value="formState.name" suffix="元/kWh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="高峰电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
            <a-input v-model:value="formState.name" suffix="元/kWh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="尖峰电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
            <a-input v-model:value="formState.name" suffix="元/kWh" />
          </a-form-item>
        </a-col>
      </a-row>

          <!-- <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="时段表">
            <a-radio-group v-model:value="formState.resource">
              <a-radio value="1">Sponsor</a-radio>
              <a-radio value="2">Venue</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
          <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="充放策略">
            <a-radio-group v-model:value="formState.resource">
              <a-radio value="1">一充一放</a-radio>
              <a-radio value="2">两充两放</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
          <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="充放策略"> 休息休息休息休息、 </a-form-item>
        </a-col>
      </a-row>
          <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="策略描述">
            <a-textarea v-model:value="formState.desc" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否启用">
            <a-switch v-model:checked="formState.delivery" />
          </a-form-item>
        </a-col>
      </a-row> -->
    </a-form>
  </div>
</template>

<script>
import { styleProviderProps } from 'ant-design-vue/es/_util/cssinjs/StyleContext'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      formState: {
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.policyForm {
  color: #fff;
  .title {
    display: flex;
    font-weight: 700;
    flex-direction: column;

    img {
      width: 232px;
      height: 6px;
      margin-top: 10px;
    }
  }
  .ant-form {
  }
}

.ant-form-item {
  margin-inline-end: 0 !important;
  margin-top: 15px;
}
.ant-form {
  .ant-form-item-label > label {
    color: #fff;
  }
  :deep(.ant-row) {
    width: 100%;
  }
  .ant-input,
  .ant-select,
  .ant-input-affix-wrapper {
    // max-width: 240px;
    // min-width: 120px;
  }
  textarea{
    .ant-input { 
    width: 100%;
  }
  }
}
</style>
