<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择全宗</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
      <div class="qzList" v-show="!status">
        <span>所属全宗：</span>
        <el-select filterable v-model="fondsname" size="mini" style="width:60%">
          <el-option v-for="(item,key) in qzList" :key="key" :label="item.fondsname" :value="item.fondscode">
          </el-option>
        </el-select>
      </div>
      <div class="qzList" v-show="!status">
        <span>年度范围：</span>
        <el-select filterable v-model="filingYear" size="mini" style="width:60%">
          <el-option v-for="(item,key) in yearList" :key="key" :label="item.yearScope" :value="item.yearScope">
          </el-option>
        </el-select>
      </div>
      <div class="qzLists" v-show="!status">
        <el-button @click="editYear('新增')" size="mini" type="success">新增</el-button>
        <el-button @click="editYear('修改')" size="mini" type="primary">编辑</el-button>
        <el-button @click="delYear" size="mini" type="danger">删除</el-button>
      </div>
      <!-- treeList -->
      <div class="treeClass">
          <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 275px)">
            <el-tree highlight-current v-loading='treeLoading' :data="treeData" :props="defaultProps" default-expand-all
              @node-click="handleNodeClick">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <!--可以根据情况，以数据类型来显示不同的图标或图片-->
                <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                  v-if="data.classType === 'L'" class="iconfont icon-folder-open-fill" />
                <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                  class="iconfont icon-wenjian" />
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </el-scrollbar>
      </div>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm'>
      <div slot="header" class="clearfix">
        <span>分类方案设置</span>
      </div>
      <content-form :filingYear='filingYear' :fondsname='fondsname' @getTreeList='getTreeList'
        @handleNodeClick='handleNodeClick' @addArchiveScope='addArchiveScope' :treeRow='treeRow' :treeNode='treeNode'
        ref="contenForm" />
    </el-card>
    <el-dialog v-dialogDrag :title="yearTitle +'年度范围'" :close-on-click-modal="false" :visible.sync="yearStatus"
      width="40%" top="10px" :before-close="cancel" style="padding:20px">
      <div style="padding:10px">
        <el-form :model="form" ref="filingYear" label-width="100px" :rules="rules">
          <el-row style="padding-bottom:20px">
            <el-col :span="12">
              <el-form-item label="起始年度" prop="filingYearStart">
                <el-input-number size="mini" v-model="form.filingYearStart" controls-position="right">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束年度" prop="filingYearEnd">
                <el-input-number size="mini" v-model="form.filingYearEnd" controls-position="right">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="  ">
            <el-button :loading="btnloading" @click="submitForm('filingYear')" size="mini" type="primary">保存</el-button>
            <el-button @click="cancel" size="mini"  type="primary">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <archive-scope ref="archiveScope" :fondsname='fondsname' :ArchiveScopeStatus='ArchiveScopeStatus' :treeRow='treeRow'
      :treeNode='treeNode' :ArchiveScopeTitle='ArchiveScopeTitle' :tableRow='tableRow' @cancel='cancels'
      @handleNodeClick='handleNodeClick' :securityList="securityList" />
  </div>
</template>
<script>
  import contentForm from "./components/contentForm.vue"
  import archiveScope from "./components/ArchiveScope.vue"
  import {getFindList} from "@/api/system-management/templateSetting"
  import {
    mapState
  } from "vuex";
  import {
    clearObjValue,
    message,
    dragControllerDiv
  } from "@/utils/common.js"
  export default {
    props: {},
    data() {
      return {
        btnloading: false,
        status: false,
        defaultProps: {
          children: "childArchive",
          label: "codeAndName",
        },
        yearTitle: '新增',
        yearStatus: false,
        form: {
          filingYearStart: undefined,
          filingYearEnd: undefined
        },
        rules: {
          filingYearStart: [{
            required: true,
            message: '请填写起始年度',
            trigger: 'blur'
          }],
          filingYearEnd: [{
            required: true,
            message: '请填写结束年度',
            trigger: 'blur'
          }],
        },
        treeRow: {},
        treeNode: {},
        treeData: [{
          id: '-1',
          archiveCtgCode: "",
          codeAndName: "",
          archiveCtgSort: "1",
          childArchive: [],
          classType: "L"
        }],
        ArchiveScopeStatus: false,
        ArchiveScopeTitle: "新增",
        tableRow: {},
        securityList:[], // 获取密级字段数据
      }
    },
    components: {
      contentForm,
      archiveScope
    },
    watch: {
      'fondsname': {
        handler(val, oldVal) {
          this.$store.dispatch('fileSettings/getYearList', {
            'fondscode': val
          })
          this.qzList.forEach(item => {
            if (item.fondscode === val) {
              this.treeData[0].codeAndName = "[" + item.fondscode + "]" + item.fondsname
              this.treeData[0].archiveCtgCode = item.fondscode
            }
          })
        }
      },
      'filingYear': {
        handler(val, oldVal) {
          this.getTreeList()
        }
      },
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '22%';
            cardForm.width = '77%';
          }
        }
      }
    },
    computed: {
      ...mapState({
        yearList: (state) => state.fileSettings.yearList,
        qzList: (state) => state.fileSettings.qzList,
        treeList: (state) => state.fileSettings.treeList,
        pagination: (state) => state.fileSettings.pagination,
      }),
      treeLoading: {
        get() {
          return this.$store.state.fileSettings.treeLoading;
        },
        set(val) {
          this.$store.state.fileSettings.treeLoading = val;
        },
      },
      fondsname: {
        get() {
          return this.$store.state.fileSettings.fondsname;
        },
        set(val) {
          this.$store.state.fileSettings.fondsname = val;
        },
      },
      filingYear: {
        get() {
          return this.$store.state.fileSettings.filingYear;
        },
        set(val) {
          this.$store.state.fileSettings.filingYear = val;
        },
      },
    },
    methods: {
      // 获取密级字段数据
      getSecurityList(){
        getFindList({type:'securityClass'}).then((res)=>{
          this.securityList = res.body.list;
        })
      },
      handleNodeClick(tab, node) {
        if (this.tab != tab) {
          this.$refs.contenForm.btnType = false
        }
        this.treeRow = tab
        this.treeNode = node
        for (let key in this.$refs.contenForm.form) {
          for (let index in tab) {
            if (key === index) {
              this.$refs.contenForm.form[key] = tab[index]
            }
          }
        }
        this.$refs.contenForm.podName = node.parent.data.archiveCtgName
        let data = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          fondscode: this.fondsname,
          archiveCtgCode: this.treeRow.codeAndName
        }
        this.$store.dispatch('fileSettings/getTableList', data);
        this.getSecurityList();
      },
      btns() {
        this.status = !this.status
      },
      cancel() {
        if (this.$refs['filingYear']) {
          this.$refs['filingYear'].resetFields();
        }
        Object.keys(this.form).forEach(key => this.form[key] = undefined)
        this.yearStatus = false

      },
      cancels() {
        this.ArchiveScopeStatus = false
      },
      getTreeList() {
        this.treeLoading = true
        let data = {
          fondscode: this.fondsname,
          filingYearStart: this.filingYear.split('-')[0]
        }
        this.$store.dispatch('fileSettings/getArchiveCtgTree', data).then(res => {
          this.treeData[0].childArchive = this.treeList
          this.treeLoading = false
        }).catch(err => {
          this.treeLoading = false
        })
      },
      getyearList() {
        this.$store.dispatch('fileSettings/getYearList', {
          'fondscode': this.fondsname
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              fondscode: this.fondsname,
            }
            this.btnloading = true;
            if (this.yearTitle === '新增') {
              data.filingYearEnd = this.form.filingYearEnd,
                data.filingYearStart = this.form.filingYearStart,
                this.$store.dispatch('fileSettings/addYearScope', data).then(res => {
                  this.btnloading = false;
                  this.getyearList()
                  this.cancel()
                }).catch(err => {
                  this.btnloading = false;
                })
            } else {
              data.filingNewYearEnd = this.form.filingYearEnd,
                data.filingNewYearStart = this.form.filingYearStart,
                data.yearScope = this.filingYear
              this.$store.dispatch('fileSettings/updateYearScope', data).then(res => {
                this.btnloading = false;
                this.getyearList()
                this.cancel()
              }).catch(err => {
                this.btnloading = false;
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })

      },
      editYear(str) {
        if (str === '修改') {
          this.form.filingYearStart = this.filingYear.split('-')[0],
            this.form.filingYearEnd = this.filingYear.split('-')[1] != '至今' ? this.filingYear.split('-')[1] :
            undefined
        }
        this.yearTitle = str
        this.yearStatus = true
      },
      delYear() {
        if (this.yearList.length === 1) {
          message('warning', '当前全宗只有一个年度范围,不能删除', 3000)
          return
        }
        let data = {
          filingYearEnd: this.filingYear.split('-')[1],
          filingYearStart: this.filingYear.split('-')[0],
          fondscode: this.fondsname
        }
        this.$confirm('此操作将永久删除该年度范围, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileSettings/deleteYearScope', data).then(res => {
            this.getyearList()
            this.cancel()
          })
        }).catch((err) => {
          console.log(err)
        });
      },
      addArchiveScope(val, row) {
        this.tableRow = row
        this.ArchiveScopeTitle = val
        if (val === '编辑') {
          this.$refs.archiveScope.form.archiveScope = row.archiveScope;
          this.$refs.archiveScope.form.retention = row.retention;
          this.$refs.archiveScope.form.securityClass = row.securityClass;
          this.$refs.archiveScope.form.storageParameter = row.storageParameter;
          let keyArr = row.titleKeyword.split(",")
          let Arr = []
          keyArr.forEach(item => {
            let obj = {
              lable: '关键字',
              value: item
            }
            Arr.push(obj)
          })
          this.$refs.archiveScope.keworld = Arr
        }
        this.$store.dispatch('fileSettings/getFindList', {
          type: 'retention',
          description: '保存年限'
        }).then(res => {
          this.$refs.archiveScope.form.archiveCtgCode = this.treeRow.codeAndName
          this.ArchiveScopeStatus = true
        })
      }
    },
    mounted() {
      dragControllerDiv();
      this.getSecurityList();
    }
  }

</script>
<style lang='scss' scoped>
  .box {
    display: flex;
    justify-content: space-around;
    height: 100%;

    .tree-box {
      width: 22%;
      background-color: #fff;
      padding: 5px 10px;

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }

      .qzList {
        font-size: 14px;
        padding: 5px 0;
        text-align: center
      }

      .qzLists {
        padding: 5px 0;
        text-align: center
      }

    }

    .form-box {
      width: 77%;
      height: calc(100vh - 90px);
      overflow-y: auto;
      background-color: #fff;
      padding: 5px 10px;

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }
  }

</style>
