<template>
  <!-- 风险清册 -->
  <div class="fullHeight">
    <div v-if="type != 'detail'" style="height: 100%;">
      <div class="searchBox whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <el-form-item>
            <el-button class="expintBtn" size="medium" type="primary" @click="addBefore(1, null)"
              v-permission="{key: 'subjectManagement_add', menuPath: '/project/examSystem2/subjectManagement'}"
            >新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
          <el-table height="240" class="tables" :data="listData" lazy row-key="id">
            <!-- :header-cell-style="{ 'text-align': 'center' }"> -->
            <el-table-column prop="name" width="200" align="center" label="科目类型"></el-table-column>
            <el-table-column></el-table-column>
            <el-table-column width="240" label="操作" align="center">
              <template slot-scope="scope">
                 <el-button size="mini" type="text" style="color:#5886f6" icon="el-icon-edit" 
                  v-permission="{key: 'subjectManagement_edit', menuPath: '/project/examSystem2/subjectManagement'}"
                  @click="editBefore(scope.row)">
                  <span style="color:black">编辑</span>
                </el-button>
                <el-button size="mini" type="text" style="color:#ec4b52" class="delete-btn" icon="el-icon-delete" 
                  v-permission="{key: 'subjectManagement_delete', menuPath: '/project/examSystem2/subjectManagement'}"
                  @click.native.stop="deleteBefore(scope.row)">
                  <span style="color:black">删除</span>
                </el-button>
                <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="editBefore(scope.row)" >
                  编辑
                </el-button>
                <el-button size="mini" type="text" class="delete-btn" icon="el-icon-delete" @click.native.stop="deleteBefore(scope.row) ">
                  删除
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
        <!-- </vue-scroll> -->
        <el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange" :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize" layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background>
      </el-pagination>
      </div>
      <!-- '新增父子级工程弹框' -->
      <el-dialog :modal-append-to-body="false" :title="title" :visible.sync="dialogVisible" width="667px" @close="close">
        <div class="dialog_content">
          <el-form ref="addEditForm" label-width="145px" size="medium" class="dialogFormBox" 
          :rules="addEditRules" :model="subjectInfo">
            <el-form-item label="科目类型" prop="name">
              <el-input v-model="subjectInfo.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button class="cancleBtn" @click="handleCancel" icon="el-icon-circle-close" size="medium">取消
          </el-button>
          <el-button v-if="title != '详情'" type="primary" icon="el-icon-circle-check" @click="submitBtn" size="medium">确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  <script>
import {
  addExamSubjectApi,
  deleteExamSubjectApi,
  editExamSubjectApi,
  listExamSubjectApi,
  pageExamSubjectApi,
  listTreeExamSubjectApi,
} from '@/assets/js/api/examSystem/examSystem'

export default {
  mounted() {},
  data() {
    return {
      title: '',
      projectSn: '',
      listData: [],
      dialogVisible: false, //新增弹窗
      subjectInfo: {
        name: '',
        // parentId: '0',
      },
      opType: '',
      showTime: false, //工期
      type: 'add',
      addEditRules: {
        name: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur',
          },
        ],
      },
      userInfo: {},
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
    }
  },
  watch:{
    dialogVisible(newVal,oldVal){
      
    }
  },
  computed: {
    
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.getExamSubjectList()
  },
  methods: {
    handleCancel(){
      this.dialogVisible = false
      this.clearObj()
    },
    clearObj(){
      this.subjectInfo = {}
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getExamSubjectList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getExamSubjectList()
    },
    refresh() {
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getExamSubjectList()
    },
    //获取列表数据
    getExamSubjectList() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
      }
      pageExamSubjectApi(data).then((res) => {
      // listExamSubjectApi(data).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.pagInfo.total = res.result.total
          console.log('==========考试科目列表==========',this.listData)
        }
      })
    },
    //新增
    addBefore(addType, value) {
      if (addType == 1) {
        this.title = '新增科目类型'
        this.opType = '1'
      } else {
        console.log('新增子科目类型', value)
        this.title = '新增子科目类型'
        this.opType = '2'
        this.subjectInfo.parentId = value.id
      }
      this.dialogVisible = true
    },
    // 编辑按钮
    editBefore(value) {
      this.title = '编辑科目类型'
      console.log('当前点击的行', value)
      // this.subjectInfo = value
      this.subjectInfo = JSON.parse(JSON.stringify(value))
      // this.subjectInfo.id = value.id
      // this.subjectInfo.name = value.name
      // this.subjectInfo.parentId = value.id
      this.opType = '3'
      this.dialogVisible = true
    },
    // 添加/编辑
    submitBtn() {
      this.$refs.addEditForm.validate((valid) => {
        if (valid) {
          // let data = JSON.parse(JSON.stringify(this.workerInfo))
          // let data = JSON.parse(JSON.stringify(this.subjectInfo))
          let data = this.subjectInfo
          data.projectSn = this.$store.state.projectSn
          if (this.opType === '1') {
            console.log('==========添加科目1==========',this.subjectInfo)
            addExamSubjectApi(data).then((res) => {
              if (res.code == 200) {
                this.getExamSubjectList()
                this.dialogVisible = false
                this.clearObj()
                this.$message.success(result.message)
              }
            })
          } else if (this.opType === '2') {
            console.log('==========添加科目2==========',this.subjectInfo)
            addExamSubjectApi(data).then((res) => {
              if (res.code == 200) {
                this.getExamSubjectList()
                this.dialogVisible = false
                this.clearObj()
                this.$message.success(result.message)
              }
            })
          } else if (this.opType === '3') {
            console.log('提交表单3', this.subjectInfo)
            // data.parentId = this.subjectInfo.parentId
            editExamSubjectApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message)
                this.clearObj()
                this.dialogVisible = false
                this.getExamSubjectList()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    //删除
    deleteBefore(value) {
      this.$confirm(
        this.$t('message.quality.deleteHint'),
        this.$t('message.quality.hint'),
        {
          confirmButtonText: this.$t('message.quality.confirm'),
          cancelButtonText: this.$t('message.quality.cancel'),
          type: 'warning',
        }
      )
        .then(() => {
          let data = {
            id: value.id,
          }
          deleteExamSubjectApi(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: this.$t('message.quality.successfullyDelete') + '!',
              })
              this.refresh()
            }
          })
        })
        .catch(() => {})
    },
    close() {
      this.workerInfo = {}
      this.workerInfo.parentId = 0
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
  },
}
</script>
  <style lang="less" scoped>
.down {
  text-decoration: none;
  color: #fff;
}
.expintBtn {
  display: inline-block !important;
  margin-right: 10px;
}
.table_wrap {
  // height: 800px;
  height: calc(100% - 98px);
  overflow: auto;
}
.delete-btn {
  color: #fe6565;
}
.dialogUplod {
  height: 100px;
  margin-left: 70px;
  margin-top: 40px;
  div {
    margin-bottom: 20px;
  }
}
.name-wrapper {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
  