<template>
  <div>
    <el-form :model="form" ref="ruleForm" label-width="100px" size="mini" :rules="rules">
      <el-form-item label="上级名称：">
        <el-input v-model="podName" disabled clearable style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="代码：" prop="archiveCtgCode">
        <el-input v-model="form.archiveCtgCode" :disabled='!btnType' clearable style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="名称：" prop="archiveCtgName">
        <el-input v-model="form.archiveCtgName" :disabled='!btnType' clearable style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="序号：" prop="archiveCtgSort">
        <el-input v-model="form.archiveCtgSort" :disabled='!btnType' clearable style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="btnClick(1)" v-show="!btnType" size="mini" type="success">新增</el-button>
        <el-button @click="btnClick(2)" v-show="!btnType" size="mini" type="primary">编辑</el-button>
        <el-button @click="btnClick(3)" :disabled="JSON.stringify(treeRow)==='{}'" v-show="!btnType" size="mini"
          type="danger">删除</el-button>
        <el-button @click="btnClick(4)" v-show="!btnType" size="mini" type="primary" :disabled="treeRow.classType!='C'">
          增加归档范围</el-button>
        <el-button :loading="btnloading" @click="btnClick(5)" v-show='btnType' size="mini" type="primary">保存</el-button>
        <el-button @click="btnClick(6)" v-show='btnType' size="mini"  type="primary">取消</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="tableData" tooltip-effect="dark">
      <el-table-column align="center" type="index" width="80" label="序号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="archiveScope" label="归档范围"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="retention" label="保管期限" width="180"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="securityClass" label="密级"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="storageParameter" label="存储参数" width="180"></el-table-column>
      <el-table-column align="center" label="操作" width="130">
        <template slot-scope="scope">
          <el-button @click="tableClick(1,scope.row)" type="text">编辑 </el-button>
          <el-button @click="tableClick(2,scope.row)" type="text" style="color:#FF4949">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
  import {
    clearObjValue
  } from '@/utils/common'
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      treeRow: {
        type: Object,
        default: () => {},
      },
      treeNode: {
        type: Object,
        default: () => {},
      },
      filingYear: {
        type: String,
        default: () => "",
      },
      fondsname: {
        type: String,
        default: () => "",
      },
    },
    computed: {
      ...mapState({
        pagination: (state) => state.fileSettings.pagination,
        tableData: (state) => state.fileSettings.tableData,
      })
    },
    data() {
      return {
        btnloading: false,
        form: {
          archiveCtgName: "",
          archiveCtgCode: "",
          archiveCtgSort: "",
        },
        title: "",
        podName: "",
        btnType: false,
        rules: {
          archiveCtgName: [{
            required: true,
            message: '请填写名称',
            trigger: 'blur'
          }],
          archiveCtgCode: [{
            required: true,
            message: '请填写代码',
            trigger: 'blur'
          }],
          archiveCtgSort: [{
            required: true,
            message: '请填写序号',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      btnClick(val) {
        switch (val) {
          case 1:
            this.title = '新增'
            this.podName = this.treeRow.archiveCtgName
            this.btnType = !this.btnType
            clearObjValue(this.form)
            break;
          case 2:
            this.title = '修改'
            this.btnType = !this.btnType
            break;
          case 3:
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$store.dispatch('fileSettings/delArchiveCtg', {
                id: this.treeRow.id
              }).then(res => {
                this.$refs['ruleForm'].resetFields();
                clearObjValue(this.form)
                this.podName = ''
                this.$emit('getTreeList')
              })
            }).catch((err) => {
              console.log(err)
            });

            break;
          case 4:
            this.$emit('addArchiveScope', '新增')
            break;
          case 5:
            this.$refs['ruleForm'].validate((valid) => {
              if (valid) {
                let data = {
                  fondscode: this.fondsname,
                  filingYearStart: this.filingYear.split('-')[0],
                  filingYearEnd: this.filingYear.split('-')[1],
                  archiveCtgCode: this.form.archiveCtgCode,
                  archiveCtgName: this.form.archiveCtgName,
                  archiveCtgSort: this.form.archiveCtgSort,
                }
                this.btnloading = true;
                if (this.title === '新增') {
                  data.pId = this.treeRow.id
                  data.dataFlag = 2
                  this.$store.dispatch('fileSettings/saveArchiveCtg', data).then(res => {
                    this.btnloading = false;
                    this.resetForm()
                  }).catch(err=>{
                    this.btnloading = false;
                  })
                } else {
                  data.id = this.treeRow.id
                  this.$store.dispatch('fileSettings/updateArchiveCtg', data).then(res => {
                    this.btnloading = false;
                    this.resetForm()
                  }).catch(err=>{
                    this.btnloading = false;
                  })
                }
              } else {
                return false;
              }
            });
            break;
          case 6:
            this.btnType = !this.btnType
            this.$emit('handleNodeClick', this.treeRow, this.treeNode)
            break;
        }
      },
      resetForm() {
        this.$refs['ruleForm'].resetFields();
        clearObjValue(this.form)
        this.podName = ''
        this.btnType = !this.btnType
        this.$emit('getTreeList')
      },
      tableClick(val, row) {
        switch (val) {
          case 1:
            this.$emit('addArchiveScope', '编辑', row)
            break;
          case 2:
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$store.dispatch('fileSettings/deleteArchiveScope', {
                id: row.id
              }).then(res => {
                this.$emit("handleNodeClick", this.treeRow, this.treeNode);
              })
            }).catch((err) => {
              console.log(err)
            });
            break;
        }
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("handleNodeClick", this.treeRow, this.treeNode);
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("handleNodeClick", this.treeRow, this.treeNode);
      },
    }
  }

</script>
<style lang='scss' scoped>

</style>
