<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-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="chooseBusType">选入</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="documentTypeCode" width="100"></el-table-column>-->
        <el-table-column label="业务名称 " prop="busName" width="160"></el-table-column>
        <el-table-column label="配套系统" prop="isMatching" width="100">
          <template slot-scope="scope">
            <span>{{ isMatchings[scope.row.isMatching] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据类型" prop="thrBusName" width="100"></el-table-column>
        <!--                <el-table-column label="单据完成条件" prop="orderFinishVerify" width="100">-->
        <!--                  <template slot-scope="scope">-->
        <!--                    <span>{{ orderFinishVerifys[scope.row.orderFinishVerify] }}</span>-->
        <!--                  </template>-->
        <!--                </el-table-column>-->
        <el-table-column label="队列管理" prop="autoTag" width="100">
          <template slot-scope="scope">
            <span>{{ autoTagTypes[scope.row.autoTag] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="独占库存" prop="monopoly" width="90">
          <template slot-scope="scope">
            <span>{{ monopolys[scope.row.monopoly] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计量单位 " prop="orderCirType" width="100">
          <template slot-scope="scope">
            <span>{{ orderCirTypes[scope.row.orderCirType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扫码方式" prop="scanType" width="120">
          <template slot-scope="scope">
            <span>{{ operationTypes[scope.row.scanType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理结果 " prop="checkInsert" width="120">
          <template slot-scope="scope">
            <span>{{ checkInserts[scope.row.checkInsert] }}</span>
          </template>
        </el-table-column>
        <!--                <el-table-column label="异常方式提醒" prop="warnType" width="100">-->
        <!--                  <template slot-scope="scope">-->
        <!--                    <span>{{ warnTypeMap[scope.row.warnType] }}</span>-->
        <!--                  </template>-->
        <!--                </el-table-column>-->

        <el-table-column label="是否常用" prop="isPopular" width="100">
          <template slot-scope="scope">
            <span>{{ isPopulars[scope.row.isPopular] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务顺号" prop="number" width="100"></el-table-column>
        <el-table-column label="备注:" prop="remark" width="100"></el-table-column>

      </el-table>

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


  </div>
</template>

<script>
import {
  getCollectBusType,
  addCollectBusType,
  updateCollectBusType,
  delCollectBusType, genCode
} from '@/api/basic/collectPoint/gatherOrderType'
import { getBusTypeList } from '@/api/basic/busType'
import { workplaceBindBusType } from '@/api/basic/workPlace/sysWorkplaceDocuments'
import {getWorkBindBusTypes, removeBusTypeById} from '@/api/basic/workPlace/sysWorkplaceDocuments'
import {filterListByWorkplace, removeBusTypeByBusTypeAndWorkplace} from '@/api/basic/workPlace/sysWorkplaceDocuments'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    workplaceId: {
      type: Object,
      required: true
    },
    busTypeCodes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isMatchings: {
        0: '否',
        1: '是'
      },
      operationTypes: {
        1: '扫码生成业务单',
        2: '按单校验三期',
        3: '按单不校验三期'
      },
      inoutTypes: {
        1: '是',
        2: '否'
      },
      autoTagTypes: {
        1: '是',
        0: '否'
      },
      monopolys: {
        1: '是',
        0: '否'
      },
      corpTypeMap: {
        1: '客户',
        2: '供应商',
        3: '内部科室',
        4: '特殊往来'
      },
      checkInserts: {
        1: '自动添加',
        2: '自动不添加',
        3: '根据提醒决定'
      },
      orderCirTypes: {
        1: '流通计量单位',
        2: '使用计量单位'
      },
      workplaceStatusMap: {
        0: '暂停',
        1: '启用'
      },
      orderFinishVerifys: {
        0: '完全赋码',
        1: '部分赋码',
        2: '赋码超出',
        4: '',
      },
      warnTypeMap: {
        1: '信息提醒',
        2: '信息弹框提醒',
        3: '不提醒'
      },
      isPopulars: {
        1: '是',
        0: '否',
      },
      busQuery: {
        busKey: '',
        workplaceCode: null,
        page: 1,
        limit: 1000
      },
      query: {
        page: 1,
        limit: 10
      },
      busTypeList: [],
      busTypeTotal: 0,
      showSearch: true,
      filterBadInv: true,
      loading: false,
      list: [],
      fromName: 'add',
      fromMap: {
        'add': '新增单据类型',
        'edit': '编辑单据类型'
      },
      addCollectionPointsDialogVisible: false,
      formData: {},
      code: '',
      total: 0,
      busTypes: [],
      formRules: {
        name: [
          { required: true, message: '请输入单据类型名称', trigger: 'blur' }
        ],
        fromType: [
          { required: true, message: '请选择来源', trigger: 'blur' }
        ],
        // invCode: [
        //   { required: true, message: '请选择单据所属仓库', trigger: 'blur' }
        // ],
        mainAction: [
          { required: true, message: '请选择出入库类型', trigger: 'blur' }
        ],
        innerOrder: [
          { required: true, message: '是否内部单据', trigger: 'blur' }
        ]
      },
      mainActions: {
        WareHouseIn: '入库',
        WareHouseOut: '出库'
      },
      innerOrderMap: {
        0: '否',
        1: '是'
      },
      mainActionMap: {
        in: 'WareHouseIn',
        out: 'WareHouseOut'
      },

      //新增数据
      rowList: [],
      BusTypeQuery: {
        workplaceCode: null,
        documentTypeCodes: []
      }
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.query = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    onSubmit() {
      this.query.page = 1
      this.getList()
    },
    addCollectionPoints() {
      this.fromName = 'add'
      genCode().then(res => {
        if (res.code == 20000) {
          this.code = res.data
          this.formData = {
            code: res.data
          }
          this.addCollectionPointsDialogVisible = true
        }
      })
    },
    getList(val) {
      if (val != null){
        this.query.page = val.page;
      }
      this.loading = true
      getWorkBindBusTypes(this.query).then((response) => {
        if (response.code == 20000) {
          this.list = response.data.list || []
          this.total = response.data.total || 0
        } else {
          this.$message.error(response.message)
        }
        this.loading = false
      })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
        })
    },
    getBusType() {
      let query = {
        enabled: true,
        page: 1,
        limit: 10
      }
      getBusTypeList(query)
        .then((response) => {
          this.busTypes = response.data.list || []
          // this.filterQuery.action = this.busTypes[0].action;
          // this.getList();
        })
        .catch(() => {
        })
    },

    //新增数据
    handCurrentChange(row) {
      this.rowList = row
    },
    //选入单据
    chooseBusType() {
      let selectList = this.$refs.table.selection
      let list = selectList.map(item => item.documentTypeCode)
      this.BusTypeQuery.workplaceCode = this.workplaceId
      this.BusTypeQuery.documentTypeCodes = list
      if (list.length == 0) {
        return this.$message.error('未选择单据类型或该工位已没有可增加单据类型')
      }
      workplaceBindBusType(this.BusTypeQuery).then(res => {
        if (res.code == 20000) {
          this.$message.success('选入成功')
          this.closeDialog()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    checkSelectable(row) {
      for (let item of this.busTypeList) {
        // 如果找到匹配的documentTypeCode，则返回false
        if (item.documentTypeCode == row.documentTypeCode) {
          return false;
        }
      }
      // 如果没有找到匹配的documentTypeCode，则返回true
      return true;

    },
    getWorkBindBusTypes() {
      this.busQuery.workplaceCode = this.workplaceId
      filterListByWorkplace(this.busQuery).then(res => {
        if (res.code == 20000) {
          this.busTypeList = res.data.list
          this.busTypeTotal = res.data.total
        } else {
          return this.$message.error('获取错误')
        }
      })
    },

  },
  created() {
    this.getList()
    this.getWorkBindBusTypes()
  }

}
</script>

<style scoped>
.dialog-footer {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

</style>
