
<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          style="width: 240px"
          @keyup.enter.native="loadData"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入手机号码"
          clearable
          style="width: 240px"
          @keyup.enter.native="loadData"
        />
      </el-form-item>
      <el-form-item label="职称等级" prop="professionalTitleGrade">
        <el-select
          v-model="queryParams.professionalTitleGrade"
          filterable
          placeholder="职称等级"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type[DictType.professional_title_grade]"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态" prop="status">
        <el-select
          v-model="queryParams.status"
          filterable
          placeholder="账号状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type[DictType.expert_account_status]"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="常驻省市" prop="cityId">
        <area-cascader :province-id.sync="queryParams.provinceId" :city-id.sync="queryParams.cityId" :placeholder="'请选择所在省市'" :level="2" style="width: 240px" @areaOptions="areaOptions" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="loadData">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:platform:expert:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:user:import']"
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="$refs.importDialogRef.handleOpen()"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:user:export']"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="loadData" />
    </el-row>
    <j-table
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :pagination.sync="pagination"
      @pagination-change="loadData"
      @selection-change="handleSelectionChange"
    >
      <template slot="sexType" slot-scope="{ row }">
        <dict-tag :options="dict.type[DictType.sys_sex]" :value="row.sex" />
      </template>
      <template slot="professionalTitleGradeType" slot-scope="{ row }">
        <dict-tag :options="dict.type[DictType.professional_title_grade]" :value="row.professionalTitleGrade" />
      </template>
      <template slot="statusType" slot-scope="{ row }">
        <dict-tag :options="dict.type[DictType.expert_account_status]" :value="row.status" />
      </template>
      <template slot="cityIdType" slot-scope="{ row }">
        <span>{{ findProvinceCity(areaList,row.provinceId,row.cityId) }}</span>
      </template>
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template v-if="scope.row.userId !== 1 && scope.row.userType != '00'" slot-scope="scope">
          <el-button
            v-hasPermi="['system:platform:expert:query']"
            size="mini"
            type="text"
            @click.stop="handleDetails(scope.row)"
          >详情</el-button>
          <el-button
            v-hasPermi="['system:platform:expert:edit']"
            size="mini"
            type="text"
            @click.stop="handleEdit(scope.row)"
          >编辑</el-button>
          <span @click.stop>
            <el-dropdown trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right" @click.stop>更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-hasPermi="['system:platform:expert:resetPwd']"
                  command="handleAccount"
                >{{ scope.row.status === '2' ? '添加账号' : '账号管理' }}</el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.status !== '2'"
                  v-hasPermi="['system:platform:expert:resetPwd']"
                  command="handleResetPwd"
                >重置密码</el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.status === '2'"
                  v-hasPermi="['system:platform:expert:abandon']"
                  command="handleRemove"
                >删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </template>
      </el-table-column>
    </j-table>

    <expert-dialog ref="expertDialogRef" @ok="loadData" />
    <import-dialog ref="importDialogRef" @ok="loadData" />
    <account-dialog ref="accountDialogRef" @ok="loadData" />
    <resetPassword ref="resetPasswordDialogRef" @ok="loadData" />
  </div>
</template>

<script>
import JTable from '@/components/Table/index.vue'
import ExpertDialog from '@/views/system/expert/modules/ExpertDialog.vue'
import ImportDialog from '@/views/system/expert/modules/ImportDialog.vue'
import AccountDialog from '@/views/system/expert/modules/accountDialog.vue'
import { parseTime } from '@/utils/vctgo'
import DictType from '@/utils/dict/DictType'
import { accountManger, deleteExpert, getExpertList } from '@/api/system/expert'
import AreaCascader from '@/components/Cascader/AreaCascader.vue'
import { findProvinceCity } from '@/utils/index'
import { resetUserPwd } from '@/api/system/user'
import resetPassword from '@/views/system/expert/modules/resetPassword.vue'
const initForm = {
  nickName: '',
  phonenumber: '',
  sex: '',
  professionalTitleGrade: '',
  status: '',
  cityId: '',
  researchField: '',
  researchDiscipline: '',
  createBy: '',
  createTime: ''
}
export default {
  name: 'ExpertIndex',
  dicts: [DictType.professional_title_grade, DictType.expert_account_status, DictType.sys_sex],
  components: {
    AreaCascader,
    JTable,
    ExpertDialog,
    ImportDialog,
    AccountDialog,
    resetPassword
  },
  data() {
    return {
      DictType,
      loading: false,
      showSearch: true,
      tableData: [],
      dateRange: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      queryParams: Object.assign({}, initForm),
      selected: [],
      areaList: [],
      columns: [
        { prop: 'nickName', label: '专家姓名', align: 'left', minWidth: 120 },
        { prop: 'phonenumber', label: '手机号', minWidth: 130 },
        { prop: 'sex', label: '性别', align: 'left', customRender: 'sexType' },
        { prop: 'professionalTitleGrade', label: '职称等级', align: 'left', customRender: 'professionalTitleGradeType' },
        { prop: 'cityId', label: '常驻省市', align: 'center', customRender: 'cityIdType', minWidth: 130 },
        { prop: 'researchField', label: '研究领域', align: 'left' },
        { prop: 'researchDiscipline', label: '研究学科', align: 'left' },
        { prop: 'status', label: '账号状态', align: 'left', customRender: 'statusType' },
        { prop: 'createBy', label: '创建人', align: 'left' },
        { prop: 'createTime', label: '创建时间', minWidth: 160 }
      ]
    }
  },
  computed: {

  },
  created() {
  },
  methods: {
    findProvinceCity,
    /**
     * 查询专家列表
     */
    loadData() {
      this.loading = true
      getExpertList(this.addDateRange(Object.assign({}, this.pagination, this.queryParams), this.dateRange))
        .then(({ data, total }) => {
          this.tableData = data
          this.pagination.total = total
        }).finally(() => {
          this.loading = false
        })
    },
    handleSelectionChange(selection) {
      this.selected = selection
    },
    handleReset() {
      this.dateRange = []
      this.pagination.pageNum = 1
      this.queryParams = Object.assign({}, initForm)
      this.loadData()
    },
    handleExport() {
      this.download('system/user/export', {
        ...this.queryParams
      }, `用户管理_${parseTime(new Date().getTime(), '{y}-{m}-{d}')}.xlsx`)
    },
    onDelete(id, ids) {
      deleteExpert(id, ids).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadData()
      })
    },
    handleRemove(row) {
      this.$modal.confirm(`确认删除吗？删除后不可恢复`).then(() => {
        this.onDelete(row.id, row.userId)
      })
    },
    handleCommand(command, row) {
      this[command](row)
    },
    areaOptions(val) {
      this.areaList = val
      this.loadData()
    },
    /**
     * 重置密码
     */
    handleResetPwd(row) {
      this.$confirm('确认重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        accountManger({ userId: row.userId }).then(({ msg, code }) => {
          if (code === 200) {
            this.$modal.msgSuccess('修改密码成功')
            this.$refs.resetPasswordDialogRef.handleOpen({
              userAccount: row.phonenumber,
              pwd: msg
            })
          }
        })
      }).catch(() => {

      })
    },
    /**
     * 新增专家
     */
    handleAdd() {
      this.$router.push({ path: '/system/addExpert' })
    },
    /**
     * 编辑专家
     */
    handleEdit(row) {
      this.$router.push({ path: '/system/editExpert', query: { id: row.userId }})
    },
    /**
     * 账号管理
     */
    handleAccount(row) {
      console.log(row)
      this.$refs.accountDialogRef.handleOpen(
        {
          nickName: row.nickName,
          phonenumber: row.phonenumber,
          status: row.status,
          userId: row.userId,
          roleIds: row.roleIds,
          id: row.id || null
        }
      )
    },
    /**
     * 详情页面
     */
    handleDetails(row) {
      this.$router.push({ path: '/system/details', query: { id: row.userId }})
    }
  }
}
</script>
<style scoped lang="scss">

</style>
