<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="98px">
      <el-form-item label="计费模板编号" prop="templateCode">
        <el-input
          v-model="form.templateCode"
          placeholder="请输入计费模板编号"
        />
      </el-form-item>
      <el-form-item label="模板名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入模板名称" />
      </el-form-item>
      <el-form-item label="模板备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入模板备注" />
      </el-form-item>
      <el-form-item label="充电站" prop="stationId">
        <el-input v-model="form.stationId" placeholder="请输入充电站" />
      </el-form-item>
      <el-divider content-position="center">计费模板详情信息</el-divider>
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAddPileBillingDetail"
            >添加</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDeletePileBillingDetail"
            >删除</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="pileBillingDetailList"
        :row-class-name="rowPileBillingDetailIndex"
        @selection-change="handlePileBillingDetailSelectionChange"
        ref="pileBillingDetail"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="序号" align="center" prop="index" width="50" />
        <el-table-column label="时段类型" prop="timeType" width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.timeType"
              placeholder="请选择时段类型"
            >
              <el-option label="请选择字典生成" value="" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="电费" prop="electricityPrice" width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.electricityPrice"
              placeholder="请输入电费"
            />
          </template>
        </el-table-column>
        <el-table-column label="服务费" prop="servicePrice" width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.servicePrice"
              placeholder="请输入服务费"
            />
          </template>
        </el-table-column>
        <el-table-column label="适用时间段" prop="applyTime" width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.applyTime"
              placeholder="请输入适用时间段"
            />
          </template>
        </el-table-column>
      </el-table> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 计费模板详情表格数据
      pileBillingDetailList: [],
      // 弹出层标题
      title: "",
    };
  },
  methods: {
    /** 计费模板详情添加按钮操作 */
    handleAddPileBillingDetail() {
      let obj = {};
      obj.timeType = "";
      obj.electricityPrice = "";
      obj.servicePrice = "";
      obj.applyTime = "";
      this.pileBillingDetailList.push(obj);
    },
    /** 计费模板详情删除按钮操作 */
    handleDeletePileBillingDetail() {
      if (this.checkedPileBillingDetail.length == 0) {
        this.$modal.msgError("请先选择要删除的计费模板详情数据");
      } else {
        const pileBillingDetailList = this.pileBillingDetailList;
        const checkedPileBillingDetail = this.checkedPileBillingDetail;
        this.pileBillingDetailList = pileBillingDetailList.filter(function (
          item
        ) {
          return checkedPileBillingDetail.indexOf(item.index) == -1;
        });
      }
    },
  },
};
</script>

<style></style>
