<!--
  @description: 采购计划-采购计划编辑选择计划负责人
  @author: lxl
  @date： 2020-10-30 09:52
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogTakeData.dialogVisibleTake"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :lock-scroll="false"
      title="选择计划负责人"
      width="700px"
    >
      <section :class="{ SearchContent_show: toggleSearchStatus }" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="98px"
            label-position="left"
            inline
            @submit.native.prevent
          >
            <el-form-item
              ref="roleName"
              label="角色"
              prop="roleName"
            >
              <gx-input
                v-model.trim="searchForm.roleName"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm">
            重 置
          </el-button>
        </div>
      </section>
      <section style="margin:10px 0px">
        <el-table
          :row-key="getRowKey"
          :data="tableData"
          :row-class-name="tableRowClassName"
          :row-style="selectedHighlight"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            type="index"
            width="60px"
            align="center"
            label="序号"
          />
          <el-table-column
            align="center"
            prop="realName"
            label="计划负责人"
          />
          <el-table-column
            align="center"
            prop="roleName"
            label="角色"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure">
          {{ language.Determine }}
        </el-button>
        <el-button @click="dialogTakeData.dialogVisibleTake = false">
          {{ language.cancel }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* 接口*/
import { selectUserListByDepartId } from '@/api/procurement/commonUser' // 获取角色信息
import { ListMixin } from '@/mixins/ListMixin' // 分页
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { filterObj, restoreInitialValue, filterDictText } from '@/assets/js/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'PurPlanEntryTakeDialog',
  components: {
    pagination
  },
  mixins: [ListMixin],
  props: {
    dialogTakeData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      deleteObj: {
        deleteCause: ''
      },
      loading: false,
      getIndex: '', // 表格rowIndex
      roleData: {}, // 表格rowId
      tableData: [], // 表格数据
      searchForm: {
        roleName: '',
        realName: ''
      }
    }
  },
  computed: {
    ...mapGetters(['language', 'info'])
  },
  created() {
    this.loadData()
  },
  methods: {
    filterDictText, // 数据字典查询
    // 数据请求方法
    loadData() {
      const params = this.getQueryParams() // 查询条件
      selectUserListByDepartId(params)
        .then(response => {
          this.loading = false
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 点击一行获取下标
    rowClick(row) {
      this.roleData.realName = row.realName
      this.roleData.userId = row.userId
      this.getIndex = row.index
    },
    // 获取表格内每一行下标
    selectedHighlight({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 给选中的一行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (this.getIndex === rowIndex) {
        return 'procurement_pith_on'
      }
    },
    handleClose() {
      this.dialogTakeData.dialogVisibleTake = false
    },
    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({
        departId: this.info.companyId
      }, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 查询数据
    },
    // 确定
    ensure() {
      this.$emit('onTakeRes', this.roleData)
      this.dialogTakeData.dialogVisibleTake = false
    },
    // 重置
    resetForm() {
      // 清除数据
      restoreInitialValue(this.searchForm)
      this.onSearch()
    }
  }
}
</script>
<style scoped>
</style>
