<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>