<template>
  <div class="unload">
    <!-- 查询区域 -->
    <el-form style="padding: 15px;" :model="searchForm" :inline="true">
      <el-form-item prop="baseSpot1Name" label="毛重计量点">
        <el-select
          v-model="searchForm.baseSpot1Name"
          clearable
          filterable
          collapse-tags
          size="small"
          style="width: 120px"
        >
          <el-option
            v-for="item in spotNameList"
            :key="item.baseSpotNo"
            :label="item.baseSpotName"
            :value="item.baseSpotName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="matterNo" label="物资名称">
        <el-select
          v-model="searchForm.matterNo"
          clearable
          filterable
          collapse-tags
          size="small"
          style="width: 120px"
        >
          <el-option
            v-for="item in matList"
            :key="item.matterNo"
            :label="item.matterName"
            :value="item.matterNo"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="valueFlag" label="数据状态">
        <el-select
          v-model="searchForm.valueFlag"
          clearable
          filterable
          collapse-tags
          size="small"
          style="width: 120px"
        >
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="searchData"
          type="primary"
          size="mini"
          v-privilege="activeMenu + 'QUERY'"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据展示区域 -->
    <div style="padding: 10px">
      <el-table
        id="unloadTable"
        v-loading="dataLoading"
        ref="unloadTable"
        highlight-current-row
        border
        :height="tableHeight"
        :data="unloadLimitData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          label="状态"
          min-width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{
              row.valueFlag - 0 === 0
                ? "待处理"
                : row.valueFlag - 0 === 1
                ? "已处理"
                : "作废"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="truNo"
          label="预报编号"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="carNo"
          label="车号"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="matterName"
          label="物资名称"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="grossWeightTime"
          label="毛重时间"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="baseSpotName"
          label="计量点"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="loadPointName"
          label="卸货地点"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="loadTime"
          label="卸货时间/分钟"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="loadTime"
          label="卸货截止时间"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="loadTime"
          label="卸货操作时间"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          prop="loadTime"
          label="卸货时间/分钟"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="190"
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="unloadCheck(row)"
              >允许卸货</el-button
            >
            <el-button type="primary" size="mini" @click="recoverData(row)"
              >启用</el-button
            >
            <el-button type="danger" size="mini" @click="dropData(row)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="common-foot-style">
          <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="pageForm.pageNum"
            :page-sizes="[100, 200, 500, 800, 1000]"
            :page-size="pageForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            background
          >
          </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.getMatterNameItem();
    this.getSpotNameItem();
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
    this.searchData();
  },
  data () {
    return {
      searchForm: {
        baseSpot1Name: '',
        matterNo: '',
        valueFlag: ''
      },
      statusList: [
        {
          id: '0',
          value: '待处理'
        },
        {
          id: '1',
          value: '已处理'
        },
        {
          id: '2',
          value: '作废'
        }
      ],
      pageForm: {
        pageSize: 100,
        pageNum: 1,
        total: 0
      },
      matList: [],
      spotNameList: [],
      tableHeight: 500,
      dataLoading: false,
      unloadLimitData: [],
      activeMenu: '',
      meterTypeNameItem: []
    }
  },
  methods: {
    async searchData (flag = 1) {
      if (flag === 1) {
        this.pageForm.pageNum = 1;
      }
      let sqlStr = `baseSpotName=${this.searchForm.baseSpot1Name}&matterNo=${this.searchForm.matterNo}&valueFlag=${this.searchForm.valueFlag}`
      const {data: res} = await this.axios.get(`pass/systemBase/v1/meterbaseunloadtimecontrols/selectByParametersDto/?${sqlStr}`)
      console.log(res)
      if (res && res.list) {
        this.unloadLimitData = [...res.list]
        this.pageForm.total = res.total - 0
      } else {
        this.unloadLimitData = []
        this.pageForm.total = 0
      }
    },
    getMatterNameItem () {
      this.axios.get('pass/systemBase/v1/meterbasematterinfos/noPage' + '?validFlag=1')
        .then(res => {
          this.matList = res.data;
        })
    },
    getSpotNameItem () {
      this.axios.get('pass/systemBase/v1/meterbasespotinfos/noPage' + '?spotTypeName=汽车衡')
        .then(res => {
          this.spotNameList = res.data;
        })
    },
    tableRowClassName (row, index) {
      if (row.valueFlag - 0 === 2) {
        return 'error-row2'
      }
      return ''
    },
    async unloadCheck (row) {
      if (row.valueFlag - 0 !== 0) return this.$message.error('该条数据记录状态不是未处理状态，无法进行允许卸货操作')
      let confirm = await this.$confirm('确认要允许这个车辆进行卸货吗？').catch(() => 'cancel')
      if (confirm === 'cancel') return
      const data = await this.axios.post('pass/systemBase/v1/meterbaseunloadtimecontrols/update', [{unloadTimeNo: row.unloadTimeNo, valueFlag: '1'}], {individualType: 'json'})
      if (data.status === 'succed') {
        this.$message.success('操作成功')
      } else {
        this.$message.error(data.message)
      }
    },
    async recoverData (row) {
      if (row.valueFlag - 0 !== 2) return this.$message.error('该条数据记录状态不是作废状态，无法进行启用操作')
      let confirm = await this.$confirm('确认要启用这条记录吗？').catch(() => 'cancel')
      if (confirm === 'cancel') return
      const data = await this.axios.post('pass/systemBase/v1/meterbaseunloadtimecontrols/update', [{unloadTimeNo: row.unloadTimeNo, valueFlag: '1'}], {individualType: 'json'})
      if (data.status === 'succeed') {
        this.$message.success('启用成功')
        this.searchData()
      } else {
        this.$message.error(data.message)
      }
    },
    async dropData (row) {
      if (row.valueFlag - 0 !== 0) return this.$message.error('该条数据记录状态不是未处理状态，无法进行作废操作')
      let confirm = await this.$confirm('确认要作废该条记录吗？').catch(() => 'cancel')
      if (confirm === 'cancel') return
      const data = await this.axios.post('pass/systemBase/v1/meterbaseunloadtimecontrols/update', [{unloadTimeNo: row.unloadTimeNo, valueFlag: '2'}], {individualType: 'json'})
      if (data.status === 'succeed') {
        this.$message.success('作废成功')
        this.searchData()
      } else {
        this.$message.error(data.message)
      }
    },
    pageSizeChange (size) {
      this.pageForm.pageSize = size
      this.searchData()
    },
    pageCurrentChange (index) {
      this.pageForm.pageNum = index
      this.searchData(2)
    }
  }
}
</script>
<style>
</style>