<template>
  <div>
    <!-- 电单车页面 -->
    <!-- 表单 -->
    <el-form
      label-position="right"
      label-width="150px"
      :model="formLabelAlign"
      :rules="electRules"
      style="width: 95%"
      ref="electForm"
    >
      <div class="txt">
        <p>
          <b
            >以下配置应用于电动汽车占桩费计算。例如
            免费占桩时间30分钟，封顶金额25元 占桩费单价2元/分钟</b
          >
        </p>
        <p>
          表示：充电结束30分钟内不收取费用，超过30分钟的时间按每分钟2元收费，封顶25元。
        </p>
      </div>
      <el-form-item label="最小单位费用(元):" prop="type">
        <el-input v-model="formLabelAlign.type" type="text" placeholder="0" />
      </el-form-item>
      <div class="txt">
        <p>
          <b
            >本设置只应用于电动自行车（按功率时长）的计费策略，当费用不足最小单位费用的整数倍时，将会安装最小单位费用的整数倍收取（前几分钟不参与计费）。</b
          >
        </p>
        <p>
          如，最小单位费用的是0.5元，当费用为1.1元时，将会收取1.5元；当费用为1.5元时，将会收取1.5元
        </p>
        <p>
          如，<i>免费充电时长的是5分钟</i>，当充电时长是4分钟时，将不会收取费用；当充电时长是6分钟，将会根据计费模板收取6分钟的费用
        </p>
      </div>
      <el-form-item label="免费充电时长(分钟):" prop="minute">
        <el-input v-model="formLabelAlign.minute" type="text" placeholder="5" />
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <div class="btn">
      <div class="p1">
        功率-0W至300W
        <el-link :underline="false"
          ><i
            class="el-icon-edit el-icon--right"
            @click="dialogFormVisible = true"
        /></el-link>
        <el-link :underline="false"><i class="el-icon-close" /></el-link>
      </div>
      <div class="energy">
        电费:1元<span>{{ num }}小时</span>
      </div>
    </div>

    <el-button
      style="width: 170px"
      type="text"
      @click="dialogFormVisible = true"
      >增加功率分段</el-button
    >
    <span slot="footer" class="dialog-footer" style="margin-left: 60%">
      <el-button @click="electCancel">取 消</el-button>
      <el-button type="primary" @click="addElect">确 定</el-button>
    </span>

    <el-dialog
      title="设置功率分段"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-form :model="form">
        <el-form-item label="充电功率(W):" :label-width="formLabelWidth">
          <el-input
            v-model.number="form.name"
            min="0"
            type="number"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="费用(1元X小时):" :label-width="formLabelWidth">
          <el-input
            v-model.number="form.region"
            type="number"
            placeholder="2"
            min="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        type: "",
        minute: "",
      },
      // 弹框
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
      },
      formLabelWidth: "120px",
      num: "2",
      electRules: {
        type: [
          { required: true, message: "最小单位费用多少元", trigger: "blur" },
          {
            pattern: /^[0-9]+(.[0-9]{2})?$/,
            message: "可以保留两位小数",
            trigger: "blur",
          },
        ],
        minute: [
          { required: true, message: "免费充电时长", trigger: "blur" },
          { pattern: /^\d+$/, message: "请输入数字", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 取消按钮
    electCancel() {
      // 通知父组件关闭
      this.$emit("electClose");
    },
    // 确认按钮
    addElect() {
      this.$emit("valied");
      this.$refs.electForm.validate((valid) => {
        if (valid) {
          this.doAdd();
        }
      });
    },
    // 重置表单
    electResetForm() {
      this.$refs.electForm.resetFields();
      console.log("电单车重置");
    },
    // 发送请求
    async doAdd() {
      try {
        // await addBillingTemplate(this.carBillingDetail);
        // 通知父组件关闭弹窗,更新数据
        this.$emit("electSuccess");
        this.formLabelAlign = {
          name: "",
          region: "",
          type: "",
          minute: "",
        };
        this.electResetForm();
      } catch (error) {
        this.$message.error("error");
      }
    },
    // hSubmit() {
    //   this.$refs.addForm.validate((valid) => {
    //     if (valid) {
    //       // 做添加
    //       // this.$emit('close')
    //     }
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.txt {
  margin-left: 150px;
  margin-bottom: 20px;
  border: 1px solid #fff;
  background-color: skyblue;
}
.btn {
  margin-left: 150px;
  width: 180px;
  height: 70px;
  border: 1px solid green;
  .p1 {
    font-size: 18px;
    padding: 2px;
    height: 35px;
    background-color: aquamarine;
  }
  .energy {
    margin: 5px;
  }
}
</style>
