<template>
  <ele-modal custom-class="ele-dialog-form long-dialog-form" :visible.sync="visible" title="转派工单"
    :close-on-click-modal="false" width="55%" append-to-body @close="cancel" :maxable="true">
    <div class="sparepart-apply">
      <div class="select-box">
        <el-form label-width="80px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="工单单号">
                <el-input v-model="row.code" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" pro="groupId">
                <deptSelect v-model="groupId" @changeGroup="deptClick" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="" label-width="10px">
                <el-input v-model="name" placeholder="搜索姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-form-item label="" label-width="10px">
                <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
                <el-button @click="reset" icon="el-icon-refresh-left">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="data-tab">
        <ele-pro-table ref="tableRef2" row-key="id" :columns="columns" :datasource="datasource"
          @select-all="handleSelectAll" @selection-change="handleSelectionChange" cache-key="redeployOther"
          :header-cell-class-name="headerCellClassName" height="300">
        </ele-pro-table>
      </div>
      <div slot="footer" class="footer">
        <el-button @click="cancel">返回</el-button>
        <el-button :loading="btnLoading" type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </ele-modal>
</template>

<script>
import deptSelect from '@/components/CommomSelect/dept-select.vue';

import { reassignmentSalesWorkOrder } from '@/api/salesServiceManagement/index';

import { getUserPage } from '@/api/system/organization';
export default {
  components: { deptSelect },
  props: {

  },
  data() {
    return {
      fullscreen: false,
      btnLoading: false,
      visible: false,
      treeList: [],
      pages: {
        pageNum: 1,
        size: 15
      },
      total: 0,
      selectedRow: {},
      selectedRowData: [],
      groupId: '',
      executorDeptName: '',
      name: '',
      row: {},
      columns: [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center'
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'jobNumber',
          label: '工号',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'name',
          label: '姓名',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'phone',
          label: '电话',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'groupName',
          label: '部门',
          align: 'center',
          showOverflowTooltip: true
        }
      ],
      tableData: [],
    };
  },
  created() {
    this.getList();
  },

  methods: {
    async getList() {
      const data = await getUserPage({
        pageNum: 1,
        size: -1,
        groupId: '',
        name: '',
        groupId: this.groupId
      });
      this.tableData = data.list;
    },
    open(row, val) {

      this.row = row;
      this.name = '';
      this.groupId = '';
      this.executorDeptName = '';
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.tableRef2.clearSelection();
      })
    },
    //重置
    reset() {
      this.name = '';
      this.search();
    },
    // 搜索
    search() {
      this.$refs.tableRef2.reload();
    },

    deptClick(data) {
      if (data) {
        this.$refs.tableRef2.reload();
      }
    },

    // 获取审核人列表、巡点检人员
    async datasource({ page, limit, where, order }) {
      this.selectedRow = {};
      // 如果传了参数就是获取巡点检人员数据
      return getUserPage({
        pageNum: page,
        size: limit,
        ...where,
        groupId: this.groupId,
        name: this.name
      });
    },
    handleSelectAll(selection) {
      this.$refs.tableRef2.clearSelection();
    },
    handleSelectionChange(row) {
      if (row.length > 1) {
        this.$refs.tableRef2.clearSelection();
        this.$refs.tableRef2.toggleRowSelection(row.pop());
      }
      this.selectedRow = row[0];
    },
    headerCellClassName({ columnIndex }) {
      // 如果是第一列（通常是全选框），则返回自定义的class名
      if (columnIndex === 0) {
        return 'hide-selection-checkbox';
      }
      return '';
    },
    async confirm() {
      try {
        let pData = {
          id: this.row.id,
          executeGroupId: this.selectedRow.groupId,
          executeGroupName: this.selectedRow.groupName,
          executeUserId: this.selectedRow.id,
          executeUserName: this.selectedRow.name,
        }
        const res = await reassignmentSalesWorkOrder(pData)
        if (!res) return
        this.$message.success('操作成功')
        this.visible = false;
        this.$emit('reload');
      } catch (err) {
        // this.$message.error(err)
      }
    },
    cancel() {
      this.selectedRow = {};
      this.visible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.sparepart-apply {
  min-height: 40vh;

  .select-box {
    padding: 10px 0;
  }

  .material-item+.material-item {
    margin-top: 10px;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  padding-right: 20%;
}

.list-box {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.footer {
  padding: 10px;
  text-align: right;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .hide-selection-checkbox .cell .el-checkbox {
  visibility: hidden !important;
}
</style>
