<template>
  <div>
    <div class="pageTitle">用户画像信息</div>
    <div class="module1">
      <div class="moduleTitle">用户基本信息</div>
      <el-form label-position="right" ref="form" :model="form" :rules="rules" label-width="100px" class="formStyle">
        <el-col :span="9">
          <el-form-item label="单位名称" prop="companyIds">
            <el-col :span="16">
              <el-cascader v-model="form.companyIds" :options="companyNameList"
                :props="{value:'dictCode',label:'dictLabel'}" />
            </el-col>
            <el-col :span="4" :offset="1"><el-button type="primary" @click="goCompany">查看单位</el-button></el-col>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="单位类别" prop="projectClassId">
            <el-select v-model="form.companyClassId" placeholder="请选择单位类别" style="width: 100%;">
              <el-option v-for="dict in dict.type.company_class" :key="dict.value" :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="姓名" prop="realName">
            <el-input placeholder="请输入姓名" :disabled="true" v-model="form.realName" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="职称" prop="professionalTitle">
            <el-input placeholder="请输入职称" v-model="form.professionalTitle" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱" v-model="form.email" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="form.userType" placeholder="请选择用户类型" style="width:100%">
              <el-option label="内部用户" value="0" />
              <el-option label="外部用户" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="用户来源" prop="memberSource">
            <el-input placeholder="请输入用户来源" v-model="form.memberSource" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邀请人" prop="invitePeople">
            <el-input placeholder="请输入邀请人" v-model="form.invitePeople" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邀请码" prop="inviteCode">
            <el-input placeholder="请输入邀请码" v-model="form.inviteCode" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="用户属性" prop="contractNumber">
            <el-select v-model="form.userAttributeId" placeholder="请选择用户属性" style="width:100%" multiple>
              <el-option v-for="dict in dict.type.user_attribute" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="用户角色" prop="contractNumber">
            <el-select v-model="form.userRoleId" placeholder="请选择用户角色" style="width:100%" multiple>
              <el-option v-for="dict in dict.type.user_role" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息" prop="remarks">
            <el-input type="textarea" placeholder="请输入备注信息" style="width: 99.4%;" maxlength="100" show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }" v-model="form.remarks" />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="module1">
      <div class="moduleTitle">工单账号信息</div>
      <el-form label-position="right" :model="form" :rules="rules" label-width="100px" class="formStyle">
        <el-col :span="9">
          <el-form-item label="账户名" prop="email">
            <el-input placeholder="请输入账户名" v-model="form.email" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" v-model="form.password" type="password" :disabled="!showResetPassword" />
          </el-form-item>
        </el-col>

        <el-col :span="4" :offset="1">
        <el-button type="primary" @click="resetPassword" v-if="!showResetPassword">重置密码</el-button>
          <el-button type="primary" @click="submitResetPassword" v-if="showResetPassword">重置密码</el-button>
        </el-col>
      </el-form>
    </div>

    <div class="module1">
      <div class="moduleTitle">工单记录</div>
      <el-table :data="workOrderList">
        <el-table-column label="申请单号" align="center" prop="applyNumber" />
        <el-table-column label="用户姓名" align="center" prop="name" />
        <el-table-column label="工单类型" align="center" prop="resourceClassName" />
        <el-table-column label="工单标题" align="center" prop="orderTitle" />
        <el-table-column label="申请时间" align="center" prop="createAt" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="applyStatus">
          <template slot-scope="scope">
            <!-- ：0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成 -->
            <span v-if="scope.row.applyStatus == 0">待确认</span>
            <span v-if="scope.row.applyStatus == 1">盖章材料待上传</span>
            <span v-if="scope.row.applyStatus == 2">待审批</span>
            <span v-if="scope.row.applyStatus == 3">审批拒绝</span>
            <span v-if="scope.row.applyStatus == 4">待审核</span>
            <span v-if="scope.row.applyStatus == 5">审核拒绝</span>
            <span v-if="scope.row.applyStatus == 6">待分配</span>
            <span v-if="scope.row.applyStatus == 7">进行中</span>
            <span v-if="scope.row.applyStatus == 8">驳回</span>
            <span v-if="scope.row.applyStatus == 9">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:query']" v-if="scope.row.applyStatus == 9">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total1" :page.sync="pageNum1" :limit.sync="pageSize" @pagination="getList1" />
    </div>

    <div class="module1">
      <div class="moduleTitle">资源申请信息</div>
      <el-table :data="resourceList">
        <el-table-column label="申请单号" align="center" prop="applyNumber" />
        <el-table-column label="项目标题" align="center" prop="projectName" />
        <el-table-column label="负责人" align="center" prop="name" />
        <el-table-column label="资源类型" align="center" prop="resourceClassName" />
        <el-table-column label="开通时间" align="center" prop="useTimeBegin" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTimeBegin, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" align="center" prop="useTimeEnd" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTimeEnd, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="applyStatus">
          <template slot-scope="scope">
            <!-- ：0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成 -->
            <span v-if="scope.row.applyStatus == 0">待确认</span>
            <span v-if="scope.row.applyStatus == 1">盖章材料待上传</span>
            <span v-if="scope.row.applyStatus == 2">待审批</span>
            <span v-if="scope.row.applyStatus == 3">审批拒绝</span>
            <span v-if="scope.row.applyStatus == 4">待审核</span>
            <span v-if="scope.row.applyStatus == 5">审核拒绝</span>
            <span v-if="scope.row.applyStatus == 6">待分配</span>
            <span v-if="scope.row.applyStatus == 7">进行中</span>
            <span v-if="scope.row.applyStatus == 8">驳回</span>
            <span v-if="scope.row.applyStatus == 9">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:query']" v-if="scope.row.applyStatus > 6">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total2" :page.sync="pageNum2" :limit.sync="pageSize" @pagination="getList2" />
    </div>
    <div class="footer">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { listDataTree } from "@/api/system/dict/data";
  import { getClassListByMark, listCsResourceOrderApply } from "@/api/cs/csResourceOrderApply";
  import { listCsOrderMemberUser, getCsOrderMemberUser, delCsOrderMemberUser, addCsOrderMemberUser, updateCsOrderMemberUser,resetPassword} from "@/api/cs/csOrderMemberUser";
  export default {
    dicts: ['user_attribute', 'user_role', 'company_class'],
    data() {
      return {
        form: {
          projectName: '',
          projectNumber: '',
          majorField: '',
          projectSource: '',
          companyClassId: '',
          projectClassName: '',
          projectCycleRange: [],
          useDemand: '',
          workloadEstimate: '',
          contractName: '',
          contractNumber: '',
          contractAnnex: ''
        },
        companyClassList: [],
        rules: {},
        workOrderList: [],
        resourceList: [],
        pageNum1: 1,
        pageNum2: 1,
        total1: 0,
        total2: 0,
        pageSize: 10,
        memberUserId: '',
        attributeList: [],
        roleList: [],
        companyNameList: [],
        showResetPassword: false
      }
    },
    mounted() {
      this.memberUserId = this.$route.params.id
      this.getUserDetail()
      this.getClassList()
      this.getList1()
      this.getList2()
    },
    methods: {
      resetPassword() {
        this.showResetPassword = true
        this.form.password = ''
      },
      submitResetPassword() {
        if (!this.form.password) {
          this.$message({
            message:'密码不能为空',
            type:'error'
          })
          return
        }
        if (this.form.password.length<6||this.form.password.length>25) {
          this.$message({
            message:'长度在 6 到 25 个字符',
            type:'error'
          })
          return
        }
        if(!(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{1,}$/).test(this.form.password)){
          this.$message({
            message:'密码至少包含1个字母、数字、特殊字符',
            type:'error'
          })
          return
        }
        resetPassword({
          memberUserId:this.memberUserId,
          password:this.form.password
        }).then(res=>{
          this.$message({
            message:'重置密码成功',
            type:'success'
          })
          this.showResetPassword = false
          this.getUserDetail()
        })
      },
      getUserDetail() {
        getCsOrderMemberUser(this.memberUserId).then(response => {
          console.log(response.data, '<=====')
          this.form = response.data;
          this.form.userAttributeId = response.data.userAttributeId.split(',')
          this.form.userRoleId = response.data.userRoleId.split(',')
          this.form.companyIds = [this.form.companyId, this.form.companyTwoId]
        });
      },
      goCompany() {
        this.$router.push({ name: 'firstUnitDetail', params: { id: this.form.companyId } })
      },
      getClassList() {
        listDataTree({ dictType: 'cs_company_name' }).then(response => {
          this.companyNameList = response.rows
        });
      },
      getList1() {
        listCsResourceOrderApply({
          pageNum: this.pageNum1,
          pageSize: this.pageSize,
          applyType: '1',
          memberUserId: this.memberUserId,
        }).then(response => {
          this.workOrderList = response.rows;
          this.total1 = response.total;
        });
      },
      getList2() {
        listCsResourceOrderApply({
          pageNum: this.pageNum2,
          pageSize: this.pageSize,
          applyType: '0',
          memberUserId: this.memberUserId
        }).then(response => {
          this.resourceList = response.rows;
          this.total2 = response.total;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const applyId = row.applyId || this.ids
        // console.log(row)
        if (row.applyType == '1') {
          this.$store.commit('SET_workOrderId', { applyId, type: 0 });
          this.$router.push({ name: 'workOrderApplication', params: { applyId } })
        } else {
          this.$router.push({ name: 'hpcApplication', params: { applyId } })
        }
      },
      submitForm() {
        this.form.userAttributeId =this.form.userAttributeId?this.form.userAttributeId.join(','):''
        this.form.userRoleId =this.form.userRoleId?this.form.userRoleId.join(','):''
        this.form.companyId = this.form.companyIds?this.form.companyIds[0]:''
        this.form.companyTwoId =this.form.companyIds?this.form.companyIds[1]:''
        console.log(this.form)
        updateCsOrderMemberUser({ ...this.form }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getUserDetail()
          }
        })
      },
    },
  }
</script>

<style scoped>
  .pageTitle {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }

  .formStyle {
    display: flex;
    flex-wrap: wrap;
  }

  .module1 {
    height: auto;
    margin-bottom: 10px;
    padding: 16px 16px 20px 16px;
    background: #FFFFFF;
    border-radius: 4px;
  }

  .moduleTitle {
    height: 22px;
    margin-bottom: 10px;
    margin-left: 6px;
    font-weight: bold;
    font-size: 16px;
    color: #0051AA;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
