<script lang="ts" setup>

import { onMounted, ref } from 'vue'
import {areaList} from '@vant/area-data';
import { deleteAction, getAction, postAction, putAction } from '../../common/http';
import { showConfirmDialog, showToast } from 'vant';

const showPop = ref(false)
const list= ref([] as any[])
const form = ref({} as any)
const areaShow = ref(false)

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

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

const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  showPop.value=true
  form.value={}
}
const edit = (item:any) =>{
  form.value=JSON.parse(JSON.stringify(item))
  form.value.active=item.active?'true':'false'
  form.value.addressInfo=item.provence?item.provence+'/'+item.city+'/'+item.district:''
  showPop.value=true
}
const onSubmit =()=>{
	if(form.value.id){
		putAction('/warehouse',form.value).then((res:any)=>{
			if(res.code===200){
				form.value={}
				showPop.value=false
				showToast('编辑成功！')
				init()
			}
		})
	}else{
		postAction('/warehouse',form.value).then((res:any)=>{
			if(res.code===200){
				form.value={}
				showPop.value=false
				showToast('提交成功！')
				init()
			}
		})
	}
}
const confirm = (val:any) =>{
	form.value.provence=val.selectedOptions[0].text
	form.value.city=val.selectedOptions[1].text
	form.value.district=val.selectedOptions[2].text
	form.value.addressInfo=val.selectedOptions[0].text+'/'+val.selectedOptions[1].text+'/'+val.selectedOptions[2].text
	cancel()
}
const cancel = () =>{
	areaShow.value=false
}
</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 class="grid-item">操作</view>
      </view>
      <view class="grid-container" v-for="(item,index) in list" :key="index">
        <view class="grid-item">{{item.id}}</view>
		 <view class="grid-item">{{item.name}}</view>
        <view class="grid-item">{{item.maximumCapacity}}</view>
        <view
          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
          style="color: red" @click="del(item)">删除
        </span></view>
      </view>
    </view>
  </view>

  <van-popup v-model:show="showPop" style="width: 80%" round>
    <view>
      <h3 style="text-align: center">{{form.id?'编辑':'新增'}}</h3>
	  <van-form @submit="onSubmit">
		  <van-cell-group inset>
		    <van-field
		      v-model="form.name"
		      name="仓库名称"
		      label="仓库名称"
		      colon
		      label-width="5em"
		      :rules="[{ required: true, message: '请填写' }]"
		    />
		  		<van-field
		  		  v-model="form.maximumCapacity"
		  		  name="最大库存"
		  		  label="最大库存"
		  		  colon
		  		  label-width="5em"
		  		/>
		  		<van-field
		  		  v-model="form.contactsName"
		  		  name="联系人"
		  		  label="联系人"
		  		  colon
		  		  label-width="5em"
		  		/>
		  		<van-field
		  		  v-model="form.contactsMobile"
		  		  name="联系电话"
		  		  label="联系电话"
		  		  colon
		  		  label-width="5em"
		  		/>
		  		<van-field
		  		  v-model="form.addressInfo"
		  		  name="地址信息"
		  		  label="地址信息"
		  		  colon
				  readonly
				  @click="areaShow=true"
		  		  label-width="5em"
		  		/>
		  		<van-field
		  		  v-model="form.address"
		  		  name="详细信息"
		  		  label="详细信息"
		  		  colon
		  		  label-width="5em"
		  		/>
		  		<van-field name="状态" label="状态" colon label-width="5em"
		  		 :rules="[{ required: true, message: '请选择' }]"
		  		 class="nonBom">
		  		  <template #input>
		  		    <van-radio-group v-model="form.active" direction="horizontal">
		  		      <van-radio name="true">启用</van-radio>
		  		      <van-radio name="false">禁用</van-radio>
		  		    </van-radio-group>
		  		  </template>
		  		</van-field>
		  </van-cell-group>
		  <view class="a-c">
		    <van-button type="danger" @click="showPop=false">取消</van-button>
		    <van-button type="primary" native-type="submit">确认</van-button>
		  </view>
	  </van-form>
    </view>
  </van-popup>
  <!-- 地区选择 -->
  <van-popup v-model:show="areaShow" round position="bottom">
	  <van-area title="选择" 
	  :area-list="areaList" 
	  @confirm="confirm" 
	  @cancel="cancel"
	  />
  </van-popup>
</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 3fr 2fr 2fr;
      .grid-item{
        border: 1px solid #f2f2f2;
        text-align: center;
        ::v-deep(.van-cell){
          padding: 0 5px;
        }
      }
    }
    .card{
      margin: 10px 15px;
      padding: 5px;
      border: 1px solid #02a7f0;
      border-radius: 10px;
    }
  }
}
.a-b{
  display:flex;
  margin-bottom:10px;
  ::v-deep .van-cell{
    padding: 0;
  }
}
::v-deep .van-field {
  font-size: 16px;
}
::v-deep .van-field__control {
  border-bottom: 1px solid #d7d7d7;
  font-size: 16px;
}
.nonBom{
	::v-deep .van-field__control {
	  border-bottom: none;
	}
}
::v-deep .van-field__label {
  text-align: end;
}
.a-c{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin:15px;
  ::v-deep .van-button--normal {
    padding: 5px;
    height: 30px;
  }
}
</style>