<script>
import scorePackageStatusDict from "@/utils/dict/ScorePackageStatus";
import {listDeptSummary, listDrugEnt, search} from "@/api/cso_sys_user";
import {listAllRoles} from "@/api/cso_sys_role";
import {getDictMap} from "@/api/cso_sys_dict";
import dayjs from "dayjs";
import CsoSysUserDetails from './details.vue'
import ColumnsSelect from "@/components/ColumnsSelect/index.vue";

export default {
  name: 'CsoSysUser',
  components:{ColumnsSelect, CsoSysUserDetails},
  data() {
    return {
      searchForm: {
        realname: null,
        phone: null,
        deptId:null,
        roleId:null,
        subjectLocation:null,
        lockFlag:null
      },
      searchParams: {
        realname: null,
        phone: null,
        deptId:null,
        roleId:null,
        subjectLocation:null,
        lockFlag:null
      },
      data: null,
      pageSize: 10,
      scorePackageStatusDict,
      showLevel: -1,
      nextId:0,
      loading:false,
      depts:[],
      drugEnts:[],
      roles:[],
      subjectLocationDict:{},
      lockFlagDict:[{label:'活跃',value:0},{label:'锁定',value:9}],
      columns: [
        { key: 0, label: `用户`, visible: true },
        { key: 1, label: `手机号`, visible: true },
        { key: 2, label: `派工方`, visible: true },
        { key: 3, label: `角色`, visible: true },
        { key: 4, label: `认证状态`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
        { key: 7, label: `测评结果`, visible: true }
      ],
    }
  },
  computed: {
    hasSearchParams() {
      for (const key of Object.keys(this.searchParams)) {
        const value = this.searchParams[key]
        if (value === null || value === undefined) {
          continue
        }
        if (typeof value === 'string') {
          if (value.trim().length > 0) {
            return true
          }
        } else if (Array.isArray(value)) {
          if (value.length > 0) {
            return true
          }
        }
      }
      return false
    }
  },
  watch:{
    showLevel(){
      this.search()
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init(){
      await Promise.all([this.loadDict(),this.search()])
    },
    async loadDict(){
      this.depts=await listDeptSummary()
      this.drugEnts=await listDrugEnt()
      this.roles=await listAllRoles()
      this.subjectLocationDict=await getDictMap('subject_location')
    },
    async search() {
      this.searchParams = {
        realname: this.searchForm.realname,
        phone: this.searchForm.phone,
        deptId: this.searchForm.deptId,
        roleId: this.searchForm.roleId,
        subjectLocation: this.searchForm.subjectLocation,
        lockFlag: this.searchForm.lockFlag
      }
      await this.loadData(1)
    },
    async loadData(page) {
      this.loading=true
      try {
        const params = {
          page: page - 1,
          size: this.pageSize,
          ...this.searchParams,
          delFlag:'0',
        }
        const data = await search(params)
        data.content.forEach(row=>this.processRow(row))
        this.data = data
      } finally {
        this.loading=false
      }
    },
    processRow(row){
      row.createTime=this.formatDate(row.createTime)
    },
    indexMethod(index) {
      return this.data.page*this.data.size+index+1
    },
    formatDate(value){
      if(!value){
        return ''
      }else{
        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    async handleSizeChange(val){
      this.pageSize=val
      await this.search()
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-form inline v-model="searchForm">
      <el-form-item label="用户">
        <el-input v-model="searchForm.realname"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="派工方">
        <el-select v-model="searchForm.deptId" filterable clearable multiple>
          <el-option
            v-for="item in depts"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="searchForm.roleId" filterable clearable>
          <el-option
            v-for="item in roles"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算渠道">
        <el-select v-model="searchForm.subjectLocation" filterable clearable>
          <el-option
            v-for="(label,value) in subjectLocationDict"
            :key="value"
            :label="label"
            :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.lockFlag" filterable clearable>
          <el-option
            v-for="item in lockFlagDict"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">检索</el-button>
      </el-form-item>
    </el-form>
    <div class="table-toolbar">
      <div class="table-toolbar-left">
      </div>
      <div class="table-toolbar-right">
        <columns-select :columns="columns"/>
      </div>
    </div>
    <div>
      <el-table v-loading="loading" :data="data?data.content:[]" style="width: 100%" border max-height="600">
        <el-table-column type="index" label="序号" :index="indexMethod" width="70"/>
        <el-table-column prop="realname" label="用户" width="150" v-if="columns[0].visible"/>
        <el-table-column prop="phone" label="手机号" width="110" v-if="columns[1].visible"/>
        <el-table-column prop="deptName" label="派工方" width="150" v-if="columns[2].visible"/>
        <el-table-column prop="roles" label="角色" width="200" v-if="columns[3].visible"/>
        <el-table-column prop="subCertStatus" label="认证状态" v-if="columns[4].visible"/>
        <el-table-column prop="lockFlag" label="状态" width="60" v-if="columns[5].visible">
          <span slot-scope="{row}">{{row.lockFlag==='0'?'活跃':'锁定'}}</span>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" v-if="columns[6].visible"/>
        <el-table-column prop="quizResult" label="测评结果" width="120" v-if="columns[7].visible"/>
        <el-table-column
          label="操作"
          width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="$refs.details.open(scope.row.userId)">个人名片</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="data" class="pagination-container">
      <el-pagination class="zshk-result-panel-pagination"
                     @current-change="loadData"
                     @size-change="handleSizeChange"
                     :current-page="data.page+1"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next"
                     :total="data.totalElements">
      </el-pagination>
    </div>
    <cso-sys-user-details ref="details"></cso-sys-user-details>
  </div>
</template>

<style scoped lang="scss">

</style>
