<template>
  <div>
    <div class="pageTitle">
      <span>单位画像</span>
    </div>
    <div class="costStyle">
      <div class="costItem">
        <div>总充值费用</div>
        <div>
          <span style="font-size: 20px;">2000</span>
          <span style="font-size: 14px;">.00元</span>
        </div>
      </div>
      <div class="costItem">
        <div>当前余额</div>
        <div>
          <span style="font-size: 20px;">1000</span>
          <span style="font-size: 14px;">.00元</span>
        </div>
      </div>
    </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="projectName">
            <el-input placeholder="请输入单位名称" v-model="form.projectName" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="单位负责人" prop="contractNumber">
            <el-input placeholder="请输入单位负责人" v-model="form.contractNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="联系方式" prop="projectSource">
            <el-input placeholder="请输入联系方式" v-model="form.projectSource" />
          </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="item in companyClassList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="单位地址" prop="projectNumber">
            <el-input placeholder="请输入单位地址" v-model="form.projectNumber" />
          </el-form-item>
        </el-col>
      </el-form>
    </div>

    <div class="module1">
      <div class="moduleTitle">二级单位</div>
      <el-table :data="secondUnitList">
        <el-table-column prop="sort" label="序号" width="90" align="center" fixed="left"></el-table-column>
        <el-table-column prop="name" label="院系名称">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
            <el-input v-model="scope.row.name" v-if="scope.row.isEdit" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="负责人">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
            <el-input v-model="scope.row.name" v-if="scope.row.isEdit" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.phone }}</span>
            <el-input v-model="scope.row.phone" v-if="scope.row.isEdit" />
          </template>
        </el-table-column>
        <el-table-column prop="email" label="部门/院系成果数量" />
        <el-table-column prop="companyName" label="成员" />
        <el-table-column prop="deptName" label="录入时间" />
        <el-table-column prop="professionalTitle" label="备注">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.professionalTitle }}</span>
            <el-input v-model="scope.row.professionalTitle" v-if="scope.row.isEdit"
              @keyup.enter.native="save(scope.row.sort)" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row.sort)" v-if="!scope.row.isEdit">编辑</el-button>
            <el-button type="text" @click="save(scope.row.sort)" v-if="scope.row.isEdit">保存</el-button>
            <el-button type="text" @click="check(scope.$index)">单位详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="module1">
      <div class="moduleTitle">单位成员</div>
      <div>
      <el-form label-position="right" inline ref="queryParams" :model="queryParams" :rules="rules" label-width="100px" class="formStyle">
        <el-col :span="8">
          <el-form-item label="二级单位名称" prop="companySecondId">
            <el-select v-model="queryParams.companySecondId" placeholder="请选择二级单位名称" style="width: 100%;">
              <el-option v-for="item in companyClassList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户姓名" prop="name">
            <el-input placeholder="请输入用户姓名" v-model="queryParams.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="queryParams.phone" />
          </el-form-item>
        </el-col>
      </el-form>
      </div>
      <el-table :data="orderMemberUserList">
        <el-table-column label="单位名(注册信息)" align="center" prop="registerCompanyName" />
        <el-table-column label="部门/院系名称" align="center" prop="deptName" />
        <el-table-column label="单位类别" align="center" prop="companyClass" />
        <el-table-column label="用户来源" align="center" prop="memberSource" />
        <el-table-column label="真实姓名" align="center" prop="realName" />
        <el-table-column label="是否付费" align="center" prop="isPay">
          <template slot-scope="scope">
            <span>{{ scope.row.isPay == 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职称/职务" align="center" prop="professionalTitle" />
        <el-table-column label="职业" align="center" prop="occupation" />
        <el-table-column label="用户账号/AC账户" align="center" prop="userAccount" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="邮箱(登录账号)" align="center" prop="email" />
        <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="nowBalance" />
        <el-table-column label="服务状态" align="center" prop="serviceStatus">
          <template slot-scope="scope">
            <span>{{ scope.row.serviceStatus == 0 ? '服务中' : '服务结束' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateUser(scope.row, 1)"
              v-hasPermi="['cs:csOrderMemberUser:edit']">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateUser(scope.row, 2)"
              v-hasPermi="['cs:csOrderMemberUser:edit']">资源详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </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="resourceInfoList">
        <el-table-column label="资源类型" align="center" prop="projectType">
          <template slot-scope="scope">
            <span>{{ scope.row.projectType == 0 ? '合作项目' : '支持项目' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用情况" align="center" prop="projectLeader" />
        <el-table-column label="账号" align="center" width="180" />
        <el-table-column label="负责人" align="center" prop="projectSource" />
        <el-table-column label="赋能支持" align="center" width="180" />
        <el-table-column label="资源状态" align="center" prop="projectSource" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdatereSource(scope.row)"
              v-hasPermi="['cs:csProjectRecord:edit']">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total3" :page.sync="pageNum3" :limit.sync="pageSize" @pagination="getList3" />
    </div>
    <div class="module1">
      <div class="moduleTitle">单位成果信息</div>
      <el-table :data="achievementList">
        <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" />
        <el-table-column label="预约成果" align="center" prop="useTimeEnd" width="180" />
        <el-table-column label="使用情况调研" align="center" prop="applyStatus" />
      </el-table>

      <pagination :total="total2" :page.sync="pageNum2" :limit.sync="pageSize" @pagination="getList2" />
    </div>
  </div>
</template>

<script>
import { getClassListByMark, listCsResourceOrderApply } from "@/api/cs/csResourceOrderApply";
import { listCsOrderMemberUser, getCsOrderMemberUser, delCsOrderMemberUser, addCsOrderMemberUser, updateCsOrderMemberUser } from "@/api/cs/csOrderMemberUser";
export default {
  data() {
    return {
      form: {
        projectName: '',
        projectNumber: '',
        majorField: '',
        projectSource: '',
        companyClassId: '',
        projectClassName: '',
        projectCycleRange: [],
        useDemand: '',
        workloadEstimate: '',
        contractName: '',
        contractNumber: '',
        contractAnnex: ''
      },
      companyClassList: [],
      rules: {},
      workOrderList: [],
      pageNum1: 1,
      pageNum2: 1,
      total1: 0,
      total2: 0,
      pageSize: 10,
      memberUserId: '',
      CPUform: {
        a: 10,
        b: 20,
        c: 10
      },
      aWidth: '',
      bWidth: '',
      cWidth: '',
      value1: 10,
      value2: 50,
      marks: {
        0: '0(GB)',
        100: '100(GB)',
      },
      orderMemberUserList: [{memberUserId:1}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        phone: null,
        companyId: null,
        companyName: null,
        companySecondId: null,
        userType: '1',
      },
      resourceInfoList: [],
      achievementList:[],
      secondUnitList: [{memberUserId:1}],
      pageSize: 10,
      pageNum1: 1,
      total1: 0,
      pageNum2: 1,
      total2: 0,
      pageNum3: 1,
      total3: 0,
    }
  },
  mounted() {
    this.memberUserId = this.$route.params.id
    this.getUserDetail()
    this.getClassList()
    this.getList1()
    // this.getList2()
  },
  methods: {
    formatTooltip(val) {
      return val + 'GB';
    },
    addChildren() {
      this.secondUnitList.push({
        sort: this.secondUnitList.length + 1,
        name: '',
        phone: '',
        email: '',
        companyName: '',
        deptName: '',
        professionalTitle: '',
        occupation: '',
        jobNumber: '',
        isEdit: true
      })
    },
    edit(sort) {
      let arr = []
      arr = this.secondUnitList.map(v => {
        if (v.sort == sort) {
          v.isEdit = true
        } else {
          v.isEdit = false
        }
        return v
      })
      this.secondUnitList = JSON.parse(JSON.stringify(arr))
    },
    save(sort) {
      let arr = []
      arr = this.secondUnitList.map(v => {
        if (v.sort == sort) {
          v.isEdit = false
        }
        return v
      })
      this.secondUnitList = JSON.parse(JSON.stringify(arr))
    },
    check(sort) {
      this.$router.push({ name: 'secondUnitDetail', params: { id: sort } })
    },
    /** 查询工单用户信息列表 */
    getList() {
      listCsOrderMemberUser(this.queryParams).then(response => {
        this.orderMemberUserList = response.rows;
        this.total = response.total;
      });
    },
    getUserDetail() {
      getCsOrderMemberUser(this.memberUserId).then(response => {
        console.log(response.data)
        // this.form = response.data;
      });
    },
    getClassList() {
      getClassListByMark({ classMark: 'companyClass' }).then(response => {
        this.companyClassList = response.data
      });
    },
    getList1() {
      listCsResourceOrderApply({ pageNum: this.pageNum1, pageSize: this.pageSize, applyType: '1' }).then(response => {
        this.workOrderList = response.rows;
        this.total1 = response.total;
      });
    },
    getList2() {

    },
    getList3() {

    },
    handleUpdateUser(row, type) {
      if (type == '1') {
        this.$router.push({ name: 'resourceUserDetail', params: { id:row.memberUserId } })
      }else if(type=='2'){
        this.$router.push('/userManagement/resourceUserList')
      }
    },
    /** 修改按钮操作 */
    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 } })
      }
    },
    handleUpdateTeam(row) {

    },
    handleDeleteTeam(row) {

    },
    handleUpdatereSource(row) {

    },
  },
}
</script>

<style scoped src="./unitInfo.css" />