<template>
  <el-container style="height: 100%;position: absolute;width: 100%;">
    <el-col :span="16" style="height:100%;">
      <div style="color:#909399;font-size: 12px;height: 9%">
        所属公司：
        <el-select v-model="query.companyName" clearable placeholder="所属公司" style="width: 100px">
          <el-option
            v-for="item in dm_depart"
            :key="item.depart_code"
            :label="item.depart_name"
            :value="item.depart_code"
          />
        </el-select>
        班组编码：
        <el-input v-model="query.resourcesCode" placeholder="班组编码" style="width: 100px" clearable />
        班组名称：
        <el-input v-model="query.resourcesName" placeholder="班组名称" style="width: 100px" clearable />
        班组分类：
        <el-select v-model="query.classification" clearable placeholder="班组分类" style="width: 100px">
          <el-option
            v-for="item in dm_depart"
            :key="item.depart_code"
            :label="item.depart_name"
            :value="item.depart_code"
          />
        </el-select>
        班组状态：
        <el-select v-model="query.flagStatus" clearable placeholder="班组状态" style="width: 100px">
          <el-option
            v-for="item in dm_depart"
            :key="item.depart_code"
            :label="item.depart_name"
            :value="item.depart_code"
          />
        </el-select>

        <div style="float: right;">
          <el-button style="margin: 1px;" type="primary" icon="el-icon-search">查询</el-button>
          <el-button style="margin: 1px" type="success" @click="handleAddYhxx">新增</el-button>
          <el-button style="margin: 1px" type="warning" @click="handleUpdateYhxx">修改</el-button>
          <el-button style="margin: 1px" type="danger" @click="handleDeleteYhxx">删除</el-button>
        </div>
      </div>

      <el-table
        ref="bzxxTable"
        :show-overflow-tooltip="true"
        :data="c_yhxxTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        height="calc(100% - 60px - 35px)"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        width="100%"
        :border="true"
        highlight-current-row
        @current-change="handleYhxxCurrentChange"
        @header-click="showFilter"
      >
<!--        <el-table-column label="" property="checked" min-width="40">-->
<!--          <template slot-scope="scope">-->
<!--            <el-checkbox v-model="scope.row.checked"  />-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column  label="序号" type="index" />
        <el-table-column  label="班组编码" property="resourcesCode" />
        <el-table-column  label="班组名称" property="resourcesName" />
        <el-table-column  label="是否资源" property="resource" />
        <el-table-column  label="所属工厂" property="factoryName" />
        <el-table-column  label="所属车间" property="workshopName" />
          <el-table-column  label="所属跨位" width="100px">
            <template slot-scope="scope">
              {{ getKwName(scope.row.kw) }}
            </template>
          </el-table-column>
        <el-table-column  label="所属产线" property="productionLineName" />
        <el-table-column  label="组织类型" property="resourcesType" />
        <el-table-column  label="外部对照码" property="comparisonCode" />
        <el-table-column  label="班组分类" property="classification" />
        <el-table-column  label="状态" property="flagStatus" />
<!--        <el-table-column  label="操作"  fixed="right">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="handleDeleteYhxx2" type="text" size="small" style="text-align: center;color: red">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 10000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="c_yhxxTableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog class="YhxxDialog" :title="dialogTitle" :visible.sync="dialogVisible" width="450px" center="">
        <el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">班组编码：</span>
            <el-input v-model="updateData.resourcesCode" placeholder="" style="width: 250px;" :disabled="inputDisabled"/>
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">班组名称：</span>
            <el-input v-model="updateData.resourcesName" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">是否资源：</span>
            <el-input v-model="updateData.resource" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">所属工厂：</span>
            <el-input v-model="updateData.factoryName" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">所属车间：</span>
            <el-input v-model="updateData.workshopName" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">所属跨位：</span>
            <el-select v-model="updateData.kw" clearable placeholder="跨位" style="width: 250px;">
              <el-option
                v-for="item in kwList"
                :key="item.bm"
                :label="item.bmsm"
                :value="item.bm"
              />
            </el-select>
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">所属产线：</span>
            <el-input v-model="updateData.productionLineName" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">组织类型：</span>
            <el-input v-model="updateData.resourcesType" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">外部对照码：</span>
            <el-input v-model="updateData.comparisonCode" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">班组分类：</span>
            <el-input v-model="updateData.classification" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 110px;display:inline-block;">状态：</span>
            <el-input v-model="updateData.flagStatus" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <el-button
              v-if="dialogTitle =='添加班组信息'?true :false"
              style="float: right;"
              type="primary"
              @click="handleAddYhxxComplated"
            >添加
            </el-button>
            <el-button
              v-if="dialogTitle =='修改班组信息'?true :false"
              style="float: right;"
              type="primary"
              @click="handleUpdateYhxxComplated"
            >修改
            </el-button>
          </el-row>
        </el-row>
      </el-dialog>
    </el-col>
    <el-col :span="8" style="border-left:1px solid rgb(230, 230, 230);height:100%;" >
      <div style="color:#909399;font-size: 15px;height: 9%">
        <div style="width: 100%;height: 50%;line-height: 200%;text-align: right;padding-right:3%" >
          当前组织生效人员
        </div>
<!--        <div style="float: right;">-->
<!--          <el-button style="margin: 1px;" type="primary" @click="changeTeam">转组织</el-button>-->
<!--        </div>-->
      </div>
      <el-table
        ref="bzryTable"
        class="bzryTable"
        :show-overflow-tooltip="true"
        :data="bzryTableData"
        height="calc(100% - 30px - 35px)"
        width="100%"
        :border="true"
        highlight-current-row
      >
        <el-table-column label="" property="isselect" min-width="40">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isselect"  />
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" />
        <el-table-column label="人员编码" property="userCode" />
        <el-table-column label="人员姓名" property="userName" />
        <el-table-column label="是否资源" property="resource" />
        <el-table-column label="班组长" property="foreman" />
        <el-table-column label="所属资源组" property="resourcesCode" />
        <el-table-column label="人员职务" property="position" />
        <el-table-column label="人员属性" property="attribute" />
        <el-table-column label="状态" property="flagStatus" />
      </el-table>
    </el-col>
    <tbfilter ref="tbFilter" :list="c_yhxxTableData" :filter="columnFilter" @execFilter="execFilter" />
  </el-container>

</template>

<script>
import {
  addRoleForUser,
  deleteRoleForUser
} from '@/api/sy/yhgl'
import {
  getList,
  update,
  save,
  del,
  getBzryList
} from '@/api/sjzx/bzzGL'
import tbfilter from '@/components/TableColumnFilter'

export default {
  name: 'Bzzzgl',
  components: { tbfilter },
  data() {
    return {
      defaultHeight: {
        height: '100%'
      },
      kwList:[],
      inputDisabled:true,
      activeGzzxxTabName: 'gzzxx',
      dm_depart: [],
      query: {resourcesCode:''},
      yhxxTableData: [],
      isYhxxTableLoading: true,
      bzryTableData: [],
      currentPage: 1,
      pageSize: 100,
      selectYhxx: {},
      dialogVisible: false,
      dialogTitle: '',
      updateData: {},
      columnFilter: {},
      loginType:[{
        value: 1,
        label: '指纹登录'
      }, {
        value: 2,
        label: 'findTxTl'
      }, ],
    }
  },
  computed: {
    c_yhxxTableData: function() {
      const search = this.query
      let resultList = this.yhxxTableData
      if (search && search.resourcesCode) {
        resultList = resultList.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).indexOf(search.resourcesCode) > -1
          })
        })
      }
      if (search && search.resourcesName) {
        resultList = resultList.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).indexOf(search.resourcesName) > -1
          })
        })
      }
      if (this.$refs.tbFilter) {
        return this.$refs.tbFilter.doFilter(this.columnFilter, resultList)
      }
      return resultList
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    getList({}).then(response => {
      this.yhxxTableData = response.data
      this.$refs.bzxxTable.setCurrentRow(this.yhxxTableData[0])
      getBzryList({resourcesCode:this.yhxxTableData[0].resourcesCode}).then(response => {
        this.bzryTableData = response.data
      })
    })
    const dict= window.localStorage.getItem("QGKW");
    this.kwList=JSON.parse(dict);
    this.kwList=this.kwList.filter(item => {
      if (item.bm >4)
      return true
    })
  },
  methods: {
    showFilter(column) {
      this.$refs.tbFilter.showFilter(column)
    },
    execFilter(property, vals) {
      this.currentPage = 1
      this.$set(this.columnFilter, property, vals)
    },
    getHeight() {
      this.defaultHeight.height = window.innerHeight - 140 + 'px'
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleYhxxCurrentChange(currentRow) {
      if (!currentRow || !currentRow.resourcesCode) return
      this.selectYhxx = currentRow
      getBzryList({resourcesCode:currentRow.resourcesCode}).then(response => {
        this.bzryTableData = response.data
      })
    },
    handleGzzSelect(row) {
      if (!this.selectYhxx || !this.selectYhxx.yhdm) {
        this.$message({ message: '请先选择一个用户！', type: 'error' })
        return
      }
      const relation = { 'yhdm': this.selectYhxx.yhdm,
        'role_code': row.role_code,
        'yhms': this.selectYhxx.yhms
      }
      if (row.isselect) {
        addRoleForUser([relation]).then(response => {
          this.$message({ message: '添加角色成功！', type: 'success' })
        })
      } else {
        deleteRoleForUser([relation]).then(response => {
          this.$message({ message: '删除角色成功！', type: 'success' })
        })
      }
    },
    handleAddYhxx() {
      this.dialogVisible = true
      this.inputDisabled=false;
      this.dialogTitle = '添加班组信息'
      this.updateData = {}
    },
    handleAddYhxxComplated() {
        var uuid = guid();
        this.updateData.id = uuid;
      save(this.updateData).then(response => {
        this.updateData = JSON.parse(JSON.stringify(this.updateData))
        this.yhxxTableData.push(this.updateData)
        this.dialogVisible = false
        this.$message({ message: '添加班组信息成功！', type: 'success' })
      })
    },
    handleUpdateYhxx() {
      if (!this.selectYhxx.resourcesCode) {
        this.$message({ message: '请选择要修改的班组！', type: 'error' })
        return
      }
      this.dialogVisible = true
      this.dialogTitle = '修改班组信息'
      this.updateData = JSON.parse(JSON.stringify(this.selectYhxx))
      this.inputDisabled=true;
    },
    handleUpdateYhxxComplated() {
      update(this.updateData).then(response => {
        for (const key in this.updateData) {
          this.selectYhxx[key] = this.updateData[key]
        }
        this.dialogVisible = false
        this.$message({ message: '修改班组信息成功！', type: 'success' })
      })
    },
    handleDeleteYhxx() {
      if (!this.selectYhxx.resourcesCode) {
        this.$message({ message: '请选择要删除的班组！', type: 'error' })
        return
      }
      let resultList  = JSON.parse(JSON.stringify(this.selectYhxx))
      this.$confirm('此操作将删除该班组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del([resultList]).then(response => {
          this.yhxxTableData = this.yhxxTableData.filter(t => !(t.resourcesCode === this.selectYhxx.resourcesCode))
          this.$message({ message: '删除班组信息成功！', type: 'success' })
        })
      })
    },
    handleDeleteYhxx1() {
      let resultList = this.yhxxTableData.filter(data => {
        return data.checked
      })
      if (!resultList.length>0){
        this.$message({ message: '请选择要删除的班组！', type: 'error' })
        return
      }
      this.$confirm('此操作将删除该班组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(resultList).then(response => {
          this.yhxxTableData = this.yhxxTableData.filter(
            t => !t.checked
          )
          this.$message({ message: '删除班组信息成功！', type: 'success' })
        })
      })
    },
    changeTeam(){
      let resultList = this.bzryTableData.filter(data => {
        return data.isselect
      })
      if (!resultList.length>0){
        this.$message({ message: '请选择要转组织的人员！', type: 'error' })
        return
      }

    },
    getKwName(bm) {
      for (const i in this.kwList) {
        if (this.kwList[i].bm === bm) {
          return this.kwList[i].bmsm
        }
      }
      return ''
    },
  }
}
//用于生成uuid
function S4() {
  return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
  return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
</script>

<style scoped>
  .YhxxDialog .el-row {
    margin-bottom: 5px;
  }
</style>
