<script setup lang="ts">
import {
	RepairWorkOrder_List,
	RepairWorkOrder_Del,
	RepairWorkOrder_Finish,
} from '@/api/RepairWorkOrder/index'
import { ref, reactive, nextTick } from 'vue'
import Upload from '@/components/Upload/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import TableBase from '@/components/TableBase/index.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {Edit, Delete, Plus, View, Check, Finished} from '@element-plus/icons-vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import ImageCom from '@/components/Image/index.vue'
import RepairWorkOrderForm from './RepairWorkOrderForm.vue'
import { useTablePublic,options3 } from '@/hooks/useTablePublic'
import {Project_Approval} from "@/api/project";
import {percentage_Remit} from "@/api/mypercentage";


const isNew = ref(true)
const formLabelWidth = ref('100px')
const ruleFormRef = ref<FormInstance>()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
const repairWorkOrderFormRef = ref<InstanceType<typeof RepairWorkOrderForm> | null>(null)
const { resetForm, globalStore, searchOnTableList, updateOnTableList } = useTablePublic()

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 60 },
  { prop: 'T_state', label: '状态' , name: 'T_state', width: 100 },
  { prop: 'T_delivery_name', label: '交付人' },
  { prop: 'T_order_date', label: '下单时间', width: 115},
  { prop: 'T_repair_date', label: '维修时间' , width: 115},
  { prop: 'T_product', label: '产品名称', width: 110 },
  { prop: 'T_model', label: '型号' },
  { prop: 'T_repair_num', label: '维修数量' , width: 110 },
  { prop: 'T_source', label: '设备来源' , width: 110 },
  { prop: 'T_repair_reason', label: '维修原因', width: 110  },
  { prop: 'T_receive_name', label: '接收人' },
  { prop: 'T_return_name', label: '归还人' },
  { prop: 'T_return_date', label: '归还时间', width: 110  },
  { prop: 'T_return_product', label: '产品名称(更改类型)' , width: 180 },
  { prop: 'T_return_model', label: '型号(更改类型)' , width: 130 },
  { prop: 'T_return_num', label: '返回数量' , width: 110 },
  { prop: 'T_staging_num', label: '暂存数量 ' , width: 110 },
  { prop: 'T_scrap_num', label: '报废数量 ', width: 110  },
  { prop: 'T_malfunction_reason', label: '故障原因 ' , width: 110 },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

const options = [
	{ name: '已派发', id: 1 },
	{ name: '维修中', id: 2 },
	{ name: '已归还', id: 3 },
	{ name: '已完结', id: 4 },
]


const RepairWorkOrderDelete = (row: any) => {
  ElMessageBox.confirm('您确定要删除该维修工单吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await RepairWorkOrder_Del({
        User_tokey: globalStore.GET_User_tokey,
        T_id: row.Id
      })
      if (res.Code === 200) {
        ElMessage.success('删除成功！')
        nextTick(() => updateOnTableList(TableRef.value))
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}
const RepairWorkOrderFinish = async (row: any) => {
	const reslut: any = await RepairWorkOrder_Finish({ User_tokey: globalStore.GET_User_tokey,T_id: row.Id})
	console.log('打款', reslut, row)
	if (reslut.Code == 200 && reslut.Msg == 'ok!') {
		searchOnTableList(TableRef.value)
		ElMessage.success('提交成功')
	}
}

// 搜索
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_state: ''
})

const openRepairWorkOrderFormDrawer = (type: string, row?: any) => repairWorkOrderFormRef.value?.repairWorkOrderFormOpen(type, row)

</script>

<template>
  <div class="RepairWorkOrder-list">
    <TableBase ref="TableRef" :columns="columns" :requestApi="RepairWorkOrder_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="6" :lg="8" :md="10">
              <span class="inline-flex items-center">关键字：</span>
              <el-input
                v-model="initParam.T_name"
                type="text"
                class="w-50 m-2"
                placeholder="按产品名称、产品型号搜索"
                @change="searchOnTableList(TableRef)"
              />
            </el-col>
            <el-col :xl="10" :md="12">
              <span class="inline-flex items-center">状态：</span>
              <el-select v-model="initParam.T_state" class="w-50 m-2" clearable placeholder="请选择状态~">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button type="primary" @click="searchOnTableList(TableRef)">搜索</el-button>
            </el-col>
			  <el-col :xl="6" :md="2" class="btn">
				  <el-button type="primary" @click="openRepairWorkOrderFormDrawer('new')">下发工单</el-button>
			  </el-col>
          </el-row>
        </div>
      </template>
      <template #T_state="{ row }">
		  <el-tag v-if="row.T_state === 1" type="info" effect="dark"> 已派发 </el-tag>
		  <el-tag v-if="row.T_state === 2" type="warning" effect="dark"> 维修中 </el-tag>
		  <el-tag v-if="row.T_state === 3" type="primary" effect="dark"> 已归还 </el-tag>
		  <el-tag v-if="row.T_state === 4" type="success" effect="dark"> 已完结 </el-tag>
	  </template>
      <template #right="{ row }">
        <el-button link type="primary" size="small" :icon="View" @click="openRepairWorkOrderFormDrawer('view', row)">详情</el-button>
        <el-button link type="primary" size="small" :icon="Edit" @click="openRepairWorkOrderFormDrawer('edit', row)">编辑</el-button>
        <el-button link type="success" size="small" :icon="Check" @click="RepairWorkOrderFinish(row)">完结</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="RepairWorkOrderDelete(row)">删除</el-button>
      </template>
    </TableBase>
    <RepairWorkOrderForm ref="repairWorkOrderFormRef" projectName="repairWorkOrder" @onTableList="updateOnTableList(TableRef)" />

  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';
.tooltip-content {
  max-width: 500px;
  overflow-y: auto;
}
.RepairWorkOrder-list {
  @include f-direction;
  .input-suffix {
    width: 100%;
    .inline-flex {
      white-space: nowrap;
    }
    .btn {
      display: flex;
      justify-content: end;
    }
    .w-50 {
      width: 12.5rem;
    }
  }
}
</style>
