<template>
  <div>
    <div class="titleList">
      <div v-for="(item, index) in listTypeList" :key="index" @click="getResourceTemplate(item.dictType)"
        :class="{ active: listTypeDictType == item.dictType }">
        {{ item.dictName }}
      </div>
    </div>
    <div class="content">
      <div class="moduleTitle">负责人信息</div>
      <div class="moduleItem">
        <el-descriptions :column="2" border labelClassName="descriptionsLabel" contentClassName="descriptionsContent">
          <el-descriptions-item label="单位名称">
            <el-switch v-model="responsiblePerson.companyName.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.companyName.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.companyName.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="单位类别">
            <el-switch v-model="responsiblePerson.companyClassId.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 20px;"></span>
            <el-switch v-model="responsiblePerson.companyClassId.isSelect" active-text="下拉选择" inactive-text="平铺" />
            <span style="padding-right: 20px;"></span>
            <el-radio v-model="responsiblePerson.companyClassId.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.companyClassId.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="项目负责人">
            <el-switch v-model="responsiblePerson.name.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.name.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.name.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="职称">
            <el-switch v-model="responsiblePerson.professionalTitle.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.professionalTitle.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.professionalTitle.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="部门/院系">
            <el-switch v-model="responsiblePerson.deptName.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.deptName.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.deptName.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="职业">
            <el-switch v-model="responsiblePerson.occupation.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.occupation.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.occupation.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <el-switch v-model="responsiblePerson.phone.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.phone.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.phone.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="E-mail">
            <el-switch v-model="responsiblePerson.email.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="responsiblePerson.email.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="responsiblePerson.email.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="展示位置">
            <el-checkbox-group v-model="responsiblePerson.userSideFilling" :min="0" :max="2">
              <el-checkbox v-for="(obj, index) in userSideList" :label="obj.value" :key="index">{{ obj.label
                }}</el-checkbox>
            </el-checkbox-group>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 10px; display: flex;justify-content: center;">
          <el-button type="primary" @click="addCsSetTemplate('responsiblePerson')">保存</el-button>
        </div>
      </div>
      <div class="moduleTitle">项目信息</div>
      <div class="moduleItem">
        <el-descriptions :column="2" border labelClassName="descriptionsLabel" contentClassName="descriptionsContent">
          <el-descriptions-item label="项目名称">
            <el-switch v-model="projectInfo.projectName.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.projectName.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.projectName.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="项目编号">
            <el-switch v-model="projectInfo.projectNumber.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.projectNumber.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.projectNumber.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="专业领域">
            <el-switch v-model="projectInfo.majorField.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.majorField.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.majorField.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="项目来源">
            <el-switch v-model="projectInfo.projectSource.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.projectSource.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.projectSource.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="项目类别">
            <el-switch v-model="projectInfo.projectClassId.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 20px;"></span>
            <el-switch v-model="projectInfo.projectClassId.isSelect" active-text="下拉选择" inactive-text="平铺" />
            <span style="padding-right: 20px;"></span>
            <el-radio v-model="projectInfo.projectClassId.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.projectClassId.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="项目起止时间">
            <el-switch v-model="projectInfo.projectCycleRange.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.projectCycleRange.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.projectCycleRange.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="使用需求">
            <el-switch v-model="projectInfo.useDemand.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.useDemand.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.useDemand.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="任务量估算">
            <el-switch v-model="projectInfo.workloadEstimate.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.workloadEstimate.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.workloadEstimate.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="合同名称">
            <el-switch v-model="projectInfo.contractName.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.contractName.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.contractName.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="合同编号">
            <el-switch v-model="projectInfo.contractNumber.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.contractNumber.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.contractNumber.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="合同附件">
            <el-switch v-model="projectInfo.contractAnnex.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.contractAnnex.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.contractAnnex.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="需求内容">
            <el-switch v-model="projectInfo.demandContent.isShow" active-text="显示" inactive-text="隐藏" />
            <span style="padding-right: 60px;"></span>
            <el-radio v-model="projectInfo.demandContent.isRequired" :label="true">必填</el-radio>
            <el-radio v-model="projectInfo.demandContent.isRequired" :label="false">非必填</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="展示位置">
            <el-checkbox-group v-model="projectInfo.userSideFilling" :min="0" :max="2">
              <el-checkbox v-for="(obj, index) in userSideList" :label="obj.value" :key="index">{{ obj.label
                }}</el-checkbox>
            </el-checkbox-group>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 10px; display: flex;justify-content: center;">
          <el-button type="primary" @click="addCsSetTemplate('projectInfo')">保存</el-button>
        </div>
      </div>
      <div class="moduleTitle">用户使用人员信息</div>
      <div class="moduleItem">
        <el-descriptions :column="2" border labelClassName="descriptionsLabel" contentClassName="descriptionsContent">
          <el-descriptions-item label="序号">
            <el-switch v-model="userInfoList.sort.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="姓名">
            <el-switch v-model="userInfoList.name.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <el-switch v-model="userInfoList.phone.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <el-switch v-model="userInfoList.email.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="工作单位">
            <el-switch v-model="userInfoList.companyName.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="部门/院系">
            <el-switch v-model="userInfoList.deptName.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="职称/职务">
            <el-switch v-model="userInfoList.professionalTitle.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="职业">
            <el-switch v-model="userInfoList.occupation.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="工号/学号">
            <el-switch v-model="userInfoList.jobNumber.isShow" active-text="显示" inactive-text="隐藏" />
          </el-descriptions-item>
          <el-descriptions-item label="展示位置">
            <el-checkbox-group v-model="userInfoList.userSideFilling" :min="0" :max="2">
              <el-checkbox v-for="(obj, index) in userSideList" :label="obj.value" :key="index">{{ obj.label
                }}</el-checkbox>
            </el-checkbox-group>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 10px; display: flex;justify-content: center;">
          <el-button type="primary" @click="addCsSetTemplate('userInfoList')">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { listType1 } from "@/api/system/dict/resourceType";
  import { updateCsSetTemplate,getInfoByFormValue } from "@/api/cs/CsClassTemplate";
  export default {
    data() {
      return {
        listTypeList: [],
        listTypeDictType: 'resource_HPC',
        userSideList: [{ label: '用户端填写', value: 'user' }, { label: '管理端填写', value: 'admin' },],
        responsiblePerson: {
          companyName: { 
            // isRequired: true, isShow: true
           },
          companyClassId: { 
            // isRequired: true, isShow: true, isSelect: true
           },
          name: { 
            // isRequired: true, isShow: true
           },
          professionalTitle: { 
            // isRequired: true, isShow: true
           },
          occupation: { 
            // isRequired: false, isShow: true
           },
          deptName: { 
            // isRequired: true, isShow: true
           },
          phone: { 
            // isRequired: true, isShow: true
           },
          email: { 
            // isRequired: true, isShow: true
           },
          userSideFilling: ['user', 'admin']
        },
        projectInfo: {
          projectName: { 
            // isRequired: true, isShow: true
           },
          projectNumber: { 
            // isRequired: true, isShow: true
           },
          majorField: { 
            // isRequired: false, isShow: true
           },
          projectSource: { 
            // isRequired: false, isShow: true
           },
          projectClassId: { 
            // isRequired: true, isShow: true, isSelect: true
           },
          projectClassName: { 
            // isRequired: true, isShow: true
           },
          projectCycleRange: { 
            // isRequired: false, isShow: true
           },
          useDemand: { 
            // isRequired: true, isShow: true
           },
          workloadEstimate: { 
            // isRequired: true, isShow: true
           },
          contractName: { 
            // isRequired: true, isShow: true
           },
          contractNumber: { 
            // isRequired: false, isShow: true
           },
          contractAnnex: { 
            // isRequired: false, isShow: true
           },
          demandContent: { 
            // isRequired: false, isShow: true
           },
          userSideFilling: ['user', 'admin']
        },
        userInfoList: {
          sort: { 
            // isShow: true
           },
          name: { 
            // isShow: true
           },
          phone: { 
            // isShow: true
           },
          email: { 
            // isShow: true
           },
          companyName: { 
            // isShow: true
           },
          deptName: { 
            // isShow: true
           },
          professionalTitle: { 
            // isShow: true
           },
          occupation: { 
            // isShow: true
           },
          jobNumber: { 
            // isShow: true
           },
          userSideFilling: ['user', 'admin']
        }
    
      }
    },
    created() {
      listType1().then(res => {
        this.listTypeList = res.rows
      })
      this.getInfoByFormValueList()
    },
    methods: {
      getResourceTemplate(dictType) {
        this.listTypeDictType = dictType
      },
      getInfoByFormValueList(){
        getInfoByFormValue({formValue:'responsiblePerson'}).then(res=>{
          this.responsiblePerson = JSON.parse(res.data.templateContent)
          this.responsiblePersonId = res.data.templateId
        })
        getInfoByFormValue({formValue:'projectInfo'}).then(res=>{
          this.projectInfo = JSON.parse(res.data.templateContent)
          this.projectInfoId = res.data.templateId
        })
        getInfoByFormValue({formValue:'userInfoList'}).then(res=>{
          this.userInfoList = JSON.parse(res.data.templateContent)
          this.userInfoListId = res.data.templateId
        })
      },
      addCsSetTemplate(type) {
        updateCsSetTemplate({
          templateId:this[type+'Id'],
          formValue: type,
          templateContent: JSON.stringify(this[type])
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .titleList {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .titleList>div {
    cursor: pointer;
    padding: 10px;
  }

  .active {
    color: #1890ff;
    border-bottom: 4px solid #1890ff;
  }

  .content {
    margin-top: 20px;
    margin-left: 20px;
  }

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

  .moduleItem {
    width: 96%;
    /* display: flex;
  align-items: center;
  justify-content: space-around; */
  }

  ::v-deep .descriptionsLabel {
    width: 10%;
    color: #262626;
    background-color: #F8FAFF;
  }

  ::v-deep .descriptionsContent {
    width: 40%;
    font-size: 14px;
    color: #262626;
  }
</style>