<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: ' 5px 15px' }" 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">
        <span>全宗：</span>
        <el-select filterable v-model="fondsname" size="mini" style="width:70%">
          <el-option v-for="(item,key) in qzList" :key="key" :label="item.fondsname" :value="item.fondscode">
          </el-option>
        </el-select>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 210px)">
          <el-tree v-loading='fiveLoading' highlight-current :data="fiveTree" :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>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm'>
      <div slot="header" class="clearfix">
        <span>档号组成</span>
        <el-button @click="diaEditor('新增')" style="float: right; padding: 5px" type="primary">新增时间范围</el-button>
      </div>
      <content-table @edit='edit' @addItem='addItem' :fondsname='fondsname' :treeRow='treeRow'
        @handleNodeClick='handleNodeClick' />
      <el-dialog v-dialogDrag ref="diaFrom" :title="yearTitle  +'时间范围'" :close-on-click-modal="false"
        :visible.sync="Range" width="40%" top="50px" :before-close="cancel">
        <el-form ref="filingYear" :rules='rules' :model="form" label-width="100px" style="padding:20px">
          <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>
      </el-dialog>
    </el-card>
    <dh-dia @cancel='cancels' @handleNodeClick='handleNodeClick' :dhStatus='dhStatus' :treeRow='treeRow'
      :fondsname='fondsname' :tableRow='tableRow' ref="dhForm" :title='title' />
  </div>
</template>
<script>
  import contentTable from "./components/contentTable.vue"
  import dhDia from "./components/addDh.vue"
  import {
    mapState
  } from "vuex";
  import {
    clearObjValue,
    dragControllerDiv
  } from "@/utils/common.js"
  import {
    message
  } from '@/utils/common';
  export default {
    data() {
      return {
        btnloading: false,
        status: false,
        // 树形结构数据
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        yearTitle: '新增',
        title: '新增',
        Range: false,
        form: {
          filingYearStart: undefined,
          filingYearEnd: undefined
        },
        treeRow: {},
        dhStatus: false,
        tableRow: {},
        rules: {
          filingYearStart: [{
            required: true,
            message: '请填写起始年度',
            trigger: 'blur'
          }],
          filingYearEnd: [{
            required: true,
            message: '请填写结束年度',
            trigger: 'blur'
          }],
        }
      }
    },
    watch: {
      '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%';
          }
        }
      }
    },
    components: {
      contentTable,
      dhDia
    },
    computed: {
      ...mapState({
        fiveTree: (state) => state.categoryManagement.fiveTree,
        qzList: (state) => state.categoryManagement.qzList,
        fiveLoading: (state) => state.categoryManagement.fiveLoading,
      }),
      fondsname: {
        get() {
          return this.$store.state.categoryManagement.fondsname;
        },
        set(val) {
          this.$store.state.categoryManagement.fondsname = val;
        },
      },
      fiveLoading: {
        get() {
          return this.$store.state.categoryManagement.fiveLoading;
        },
        set(val) {
          this.$store.state.categoryManagement.fiveLoading = val;
        },
      },
      fiveTableData: {
        get() {
          return this.$store.state.categoryManagement.fiveTableData;
        },
        set(val) {
          this.$store.state.categoryManagement.fiveTableData = val;
        },
      },
    },
    methods: {
      init() {
        this.fiveTableData = []
        this.fiveLoading = true
        this.$store.dispatch('categoryManagement/getClassTreeByClassName', {
          className: '档案'
        }).catch(err => {
          this.fiveLoading = false
        })
        this.$store.dispatch('categoryManagement/getFondWithPage', {
          limit: 1000
        })
      },
      btns() {
        this.status = !this.status
      },
      handleNodeClick(row) {
        this.treeRow = row
        let data = {
          classId: row.id,
          fondscode: this.fondsname,
        }
        this.$store.dispatch('categoryManagement/getNoList', data)
        this.$store.dispatch('categoryManagement/getTableFieldList', {
          classId: row.id
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              classId: this.treeRow.id,
              fondscode: this.fondsname,
            }
            this.btnloading = true;
            if (this.yearTitle === '新增') {
              data.filingYearStart = this.form.filingYearStart,
                data.filingYearEnd = this.form.filingYearEnd ? this.form.filingYearEnd : "",
                this.$store.dispatch('categoryManagement/insertYearList', data).then(res => {
                  this.btnloading = false;
                  this.handleNodeClick(this.treeRow)
                  this.cancel()
                }).catch(err => {
                  this.btnloading = false;
                })
            } else {
              data.yearScope = this.tableRow.yearScope
              data.filingNewYearStart = this.form.filingYearStart,
                data.filingNewYearEnd = this.form.filingYearEnd ? this.form.filingYearEnd : "",
                this.$store.dispatch('categoryManagement/updateYearScope', data).then(res => {
                  this.btnloading = false;
                  this.handleNodeClick(this.treeRow)
                  this.cancel()
                }).catch(err => {
                  this.btnloading = false;
                })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$refs['filingYear'].resetFields();
        Object.keys(this.form).forEach(key => this.form[key] = undefined)
        this.Range = false
      },
      cancels() {
        this.$refs['dhForm'].$refs['ruleForm'].resetFields();
        Object.keys(this.$refs['dhForm'].form).forEach(key => this.$refs['dhForm'].form[key] = '')
        this.$refs['dhForm'].form.segmentLenth = undefined
        this.$refs['dhForm'].form.segmentSeparator = "-",
          this.$refs['dhForm'].form.fondscode = this.fondsname
        this.$refs['dhForm'].form.classId = this.treeRow.id
        this.dhStatus = false
      },
      addItem(val, tableRow) {
        this.tableRow = tableRow
        this.title = val
        this.$refs['dhForm'].form.id = ""
        this.dhStatus = true
      },
      diaEditor(val) {
        if (!this.fondsname) {
          message('warning', '请先选择全宗', 2000)
          return
        }
        if (JSON.stringify(this.treeRow) === '{}') {
          message('warning', '请先选择门类', 2000)
          return
        }
        this.Range = true
        this.yearTitle = '新增'
      },
      edit(str, row) {
        this.tableRow = row
        if (row.list) {
          this.yearTitle = str
          this.Range = true
          this.form.filingYearStart = row.yearScope.split('-')[0],
            this.form.filingYearEnd = row.yearScope.split('-')[1]
        } else {
          this.title = str
          this.dhStatus = true
          for (let key in this.$refs['dhForm'].form) {
            for (let index in row) {
              if (key === index) {
                this.$refs['dhForm'].form[key] = row[index]
              }
            }
          }
        }
      }
    },
    mounted() {
      dragControllerDiv()
      this.init()
    }
  }

</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 {
        padding: 10px 0
      }
    }

    .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;
      }

      ::v-deep .el-card__header {
        padding: 14px 20px
      }
    }
  }

</style>
