<template>
	<el-row>
		<el-col :span="6">
			<el-card style="height: calc(100vh - 147px);">
				<el-form label-position="right" size="large" label-width="100px" :model="formData" style="max-width: 460px;">
					<el-form-item label="通道">
						<el-select v-model="formData.stationId" style="width: 100%;" filterable placeholder="请选择通道"
							@change="changeStation">
							<el-option v-for="item in bindList" :key="item.stationId" :label="item.stationId"
								:value="item.stationId" />
						</el-select>
					</el-form-item>
					<el-form-item label="单号">
						<el-select v-model="formData.billNo" style="width: 100%;" filterable clearable placeholder="请选择单号"
							@change="changeBill">
							<el-option v-for="item in billList" :key="item.billNo" :label="item.billName" :value="item.billNo" />
						</el-select>
					</el-form-item>
					<el-form-item label="品名">
						<el-select v-model="formData.goodsCode" style="width: 100%;" filterable clearable placeholder="请选择品名"
							@change="changeGoods">
							<el-option v-for="item in goodsList" :key="item.goodsCode" :label="item.goodsName"
								:value="item.goodsCode" />
						</el-select>
					</el-form-item>
					<el-form-item label="号型">
						<el-select v-model="formData.modelCode" style="width: 100%;" filterable clearable placeholder="请选择号型"
							@change="changeModel">
							<el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName"
								:value="item.modelCode" />
						</el-select>
					</el-form-item>
					<el-form-item label="单包数量">
						<el-input-number v-model="formData.amount" :min="0" :precision="0" style="width: 100%;" />
					</el-form-item>
					<div style="text-align: center;">
						<el-button round type="success" @click="automatic" style="width: 45%">自动</el-button>
						<el-button round type="primary" @click="manual" style="width: 45%">手动</el-button>
					</div>
				</el-form>
			</el-card>
		</el-col>
		<el-col :span="18">
			<el-card style="height: calc(100vh - 147px);">
				<el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#000', fontSize: '18px', fontWeight: '600' }"
					:data="bindList" border size="large" style="width: 100%;">
					<el-table-column type="index" label="序号" width="70" align="center" />
					<el-table-column prop="stationId" label="通道号" align="center" />
					<el-table-column prop="state" label="状态" align="center">
						<template #default="scope">
							{{ scope.row.state === 0 ? '自动' : scope.row.state === 1 ? '手动' : '' }}
						</template>
					</el-table-column>
					<el-table-column prop="billName" label="单号" align="center" />
					<el-table-column prop="goodsName" label="品名" align="center" />
					<el-table-column prop="modelName" label="号型" align="center" />
					<el-table-column prop="amount" label="数量" align="center" />
				</el-table>
			</el-card>
		</el-col>
	</el-row>
</template>


<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
	setup() {
		const bindList = ref([])
		const channelList = ref([])
		const billList = ref([])
		const goodsList = ref([])
		const modelList = ref([])
		const formData = ref({
			amount: 1
		})
		const { proxy } = getCurrentInstance()
		const searchData = ref({
			pageNo: 1,
			pageSize: 10
		})
		const total = ref(0)

		const state = reactive({
			url: {
				getBindPage: '/bind/getBindPage',
				getBillPage: '/bill/getBillPage',
				getGoodsPage: '/bill/getGoodsPage',
				getModelPage: '/bill/getModelPage',
				updateBind: '/bind/updateBind'
			}
		});

		function handleCurrentChange(val) {
			searchData.value.pageNo = val
			loadData()
		}


		const loadData = (e) => {
			if (sessionStorage.getItem('storeInfo')) {
				searchData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
				postAction(state.url.getBindPage, searchData.value).then(res => {
					if (res.code !== 99200) return ElMessage.error(res.message);
					bindList.value = res.data.records
					total.value = res.data.totalRows - 0
					if (e) {

					} else {
						if (res.data.records.length > 0) {
							formData.value.stationId = res.data.records[0].stationId
							formData.value.id = res.data.records[0].id
						}
					}
				})
			}
		}

		const loadSelect = () => {
			if (sessionStorage.getItem('storeInfo')) {
				postAction(state.url.getBillPage, { pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode }).then(res => {
					if (res.code !== 99200) return ElMessage.error(res.message);
					billList.value = res.data.records
				})
			}
		}

		function changeStation(value) {
			if (value) {
				formData.value.id = bindList.value.find(i => i.stationId == formData.value.stationId).id
				console.log(formData.value.id)
			}
		}

		function changeBill(value) {
			goodsList.value = []
			formData.value.goodsCode = ''
			modelList.value = []
			formData.value.modelCode = ''
			if (value) {
				formData.value.bizBillNo = billList.value.find(i => i.billNo == formData.value.billNo).bizBillNo
				formData.value.billName = billList.value.find(i => i.billNo == formData.value.billNo).billName
				postAction(state.url.getGoodsPage, { pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode, bizBillNo: formData.value.bizBillNo }).then(res => {
					if (res.code !== 99200) return ElMessage.error(res.message);
					goodsList.value = res.data.records
				})
			}
		}

		function changeGoods(value) {
			modelList.value = []
			formData.value.modelCode = ''
			if (value) {
				formData.value.goodsName = goodsList.value.find(i => i.goodsCode == formData.value.goodsCode).goodsName
				postAction(state.url.getModelPage, { pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode, bizBillNo: formData.value.bizBillNo, goodsCode: value }).then(res => {
					if (res.code !== 99200) return ElMessage.error(res.message);
					modelList.value = res.data.records
				})
			}
		}

		function changeModel(value) {
			if (value) {
				formData.value.modelName = modelList.value.find(i => i.modelCode == formData.value.modelCode).modelName
				formData.value.skuCode = modelList.value.find(i => i.modelCode == formData.value.modelCode).skuCode
			}
		}

		function automatic() {
			formData.value.billNo = ''
			formData.value.goodsCode = ''
			formData.value.modelCode = ''
			formData.value.state = 0
			postAction(state.url.updateBind, formData.value).then(res => {
				if (res.code !== 99200) return ElMessage.error(res.message);
				ElMessage.success(res.message)
				loadData(1)
			})
		}

		function manual() {
			if (!formData.value.billNo) {
				return ElMessage.warning('请选择单号')
			}
			if (!formData.value.goodsCode) {
				return ElMessage.warning('请选择品名')
			}
			if (!formData.value.modelCode) {
				return ElMessage.warning('请选择号型')
			}
			formData.value.state = 1
			postAction(state.url.updateBind, formData.value).then(res => {
				if (res.code !== 99200) return ElMessage.error(res.message);
				ElMessage.success(res.message)
				loadData(1)
			})
		}


		//   loadData()
		loadSelect()
		return {
			...toRefs(state),
			bindList,
			channelList,
			billList,
			goodsList,
			modelList,
			formData,
			searchData,
			total,
			handleCurrentChange,
			changeStation,
			changeBill,
			changeGoods,
			changeModel,
			automatic,
			manual,
			loadData
		}
	},
})
</script>