<template>
  <view class="container" >
   <scroll-view
        scroll-y
        :scroll-top="scrollTop"
        style="height: auto; min-height: 200px;"
        >
        <uni-forms v-model="form" label-width="150rpx"  ref="customForm" :rules="customRules" style="height: 60%;">
        <uni-forms-item label="保管部门" required>
            <searchSelect v-model="form.keep_dept" :apiobjs="deptApiobj" v-if="mode== 'add'"/>
					<span v-else>{{form.keeper_name}}</span>
        </uni-forms-item>

        <uni-forms-item label="保管人" required>
            <searchSelect v-model="form.keeper" :apiobjs="userApiobj" v-if="mode== 'add'"/>
					<span v-else>{{form.keeper_name}}</span>
        </uni-forms-item>

        <uni-forms-item label="启用日期" required>
            <uni-datetime-picker
            type="date"
            v-model="form.start_date"
            :disabled="mode !== 'add'"
            />
        </uni-forms-item>
        </uni-forms>
    
        <view
            v-for="(item, index) in form.items"
            :key="item._key"
            class="items-box"
        >
            <uni-forms
                :model="item"
                label-width="150rpx"
                > 
            <view class="item-title">
                {{ index + 1 }}
            </view>
            <uni-forms-item label="资产类别" required>
                <searchSelect
                    v-model="item.cate"
                    v-model:label="item.cate_name"
                    :apiobjs="cateApiobj"
                />
            </uni-forms-item>
            <uni-forms-item label="资产名称" required>
            <uni-easyinput
                v-model="item.name"
                placeholder="请输入资产名称"
            />
            </uni-forms-item>

            <uni-forms-item label="规格型号">
            <uni-easyinput
                v-model="item.specification"
                placeholder="请输入规格型号"
            />
            </uni-forms-item>

            <uni-forms-item label="数量" required>
            <uni-number-box
                v-model="item.quantity"
                :min="1"
            />
            </uni-forms-item>

            <uni-forms-item label="可用年限">
            <uni-number-box
                v-model="item.canuse_year"
                :min="1"
            />
            </uni-forms-item>

            <uni-forms-item label="资产原值" required>
            <uni-easyinput
                v-model="item.original_value"
                type="number"
                placeholder="请输入资产原值"
            />
            </uni-forms-item>

            <uni-forms-item label="供应商">
            <searchSelect
                v-model="item.supplier"
                v-model:label="item.supplier_name"
                :apiobjs="supplierObj"
                placeholder="请选择供应商"
            />
            </uni-forms-item>

            <uni-forms-item label="存放地点">
            <uni-easyinput
                v-model="item.storage_location"
                placeholder="请输入存放地点"
            />
            </uni-forms-item>
        </uni-forms>
        <view class="item-action">
            <button
            type="warn"
            size="mini"
            @click="removeItem(index)"
            >
            删除
            </button>
        </view>
        </view>
    <!-- 底部操作 -->
    <view class="footer">
        <!-- 入库明细 -->
        <button
            type="primary"
            @click="addItem"
            style="margin-bottom: 20rpx"
        >
            新增明细
        </button>
        <button
            v-if="mode === 'edit'"
            type="warn"
            @click="handleDel"
            :loading="saveLoading"
        >
            删除
        </button>
        <button
            v-if="mode !== 'show'"
            type="primary"
            @click="handleSave"
            :loading="saveLoading"
        >
            提交审批
        </button>
      <ticketd_b
        v-if="form.ticket_ && mode === 'show'"
        :t_id="form.id"
        :ticket_="form.ticket_"
        :ticket_data="ticket_data"
        @success="$emit('success', mode)"
      />
    </view>

    <ticketd
      v-if="form.ticket_"
      :ticket_="form.ticket_"
      @success="$emit('success')"
    />
    </scroll-view>
  </view>
</template>

<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import searchSelect from "@/components/searchselect.vue"

export default {
  components: { ticketd, ticketd_b, searchSelect },

  props: {
    mode: {
      type: String,
      default: 'show'
    },
    t_id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      mode: this.mode,
      saveLoading: false,
      ticket_data: {},
      userApiobj:this.$api.userList,
      deptApiobj:this.$api.deptList,
      supplierObj:this.$api.supplierList,
      cateApiobj:this.$api.assetCateList,
      scrollTop: 0,
      form: {
        type: '入库',
        items: []
      }
    }
  },

  onLoad() {
    if (this.t_id) {
      this.getTid()
    } else {
      this.mode = 'add'
    }
  },

  methods: {
    addItem() {
      this.form.items.push({
            cate: null,
            cate_name: '',
            name: '',
            specification: '',
            quantity: 1,
            canuse_year: null,
            original_value: '', 
            supplier: null,
            supplier_name: '',
            storage_location: '',
        }),
        this.$nextTick(() => {
            this.scrollTop = this.scrollTop + 1000
        })
    },
    removeItem(index) {
      this.form.items.splice(index, 1)
    },

    async getTid() {
      const res = await this.$api.assetItem(this.t_id)
      this.form = res

      if (
        res.ticket_ &&
        res.ticket_.state_.type === 1 &&
        res.create_by === this.$TOOL.data.get('USER_INFO').id
      ) {
        this.mode = 'edit'
      }
    },

    async handleDel(){
			let that = this;
			await that.$api.assetDelete(that.form.id)
			uni.navigateBack()
		},

    handleSave(){
			let that = this;
			that.$refs.customForm.validate().then(res => {
				that.$api.assetCreate(that.form).then(ress=>{
					uni.navigateBack()
				})
			}).catch(err => {
				console.log('err', err);
			})
		},
  }
}
</script>
<style scoped>
.items-box {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.item-title {
  font-weight: 600;
  margin-bottom: 10rpx;
}

.item-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;
}


.add-btn {
  margin-top: 20rpx;
}


</style>
