<!--终端管理界面-->
<template>
  <div class='default-main'>
    <TableHeader :showReset="false" showCustomColumn>
      <template v-slot:select>
        <el-form-item label='生产线'>
          <el-select v-model='tableStore.table.params.productLineId'>
            <el-option
                v-for='item in productLineList'
                :key='item.id'
                :label='item.name'
                :value='item.id'
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:operation>
        <el-button type='primary' @click='add' class='ml10' :icon='Plus'>新增</el-button>
        <!--返回按钮-->
        <back-component />
      </template>
    </TableHeader>
    <!--表格-->
    <Table ref='tableRef'></Table>
    <!--终端弹出框-->
    <machine-popup ref='machinePopup' />
    <!--终端详细弹出框，管理元器件-->
    <machine-detail ref='machineDetail' />
  </div>
</template>

<script setup lang='ts'>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { provide, ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
import { deleteSgMachine } from '@/api/advance-boot/sgGroven/sgMachine'
import MachinePopup from './machinePopup.vue'
import MachineDetail from '@/views/pqs/voltageSags/sagGovern/businessUser/sensitiveUnit/machineDetail.vue'
import BackComponent from '@/components/icon/back/index.vue'

let productLineList: any = ref([])

const machinePopup = ref()
const machineDetail = ref()

defineOptions({
  name: 'machine'
})
const { go } = useRouter()
const { query } = useRoute()


const tableStore = new TableStore({
  url: '/advance-boot/sgMachine/list',
  method: 'POST',
  column: [
  { title: '序号',  width: 80,formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      } },
    { title: '终端名称', minWidth: '160', field: 'name' },
    { title: '终端型号', minWidth: '140', field: 'type' },
    { title: '终端损失(万元)', width: '140', field: 'machineLoss' },
    { title: '原料损失(万元)', width: '140', field: 'materialLoss' },
    { title: '产线功率(kW)', width: '140', field: 'machinePower' },
    {
       title: '操作',fixed: 'right',
      align: 'center',
      render: 'buttons',
      minWidth: '230',
    
      buttons: [
        {
          name: 'productSetting',
          title: '元器件管理',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: async row => {
            machineDetail.value.open('元器件管理', row)
          }
        },
        {
          name: 'update',
          title: '编辑',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            machinePopup.value.open('修改终端', row)
          }
        },
        {
          name: 'update',
          title: '删除',
          type: 'danger',
          icon: 'el-icon-Delete',
          render: 'confirmButton',
          popconfirm: {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            confirmButtonType: 'danger',
            title: '确定删除吗？'
          },
          click: row => {
            deleteSgMachine(row.id).then(res => {
              ElMessage.success('删除成功')
              tableStore.index()
            })
          }
        }
      ]
    }
  ],
  beforeSearchFun: () => {
    for (let key in tableStore.table.params) {
      if (tableStore.table.params[key] === '') {
        delete tableStore.table.params[key]
      }
    }

  }
})


const getTableData = async () => {
  //根据用户查询下面所有的生产线，默认根据第一个生产线获取下面所有终端
  await querySgProductLineByUserId(query.id).then(res => {
    productLineList.value = res.data
    // //如果没有传就用第一个
    if (productLineList.value && productLineList.value.length > 0) {
      if (query.productLineId) {
        tableStore.table.params.productLineId = query.productLineId
      } else {
        tableStore.table.params.productLineId = productLineList.value[0].id
      }

    }
  })
  if (tableStore.table.params.productLineId) {
    tableStore.index()
  } else {
    ElMessage.error('请新增一条生产线')
    tableStore.table.loading = false
  }
}


getTableData()

provide('tableStore', tableStore)


const add = () => {
  if (tableStore.table.params.productLineId) {
    let data = {
      productLineId: tableStore.table.params.productLineId
    }
    machinePopup.value.open('新增终端', data)
  } else {
    ElMessage.error('请新增一条生产线')
  }

}

</script>
