<template>
  <el-dialog :visible.sync="visible" title="转派工单" width="60%">
    <div class="sparepart-apply">
      <div class="select-box">
        <el-form label-width="80px">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item label="工单单号">
                <el-input v-model="row.code" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="部门">
                <deptSelect v-model="groupId" @changeGroup="deptClick" />
                <!-- <selectTree
                        ref="treeDept"
                        class="form-input"
                        :options="treeList"
                        size="small"
                        :props="{
                          value: 'code',
                          label: 'name',
                          children: 'children',
                        }"
                        @getValue="deptClick"
                      /> -->
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="" label-width="10px">
                <el-input v-model="name" placeholder="搜索姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <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="tableRef"
          :columns="columns"
          highlight-current-row
          :datasource="datasource"
          @current-change="handleChange"
          cache-key="redeployOther"
        ></ele-pro-table>
      </div>
      <div slot="footer" class="footer">
        <el-button @click="cancel">返回</el-button>
        <el-button :loading="btnLoading" type="primary" @click="submit"
          >提交</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { workOrderRotate } from '@/api/maintenance/patrol_maintenance';
  import { getUserPage } from '@/api/system/organization';
  export default {
    components: { deptSelect },
    props: {
      // sourceType: {
      //   type: Number, //1,保养工单;2,维修工单
      //   required: true
      // }
    },
    data() {
      return {
        btnLoading: false,
        visible: false,
        treeList: [],
        pages: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        selectedRow: {},
        groupId: '',
        executorDeptName: '',
        name: '',
        row: {},
        columns: [
          {
            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
          }
        ]
      };
    },
    async created() {},
    methods: {
      open(row) {
        this.row = row;
        this.name = '';
        this.groupId = '';
        this.executorDeptName = '';
        this.selectedRow = {};
        this.visible = true;
      },

      //重置
      reset() {
        this.name = '';
        this.search();
      },
      // 搜索
      search() {
        this.$refs.tableRef.reload();
      },

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

      // 获取审核人列表、巡点检人员
      async datasource({ page, limit, where, order }) {
        this.selectedRow = {};
        // 如果传了参数就是获取巡点检人员数据
        return getUserPage({
          pageNum: page,
          size: limit,
          ...where,
          groupId: this.groupId,
          name: this.name
        });
      },

      // 表格选中行
      handleChange(row) {
        console.log(row);
        if (row) {
          this.selectedRow = row;
        }
      },

      async submit() {
        if (this.selectedRow.id) {
          this.btnLoading = true;
          let params = {
            acceptUserId: this.selectedRow.id,
            workOrderId: this.row.id
          };
          workOrderRotate(params).then(() => {
            this.$message.success(`该工单成功转派给${this.selectedRow.name}`);
            this.visible = false;
            this.$emit('refresh');
            this.btnLoading = false;
          });
        } else {
          return this.$message.warning('请选择转派人员');
        }
      },
      cancel() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sparepart-apply {
    min-height: 40vh;
    .select-box {
      margin-bottom: 10px;
    }

    .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;
  }
</style>
