<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @search-change="searchChange"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange"
    >
<!--      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
      </template>-->
      <template #menu="{size,row,index}">
        <el-button @click="maintenance(row)"
                   icon="el-icon-setting"
                   text
                   type="primary"
                   :size="size">计量</el-button>
      </template>
      <template #menu-right="{}">
        <el-button
            class="ml-3"
            @click="exportData('/api/v1/device/export')"
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="850px"
        @close="dialog.visible = false"
    >
      <device-page  @deviceInfo="deviceInfo"/>
    </el-dialog>

    <el-dialog
        v-model="dialog1.visible"
        :title="dialog1.title"
        width="750px"
        height="80%"
        @close="dialog1.visible = false">
      <el-timeline style="max-width: 500px;margin-left: 100px">
<!--        <el-timeline-item center color="#0bbd87" type="success" placement="top">
          <el-card>
            <h4>维护计划</h4>
            <p>设备编号： {{maintenanceInfo.deviceNo}}</p>
            <p>设备名称：{{maintenanceInfo.deviceName}}</p>
            <p>维护内容：{{maintenanceInfo.remark}}</p>
            <p>计划时间：{{maintenanceInfo.nextTime}}</p>
          </el-card>
        </el-timeline-item>-->
<!--        <el-timeline-item center placement="top" :type="maintenanceInfo.state === 0 ? 'primary' : 'success'">-->
          <el-card>
            <h4>设备计量</h4>
            <el-form ref="maintenanceInfoForm" :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules">
              <el-form-item label="计量人员" prop="userName">
                <el-select
                    v-model="maintenanceInfo.userName"
                    placeholder="计量人员"
                    size="large"
                    filterable
                    style="width: 240px">
                  <el-option
                      v-for="item in userList"
                      :key="item.userName"
                      :label="item.userName"
                      :value="item.userName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="计量结果">
                <el-radio-group v-model="maintenanceInfo.result" class="ml-4">
                  <el-radio :value="0">已计量</el-radio>
                </el-radio-group>
              </el-form-item>
<!--              <el-form-item v-if="maintenanceInfo.result === 1" label="报故内容">
                <el-input v-model="maintenanceInfo.maintenanceContent" />
              </el-form-item>-->
              <el-form-item label="下次计量日期" prop="nextTime">
                <el-date-picker
                    v-model="maintenanceInfo.nextTime"
                    type="date"
                    style="width:240px;"
                    :disabled-date="disabledDate"
                    placeholder="请选择时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
<!--                <el-input v-model="maintenanceInfo.nextTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>-->
              </el-form-item>
<!--              <el-form-item v-if="maintenanceInfo.result === 0" label="下次维护内容">
                <el-input v-model="maintenanceInfo.maintenanceContent" />
              </el-form-item>-->
              <el-form-item style="margin-left: 45%">
                <el-button type="primary" @click="maintenanceSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </el-card>
<!--        </el-timeline-item>-->
      </el-timeline>
    </el-dialog>

    <el-dialog
        v-model="dialog2.visible"
        :title="dialog2.title"
        width="60%"
        height="80%"
        @close="dialog2.visible = false"
    >
      <record-page :maintenanceId="maintenanceInfo.id"></record-page>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import {getUserList} from "@/api/system/user"
import {maintenanceUpdate,meteringUpdate} from "@/api/device/index";
import { useCommonStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
import RecordPage from "./components/metering-record.vue";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const disabledDate = (time) =>{
  return time.getTime() < Date.now(); // 8.64e7 毫秒数代表一天
}
const dialog = reactive({
  title: "设备选择",
  visible: false,
});
const dialog1 = reactive({
  title: "设备计量",
  visible: false,
});
const dialog2 = reactive({
  title: "设备计量记录",
  visible: false,
});
const userList = ref([])
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/device",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const deviceInfo = (value) => {
  form.value.deviceNo = value.deviceNo
  dialog.visible = false
}
const maintenanceInfo = ref(null)
const maintenance = (row)=>{
  maintenanceInfo.value = row
  maintenanceInfo.value.deviceId = row.id
  maintenanceInfo.value.result = 0
  dialog1.visible = true
}
const maintenanceList = (row)=>{
  maintenanceInfo.value = row
  dialog2.visible = true
}
const queryUserList = ()=>{
  getUserList({}).then((data)=>{
    userList.value = data.data
  })
}
const maintenanceInfoForm = ref('maintenanceInfoForm')
const maintenanceSubmit =()=>{
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm.value.validate((isValid, invalidFields) => {
    if (isValid) {
      meteringUpdate(maintenanceInfo.value).then((data)=>{
        ElMessage({
          message: data.msg,
          type: "success",
        });
        maintenanceInfo.value = null
        dialog1.visible = false
        dataList()
      })
    }
  })
}
const rules = reactive({
  userName: [
    // required是否必填,message不符合此规则时的提示信息,
    // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
    // min此字段的最小长度，max此字段的最大长度
    // pattern 正则表达式
    { required: true, message: '计量人员不能为空', trigger: 'blur' }
  ],
  nextTime: [
    { required: true, message: '计量日期不能为空', trigger: 'blur' }
  ]
})
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: false,
  labelWidth: 150,
  addBtn: false,
  editBtn: false,
  viewBtn: false,
  column: [
    {
      label: "设备编号",
      prop: "deviceNo",
      search: true,
      width: 160,
      overHidden: true,
    },
    {
      label: "设备名称",
      prop: "deviceName",
      search: true,
      width: 160,
      overHidden: true,
    },
    {
      label: "计量日期",
      prop: "meteringSearch",
      width: 160,
      type: 'daterange',
      searchRange: true,
      hide: true,
      startPlaceholder: '开始范围',
      endPlaceholder: '结束范围',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      overHidden: true,
      search: true
    },
    {
      label: "设备类型",
      prop: "deviceType",
      type: "select",
      width: 130,
      overHidden: true,
      search: true,
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.device_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "设备状态",
      prop: "state",
      type: "select",
      width: 160,
      overHidden: true,
      search: true,
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.device_status,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    /*{
      label: "在线状态",
      prop: "onlineState",
      width: 100,
      display: false,
      html: true,
      formatter: (val) => {
        if (val.onlineState === "1") {
          return '<b class="el-tag el-tag--success el-tag--light">在线</b>';
        } else {
          return '<b class="el-tag el-tag--warning el-tag--light">离线</b>';
        }
      },
    },*/
    {
      label: "负责人",
      prop: "head",
      width: 160,
      overHidden: true,
    },
    {
      label: "计量有效期",
      prop: "meteringDate",
      type: "date",
      width: 160,
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      overHidden: true,
    },
    {
      label: "所属PAC",
      prop: "terminal",
      type: "select",
      width: 160,
      overHidden: true,
      dicUrl:import.meta.env.VITE_APP_BASE_API + "/api/v1/device/pacList",
      props: {
        label: "deviceName",
        value: "deviceNo",
      }
    },
    {
      label: "供应厂商",
      prop: "manufacturer",
      width: 160,
      overHidden: true,
    },
    {
      label: "所属部门",
      prop: "deptId",
      width: 160,
      overHidden: true,
      type: "tree",
      dicUrl: dictDataUtil.dept_tree_url,
      props: {
        label: "deptName",
        value: "id",
      }
    },
    {
      label: "所在车间",
      prop: "workshop",
      width: 160,
      overHidden: true,
    },
    {
      label: "所在工位",
      prop: "station",
      width: 160,
      overHidden: true,
    },
    {
      label: "设备位置",
      prop: "devicePosition",
      width: 160,
      overHidden: true,
    },
    {
      label: "规格",
      prop: "specifications",
      width: 160,
      overHidden: true,
    },
    {
      label: "品牌",
      width: 160,
      overHidden: true,
      prop: "brand",
    },
  ],
});

onMounted(() => {
  search.value.needMetering = "1"
  maintenanceInfo.result = "0"
  dataList();
  queryUserList()
});
</script>
