<template>
  <div>
    <!-- 充电站详情 -->
    <!-- 计费模块 -->
    <!-- 按钮栏 -->
    <el-row :gutter="10" class="mb8">
      <!--<el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="clickaAdditional"
          >新增</el-button
        >
      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="clickRefresh"
          >刷新</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="clickImport"
          >导入</el-button
        >
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          v-hasPermi="['tool:gen:import']"
          type="info"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="openImportTable"
          >导入</el-button
        >
      </el-col>-->
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>
    <!-- 表单区域 -->

    <el-table
      :data="stationBillingTemplate"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column label="模板编号" prop="templateCode" />
      <el-table-column label="名称" prop="templateName" />
      <!-- matchCars 使用车辆描述 -->
      <el-table-column label="描述" prop="remark" />
      <el-table-column label="设备类型" prop="deviceType">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.charger_pile_type"
            :value="scope.row.deviceType"
          />
        </template>
      </el-table-column>
      <!--<el-table-column label="默认" prop="id">
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-table-column>-->
      <el-table-column label="上次发布时间" prop="publishTime" />
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="issue(scope.row.templateId)"
          >
            发布
          </el-button>

          <el-button type="text" size="small" @click="outerVisible = true"
            >绑定设备
          </el-button>
          <!-- <el-col :span="5">
              <el-button type="text" size="small" @click="expDialog = true"
                >费率详情页</el-button
              >
            </el-col> -->
          <el-button
            type="text"
            size="small"
            @click="handleUpdate(scope.row.templateId)"
            >修改默认费率
          </el-button>

          <el-button
            type="text"
            size="small"
            @click="delBilling(scope.row.templateId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog
      title="发布计费模板"
      background-color:pink
      :visible.sync="dialogVisible"
      width="30%"
      height="50%"
    >
      <!--<el-date-picker
        v-model="value3"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00"
      />-->
      点击立即发布后，会将该计费模板下发到当前站点下所有的充电桩上面
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickPublish"> 立即发布 </el-button>
      </span>
    </el-dialog>
    <el-dialog width="70%" title="绑定设备" :visible.sync="outerVisible">
      <BondedDevice ref="bondedDevice" />
    </el-dialog>
    <!-- 费率详情页 -->
    <!-- <el-dialog title="费率详情页" :visible.sync="expDialog" width="30%">
      <Expenses />
    </el-dialog> -->
    <el-dialog title="导入" :visible.sync="expDialog" width="30%">
      <el-form :model="form">
        <el-form-item label="选择计费模板" label-width="100px">
          <el-select
            placeholder="请选择选择计费模板"
            v-model="selectTemplateId"
          >
            <el-option
              v-for="item in publicBillingTemplate"
              :key="item.templateCode"
              :label="item.templateName"
              :value="item.templateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBtn">提交</el-button>
        <el-button @click="expDialog = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改默认费率"
      :visible.sync="amendDialog"
      width="70%"
      height="70%"
      @close="closeDialog"
    >
      <!-- <Amend /> -->
      <add-billing
        @success="success"
        :billingTemplateId="billingTemplateId"
        ref="addBill"
      />
    </el-dialog>
  </div>
</template>

<script>
import BondedDevice from "./bondedDevice.vue";
import Expenses from "./expenses.vue";
import {
  listTemplate,
  delTemplate,
  queryStationBillingTemplateList,
  queryPublicBillingTemplateList,
  stationImportBillingTemplate,
  publishBillingTemplate,
} from "@/api/billing/template.js";
import AddBilling from "../../../billing/template/components/addBilling.vue";

export default {
  components: { BondedDevice, Expenses, AddBilling },
  dicts: ["charger_pile_type"],
  data() {
    return {
      tableData: [],
      // 绑定设备
      outerVisible: false,
      // 开关
      value: true,
      dialogVisible: false,
      loading: false,
      // 选择计费模板弹框
      expDialog: false,
      amendDialog: false,
      // 站点计费模板列表
      stationBillingTemplate: [],
      // 公共计费模板列表
      publicBillingTemplate: [],
      // 选择的计费模板id
      selectTemplateId: "",
      // 发布的计费模板id
      publishTemplateId: "",
      // 日期
      value3: "",
      stationId: this.$route.params.id,
      form: {
        region: "",
      },
      // 需要向子组件传递的值
      billingTemplateId: "",
    };
  },
  created() {
    // 发送请求
    // this.templateList();
    // this.getStationBillingTemplateList();
  },
  methods: {
    // 新增计费模板
    clickaAdditional() {
      // 打开弹窗
      this.amendDialog = true;
      console.log("新增计费模板按钮");
    },
    /** 修改按钮操作 */
    handleUpdate(billingTemplateId) {
      console.log("点击修改按钮", billingTemplateId);
      this.amendDialog = true;
      this.billingTemplateId = String(billingTemplateId);
      this.title = "修改计费模板";
    },
    closeDialog() {
      console.log("closeDialog");
      this.billingTemplateId = "";
      this.clickRefresh();
    },
    // 通知父 关闭弹框
    success() {
      this.amendDialog = false;
      this.$refs.addBill.resetForm();
      this.getStationBillingTemplateList();
    },
    // 发布按钮
    issue(id) {
      this.dialogVisible = true;
      console.log("发布", id);
      this.publishTemplateId = id;
    },
    // 立即发布按钮
    clickPublish() {
      this.dialogVisible = false;
      const data = {
        stationId: this.stationId,
        templateId: this.publishTemplateId,
      };
      publishBillingTemplate(data).then(() => {
        this.$message.success("发布计费模板成功");
        this.publishTemplateId = "";
      });
    },
    /** 打开导入表弹窗 */
    openImportTable() {
      console.log("111");
      //   this.$refs.import.show();
    },
    // 按钮 删除功能
    delBilling(id) {
      console.log("删除", id);
      delTemplate(id).then((response) => {
        this.$message.success("删除计费模板成功");
        this.clickRefresh();
      });
    },

    // 获取计费模块列表信息
    async templateList() {
      const res = await listTemplate();
      console.log(res);
      this.tableData = res.rows;
    },

    // 查询公共计费模板
    getPublicBillingTemplateList() {
      queryPublicBillingTemplateList().then((response) => {
        console.log(response.rows);
        this.publicBillingTemplate = response.rows;
      });
    },

    // 通过站点id查询计费模板
    getStationBillingTemplateList() {
      // console.log("通过站点id查询计费模板", this.stationId)
      queryStationBillingTemplateList(this.stationId).then((response) => {
        // console.log("通过站点id查询计费模板 result: ", response.rows);
        this.stationBillingTemplate = response.rows;
      });
    },
    // 刷新按钮
    clickRefresh() {
      this.loading = true;
      setTimeout(() => {
        this.getStationBillingTemplateList();
        this.loading = false;
      }, 800);
    },
    clickImport() {
      console.log("点击导入");
      this.getPublicBillingTemplateList();
      this.expDialog = true;
    },
    // 提交按钮
    submitBtn() {
      this.expDialog = false;
      // console.log("提交成功", this.selectTemplateId, this.stationId);
      const data = {
        stationId: this.stationId,
        billingTemplateId: this.selectTemplateId,
      };
      stationImportBillingTemplate(data).then((response) => {
        this.clickRefresh();
      });
    },
  },
  watch: {
    expDialog(newName, oldName) {
      if (newName === false) {
        this.selectTemplateId = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
