<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" :model="userQuery" size="mini" v-if="showSearch">
          <el-row :gutter="24">
            <!--<el-col :span="6">-->
            <!--  <el-form-item label="所属部门:">-->
            <!--    <el-input v-model="userQuery.deptName" placeholder="所属部门" clearable></el-input>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
            <el-col :span="10">

              <el-form-item label="当前部门:" class="query-form-item">
                <el-select v-model="userQuery.deptCode" class="width-full" placeholder="请选择" filterable clearable
                           @change="changeUsers"
                >
                  <el-option v-for="item in DeptList" :key="item.id" :label="item.name" :value="item.code"/>
                </el-select>
                <!--<el-option v-for="item in " :key="item.id" :label="item.name" :value="item.code"/>-->
                <!--  <deptSelect  :value.sync="userQuery.deptCode"-->
                <!--               :changeValue.sync="changeUsers"/>-->
                <!--  &lt;!&ndash;<deptSelect :value.sync="query.invCode" :params.sync="filterBadInv" :changeValue.sync="invChange"/>&ndash;&gt;-->
              </el-form-item>
            </el-col>
            <!--<el-col :span="6">-->
            <!--  <el-form-item label="当前仓库:" class="query-form-item">-->
            <!--    <invSelect :value.sync="userQuery.invCode" :params.sync="filterBadInv" :changeValue.sync="invChange"/>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
            <el-col :span="10">
              <el-form-item label="账号/名称:">
                <el-input v-model="userQuery.userKey" 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-group>
        </div>
        <el-divider style="margin: 15px"></el-divider>
        <el-table v-loading="loading" :data="userList" style="width: 100%" :row-style="{height: '32px' }"
                  ref="userTable"
                  @current-change="handCurrentChange" highlight-current-row
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="用户账号" prop="userName" width="120"></el-table-column>
          <el-table-column label="用户名称" prop="employeeName" width="120"></el-table-column>
          <!--<el-table-column label="用户仓库" prop="invName" width="120"></el-table-column>-->
          <el-table-column label="所属部门" prop="deptName" width="260"></el-table-column>
          <el-table-column label="备注" prop="remark" width="300"></el-table-column>
          <!--<el-table-column label="操作" fixed="right" width="100">-->
          <!--  <template slot-scope="scope">-->
          <!--    &lt;!&ndash;<el-button&ndash;&gt;-->
          <!--    &lt;!&ndash;  type="text"&ndash;&gt;-->
          <!--    &lt;!&ndash;  size="small"&ndash;&gt;-->
          <!--    &lt;!&ndash;  @click.native.stop="printLabel(scope.row)"&ndash;&gt;-->
          <!--    &lt;!&ndash;&gt;打印&ndash;&gt;-->
          <!--    &lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--    &lt;!&ndash;<el-button&ndash;&gt;-->
          <!--    &lt;!&ndash;  type="text"&ndash;&gt;-->
          <!--    &lt;!&ndash;  size="small"&ndash;&gt;-->
          <!--    &lt;!&ndash;  @click.native.stop="editCollectionPoints(scope.row)"&ndash;&gt;-->
          <!--    &lt;!&ndash;&gt;详情&ndash;&gt;-->
          <!--    &lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--    &lt;!&ndash;<el-button&ndash;&gt;-->
          <!--    &lt;!&ndash;  type="text"&ndash;&gt;-->
          <!--    &lt;!&ndash;  size="small"&ndash;&gt;-->
          <!--    &lt;!&ndash;  @click.native.stop="deleteCollectionPoints(scope.row)"&ndash;&gt;-->
          <!--    &lt;!&ndash;&gt;删除&ndash;&gt;-->
          <!--    &lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--  </template>-->
          <!--</el-table-column>-->
        </el-table>
        <pagination
          :total="userTotal"
          :limit.sync="userQuery.limit"
          :page.sync="userQuery.page"
          @pagination="getUsers()"
        >
        </pagination>
      </div>
    </el-card>
    <el-tabs type="border-card" style="margin: 15px">
      <el-tab-pane>
        <span slot="label">{{ employeeName }}-工位列表</span>
        <el-form :inline="true" :model="workQuery" class="query-form" size="mini">
          <el-form-item class="query-form-item" label="工位编码/工位名称:">
            <el-input
              v-model="workQuery.workKey"
              placeholder="请输入工位编码/名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onUserReset"
              >重置
              </el-button>
              <el-button type="primary" @click="loadWorkList"
                         icon="el-icon-search"
              >查询
              </el-button
              >
              <el-button type="primary" @click="addWork()"
                         icon="el-icon-document-add"
              >选入工位
              </el-button
              >
            </el-button-group>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="workList" style="width: 100%" :row-style="{height: '32px' }"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="工位编码" prop="workplaceId" width="90"></el-table-column>
          <el-table-column label="工位名称" prop="workplaceName" width="140"></el-table-column>
          <el-table-column label="所属部门" prop="deptCodeName" width="90"></el-table-column>
          <el-table-column label="工位状态" prop="workplaceStatus" width="90">
            <template slot-scope="scope">
              <span>{{ workplaceStatusMap[scope.row.workplaceStatus] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工位类型" prop="workPlaceClass" width="90">
            <template slot-scope="scope">
              <span>{{ workPlaceClasss[scope.row.workPlaceClass] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工位负责人" prop="employeeName" width="90"></el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="140"></el-table-column>
          <el-table-column label="备注" prop="remake" width="240"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="workDetail(scope.row)"
              >详情
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="remove(scope.row)"
              >移除
              </el-button>
              <!--@click.native.stop="printLabel(scope.row)"-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="workTotal"
          :limit.sync="workQuery.limit"
          :page.sync="workQuery.page"
          @pagination="getUserBindWork()"
        >
        </pagination>
      </el-tab-pane>

    </el-tabs>

    <el-dialog
      title="选入工位"
      :visible.sync="selectUserWorkDialogVisible"
      width="75%"
      v-if="selectUserWorkDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <selectWorkplace
        :userId="userId"
        :closeDialog="closeDialog"
        :workPlaceCode="workPlaceCode"
      >

      </selectWorkplace>
    </el-dialog>


    <el-dialog
      title="工位详情"
      :visible.sync="addWorkplaceDialogVisible"
      width="60%"
      v-if="addWorkplaceDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="formData" style="width: 80%;" ref="dataForm" :rules="formRules"
               label-width="auto"
      >
        <el-row :gutter="24" class="el-row">
          <el-col :span="12" class="el-col">
            <el-form-item label="工位编码:" prop="workplaceId" class="query-form-item">
              <el-input
                disabled
                v-model="formData.workplaceId" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el-col">
            <el-form-item label="工位名称:" prop="workplaceName" class="query-form-item">
              <el-input
                disabled
                v-model="formData.workplaceName" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" class="el-col">
            <el-form-item label="工位状态:" prop="workplaceStatus" class="query-form-item">
              <el-select v-model="formData.workplaceStatus" style="width: 100%" placeholder="工位状态" disabled>
                <el-option label="暂停" :value="0"></el-option>
                <el-option label="启用" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el-col">
            <el-form-item label="所属部门:"  class="query-form-item">
              <el-input
                disabled
                v-model="formData.deptCodeName" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="el-row">
          <el-col :span="12" class="el-col">
            <el-form-item label="工位负责人:" prop="chargeUser" class="query-form-item">
              <el-input
                disabled
                v-model="formData.employeeName" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el-col">
            <el-form-item label="创建时间:" prop="createTime" class="query-form-item">
              <el-input
                disabled
                v-model="formData.createTime" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <!--<el-col :span="12" class="el-col">-->
          <!--  <el-form-item label="作业方式:" prop="chargeUser" class="query-form-item">-->
          <!--    <el-input-->
          <!--      disabled-->
          <!--      v-model="operationTypes[formData.operationType]" style="width: 100%"-->
          <!--      auto-complete="off"-->
          <!--    ></el-input>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="24" class="el-col">-->
          <!--  <el-form-item label="单据类型:" prop="busType" class="query-form-item">-->
          <!--    <el-select v-model="formData.orderId" placeholder="请选择单据类型"-->
          <!--               style="width: 80%"-->
          <!--               clearable-->
          <!--    >-->
          <!--      <el-option-->
          <!--        v-for="item in busTypes"-->
          <!--        :key="item.name"-->
          <!--        :label="item.name"-->
          <!--        :value="item.code"-->
          <!--      >-->
          <!--        <span style="float: left">{{ item.name }}</span>-->
          <!--      </el-option>-->
          <!--    </el-select>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="24" class="el-col">-->
          <!--  <el-form-item label="所属组别:" prop="grouping" class="query-form-item">-->
          <!--    <el-select v-model="formData.constituencies" placeholder="请选择所属组别"-->
          <!--               style="width: 80%"-->
          <!--               clearable-->
          <!--    >-->
          <!--      <el-option-->
          <!--        v-for="item in fromDeptOptions"-->
          <!--        :key="item.code"-->
          <!--        :label="item.label"-->
          <!--        :value="item.code"-->
          <!--      >-->
          <!--        <span style="float: left">{{ item.label }}</span>-->
          <!--      </el-option>-->
          <!--    </el-select>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->


        </el-row>
        <el-row :gutter="24" class="el-row">
          <el-col :span="24" class="el-col">
            <el-form-item label="备注:" prop="unitTittle" class="query-form-item">
              <el-input
                disabled
                v-model="formData.remake" style="width: 100%"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getUserBindWork, getUsers, delUserBindWork } from '@/api/basic/collectPoint/userWorkplace'
import selectWorkplace from './selectWorkplace'
import { authAdminList } from '@/api/auth/authAdmin'
import { filterList } from '@/api/system/invWarehouse'

export default {
  components: { selectWorkplace },
  data() {
    return {
      loading: false,
      showSearch: true,
      filterBadInv: true,
      list: [],
      collectPointList: [],
      query: {},
      userList: [],
      workList: [],
      rowData: {
        employeeName: '用户'
      },
      userQuery: {
        page: 1,
        limit: 10,
        deptCode: this.$store.getters.locDeptCode,
        key: '',
        userKey: '',
        deptName: ''
      },
      workQuery: {
        page: 1,
        limit: 10,
        userId: '',
        workKey: ''
      },
      selectUserWorkDialogVisible: false,
      operationTypes: {
        1: '扫码生成业务单',
        2: '按单校验三期',
        3: '按单不校验三期'
      },
      checkInserts: {
        1: '自动添加',
        2: '自动不添加',
        3: '根据提醒决定'
      },
      warnTypeMap: {
        1: '信息提醒',
        2: '信息弹框提醒',
        3: '不提醒'
      },
      corpTypeMap: {
        1: '客户',
        2: '供应商',
        3: '内部科室',
        4: '特殊往来'
      },
      workPlaceClasss: {
        1: '采集工位',
        2: '上货工位'
      },
      workplaceStatusMap: {
        0: '暂停',
        1: '启用'
      },
      workplaceTypes: {
        1: '拆零',
        2: '取整',
        3: '全部'
      },
      userId: '',
      workPlaceCode: [],
      addWorkplaceDialogVisible: false,
      formData: null,
      userTotal: 0,
      workTotal: 0,
      employeeName: '用户',
      DeptList: []
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.userQuery = {
        page: 1,
        limit: 10,
        key: '',
        deptCode: this.$store.getters.locDeptCode,
      }
      this.getUsers()
      this.workList = []
    },
    onSubmit() {
      this.workList = []
      this.employeeName = '用户'
      this.$refs.userTable.setCurrentRow(null)
      this.userQuery.page = 1
      this.getUsers()
    },
    onUserReset() {
      if(this.rowData.id == null){
        return this.$message.error("请选择用户")
      }
      this.workQuery = {
        page: 1,
        limit: 10,
        userId: this.rowData.id,
        workKey: ''
      }
      this.getUserBindWork(this.workQuery)
    },
    loadWorkList() {
      if(this.rowData.id == null){
        return this.$message.error("请选择用户")
      }
      this.workQuery.userId = this.rowData.id
      this.getUserBindWork(this.workQuery)
    },
    // getUsers() {
    //   getUsers(this.userQuery).then(res => {
    //     if (res.code == 20000) {
    //       this.userList = res.data.list || []
    //       this.userTotal = res.data.total
    //     } else {
    //       this.$message.error('获取错误')
    //     }
    //   })
    // },
    getUsers() {
      this.loading = true
      this.userQuery.key = 'key'
      authAdminList(this.userQuery)
        .then(response => {
          this.loading = false
          this.userList = response.data.list || []
          this.userTotal = response.data.total || 0
        })
        .catch(() => {
          this.loading = false
          this.userList = []
          this.userTotal = 0
        })
    },
    handCurrentChange(row) {
      this.rowData = row
      this.employeeName = row.employeeName
      this.getUserBindWork()
    },
    getUserBindWork() {
      this.workQuery.userId = this.rowData.id
      getUserBindWork(this.workQuery).then(res => {
        if (res.code == 20000) {
          this.workList = res.data.list || []
          this.workTotal = res.data.total || 0
        } else {
          this.$message.error('获取失败')
        }
      })
    },
    addWork() {
      if (this.rowData.id == null) {
        return this.$message.error('请先选择用户')
      }
      this.userId = this.rowData.id
      this.workPlaceCode = this.workList.map(item => item.workplaceId)
      this.selectUserWorkDialogVisible = true
    },
    closeDialog() {
      this.workQuery.userId = this.rowData.id
      this.getUserBindWork(this.workQuery)
      this.selectUserWorkDialogVisible = false
    },
    remove(row) {
      this.$confirm('确定移除该工位？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let query = {
          id: row.id
        }
        delUserBindWork(query).then(res => {
          if (res.code == 20000) {
            this.workQuery.userId = this.rowData.id
            this.getUserBindWork(this.workQuery)
            this.$message.success('移除成功')
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {

      })

    },
    workDetail(row) {
      this.formData = row
      this.addWorkplaceDialogVisible = true
    },
    getDepts() {
      let data =
        {
          enable: true
        }
      filterList(data).then(res => {
        if (res.code == 20000) {
          this.DeptList = res.data.list || []
        }
      })
    },
    changeUsers() {
      this.getUsers()
      this.workList = []
    }
  },
  created() {
    this.getUsers()
    this.getDepts()
  }

}
</script>

<style scoped>

</style>
