<template>
  <el-row>
    <el-col :span="16">
      <el-card style="height: calc(50vh - 73.6px);">
        <template #header>
          <div class="card-header">
            <span>计划任务</span>
            <el-button round class="button" type="primary" @click="syncInBill" :loading="loading">入库单接收</el-button>
          </div>
        </template>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="billList" ref="bill" border style="width: 100%;height: 28.5vh;" highlight-current-row @row-click="billClick">
          <el-table-column type="index" label="序号" width="70" align="center"/>
          <el-table-column prop="bizBillNo" label="单据号" align="center"/>
          <el-table-column prop="billName" label="凭证号" align="center" :show-overflow-tooltip="true"/>
          <el-table-column prop="swOrgName" label="收物单位" align="center" :show-overflow-tooltip="true"/>
          <el-table-column prop="percentage" label="进度" align="center">
            <template #default="scope">
              {{scope.row.percentage}}%
            </template>
          </el-table-column>
          <el-table-column prop="activeState" label="状态" align="center">
            <template #default="scope">
              <el-tag size="small" type="success" v-if="scope.row.activeState == 0">空闲</el-tag>
              <el-tag size="small" type="warning" v-if="scope.row.activeState == 1">激活中</el-tag>
              <el-tag size="small" v-if="scope.row.activeState == 2">待上报</el-tag>
              <el-tag size="small" v-if="scope.row.activeState == 3">已上报</el-tag>
            </template>
          </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
            <el-button type="success" size="small" @click="activateBill(scope.row)" v-if="scope.row.activeState == 0" :disabled="lockState">激活</el-button> 
            <el-button type="warning" size="small" @click="deactivate(scope.row)" v-if="scope.row.activeState == 1">解除</el-button> 
            <el-button type="primary" size="small" :disabled="scope.row.activeState !== 2" @click="reportBill(scope.row)">上报</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination
          style="left: 40%;margin-top: 6px;"
          background
          @current-change="handleCurrentChange"
          :current-page="searchData.pageNo"
          :page-size="searchData.pageSize"
          layout="total, prev, pager, next"
          :total="total"
        />
      </el-card>
      <el-card style="height: calc(50vh - 73.6px);">
        <template #header>
          <span>物资列表</span>
        </template>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="goodsList" ref="goods" border style="width: 100%;height: 28.5vh;" highlight-current-row @row-click="goodsClick">
          <el-table-column type="index" label="序号" width="70" align="center"/>
          <el-table-column prop="goodsCode" label="品名代码" align="center"/>
          <el-table-column prop="goodsName" label="品名" align="center"/>
          <el-table-column prop="planAmount" label="计划数量" align="center"/>
          <el-table-column prop="realAmount" label="实际数量" align="center"/>
        </el-table>
        <el-pagination
          style="left: 40%;margin-top: 6px;"
          background
          @current-change="handleCurrentChange1"
          :current-page="searchData1.pageNo"
          :page-size="searchData1.pageSize"
          layout="total, prev, pager, next"
          :total="total1"
        />
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="height: calc(100vh - 147px)">
        <template #header>
          <div style="height: 32px;">
            <span>号型列表</span>
          </div>
        </template>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="modelList" border style="width: 100%;height: 70vh;">
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="modelName" label="号型名称" align="center"/>
          <el-table-column prop="planAmount" label="计划数量" align="center"/>
          <el-table-column prop="realAmount" label="实际数量" align="center"/>
          <el-table-column prop="writeAmount" label="手动修改数量" align="center">
            <template #default="scope">
              <div class="editable-cell">
                <div v-if="editable" class="editable-cell-input-wrapper">  
                  <el-input-number ref='inputs' size="small" style="height: 30px" :value="writeAmount" @change="handleChange" @blur="check" :max="scope.row.planAmount - scope.row.realAmount"/>
                </div>
                <div v-else class="editable-cell-text-wrapper" @dblclick="edit(scope.row)">
                  <span>{{ scope.row.writeAmount }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="left: 36%;margin-top: 6px;"
          background
          @current-change="handleCurrentChange2"
          :current-page="searchData2.pageNo"
          :page-size="searchData2.pageSize"
          layout="total, prev, pager, next"
          :total="total2"
        />
      </el-card>
    </el-col>
  </el-row>
</template>


<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction, getAction } from '@/api/manage'
export default defineComponent({
    setup() {
      const billList = ref([])
      const goodsList = ref([])
      const modelList = ref([])
      const selectBill = ref({})
      const selectGoods = ref({})
      const editable = ref(false)
      const loading = ref(false)
      const lockState = ref(false)
      const writeAmount = ref()
      const itemForm = ref({})
      const { proxy } = getCurrentInstance()
      const searchData = ref({
        pageNo: 1,
        pageSize: 5
      })
      const searchData1 = ref({
        pageNo: 1,
        pageSize: 5
      })
      const searchData2 = ref({
        pageNo: 1,
        pageSize: 10
      })
      const total = ref(0)
      const total1 = ref(0)
      const total2 = ref(0)
      const state = reactive({
        url: {
          getBillPage: '/bill/getBillPage',
          getGoodsPage: '/bill/getGoodsPage',
          getModelPage: '/bill/getModelPage',
          updateItem: '/bill/updateItem',
          reportBill: '/platform/reportInBill',
          activateBill: '/bill/activateBill',
          syncInBill: '/platform/syncInBill'
        },
        storeInfo: {},
        storeCode: ''
      });

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

      function handleCurrentChange1 (val) {
        searchData1.value.pageNo = val
        loadGoods()
      }

      function handleCurrentChange2 (val) {
        searchData2.value.pageNo = val
        loadModel()
      }
      
      const loadData = (arg) => {
        if (sessionStorage.getItem('storeInfo')) {
          searchData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
          searchData.value.type = 'IN'
          postAction(state.url.getBillPage, searchData.value).then(res => {
            if (res.code !== 99200) return ElMessage.error(res.message);
            billList.value = res.data.records
            total.value = res.data.totalRows - 0
            goodsList.value = []
            modelList.value = []
            if (res.data.records.length > 0) {
              // 保证在获取到的单据里面只有一条单据是激活中的  
              res.data.records.find(i => i.activeState == 1) ? lockState.value = true : lockState.value = false
              if (arg) {
                proxy.$refs.bill.setCurrentRow(billList.value.find(i => i.billNo == selectBill.value.billNo))
                loadGoods(1)
              } else {
                proxy.$refs.bill.setCurrentRow(billList.value[0])
                selectBill.value = res.data.records[0]
                loadGoods()
              }
              
            }
          })
        }
      }

      function loadGoods(arg) {
        searchData1.value.storeCode = searchData.value.storeCode
        searchData1.value.bizBillNo = selectBill.value.bizBillNo
        postAction(state.url.getGoodsPage, searchData1.value).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          goodsList.value = res.data.records
          total1.value = res.data.totalRows - 0
          if (res.data.records.length > 0) {
            if (arg) {
              proxy.$refs.goods.setCurrentRow(goodsList.value.find(i => i.goodsCode == selectGoods.value.goodsCode))
            } else {
              proxy.$refs.goods.setCurrentRow(goodsList.value[0])
              selectGoods.value = res.data.records[0]
            }
            loadModel()
          }
        })
      }

      function loadModel() {
        searchData2.value.storeCode = searchData.value.storeCode
        searchData2.value.bizBillNo = selectBill.value.bizBillNo
        searchData2.value.goodsCode = selectGoods.value.goodsCode
        postAction(state.url.getModelPage, searchData2.value).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          modelList.value = res.data.records
          total2.value = res.data.totalRows - 0
        })
      }

      function billClick(row) {
        selectBill.value = row
        loadGoods()
      }

      function goodsClick(row) {
        selectGoods.value = row
        loadModel()
      }

      function edit(row) {
        proxy.editable = true;
        itemForm.value = row
        proxy.$nextTick((x) => { 
          if (proxy.$refs.inputs) {
            proxy.$refs.inputs.focus();
          }
        })
      }

      function handleChange(e) {
        writeAmount.value = e
        itemForm.value.writeAmount = e
      }
      
      // 手动修改数量
      function check() {
        proxy.editable = false;
        itemForm.value.bizBillNo = selectBill.value.bizBillNo
        itemForm.value.storeCode = searchData.value.storeCode
        postAction(state.url.updateItem, itemForm.value).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          ElMessage.success(res.message)
          loadData(1)
        })
      }
      
      // 上报单据
      function reportBill(row) {
        getAction(state.url.reportBill, {storeCode: searchData.value.storeCode, billNo: row.billNo}).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          ElMessage.success(res.message)
          loadData()
        })
      }
      
      // 激活单据
      function activateBill(row) {
        row.activeState = 1
        postAction(state.url.activateBill, row).then(res => {
          if (res.code !== 99200) {
            row.activeState = 0
            return ElMessage.error(res.message);
          }
          ElMessage.success(res.message)
          searchData.value.pageNo = 1
          loadData(1)
        })
      }
      
      // 解除激活
      function deactivate(row) {
        row.activeState = 0
        postAction(state.url.activateBill, row).then(res => {
          if (res.code !== 99200) {
            row.activeState = 1
            return ElMessage.error(res.message);
          }
          ElMessage.success(res.message)
          searchData.value.pageNo = 1
          loadData(1)
        })
      }
      
      // 同步单据
      function syncInBill() {
        loading.value = true
        getAction(state.url.syncInBill, {storeCode: searchData.value.storeCode}).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          ElMessage.success(res.message)
          loading.value = false
          loadData()
        })
      }

    //   loadData()
      return {
        ...toRefs(state),
        billList,
        goodsList,
        modelList,
        selectBill,
        selectGoods,
        searchData,
        searchData1,
        searchData2,
        total,
        total1,
        total2,
        editable,
        writeAmount,
        itemForm,
        lockState,
        handleCurrentChange,
        handleCurrentChange1,
        handleCurrentChange2,
        billClick,
        goodsClick,
        handleChange,
        edit,
        check,
        reportBill,
        loadData,
        syncInBill,
        activateBill,
        deactivate,
        loading
      }
    },
})
</script>


<style scoped>
.editable-cell {
  position: relative;
}
.editable-cell-text-wrapper {
  padding: 4px 5px 5px 5px;
  cursor: pointer;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>