<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto" :inline="true">
            <el-form-item label="自动站：" prop="base">
              <el-select v-model="pageable.as_code" filterable placeholder="请搜索自动站" remote reserve-keyword clearable
                style="width: 200px" @change="changeStation">
                <el-option v-for="item in platformList" :key="item.as_code" :label="item.as_code + ' ' + item.as_name"
                  :value="item.as_code" />
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="维护类型:">
              <el-select v-model="pageable.record_type" filterable placeholder="请选择"  style="width: 200px">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="维护时间:">
              <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" :disabled-date="disabledDate"
                :shortcuts="shortcuts" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
              <!-- <el-button style="margin-left: 10px" type="primary" plain @click="handleAdd"> 新增 </el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ (pageable.pageNum - 1) * pageable.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'"
            :show-overflow-tooltip="true">
            <template #default="scope">
              <template v-if="item.prop === 'maintain_mode'">
                <div>{{ scope.row.maintain_mode == 0 ? '检查' : scope.row.maintain_mode == 1 ? '更换' : '维修' }}</div>
              </template>
              <template v-if="item.prop === 'begin_time_i'">
                <div>{{ parseTime(scope.row.begin_time_i, '{y}-{m}-{d} {h}:{i}') }}</div>
              </template>
              <template v-if="item.prop === 'end_time_i'">
                <div>{{ parseTime(scope.row.end_time_i, '{y}-{m}-{d} {h}:{i}') }}</div>
              </template>

              <!-- <template v-if="item.prop === 'operation'">
                <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
                  <el-button type="primary" link @click="handleUpdate">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                  <el-button type="primary" link @click="handleDelete(scope.row)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template> -->
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange"
        :handle-current-change="handleCurrentChange" />
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="维护自动站" prop="code">
          <el-select v-model="form.code" filterable placeholder="请选择" clearable>
            <el-option label="M1994" value="M1994" />
            <el-option label="M1995" value="M1995" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护类型" prop="type">
          <el-select v-model="form.type" filterable placeholder="请选择" clearable>
            <el-option label="检查" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护人" prop="name">
          <el-input v-model="form.name" placeholder="请输入维护人" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker style="width: 100%" v-model="form.startTime" type="datetime" placeholder="请选择"
            format="YYYY-MM-DD HH:mm" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker style="width: 100%" v-model="form.endTime" type="datetime" placeholder="请选择"
            format="YYYY-MM-DD HH:mm" />
        </el-form-item>
        <el-form-item label="工作内容" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="8" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { ref, reactive, computed, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from 'element-plus'
import { useUserStore } from "@/stores/modules/user";
import { getMaintainrecordList } from "@/api/modules/allData";
import { parseTime } from '@/utils/index';
import { ElMessage } from "element-plus";
import { getNextDayMidnight,  getStamp } from "@/utils/dateTime";

const dateValue = ref<any>(parseTime(new Date(), '{y}-{m}-{d}'))

const pageable = ref<any>({
  as_code: '',
  record_type: -1,
  order: 0,
  pageNum: 1,
  pageSize: 20,
  total: 0
});
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const type = [
  {
    value: -1,
    label: '全部',
  },
  {
    value: 0,
    label: '检查',
  },
  {
    value: 1,
    label: '更换',
  },
  {
    value: 2,
    label: '维修',
  }
]

const userStore = useUserStore();
const platformList = ref<any>(computed(() => userStore.stations))
const selectPlatform = ref()

const getPlatforms = async () => {
  pageable.value.as_code = platformList.value[0].as_code
  selectPlatform.value = platformList.value[0]
  getList()

};

const changeStation = () => {
  // getHistoryList()
}
// 查询功能
const handleQuery = () => {
  pageable.value.pageNum = 1;
  getList();

};

//重置功能
const resetQuery = () => {
  dateValue.value = parseTime(new Date(), '{y}-{m}-{d}')
  pageable.value.as_code = platformList.value[0].as_code
  pageable.value.pageNum = 1;
  pageable.value.record_type = -1
  pageable.value.order = 0
  pageable.value.pageSize = 20
  pageable.value.total = 0
  getList();
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val
  getList();
};

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val
  getList();
};
const processTableData = ref<any>([]);

const getList = async () => {

  if (!dateValue.value) return ElMessage.error("请选择日期");

  const { data } = await getMaintainrecordList({ ...pageable.value, as_code_list: [pageable.value.as_code], end_time: getStamp(parseTime(new Date(getNextDayMidnight(dateValue.value)), '{y}-{m}-{d}') + ' 00:00'), begin_time: getStamp(parseTime(new Date(dateValue.value), '{y}-{m}-{d}') + ' 00:01') })
  pageable.value.total = data.total
  processTableData.value = data.list

}


// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "as_name", label: "站名" },
  { prop: "as_code", label: "站号" },
  { prop: "maintain_mode", label: "维护类型" },
  { prop: "begin_time_i", label: "维护开始日期" },
  { prop: "end_time_i", label: "结束日期" },
  { prop: "maintain_remarks", label: "工作内容", width: 250 },
  { prop: "maintain_people", label: "维护人", width: 100 },
  { prop: "operation", label: "操作", width: 150, align: 'center' }
]);

const dialog = reactive<any>({
  visible: false,
  title: ''
});
const formRef = ref<any>();
const rules = ref<any>(
  {
    code: [{ required: true, message: "维护自动站不能为空", trigger: "blur" }],
    type: [{ required: true, message: "维护类型不能为空", trigger: "blur" }],
    name: [{ required: true, message: "维护人不能为空", trigger: "blur" }],
    startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
    endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
    remark: [{ required: true, message: "工作内容不能为空", trigger: "blur" }],
  }
);


const initFormData = ref<any>(
  {
    code: "",
    type: "",
    name: "",
    startTime: "",
    endTime: "",
    remark: ""
  }
);


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

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  dialog.visible = true;
  dialog.title = "编辑";
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  formRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  ElMessageBox.confirm('是否确认删除编号为"' + row.b + '"的数据项？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    title: '删除数据',
    draggable: true
  })
    .then(() => {

    })
    .catch(() => {

    })
}
onMounted(() => {
  getPlatforms()
})
</script>
