<template>
    <div class="main">
      <div class="title">
        <img src="../../../assets/imgS/leftBack.png" alt="" @click="back">
        <span>查看账户延期人员信息统计表</span>
      </div>
      <div class="module1">
        <div class="publishaccountExtensions">
          <div class="paperaccountExtensions">
            <div v-if="accountExtension.length > 0">
              <div v-for="(item, index) in accountExtension" :key="index">
                <el-form label-position="right" :model="item" :rules="rules1" :disabled="active == 1" class="formStyle1"
                  :ref="'paperaccountExtension' + index" v-if="item.delFlag == null || item.delFlag == '0'">
                  <el-col :span="22">
                    <el-form-item>
                      <div class="numberDeletion">
                        <div>延期人员信息{{ index + 1 }}</div>
                        <el-button type="text" @click="delPaper(index, item)" v-if="active != 1">删除</el-button>
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col :span="9">
                    <el-form-item label="主账号" prop="userInfoName" label-width="150px">
                      <el-input v-model="item.userInfoName" placeholder="请输入主账号" :disabled="active==1""/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="账户信息" prop="account" label-width="150px">
                      <el-input v-model="item.account" placeholder="请输入账户信息" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="单位" prop="companyName" label-width="150px">
                      <el-input v-model="item.companyName" placeholder="请输入单位" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="部门/院系" prop="deptName" label-width="150px">
                      <el-input v-model="item.deptName" placeholder="请输入部门/院系" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="姓名" prop="userName" label-width="150px">
                      <el-input v-model="item.userName" placeholder="请输入姓名" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="电话" prop="userPhone" label-width="150px">
                      <el-input v-model="item.userPhone" placeholder="请输入电话" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="邮箱" prop="userEmail" label-width="150px">
                      <el-input v-model="item.userEmail" placeholder="请输入邮箱" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="项目负责人" prop="isLeader" label-width="150px">
                      <el-radio-group v-model="item.isLeader">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-form>
              </div>
            </div>
            <div @click="addPaper" class="addaccountExtensions" v-if="active != 1"> +延期人员信息</div>
          </div>
        </div>
        <div class="footer">
          <el-button @click="back">取消</el-button>
          <el-button type="primary" @click="submitForm" :disabled="active == 1">保 存</el-button>
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        accountExtension: [],
        rules1: {
          userInfoName: [
            { required: true, message: "请输入主账号", trigger: "blur" },
          ],
          account: [
            { required: true, message: "请输入账户信息", trigger: "blur" },
          ],
          companyName: [
            { required: true, message: "请输入单位", trigger: "blur" },
          ],
          deptName: [
            { required: true, message: "请输入部门/院系", trigger: "blur" },
          ],
          userName: [
            { required: true, message: "请输入姓名", trigger: "blur" },
          ],
          userPhone: [
            { required: true, message: "请输入电话", trigger: "blur" },
          ],
          userEmail: [
            { required: true, message: "请输入邮箱", trigger: "blur" },
          ],
          isNote: [
            { required: true, message: "请选择是否是项目负责人", trigger: "blur" },
          ],
        },
        active: ''
      }
    },

    mounted() {
      this.active = this.$cookie.get('accountExtensionActive')
      var accountExtension = sessionStorage.getItem('accountExtension') ? JSON.parse(sessionStorage.getItem('accountExtension')) : ''
      console.log(accountExtension);

      if (accountExtension) {
        this.accountExtensionObj = accountExtension
        this.accountExtension = accountExtension || []
      }
    },
    methods: {

      submitForm() {
        let paperLength = this.accountExtension.length
        let isValid = true
        if (paperLength > 0) {
          eval('this.$refs.paperaccountExtension' + (paperLength - 1))[0].validate(valid => isValid = valid)
        }
        if (!isValid) {
          this.$message({
            message: '有未填写的必填项',
            type: 'warning'
          })
        } else {
          // let confirmForm = {
          //   accountExtension: this.accountExtension,
          // }
          // console.log(confirmForm);
          console.log(this.accountExtension);

          sessionStorage.setItem('accountExtension', JSON.stringify(this.accountExtension))
          sessionStorage.setItem('isbao', 1)
          // console.log(sessionStorage.getItem('accountExtension'));
  localStorage.setItem('activeInfo',this.active)
          this.$router.back()
        }
      },

      back() {
        this.$router.back()
      },
      addPaper() {
        console.log(this.accountExtension);
        let num = 0
        this.accountExtension.map(item => {
          if (item.delFlag == 1) {
            num++
          }
        })
        console.log(num);

        if (this.accountExtension.length == 0 || this.accountExtension.length == num) {
          this.accountExtension.push({
            sort: this.accountExtension.length + 1,
            userInfoName: '',
            account: '',
            companyName: '',
            deptName: '',
            userName: '',
            userPhone: '',
            userEmail: '',
            isLeader: '',
          })
        } else {
          let index = this.accountExtension.length - 1
          eval('this.$refs.paperaccountExtension' + index)[0].validate(valid => {
            if (valid) {
              this.accountExtension.push({
                sort: this.accountExtension.length + 1,
                userInfoName: '',
                account: '',
                companyName: '',
                deptName: '',
                userName: '',
                userPhone: '',
                userEmail: '',
                isLeader: '',
              })
            } else {
              this.$message({
                message: '有未填写的必填项',
                type: 'warning'
              })
            }
          })
        }
      },
      delPaper(index, item) {
        this.accountExtension.splice(index, 1)
      },
    }
  }
  </script>

  <style scoped>
  .main {
    padding: 20px;
  }

  .title {
    height: 56px;
    padding-left: 20px;
    background: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .title>img {
    width: 14px;
    height: 19px;
    margin-right: 10px;
    cursor: pointer;
  }

  .title>span {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    text-align: left;
  }

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

  .moduleTitle {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;
  }

  .moduleTitle>img {
    width: 22px;
    height: 22px;
  }

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

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

  .prompt {
    font-size: 12px;
    color: #0051AA;
    text-align: center;
    padding-left: 20px;
  }

  .secondTitle1 {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .secondTitle {
    font-weight: 500;
    font-size: 14px;
    color: #0051AA;
    padding-left: 6px;
  }

  .publishaccountExtensions {
    height: auto;
    margin-bottom: 30px;
  }

  .paperaccountExtensions {
    padding-bottom: 30px;
  }

  .smallTitle {
    font-weight: bold;
    padding-left: 6px;
  }

  .numberDeletion {
    display: flex;
    justify-content: space-around;
  }

  .addaccountExtensions {
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #0051AA;
    border: 1px dashed #0051AA;
    margin: 10px 0;
    cursor: pointer;
  }

  .secondTitle2>div:nth-of-type(1) {
    color: #0051AA;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .agreePromoteStyle>span {
    padding-right: 20px;
  }

  .footer {
    display: flex;
    justify-content: center;
    padding: 20px 0 50px 0;
  }
  </style>
