<script lang="ts" setup>

import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { deleteAction, getAction } from '../../common/http';
import { showConfirmDialog, showToast } from 'vant';

const list= ref([] as any[])

onShow(()=>{
	init()
})

const init=()=>{
	getAction('/process').then((res:any)=>{
		if(res.code===200){
			list.value=res.data
		}
	})
}

const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  uni.navigateTo({
  	url:'/pages/maintenance/p-details'
  })
}

const del = (item : any) => {
		showConfirmDialog({
			title: '提示',
			message: '是否确认删除？',
		}).then(() => {
			let url = '/process/' + item.id
			deleteAction(url).then((res : any) => {
				if (res.code === 200) {
					init()
					showToast('删除成功！')
				}
			})
		})
			.catch(() => {
				// on cancel
			});
	}
</script>

<template>
<view class="flex">
    <van-nav-bar
      title="工序项维护"
      left-text="返回"
      left-arrow
      right-text="新增"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  <view class="content">
    <view class="grid-container">
      <view class="grid-item">工序</view>
      <view class="grid-item">序号</view>
      <view class="grid-item">操作</view>
    </view>
    <view class="grid-container" v-for="(item,index) in list" :key="index">
      <view class="grid-item">{{item.name}}</view>
      <view class="grid-item">{{item.serialNum}}</view>
      <view class="grid-item" style="color: red" @click="del(item)">删除</view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    padding: 0 10px;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .grid-item{
        text-align: center;
        border: 1px solid #f2f2f2;
        ::v-deep(.van-cell){
          padding: 0 5px;
        }
      }
    }
  }
}
</style>