<template>
  <div class="componentsSty">
    <el-row style="width: 100%; height: 100%;">
      <el-col :span="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true">
          <el-form-item label="姓名:">
            <el-input v-model="queryForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话:">
            <el-input v-model="queryForm.phone" placeholder="请输入电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="queryForm.status"  placeholder="请选择状态" clearable>
              <el-option v-for="(item,index) in statusOption" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-plus" @click="handleAdd"> 新增用户
            </el-button>
            <el-button type="primary" icon="el-icon-refresh"
                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                       @click="handleReset" plain>重置
            </el-button>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-search" @click="handleSearch"> 查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
        <el-table :data="dataList" border key="table"   ref="multipleTable"  :span-method="arraySpanMethod" style="width: 100%;" v-loading='loading'>
          <el-table-column prop="shopId" type="index" label="序号" width="80"  align="center">
          </el-table-column>
          <el-table-column prop="fSsqymc" label="所属企业" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fSsqymc">{{scope.row.fSsqymc}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fSsczmc" label="所属气站" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fSsczmc">{{scope.row.fSsczmc}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fXm" label="姓名" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fXm">{{scope.row.fXm}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fSjh" label="电话"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fsjh">{{scope.row.fSjh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="ygewm" label="员工二维码"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.ygewm">{{scope.row.ygewm}}</span>
              <span v-else style="color: #5875EB;cursor: pointer;" @click="hanldeViewQrCode('yhgl',scope.row)">查看</span>
            </template>
          </el-table-column>
          <el-table-column prop="fJsmc" label="角色"  min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fsjh">{{scope.row.fJsmc}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fRzsj"  min-width="120" label="入职时间" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fRzsj">{{parseTime(scope.row.fRzsj,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fSfzh" label="身份证号"  min-width="180" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fSfzh">{{scope.row.fSfzh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fZt" label="状态"  width="80" align="center">
            <template slot-scope="scope">
              <span style="color:rgb(0, 174, 170);" v-if="scope.row.fZt=='正常'">正常</span>
              <span style="color:rgb(255, 165, 0);" v-else>停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="fZxzsbh" label="执业证书编号" :show-overflow-tooltip="true"  min-width="180" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fZxzsbh">{{scope.row.fZxzsbh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fZxzsyxqx" label="执业证书有效期"  min-width="120" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fZxzsyxqx">{{parseTime(scope.row.fZxzsyxqx,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="fCjsj" label="创建时间"  min-width="160" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fCjsj">{{scope.row.fCjsj}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作" fixed="right"  min-width="160" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleOptBtn('edit',scope.row)">编辑</el-button>
              <el-button type="text" @click="handleOptBtn('password',scope.row)">重置密码</el-button>
              <el-button type="text" @click="handleOptBtn('delete',scope.row)" style="color:red;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          style="float: right;margin-top: 10px;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="pageParam.page"
          :page-sizes="[10,20,,50,100]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <dialog-info v-if="showDialog" ref="showDialog" :orgId="queryForm.orgId" @closeDialog="handleSearch"></dialog-info>
    <el-dialog
      v-if="showResetDialog"
      title="重置密码"
      :visible.sync="resetPswForm.dialogVisible"
      width="400px"
      @close="handleClose('resetPswForm')">
      <el-row>
        <el-form :model="resetPswForm" :rules="resetPwdRules" :label-position="'top'" ref="resetPswForm">
          <el-col :span="24">
            <el-form-item :label="resetPswForm.label" prop="password">
              <el-input v-model="resetPswForm.password" style="width: 100%;" placeholder="请输入新的密码" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('resetPswForm')">取 消</el-button>
        <el-button type="primary" @click="handleOK('resetPswForm')">确 定</el-button>
      </span>
    </el-dialog>
    <employee-qr-code v-if="showQrCodeVisible" ref="employeeQrCode"></employee-qr-code>
  </div>
</template>

<script>
import {getTableData,deleteUser,resetPassword} from '@/api/userManage'
import DialogInfo from "./personDialogInfo";
import employeeQrCode from '@/components/employeeQRCode/index'

export default {
  name: "personManage",
  components: {DialogInfo,employeeQrCode},
  props:{
    rowData:{
      type:Object,
      default:()=>{}
    }
  },
  async mounted() {
    await this.getDataList();
  },
  data(){
    return {
      filterText:'',
      showResetDialog:false,
      showQrCodeVisible:false,
      showDialog:false,
      resetPswForm:{
        dialogVisible:false,
        password:'',
        fUserId:'',
        label:'请输入"张三-18000000081"的新密码'
      },
      resetPwdRules:{
        password: [
          { required: true, message: '请输入新的密码', trigger: 'change' }
        ]
      },
      queryForm:{
        name:'',
        phone:'',
        status:'',
        orgId:''
      },
      pageParam:{
        page:1,
        size:10,
        total:0
      },
      statusOption:[
        {
          label:'停用',
          value:'停用'
        },
        {
          label:'正常',
          value:'正常'
        }
      ],
      loading:false,
      dataList:[],

    }
  },
  methods:{
    //查询列表事件
    async getDataList(){
      this.loading = true;
      let params={
        size:this.pageParam.size,
        current:this.pageParam.page,
        name:this.queryForm.name,
        phone:this.queryForm.phone,
        state:this.queryForm.status,
        orgId:this.queryForm.orgId,
        flag:true
      }
      await getTableData(params).then((res)=>{
        console.log('Day热s',res);
        const {total,records} = res.value;
        this.dataList = this.mergeTableRow(records, ['fSsqymc','fSsczmc']);;
        this.pageParam.total = total;
        setTimeout(()=>{
          this.loading = false;
        },500);
      })
    },
    //处理dataList中table列表的数据
    mergeTableRow(data, merge) {
      if (!merge || merge.length === 0) {
        return data
      }
      merge.forEach((m) => {
        const mList = {}
        data = data.map((v, index) => {
          const rowVal = v[m]
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            mList[rowVal]['num']++
            mList[rowVal]['newIndex']++
            data[mList[rowVal]['index']][m + 'SPAN'].rowspan++
            v[m + 'SPAN'] = {
              rowspan: 0,
              colspan: 0
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
            v[m + 'SPAN'] = {
              rowspan: 1,
              colspan: 1
            }
          }
          return v
        })
      })
      return data
    },
    //table列表中相同的数据合并功能
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
      if (column.property == 'fSsqymc') {
        return [row.fSsqymcSPAN.rowspan, row.fSsqymcSPAN.colspan]
      }else if (column.property == 'fSsczmc') {
        return [row.fSsczmcSPAN.rowspan, row.fSsczmcSPAN.colspan]
      }
      return [1, 1];
    },
    //点击查看员工气瓶二维码的事件
    hanldeViewQrCode(type,row){
      this.showQrCodeVisible = true;
      this.$nextTick(()=>{
        this.$refs.employeeQrCode.show(type,row);
      })
      console.log('打印row',row);
    },
    //重置按钮事件
    handleReset(){
      this.queryForm.name ='';
      this.queryForm.phone ='';
      this.queryForm.status ='';
      this.pageParam.page = 1;
      this.handleSearch();
    },
    //查询按钮事件
    handleSearch(){
      this.getDataList();
    },
    //新增用户事件
    handleAdd(){
      this.showDialog = true;
      this.$nextTick(()=>{
        this.$refs.showDialog.open('add');
      })
    },
    //分页中页数跳转事件
    handleCurrentChange(val){
      this.pageParam.page = val;
      this.handleSearch();
    },
    //分页中size改变的界面跳转事件
    handleSizeChange(val){
      this.pageParam.size = val;
      this.handleSearch();
    },
    //操作栏按钮点击事件
    handleOptBtn(type,row){
      switch (type){
        case 'edit':
          this.showDialog = true;
          this.$nextTick(()=>{
            this.$refs.showDialog.open(type,row);
          });
          break;
        case 'password':
          this.showResetDialog = true;
          let labelString = '请输入 " '+row.fXm+'-'+row.fSjh+' " 的新密码'
          this.resetPswForm.label = labelString;
          console.log('打印重置密码的row',row);
          this.resetPswForm.fUserId = row.fUserid;
          this.resetPswForm.dialogVisible = true;
          break;
        case 'delete':
          let params ={
            id:row.id
          }
          this.deleteClick(params);
          break;
      }
    },
    //删除事件
    deleteClick(param){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteUser(param).then((res)=>{
          console.log('打印res', res);
          if(res.code == 200){
            this.handleSearch();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //重置密码中取消按钮的事件
    handleClose(formName){
      this.resetPswForm.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    //重置密码中确定按钮的事件
    handleOK(formName){
      this.$refs[formName].validate((valid) => {
        if ( valid) {
          let params ={
            fUserId:this.resetPswForm.fUserId?this.resetPswForm.fUserId:'',
            pwd:this.resetPswForm.password?this.resetPswForm.password:'',
          }
          resetPassword(params).then((res)=>{
            console.log('打印Res',res);
            if(res.code == 200){
              this.$message.success('重置密码成功!');
              this.handleSearch();
            }
          })
          this.resetPswForm.dialogVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      console.log('打印formName',formName)
    },
  }
}
</script>

<style lang="scss" scoped>
.componentsSty{
  width: calc(100% - 30px);
  height: 100%;
}

</style>