<script lang="ts" setup>
import { addOperatorAPI } from '@/api/operator'
import { useAppStore, useOperatorStore } from '@/store'

interface IFormData {
  inventoryType: string
  inventoryNum: number
  operatorId: string
}

definePage({
  style: {
    navigationBarTitleText: '新增部件',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})
const appStore = useAppStore()
const isSubmit = ref(false)
const operatorStore = useOperatorStore()
const inventory_type_list = ref([])
const operatorAllList = ref<any>([])
const form = ref<any>(null)
const formData = reactive<IFormData>({
  inventoryType: '',
  inventoryNum: 1,
  operatorId: '',
})
const rules = {
  inventoryType: {
    type: 'string',
    required: true,
    message: '请选择部件类型',
    trigger: ['change', 'blur'],
  },
  inventoryNum: {
    type: 'number',
    required: true,
    message: '请输入库存数量',
    trigger: ['change', 'blur'],
  },
  operatorId: {
    type: 'string',
    required: true,
    message: '请选择运营商',
    trigger: ['change', 'blur'],
  },
}

// 码表格式转化
function inventoryChange() {
  const dic = appStore.getDictByCode('inventory_type')
  inventory_type_list.value = dic.map((item: any) => ({
    text: item.dicValueName,
    value: item.dicValue,
  }))
}

// 获取运营商列表
async function getOperatorList() {
  operatorAllList.value = await operatorStore.getOperatorList(true)
}

// 初始化表单数据
function initForm() {
  formData.inventoryType = ''
  formData.inventoryNum = 1
  formData.operatorId = ''
}

// 提交
async function submit() {
  try {
    isSubmit.value = true
    const status = await form.value.validate()

    if (status) {
      const res = await addOperatorAPI({
        inventoryType: formData.inventoryType,
        inventoryNum: formData.inventoryNum,
        operatorId: formData.operatorId,
      })
      uni.showToast({
        title: '新增成功',
        icon: 'success',
      })
      initForm()
      isSubmit.value = false
    }
  }
  catch (err) {
    isSubmit.value = false
  }
}

inventoryChange()
getOperatorList()
</script>

<template>
  <view class="container">
    <view class="bg" />
    <view class="container_inner">
      <uv-form ref="form" label-position="left" :model="formData" :rules="rules" label-width="80">
        <uv-form-item label="库存类型" prop="inventoryType" required>
          <uni-data-select
            v-model="formData.inventoryType"
            :localdata="inventory_type_list"
            placeholder="请选择库存类型"
            clear
          />
        </uv-form-item>
        <uv-form-item label="库存数量" prop="inventoryNum" required>
          <uni-number-box v-model="formData.inventoryNum" :min="1" background="#3c9cff" color="#fff" />
        </uv-form-item>
        <uv-form-item label="运营商" prop="operatorId" required>
          <uni-data-select
            v-model="formData.operatorId"
            :localdata="operatorAllList"
            placeholder="请选择运营商"
            clear
          />
        </uv-form-item>
      </uv-form>
    </view>
    <view class="submit_bar">
      <uv-button type="primary" text="新增部件" :loading="isSubmit" @click="submit" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;

  .bg {
    position: fixed;
    z-index: -1;
    width: 100%;
    background: #f3f3f3;
    height: 100%;
  }

  .container_inner {
    padding: 30rpx;
  }

  .submit_bar {
    position: fixed;
    bottom: 100rpx;
    width: calc(100% - 60rpx);
    padding: 30rpx;
  }
}
</style>
