<template>
  <div class="box">
    <el-card :body-style="{ padding: '5px' }" class="tree-box" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">全部元数据标准</span>
        <el-button @click="btnTitle('新增')" style="padding: 5px 10px;margin-left:5px" size="mini" type="success"
          v-show="!status">
          新增
        </el-button>
        <el-button style="float: right; padding:  0;font-size:18px" 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>
      <el-table @row-click='rowClick' :data="sevenList" :show-header='false' highlight-current-row max-height="650"
        v-loading="sevenLoading">
        <el-table-column prop="sort" width="50" align="center"></el-table-column>
        <el-table-column prop="name" align="center"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button size="mini" @click="btnTitle('编辑',scope.row)" type="text">编辑</el-button>
            <el-button size="mini" @click="del(scope.row.id)" type="text" style="color:#FF4949">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card :body-style="{ padding: '15px' }" class="table-box" ref="cardForm">
      <div>
        <el-form :model="search" label-width="100px">
          <el-form-item label="字段名称：" style="width:300px">
            <el-input size="mini" clearable v-model="search.name"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="10px">
            <el-button size="mini" type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align:right;padding-bottom:5px">
          <el-button @click="tableClick('新增')" size="mini" type="success">新增</el-button>
          <el-button @click="delTable()" size="mini" type="danger">删除</el-button>
        </div>
        <el-table :data="tableTwoData" border tooltip-effect="dark" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column prop="sort" width="55" align="center" label="排序"></el-table-column>
          <el-table-column align="center" prop="fieldChn" show-overflow-tooltip label="字段名称" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='fieldLength' show-overflow-tooltip label="字段长度" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='field' show-overflow-tooltip label="字段显示名" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='define' show-overflow-tooltip label="定义">
          </el-table-column>
          <el-table-column align="center" prop='purpose' show-overflow-tooltip label="目的">
          </el-table-column>
          <el-table-column align="center" prop='binding' show-overflow-tooltip label="约束性" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='repeatability' show-overflow-tooltip label="可重复性" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='elementType' show-overflow-tooltip label="元素类型" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='dataType' show-overflow-tooltip label="数据类型" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='modification' show-overflow-tooltip label="编码修饰体系" width="150px">
          </el-table-column>
          <el-table-column align="center" prop='domains' show-overflow-tooltip label="值域" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='defaultValue' show-overflow-tooltip label="缺省值" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='childElements' show-overflow-tooltip label="子元素" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='informationSource' show-overflow-tooltip label="信息来源" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='relatedElements' show-overflow-tooltip label="相关元素" width="120px">
          </el-table-column>
          <el-table-column align="center" prop='remarks' show-overflow-tooltip label="注释"></el-table-column>
          <el-table-column show-overflow-tooltip min-width="100px" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button @click="tableClick('编辑',scope.row)" size="mini" type="text">修改</el-button>
              <el-button @click="delTable(scope.row.id)" size="mini" 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>
    </el-card>
    <table-dia ref="addTable" :rowData='rowData' :title='title' :addTable='addTable' @cancel='cancel'
      @insertRecord='getData' />
    <add-title ref="addTitle" :titles='titles' :addtitle='addtitle' @cancel='cancel' @insertRecord='insertRecord' />
  </div>
</template>
<script>
  import tableDia from "./components/addTable.vue"
  import addTitle from "./components/addTitle.vue"
  import {
    mapState
  } from "vuex";
  import {
    getRecordListTab,
    deleteRecordTab,

  } from "@/api/system-management/templateSetting"
  import {
    clearObjValue,
    message
  } from '@/utils/common';
  export default {
    props: {
      sevenLoading: {
        type: Boolean,
        default: () => false
      },
    },
    data() {
      return {
        status: false,
        search: {
          name: ""
        },
        addTable: false,
        title: '新增',
        titles: '新增',
        addtitle: false,

        tableTwoData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
        rowData: {},
        multipleSelection: []
      }
    },
    components: {
      tableDia,
      addTitle
    },
    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 = '27%';
            cardForm.width = ' 72%';
          }
        }
      }
    },
    computed: {
      ...mapState({
        sevenList: (state) => state.templateSetting.sevenList,
      }),

    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      insertRecord() {
        this.addtitle = false
        this.$emit('insertRecord')
      },
      btns() {
        this.status = !this.status
      },
      tableClick(val, value) {
        clearObjValue(this.$refs.addTable.TableForm)
        if (value) {
          for (let key in value) {
            for (let index in this.$refs.addTable.TableForm) {
              if (key === index) {
                this.$refs.addTable.TableForm[index] = value[key]
              }
            }
          }
        }
        this.title = val
        this.addTable = true
      },
      cancel() {
        this.addTable = false
        this.addtitle = false
      },
      updata() {},
      del(val) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('templateSetting/deleteRecord', {
            id: val
          }).then(res => {
            this.insertRecord()
            this.cancel()
          })
        }).catch(() => {

        });

      },
      btnTitle(val, row) {
        this.$refs.addTitle.titleForm.id = ''
        if (row) {
          for (let key in row) {
            for (let index in this.$refs.addTitle.titleForm) {
              if (key === index) {
                this.$refs.addTitle.titleForm[index] = row[key]
              }
            }
          }
        }
        this.titles = val
        this.addtitle = true
      },
      rowClick(row, column, event) {
        this.rowData = row
        this.pagination.pageNum = 1;
        this.getData()
      },
      getData() {
        if (JSON.stringify(this.rowData) === '{}') {
          message('warning', '请先选择元数据标准', 3000)
          return
        }
        let params = {
          metadataId: this.rowData.id,
          fieldChn: this.search.name,
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
        }
        getRecordListTab(params).then(res => {
          this.tableTwoData = res.body.list
          this.pagination.total = res.body.total
        })
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.getData()
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.getData()
      },
      delTable(val) {
        let ids = []
        if (val) {
          ids.push(val)
        } else {
          this.multipleSelection.forEach(item => {
            ids.push(item.id)
          })
        }
        let data = {
          ids: ids.join(',')
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRecordTab(data).then(res => {
            message('success', '删除成功', 3000)
            this.getData()
          })
        })
      }
    },
  }

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

    .tree-box {
      width: 22%;
      height: 720px;

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

    .table-box {
      width: 77%;

      .el-form {
        display: flex;
        flex-wrap: wrap;

        // .el-form-item {
        //   margin-bottom: 10px;
        // }
      }
    }
  }

</style>
