<template>
  <div>

    <el-form :model="query" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
      <el-row :gutter="20">
        <!--<el-col :span="8">-->
        <!--  <el-form-item label="当前仓库:" class="query-form-item">-->
        <!--    <invSelect :value.sync="query.invCode" :params.sync="filterBadInv" :changeValue.sync="invChange"/>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
        <el-col :span="10">
          <el-form-item label="采集工位:" class="query-form-item">
            <el-select v-model="query.workplaceCode" clearable placeholder="请选择" filterable @change="changePlace">
              <el-option
                v-for="item in workPlaces"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="业务名称:" class="query-form-item">
            <el-select v-model="query.documentTypeCode" clearable placeholder="请选择" filterable>
              <el-option
                v-for="item in busTypes"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--<el-col :span="10">-->
        <!--  <el-form-item label="编码/名称:" class="query-form-item">-->
        <!--    <el-input v-model="query.busKey" placeholder="请输入业务编号/业务名称" clearable>-->
        <!--    </el-input>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
      </el-row>
    </el-form>


    <div class="top-right-btn">
      <el-button-group>
        <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="chooseCollect">选入</el-button>
      </el-button-group>
    </div>
    <el-divider style="margin: 15px"></el-divider>

    <el-table v-loading="loading" :data="list" style="width: 100%" :row-style="{height: '32px' }"
              highlight-current-row @current-change="handCurrentChange" ref="table"
    >
      <el-table-column type="selection" width="55" :selectable="checkSelectable">
      </el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="采集工位名称 " prop="workplaceName"></el-table-column>
      <el-table-column label="业务类型 " prop="busName"></el-table-column>
      <!--<el-table-column label="备注:" prop="remark" ></el-table-column>-->

    </el-table>

    <pagination
      :total="total"
      :limit.sync="query.limit"
      :page.sync="query.page"
      @pagination="getList()"
    >
    </pagination>


  </div>
</template>

<script>


import { filterListByWorkplace, getWorkBindBusTypes } from '@/api/basic/workPlace/sysWorkplaceDocuments'
import { filterWorkOptimize } from '@/api/basic/workPlace/sysWorkplaceManage'
import { bindCollect } from '@/api/basic/collectPoint/cargowWorkplaceManage'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    workplaceId: {
      type: Object,
      required: true
    },
    collectWorks: {
      type: Array,
      required: true
    }
  },
  components: {},
  data() {
    return {
      Dictionary: false,
      showSearch: true,
      query: {
        workplaceCode: null,
        documentTypeCode: null,
        workPlaceClass: 1,
        page: 1,
        limit: 10
      },
      DeptList: [],
      list: [],
      busTypeList: [],
      busTypeTotal: 0,
      total: 0,
      busQuery: {
        busKey: '',
        workplaceCode: null,
        page: 1,
        limit: 100
      },
      workPlaces: [],
      busTypes: [],
      collectQuery: {
        workplaceCode: null,
        collectWorkCodes: [],
        collectBusTypes: []
      }
    }
  },
  computed: {},
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.busQuery = {
        busKey: '',
        workPlaceClass: 1,
        workplaceCode: null,
        page: 1,
        limit: 10
      },
        this.getList()
    },
    onSubmit() {
      this.busQuery.page = 1
      this.getList()
    },
    // containsObject(collectWorks,row){
    //   return collectWorks.some( collect => {
    //     return collect.workplaceCode === row.workplaceCode && collect.documentTypeCode === row.documentTypeCode
    //   })
    // },
    checkSelectable(row) {
      if (this.collectWorks == null) {
        return true
      } else {
        if (this.collectWorks.length > 0) {
          return this.collectWorks.indexOf(row.collectAndTypeCodes) === -1
        } else {
          return true
        }
      }
    },
    //新增数据
    handCurrentChange(row) {
      this.rowList = row
    },
    getList() {
      filterListByWorkplace(this.query).then(res => {
        if (res.code == 20000) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          return this.$message.error('获取错误')
        }
      })
    },
    findWorkPlace(val) {
      let query = {
        userIdFlag: false,
        workPlaceClass: 1,
        key: val,
        page: 1,
        limit: 10
      }
      filterWorkOptimize(query)
        .then((response) => {
          this.loading = false
          this.workPlaces = response.data || []
          if (this.workPlaces.length == 1) {
            this.query.workPlaceCode = this.workPlaces[0].code
            this.getWorkBindBusTypes(this.query.workPlaceCode)
          }
        })
        .catch(() => {
          this.loading = false
          this.workPlaces = []
        })
    },
    getWorkBindBusTypes(query) {
      this.busQuery.workplaceCode = query
      getWorkBindBusTypes(this.busQuery).then(res => {
        if (res.code == 20000) {
          let busTypes = res.data.list || []
          // _this.options.getWorkPlace = res.data.list || [];
          let getWorkPlace = busTypes.map(busType => {
            return {
              code: busType.documentTypeCode,
              label: busType.busName
            }
          })
          this.busTypes = getWorkPlace
          if (this.busTypes.length == 1) {
            this.query.busType = this.busTypes[0].code
          } else {
            this.query.busType = null
          }
        }
        return
      })
    },
    changePlace(query) {
      this.getWorkBindBusTypes(query)
    },
    chooseCollect() {
      let selectList = this.$refs.table.selection
      if (selectList.length == 0){
        return this.$message.error("请选择采集工位")
      }
      let selecTypetList = selectList.map(item => item.documentTypeCode)
      let selecCollecttList = selectList.map(item => item.workplaceCode)
      let seleceBusId = selectList.map(item => item.id)
      this.collectQuery.workPlaceCode = this.workplaceId
      this.collectQuery.collectBusTypes = selecTypetList
      this.collectQuery.collectWorkCodes = selecCollecttList
      this.collectQuery.relBusIdFks = seleceBusId
      bindCollect(this.collectQuery).then(res => {
        if (res.code != 20000) {
          return this.$message.error(res.message)
        }
        this.$message.success('选入成功')
        this.closeDialog()
      }).catch(() => {

      })
    }
  },
  created() {
    this.getList()
    this.findWorkPlace('')
    this.getWorkBindBusTypes('')
  }
}
</script>

<style scoped>
.iconButton {
  margin-left: 0px;
  height: 30px;
}
</style>
