<template>
  <div class="page-container column-container">
    <div class="row-container" style="flex: 1; height: auto">
      <!-- 左上页面开始 -->
      <section class="list-part-container" style="padding-bottom: 8px">
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item class="section-title" label="设备管理" />
          <el-form-item label="使用部门：">
            <el-select-v2
              v-model="queryParams.department"
              clearable
              filterable
              :options="departmentOptions"
              placeholder="请选择"
              @change="handleQuery"
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item label="设备状态：">
            <el-select-v2
              v-model="queryParams.latestEquipmentStatus"
              clearable
              filterable
              :options="latest_equipment_status"
              placeholder="请选择"
              @change="handleQuery"
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item label="设备名称：">
            <el-input placeholder="请输入设备名称/编号" v-model.trim="queryParams.equipmentName" style="width: 130px" />
          </el-form-item>
          <el-form-item><el-button type="info" icon="Search">搜索</el-button></el-form-item>
        </el-form>
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table
              :data="equipmentMaintenanceList"
              highlight-current-row
              height="100%"
              @selection-change="handleSelectionChange"
              @current-change="handleRepair"
            >
              <el-table-column label="设备编号" prop="equipmentNumber" width="100" align="center" />
              <el-table-column label="设备名称" prop="equipmentName" align="center" />
              <el-table-column label="使用部门" prop="department" width="100" align="center" />
              <el-table-column label="自动数采" prop="automaticDataAcquisition" width="100" align="center">
                <template #default="scope">
                  <dict-tag :options="automatic_data_acquisition_status" :value="scope.row.automaticDataAcquisition" />
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="latestEquipmentStatus" width="100" align="center">
                <template #default="scope">
                  <dict-tag :options="latest_equipment_status" :value="scope.row.latestEquipmentStatus" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </section>

      <!-- 右上半页面开始 -->
      <section class="list-part-container" style="padding-bottom: 8px">
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item class="section-title" label="状态清单" />
          <el-form-item><el-button type="primary" icon="Plus">新增</el-button></el-form-item>
        </el-form>
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table :data="repairmentList" highlight-current-row height="100%">
              <el-table-column type="index" label="序号" align="center" />
              <el-table-column label="状态" prop="equipmentStatus" width="100" align="center">
                <template #default="scope">
                  <dict-tag :options="equipment_status" :value="scope.row.equipmentStatus" />
                </template>
              </el-table-column>
              <el-table-column label="时间" prop="time" width="140" header-align="center" align="center" />
              <el-table-column label="操作人" prop="operator" width="100" align="center" />
              <el-table-column label="原因" prop="reason" header-align="center" />
              <el-table-column label="操作" width="130" align="center">
                <el-button link type="warning" icon="Edit" @click.stop.prevent="scope.row.editStatus = true">编辑</el-button>
                <el-button link type="danger" icon="Delete">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </section>
    </div>
    <div id="statistic"></div>
  </div>
</template>

<script setup name="EquipmentMaintenance">
import { listEquipmentMaintenance, delEquipmentMaintenance } from '@/api/business/equipmentMaintenance'
import equipmentMaintenanceForm from './form'
import { parseTime } from '@/utils/tools.js'
const { proxy } = getCurrentInstance()
const { automatic_data_acquisition_status } = proxy.useDict('automatic_data_acquisition_status')
const { latest_equipment_status } = proxy.useDict('latest_equipment_status')
const { equipment_status } = proxy.useDict('equipment_status')
const editStatus = ref(false)

import * as echarts from 'echarts'
import { onMounted } from 'vue'
/** 字典数组区 */
/** 查询 对象 */

const equipmentMaintenanceList = ref([
  {
    equipmentNumber: 'H565',
    equipmentName: '自动外圆磨',
    department: '部门2',
    automaticDataAcquisition: 0,
    latestEquipmentStatus: 0,
    repairmentList: [
      {
        id: 1,
        equipmentStatus: 0,
        time: '2023-10-15 15:23:15',
        operator: '张三',
        reason: '原因原因原因'
      },
      {
        id: 2,
        equipmentStatus: 1,
        time: '2023-10-15 15:23:15',
        operator: '李四',
        reason: '原因原因原因'
      }
    ]
  },
  {
    equipmentNumber: 'H567',
    equipmentName: '自动外圆磨',
    department: '部门2',
    automaticDataAcquisition: 1,
    latestEquipmentStatus: 1,
    repairmentList: [
      {
        id: 1,
        equipmentStatus: 1,
        time: '2023-10-15 15:23:15',
        operator: '张三',
        reason: '原因原因原因'
      },
      {
        id: 2,
        equipmentStatus: 2,
        time: '2023-10-15 15:23:15',
        operator: '张三',
        reason: '原因原因原因'
      }
    ]
  }
])
const repairmentList = ref([])
const departmentOptions = ref([])
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  department: null,
  latestEquipmentStatus: null,
  automaticDataAcquisitionStatus: null,
  latestEquipmentStatus: null,
  equipmentstatus: null,
  pageSize: 10,
  code: null,
  name: null
})

/***********************  方法区  ****************************/

/** 查询设备维护列表 */
function getList() {
  loading.value = false
  handleRepair(equipmentMaintenanceList.value[0])
  //   listEquipmentMaintenance(queryParams.value).then((response) => {
  //     equipmentMaintenanceList.value = response.rows
  //     total.value = response.total
  //     loading.value = false
  //   })
}
/**表1点击事件 */
function handleRepair(row) {
  repairmentList.value = row.repairmentList
}
onMounted(() => {
  createChart()
})
function createChart() {
  const chart = echarts.init(document.getElementById('statistic'))
  chart.setOption({
    title: {
      text: '数采实时信息',
      textStyle: {
        fontSize: 14,
        color: '#606244'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['设备1', '设备2', '设备3']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '设备1',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '设备2',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '设备3',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  proxy.$refs.equipmentMaintenanceRef.open()
}

/** 修改按钮操作 */
function handleUpdate(row) {
  const id = row.id || ids.value
  proxy.$refs.equipmentMaintenanceRef.open(id)
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal
    .confirm('是否确认删除选中的数据项？')
    .then(function () {
      return
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功！')
    })
    .catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'business/equipmentMaintenance/export',
    {
      ...queryParams.value
    },
    `equipmentMaintenance_${new Date().getTime()}.xlsx`
  )
}
onMounted(() => {
  getList()
})
</script>
<style scoped>
#statistic {
  padding: 16px;
  height: 400px;
  border-top: 8px solid #eef0f5;
}
</style>
