<template>
  <div class="p-2">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
<!--      <el-form-item label="能源类型编号" prop="energyId">-->
<!--        <el-input-->
<!--          v-model="queryParams.energyId"-->
<!--          placeholder="请输入能源类型编号"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="能源类型" prop="energyId">
        <el-select v-model="queryParams.energyId" placeholder="请选择能源类型">
          <el-option
            v-for="item in energyTypeList"
            :key="item.energyTypeId"
            :label="item.energyName"
            :value="item.energyTypeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购月份">
        <el-date-picker
          v-model="daterangeMonthDate"
          style="width: 240px"
          value-format="YYYY-MM-DD"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </el-form-item>
<!--      <el-form-item label="开始日期" prop="startDate">-->
<!--        <el-date-picker clearable-->
<!--                        v-model="queryParams.startDate"-->
<!--                        type="date"-->
<!--                        value-format="YYYY-MM-DD"-->
<!--                        placeholder="请选择开始日期"-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="结束日期" prop="endDate">-->
<!--        <el-date-picker clearable-->
<!--                        v-model="queryParams.endDate"-->
<!--                        type="date"-->
<!--                        value-format="YYYY-MM-DD"-->
<!--                        placeholder="请选择结束日期"-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"

          @click="handleAdd"
          v-hasPermi="['ems/base:baseEnergyPrice:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"

          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['ems/base:baseEnergyPrice:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"

          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['ems/base:baseEnergyPrice:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"

          @click="handleExport"
          v-hasPermi="['ems/base:baseEnergyPrice:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="baseEnergyPriceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible"/>
      <el-table-column label="能源类型编号" align="center" prop="energyId" v-if="columns[1].visible"/>
      <el-table-column label="能源类型名称" align="center" prop="energyName" v-if="columns[2].visible"/>
      <el-table-column label="单位" align="center" prop="measureUnit" v-if="columns[3].visible"/>
      <el-table-column label="采购月份" align="center" prop="monthDate" width="180" v-if="columns[4].visible">
        <template #default="scope">
          <span>{{ parseTime(scope.row.monthDate, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="含税单价" align="center" prop="price" v-if="columns[5].visible"/>
      <el-table-column label="不含税单价" align="center" prop="unTaxPrice" v-if="columns[6].visible"/>
      <el-table-column label="开始日期" align="center" prop="startDate" width="180" v-if="columns[7].visible">
        <template #default="scope">
          <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束日期" align="center" prop="endDate" width="180" v-if="columns[8].visible">
        <template #default="scope">
          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人员" align="center" prop="createBy" v-if="columns[9].visible"/>
      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[10].visible"/>
      <el-table-column label="更新人员" align="center" prop="updateBy" v-if="columns[11].visible"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[12].visible"/>
      <el-table-column label="备注" align="center" prop="remark" v-if="columns[13].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button

            type="text"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ems/base:baseEnergyPrice:edit']"
          >修改
          </el-button>
          <el-button

            type="text"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ems/base:baseEnergyPrice:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    ></pagination>

    <!-- 添加或修改能源月份单价对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="能源类型编号" prop="energyId">
          <el-select v-model="form.energyId" placeholder="请选择能源类型编号">
            <el-option
              v-for="item in energyTypeList"
              :key="item.energyTypeId"
              :label="item.energyName"
              :value="item.energyTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="能源类型名称" prop="energyName">-->
<!--          <el-input v-model="form.energyName" placeholder="请输入能源类型名称"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位" prop="measureUnit">-->
<!--          <el-input v-model="form.measureUnit" placeholder="请输入单位"/>-->
<!--        </el-form-item>-->
        <el-form-item label="采购月份" prop="monthDate">
          <el-date-picker clearable
                          v-model="form.monthDate"
                          type="month"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择采购月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="含税单价" prop="price">
          <el-input-number v-model="form.price" placeholder="请输入含税单价"/>
        </el-form-item>
        <el-form-item label="不含税单价" prop="unTaxPrice">
          <el-input-number v-model="form.unTaxPrice" placeholder="请输入不含税单价"/>
        </el-form-item>
<!--        <el-form-item label="开始日期" prop="startDate">-->
<!--          <el-date-picker clearable-->
<!--                          v-model="form.startDate"-->
<!--                          type="date"-->
<!--                          value-format="YYYY-MM-DD"-->
<!--                          placeholder="请选择开始日期"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="结束日期" prop="endDate">-->
<!--          <el-date-picker clearable-->
<!--                          v-model="form.endDate"-->
<!--                          type="date"-->
<!--                          value-format="YYYY-MM-DD"-->
<!--                          placeholder="请选择结束日期"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="BaseEnergyPrice">
import { ref, reactive, getCurrentInstance, ComponentInternalInstance } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {
  listBaseEnergyPrice,
  getBaseEnergyPrice,
  delBaseEnergyPrice,
  addBaseEnergyPrice,
  updateBaseEnergyPrice
} from '@/api/ems/base/baseEnergyPrice';
import { getBaseEnergyTypeList } from '@/api/ems/base/baseEnergyType';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const loading = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const baseEnergyPriceList = ref<any[]>([]);
const dialogTitle = ref('');
const dialogOpen = ref(false);
const daterangeMonthDate = ref<string[]>([]);
const energyTypeList = ref<any[]>([]);

const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  energyId: null,
  energyName: null,
  measureUnit: null,
  monthDate: null,
  price: null,
  unTaxPrice: null,
  startDate: null,
  endDate: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  remark: null
});

const form = ref<any>({});

const rules = reactive<FormRules>({
  monthDate: [
    { required: true, message: '采购月份不能为空', trigger: 'blur' }
  ],
  energyId: [
    { required: true, message: '能源类型编号不能为空', trigger: 'blur' }
  ]
});

const columns = ref([
  { key: 0, label: '主键标识', visible: false },
  { key: 1, label: '能源类型编号', visible: false },
  { key: 2, label: '能源类型名称', visible: true },
  { key: 3, label: '单位', visible: true },
  { key: 4, label: '采购月份', visible: true },
  { key: 5, label: '含税单价', visible: true },
  { key: 6, label: '不含税单价', visible: true },
  { key: 7, label: '开始日期', visible: false },
  { key: 8, label: '结束日期', visible: false },
  { key: 9, label: '创建人员', visible: false },
  { key: 10, label: '创建时间', visible: false },
  { key: 11, label: '更新人员', visible: false },
  { key: 12, label: '更新时间', visible: false },
  { key: 13, label: '备注', visible: false }
]);

const queryFormRef = ref<FormInstance>();
const baseEnergyPriceFormRef = ref<FormInstance>();

function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (daterangeMonthDate.value && daterangeMonthDate.value.length) {
    queryParams.value.params['beginMonthDate'] = daterangeMonthDate.value[0];
    queryParams.value.params['endMonthDate'] = daterangeMonthDate.value[1];
  }
  listBaseEnergyPrice(queryParams.value).then((response: any) => {
    baseEnergyPriceList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function dialogCancel() {
  dialogOpen.value = false;
  reset();
}

function reset() {
  form.value = {
    objId: null,
    energyId: null,
    energyName: null,
    measureUnit: null,
    monthDate: null,
    price: null,
    unTaxPrice: null,
    startDate: null,
    endDate: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  };
  baseEnergyPriceFormRef.value?.resetFields();
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  daterangeMonthDate.value = [];
  queryFormRef.value?.resetFields();
  handleQuery();
}

function handleSelectionChange(selection: any[]) {
  ids.value = selection.map(item => item.objId);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

function handleAdd() {
  reset();
  dialogOpen.value = true;
  dialogTitle.value = '添加能源月份单价';
}

function handleUpdate(row?: any) {
  reset();
  const objId = row?.objId || ids.value[0];
  getBaseEnergyPrice(objId).then((response: any) => {
    form.value = response.data;
    dialogOpen.value = true;
    dialogTitle.value = '修改能源月份单价';
  });
}

function submitForm() {
  baseEnergyPriceFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (form.value.objId != null) {
        updateBaseEnergyPrice(form.value).then(() => {
          proxy?.$modal.msgSuccess('修改成功');
          dialogOpen.value = false;
          getList();
        });
      } else {
        addBaseEnergyPrice(form.value).then(() => {
          proxy?.$modal.msgSuccess('新增成功');
          dialogOpen.value = false;
          getList();
        });
      }
    }
  });
}

function handleDelete(row?: any) {
  const objIds = row?.objId || ids.value;
  proxy?.$modal.confirm('是否确认删除能源月份单价编号为"' + objIds + '"的数据项？').then(function() {
    return delBaseEnergyPrice(objIds);
  }).then(() => {
    getList();
    proxy?.$modal.msgSuccess('删除成功');
  }).catch(() => {});
}

function handleExport() {
  proxy?.download('ems/base/baseEnergyPrice/export', {
    ...queryParams.value
  }, `baseEnergyPrice_${new Date().getTime()}.xlsx`);
}

getBaseEnergyTypeList({}).then((response: any) => {
  energyTypeList.value = response.data;
});
getList();
</script>
