<template>
  <div class="page">
    <el-card :body-style="{ padding: '15px' }">
      <div class="btnTitle">
        <div class="title">归档设置</div>
        <el-button size="mini" type="success" v-if="showButtons.add" @click="updata('新增')">新增</el-button>
      </div>
      <div class="tableOne">
        <el-table :data="tableOne" border @row-click='rowClick' max-height="350">
          <el-table-column align="center" prop="sTableName" label="来文发文表名"></el-table-column>
          <el-table-column align="center" prop="sTableChnName" label="来文发文表中文名"></el-table-column>
          <el-table-column align="center" prop="dTableName" label="门类表名"></el-table-column>
          <el-table-column align="center" prop="dTableChnName" label="门类表中文名"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="updata('修改',scope.row)" type="text" v-if="showButtons.edit">修改</el-button>
              <el-button @click="del(scope.row.id)" type="text" style="color:#FF4949" v-if="showButtons.del">删除
              </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>
      <el-table :data="tableTwo" border max-height="350">
        <el-table-column align="center" prop="sTableName" label="来文发文表名"></el-table-column>
        <el-table-column align="center" prop="sColumnChnName" label="来文发文表中文名"></el-table-column>
        <el-table-column align="center" prop="dTableName" label="门类表名"></el-table-column>
        <el-table-column align="center" prop="dColumnChnName" label="门类表中文名"></el-table-column>
        <el-table-column align="center" prop="sColumnClass" label="来文发文表字段类型"></el-table-column>
        <el-table-column align="center" prop="sColumnLen" label="来文发文表字段长度"></el-table-column>
        <el-table-column align="center" prop="sColumnPoint" label="来文发文表字段小数位数"></el-table-column>
        <el-table-column align="center" prop="dColumnClass" label="门类表字段类型"></el-table-column>
        <el-table-column align="center" prop="dColumnLen" label="门类表字段长度"></el-table-column>
        <el-table-column align="center" prop="dColumnPoint" label="门类表字段小数位数"></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChangeT" @size-change="handleSizeChangeT"
        layout="total, prev, pager, next, sizes" :page-size="paginationT.pageSize" :page-sizes="[10, 20, 30, 50]"
        :current-page="paginationT.pageNum" :total="paginationT.total">
      </el-pagination>
    </el-card>
    <dia-box ref="diaBox" :title='title' :isDialogVisible='isDialogVisible' @cancel='cancel' @getData='getData'
      :OneList='OneList' :TwoList='TwoList' />
  </div>
</template>
<script>
  import diaBox from "./components/diaAdd.vue"
  import {
    getClassTreeByClassName,
    selectModifyListEdit,
    deleteSour
  } from "@/api/system-management/archiveSettings"
  import {
    mapState
  } from "vuex";
  import {
    message
  } from '@/utils/common';

  export default {
    data() {
      return {
        title: "新增",
        isDialogVisible: false,
        OneList: [],
        TwoList: [],
        row: {}
      }
    },
    components: {
      diaBox
    },
    computed: {
      ...mapState({
        tableOne: (state) => state.archiveSettings.tableOne,
        // tableTwo: (state) => state.archiveSettings.tableTwo,
        pagination: (state) => state.archiveSettings.pagination,
        paginationT: (state) => state.archiveSettings.paginationT,
        showButtons: (state) => state.archiveSettings.showButtons,
        // paginationT: (state) => state.archiveSettings.paginationT,
      }),
      tableTwo: {
        get() {
          return this.$store.state.archiveSettings.tableTwo;
        },
        set(val) {
          this.$store.state.archiveSettings.tableTwo = val;
        },
      },
      loading: {
        get() {
          return this.$store.state.archiveSettings.loading;
        },
        set(val) {
          this.$store.state.archiveSettings.loadingT = val;
        },
      },
      loadingT: {
        get() {
          return this.$store.state.archiveSettings.loadingT;
        },
        set(val) {
          this.$store.state.archiveSettings.loadingT = val;
        },
      },
    },
    methods: {
      updata(val, value) {
        if (value) {
          selectModifyListEdit({
            sdtId: value.id
          }).then(res => {
            this.$refs.diaBox.sourceClassId = res.body.sourceClassId
            this.$refs.diaBox.targetClassId = res.body.targetClassId
            this.$refs.diaBox.tableData = res.body.list
          })
        }
        this.title = val
        this.isDialogVisible = true
      },
      cancel() {
        this.isDialogVisible = false
      },

      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.getData()
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.getData()
      },
      handleCurrentChangeT(val) {
        this.paginationT.pageNum = val;
        this.rowClick(this.row)
      },
      handleSizeChangeT(val) {
        this.paginationT.pageSize = val;
        this.paginationT.pageNum = 1;
        this.rowClick(this.row)
      },
      getData() {
        this.loading = true
        let params = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
        }
        this.$store.dispatch('archiveSettings/findList', params).catch(er => {
          this.loading = false
        })
      },
      rowClick(row) {
        this.row = row
        this.loadingT = true
        let params = {
          page: this.paginationT.pageNum,
          limit: this.paginationT.pageSize,
          sdtId: row.id
        }
        this.$store.dispatch('archiveSettings/findColumnList', params).catch(er => {
          this.loadingT = false
        })
      },
      handleList(data) {
        data.forEach(item => {
          if (!item.childClass.length && item.pId != -1 && item.pId != 2) {
            item.childClass = undefined
          } else {
            this.handleList(item.childClass)
          }
        })
        return data
      },
      getList() {
        getClassTreeByClassName({
          className: '文件'
        }).then(res => {
          this.OneList = this.handleList(res.body.list)
        })
        getClassTreeByClassName({
          className: '档案'
        }).then(res => {
          this.TwoList = this.handleList(res.body.list)
        })
      },
      del(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSour({
            id
          }).then(res => {
            message('success', '删除成功', 3000)
            this.getData()
            this.tableTwo = []
            this.paginationT.total = 0
          })
        }).catch(() => {});

      }
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("archiveSettings/getButtonList", btnData);
      this.getData()
      this.getList()
    }
  }

</script>
<style lang='scss' scoped>
  ::v-deep.el-table {
    width: 99.9% !important;
  }

  .page {
    padding: 5px;


    .btnTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 10px 20px;

      .title {
        letter-spacing: 2px;
        font-weight: 600;
      }
    }

    .tableOne {
      margin-bottom: 20px;
    }
  }

</style>
