<template>
  <at-table
    @load="loadData"
    :data="data"
    :page-result="pageResult"
    ref="AtTable"
    :dialogTitle="dialogTitle"
    :dialogVisible="dialogVisible"
    @select-all="handleSelect"
    @select="handleSelect"
    @handleDialogCancel="handleDialogCancel"
    @handleDialogClose="handleDialogClose"
    @handleDialogSubmit="handleDialogSubmit"
    @row-dblclick="handleRowDBClick"
  >
    <template v-slot:searchInput>
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        class="search-top"
      >
        <el-input
          v-model="searchForm.fullname"
          clearable
          placeholder="请输入姓名"
        ></el-input>

        <el-button
          size="small"
          @click="findinfo"
          type="primary"
          class="el-icon-search search-btn"
        >查询</el-button>
        <el-button
          size="small"
          @click="handleReset"
          type="primary"
          plain
          class="el-icon-refresh"
        >重置</el-button>
      </el-form>
    </template>
    <template v-slot:operationBtn>
      <el-button
        size="small"
        type="primary"
        @click="handleAdd"
        icon="el-icon-plus"
        v-methodauth="'pro_person_add'"
      >添加</el-button>
      <ht-delete-button
        :url="deleteUrl"
        :requestMethod="'POST'"
        :htTable="$refs.AtTable"
        v-methodauth="'pro_person_del'"
      >删除</ht-delete-button>
      <el-button
        size="small"
        type="primary"
        plain
        @click="handleAddPerson"
        v-methodauth="'pro_person_add'"
      >添加临时人员</el-button>
      <el-button
        type="primary"
        plain
        icon="el-icon-back"
        @click="$router.go(-1)"
      >返回</el-button>
    </template>
    <template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="address" label="地址" align="center">
      </el-table-column> -->
      <!-- <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->
      <!-- <el-table-column
        prop="entryDate"
        label="入职日期"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->
      <el-table-column
        prop="fullname"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!-- <el-table-column prop="projectName" label="项目名称" align="center">
      </el-table-column> -->
      <!-- <el-table-column prop="sex" label="性别" align="center">
      </el-table-column> -->
      <el-table-column prop="mobile" label="手机号码" align="center">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="180"
      >
        <template v-slot="{row}">
          <el-link
            type="primary"
            @click="handleCommand(row)"
          >
            <i class="el-icon-edit-outline">菜单管理</i>
          </el-link>
          <!-- <el-dropdown
            size="mini"
            split-button
            @command="handleCommand"
            @click="handleCommand({row: row, command: 'menuManger'})"
          >
            <span>
              <el-link type="primary">
                <i class="el-icon-edit-outline">菜单管理</i>
              </el-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{row: row, command: 'userManger'}">
                <el-link type="primary">
                  <i class="el-icon-user-solid">角色管理</i>
                </el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
      </el-table-column>
    </template>
    <eip-user-dialog
      :appendToBody="true"
      :placeholder="'请选择用户'"
      ref="eipDialog"
      @onConfirm="handleOnConfirm"
    />
    <person-info ref="userInfo" @loadPersonnel="loadPersonnel" />
    <role-menu-auth
      append-to-body
      ref="roleMenuAuth"
    ></role-menu-auth>
    <!-- <template v-slot:dialogContent>
      <el-form
        ref="form"
        v-form
        data-vv-scope="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        v-if="dialogVisible"
        v-loading.fullscreen='loading'
      >
        <el-row>
          <el-form-item
            label="选择用户"
            prop="name"
          >
            <eip-user-selector
              :appendToBody="true"
              :placeholder='"请选择用户"'
              ref='eipSelector'
              v-model="form.name"
              :config="{id:'form.personnelId'}"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </template> -->
  </at-table>
</template>

<script>
import personInfo from './modules/dialog/personInfoDialog.vue'
const EipUserDialog = () => import('@/components/dialog/EipUserDialog.vue')
const roleMenuAuth = () => import('./modules/dialog/roleMenuAuth')
export default {
  name: 'personnelManagement',
  components: {
    // eipUserSelector,
    EipUserDialog,
    roleMenuAuth,
    personInfo
  },
  data() {
    return {
      searchForm: {
        fullname: ''
      }, //顶部搜索参数
      dataBaseOptions: {
        dataBaseId: '',
        tableName: '', // 必填
        tableSchema: ''
      },
      originAPIOptions: {
        url: '', // 列表请求接口地址
        method: 'post', // 列表请求方法
        moduleRoot: '' // 微服务根路径
      },
      exportQuery: {},
      data: [], //表格数据
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      form: {},
      dialogTitle: '添加',
      dialogVisible: false,
      loading: false,
      rules: {},
      personId:null,
    }
  },
  computed: {
    deleteUrl: function() {
      return (
        window.context.cqxy +
        '/biz/projectManagement/projectPersonnel/v1/delete'
      )
    }
  },
  methods: {
    //添加临时人员信息
    handleAddPerson(){
      this.$refs.userInfo.open()
    },
    //重置
    handleReset() {
      this.searchForm.fullname = ''
      this.$refs['searchForm'].resetFields()
      this.$refs.AtTable.load()
    },
    handleAdd() {
      this.dialogTitle = '添加'
      this.$refs.eipDialog.showDialog()
    },
    handleSelect(selection) {},
    handleDialogCancel() {
      this.dialogVisible = false
    },
    handleDialogClose() {
      this.dialogVisible = false
    },
    handleRowDBClick(data) {
      // this.form = data
      // this.dialogTitle = '修改'
      // this.dialogVisible = true
    },
 loadPersonnel() {
   this.$refs.AtTable.load()  
    },
     
    handleOnConfirm(row) {
      if (row.length !== 0) {
        let arr = []
        row.forEach(item => {
          arr.push(item.id)
        })
        let str = arr.join(',')
        this.form.personnelId = str
        this.loading = true
        this.form.projectId = this.$route.params.id
        this.$http
          .post(
            '${cqxy}/biz/projectManagement/projectPersonnel/v1/save',
            this.form
          )
          .then(res => {
            if (res.data.state) {
              this.$message.success(res.data.message)
              this.dialogVisible = false
              this.$refs.AtTable.load()
            } else {
              this.$message.error(res.data.message)
            }
            this.loading = false
          })
      }
    },
    handleDialogSubmit() {
      this.loading = true
      this.form.projectId = this.$route.params.id
      this.$http
        .post(
          '${cqxy}/biz/projectManagement/projectPersonnel/v1/save',
          this.form
        )
        .then(res => {
          if (res.data.state) {
            this.$refs.form.resetFields()
            this.$message.success(res.data.message)
            this.dialogVisible = false
            this.$refs.AtTable.load()
          } else {
            this.$message.error(res.data.message)
          }
          this.loading = false
        })
    },
    findinfo() {
      let query = []
      query.push({
        property: 'pp.PROJECT_ID_',
        value: this.$route.params.id
      })
      let search = {
        fullname_: this.searchForm.fullname
      }
      for (let i in search) {
        if (search[i]) {
          query.push({
            group: 'advance',
            operation: 'LIKE',
            property: i,
            relation: 'AND',
            value: search[i]
          })
        }
      }
      let data = {
        pageBean: {
          page: 1,
          pageSize: 20,
          showTotal: true
        },
        querys: query
      }
      console.log(data)
      this.$http
        .post('${cqxy}/biz/projectManagement/projectPersonnel/v1/page', data)
        .then(resp => {
          let response = resp.data.value
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
    },
    loadData(param, cb) {
      param.querys = []
      param.querys.push({
        property: 'pp.PROJECT_ID_',
        value: this.$route.params.id
      })
      this.$http
        .post('${cqxy}/biz/projectManagement/projectPersonnel/v1/page', param)
        .then(
          resp => {
            let response = resp.data.value
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    handleCommand(row) {
      console.log(row, 'eeeeeeee')
      this.$refs.roleMenuAuth.showDialog(row)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
</style>
