<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form inline>
        <el-row :span="24">
          <el-col :span="5">
            <el-form-item label="物料类别">
              <el-select v-model="query.wuzibm" placeholder="请选择类别" clearable style="width: 200px;" filterable>
                <el-option v-for="item in typeList" :key="item.itemCd" :label="item.itemNm"
                           :value="item.itemCd"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="供货单位">
              <el-select v-model="query.gonghuodwid" placeholder="请选择供货单位" clearable style="width: 200px" filterable>
                <el-option v-for="item in gongsiList" :key="item.tradePartnerCode" :label="item.tradePartnerName"
                           :value="item.tradePartnerCode"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="收货单位">
              <el-select v-model="query.shouhuodwid" placeholder="请选择收货单位" clearable style="width: 200px" filterable>
                <el-option v-for="item in gongsiList" :key="item.tradePartnerCode" :label="item.tradePartnerName"
                           :value="item.tradePartnerCode"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量日期" >
              <el-date-picker v-model="query.suttleTime" clearable type="daterange" align="right" unlink-panels
                              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                              style="width: 300px;" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button type="primary" @click="show" link>
              高级查询
              <el-icon v-if="showA">
                <ArrowUp/>
              </el-icon>
              <el-icon v-else>
                <ArrowDown/>
              </el-icon>
            </el-button>
          </el-col>
          <el-col :span="1">
            <el-button type="primary" @click="reset" link>重置</el-button>
          </el-col>
        </el-row>

        <el-row :span="24" v-if="showA">
          <el-col :span="5">
            <el-form-item label="计量号" prop="id">
              <el-input placeholder="请输入计量号" v-model="query.jlh" clearable style="width: 200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="组批号" prop="zpNo">
              <el-input placeholder="请输入组批号" v-model="query.zph"clearable style="width: 200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计划号" prop="planNumber">
              <el-input placeholder="请输入计划号" v-model="query.planNumber"clearable style="width: 200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="合同号" prop="contractNo">
              <el-input placeholder="请输入合同号" v-model="query.htbh" clearable style="width: 200px;"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :span="24" v-if="showA">
        <el-col :span="5">
          <el-form-item label="车号" >
            <el-input placeholder="请输入车号" v-model="query.carno"clearable style="width: 200px;"></el-input>
          </el-form-item>
        </el-col>
        </el-row>
      </el-form>
    </el-card>
    <ButtonBar area="top" @search="handleSearch" @send="handleSend"></ButtonBar>
    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" fixed></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jlh" label="计量号" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="suttleTime" label="计量时间" width="180" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="carno" label="车号" width="120" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>

        <el-table-column prop="planNumber" label="计划号" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="htbh" label="合同号" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="wuzimc" label="物料名称" width="120" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="fhdwmc" label="供应商名称" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="shdwmc" label="收货商名称" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="mzh" label="毛重" width="80" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="pzh" label="皮重" width="80" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="jzh" label="净重" width="80" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="zph" label="组批号" width="150" header-align="center" align="center"
                         show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="factName" label="厂家" width="200" header-align="center" align="center"
            show-overflow-tooltip></el-table-column> -->
      </el-table>
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                     background="background" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import ButtonBar from "@/components/ButtonBar.vue";
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue'
import style from '@/tools/style'
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowDown} from "@element-plus/icons-vue";


onMounted(() => {
  queryGS()
  queryType()
  handleSearch()
})

// 查询所有公司
const gongsiList = ref([])
const queryGS = () => {
  gongsiList.value = []
  var url = 'sci/Weituogl/queryGS'
  var param = {}
  proxy.$axios.get(url, param).then(resp => {
    if (resp.data.code == '0') {
      gongsiList.value = resp.data.data
      console.log(gongsiList.value)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }

  })
}

// 查询所有的物料类别
const typeList = ref([])
const queryType = () => {
  var url = 'sci/platform/queryType'
  var param = {}
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      typeList.value = response.data.data
      console.log(response.data.data)
      console.log(typeList.value)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const {proxy} = getCurrentInstance()
const cardBodyStyle = ref(style.card)
const dialogVisible = ref(false)
const form = ref({})
const tableData = ref([])
const query = ref({
  wuzibm: '',
  gonghuodwid:'',
  shouhuodwid:'',
  carno: '',
  jlh: '',
  planNumber: '',
  zph: '',
  contractNo: '',
  suttleTime: '',
  htbh:''
})

const showA = ref(false)
const show = () => {
  showA.value = !showA.value
}

/**
 * 重置查询条件
 */
const reset = () => {
  Object.keys(query.value).map(key => {
    query.value[key] = ''
  })
}


// ==========按钮功能===========
// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}
// 发送计量
const handleSend = () => {
  console.log('发送计量信息')
  if (multipleSelection.value.length < 1) {
    ElMessage.warning('请至少选择一条信息')
    return
  }
  var jilianghs = []
  multipleSelection.value.forEach((item, index) => {
    jilianghs.push(item.jlNo)
  })
  console.log(jilianghs)
  var url = 'sci/carEntry/sendJL'
  var param = {
    jilianghs: JSON.stringify(jilianghs)
  }
  proxy.$axios.post(url, param).then(response => {
    if (response.data.code == '0') {
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
      getTableData()
    } else {
      ElMessage({
        type: 'error',
        message: '操作失败!' + response.data.msg
      })
    }
  })
}
// 批量删除
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val)
}
const handleRemoveBatch = () => {
  console.log('handleRemoveBatch')
  if (multipleSelection.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据!'
    })
    return
  }

  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    var ids = []
    multipleSelection.value.forEach((item, index) => {
      ids.push(item.id)
    })
    /* var url = 'cot/SignRequest/removeBatch'*/
    var param = {
      ids: JSON.stringify(ids)
    }
    proxy.$axios.post(url, param).then(response => {
      if (response.data.code == '0') {
        ElMessage({
          type: 'success',
          message: '操作成功!',
        });
        getTableData()
        dialogVisible.value = false
      } else {
        ElMessage({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确定删除本条记录?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        // 假数据
        const fakeData = {
          code: 0,
          msg: '删除成功'
        };

        // 模拟接口响应
        if (fakeData.code == 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getTableData();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败' + fakeData.msg,
          });
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        });
      });
};


// ==========查询数据===========
const getTableData = () => {
  var url = 'sci/carEntry/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      // console.log(response.data.data.records[0])

      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
};

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([ 10, 20, 30, 40])
const pageSize = ref(10)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}
</script>

<style scoped></style>