<!--
 * @Description: 综合类型数据列表页面
 * @Author: wanqian, liusheng
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div class="body-generic-type-list" :style="'padding:' + offsetY + 'px ' + offsetX + 'px;'">
    <el-row type="flex">
      <el-col :span="8" :style="{'height': dynamicHeight + 'px'}">
        <div class="bk-cont-left">
          <div class="bk-title">
            <div class="line-vert"></div>
            <div class="text-title">综合类型</div>
          </div>
          <div class="bk-search">
            <el-input size="small" style="width: 240px;" clearable placeholder="请输入类型/编码" v-model="genericFilterParams.idOrName"
              prefix-icon="el-icon-search" @change="changeGenericType" @clear="clearGenericType">
            </el-input>
            <el-button type="primary" size="small" @click="handleAddGenericType" icon="el-icon-plus" plain>新 增</el-button>
          </div>
          <el-table class="content-table table-left" :class="{'table-left-header-diselect': genericSelectIndex != -1}" 
            ref="leftTable" :data="dataLeftTable" row-key="id" :max-height="(dynamicHeight - 130)"
            :header-cell-class-name="genericSelectIndex == -1 ? 'table-header-select table-header-color' 
            : 'table-header-diselect'" @header-click="handleGenericTypeHeaderClick" 
            :row-class-name="genericTypeRowClassName" @row-click="handleGenericTypeRowClick">
            <el-table-column label="" align="left" min-width="4%"></el-table-column>
            <el-table-column label="全部" align="left" min-width="75%">
              <template slot-scope="scope">{{scope.row.id + '-' + scope.row.name}}</template>
            </el-table-column>
            <el-table-column label="" align="right" width="60px">
              <template slot-scope="scope">
                <div class="bk-btns">
                  <i class="el-icon-edit-outline btn-edit mouse-pointer" @click="handleEditGenericType(scope.row)" />
                  <i class="el-icon-delete btn-delete mouse-pointer" @click="handleDeleteType(scope.row, 'genericType')" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="" align="left" min-width="4%"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="16" :style="{'height': dynamicHeight + 'px'}">
        <div class="bk-cont-right">
          <div class="bk-cont-right-head">
            <div class="bk-title">
              <div class="line-vert"></div>
              <div class="text-title">类型数据</div>
            </div>
            <el-button v-show="showAddTypeBtn" type="primary" size="small" icon="el-icon-plus" plain 
              @click="handleAddType">
              新 增
            </el-button>
          </div>
          <el-table class="content-table table-right" ref="rightTable" :data="dataRightTable" 
            header-cell-class-name="table-header-color" row-key="id" 
            :max-height="showAddTypeBtn ? (dynamicHeight - 100) : (dynamicHeight - 82)">
            <el-table-column label="" align="left" min-width="4%"></el-table-column>
            <el-table-column label="主索引" align="left" min-width="25%">
              <template slot-scope="scope">{{scope.row.id || '- -'}}</template>
            </el-table-column>
            <el-table-column label="所属类型" align="left" min-width="25%">
              <template slot-scope="scope">{{scope.row.typeText || '- -'}}</template>
            </el-table-column>
            <el-table-column label="类型数据" align="left" min-width="25%">
              <template slot-scope="scope">{{scope.row.name || '- -'}}</template>
            </el-table-column>
            <el-table-column label="" align="right" width="60px">
              <template slot-scope="scope">
                <div class="bk-btns">
                  <i class="el-icon-edit-outline btn-edit mouse-pointer" @click="handleEditType(scope.row)" />
                  <i class="el-icon-delete btn-delete mouse-pointer" @click="handleDeleteType(scope.row, 'type')" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="" align="left" min-width="4%"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 综合类型表单弹框 -->
    <generic-type-form :visible="showGenericTypeDlg" :operate="genericOperate" :genericTypeId="genericTypeId" 
      @close="closeGenericTypeDlg" />

    <!-- 类型数据表单弹框 -->
    <type-form :visible="showTypeDlg" :operate="typeOperate" :genericTypeId="genericSelectId" :typeId="typeId" 
      @close="closeTypeDlg" />
  </div>
</template>

<script>
import GenericTypeForm from './components/GenericTypeForm.vue'
import TypeForm from './components/TypeForm.vue'

export default {
  name: 'GenericTypeList',
  props: {
    offsetX: {    //表格显示的X轴偏移量，相当于margin-left和margin-right
      type: Number,
      default: 40
    },
    offsetY: {    //表格显示Y轴偏移量，相当于margin-top和margin-bottom
      type: Number,
      default: 0
    }
	},

  components:{
    'generic-type-form': GenericTypeForm,
    'type-form': TypeForm,
  },

  data() {
    return {
      genericFilterParams: {},
      genericSelectIndex: -1,
      dataLeftTable: [],
      dataRightTable: [],

      // 以下是综合类型表单弹框使用
      showGenericTypeDlg: false,
      genericTypeId: 0,
      genericOperate: '',

      // 以下是类型数据表单弹框使用
      showTypeDlg: false,
      typeId: 0,
      genericSelectId: 0,
      typeOperate: '',
    }
  },

  computed: {
    dynamicHeight() {
      return this.$root.windowHeight - 150;
    },

    showAddTypeBtn() {
      return this.genericSelectIndex != -1;
    },
  },
  
  methods:{
    async initData() {
      await this.listGenericTypes();
      await this.listTypes();
    },

    listGenericTypes() {
      return new Promise((resolve) => {
        let requestData = {
          method: 'GET',
          url: this.commonUrl.URL_LIST_COMMON_CFG_GENERIC_TYPES,
          param: this.genericFilterParams,
        };
        this.vueRequest(requestData).then(result => {
          if (result != null) {
            this.dataLeftTable = result.data;
            resolve();
          }
        })
      })
    },

    listTypes() {
      return new Promise((resolve) => {
        let typeId = this.genericSelectIndex != -1 ? this.dataLeftTable[this.genericSelectIndex].id : '';
        let requestData = {
          method: 'GET',
          url: this.commonUrl.URL_LIST_COMMON_CFG_GENERICS,
          param: {'typeId': typeId}
        };
        this.vueRequest(requestData).then(result => {
          if (result != null) {
            this.dataRightTable = result.data;
            resolve();
          }
        })
      })
    },

    changeGenericType() {
      this.genericSelectIndex = -1;
      this.initData();
    },

    clearGenericType() {
      this.genericSelectIndex = -1;
      this.initData();
    },

    handleGenericTypeHeaderClick(_column, _event) {
      this.genericSelectIndex = -1;
      this.listTypes();
    },

    handleGenericTypeRowClick(row, column, _event) {
      if (column.label != '全部') return;

      this.genericSelectIndex = row.index;
      this.genericSelectId = this.dataLeftTable[this.genericSelectIndex].id;
      this.listTypes();
    },

    handleAddGenericType() {
      this.showGenericTypeDlg = true;
      this.genericTypeId = 0;
      this.genericOperate = 'add';
    },

    handleAddType() {
      this.showTypeDlg = true;
      this.typeId = 0;
      this.typeOperate = 'add';
    },

    handleEditGenericType(row) {
      this.showGenericTypeDlg = true;
      this.genericTypeId = row.id;
      this.genericOperate = 'edit';
    },

    handleEditType(row) {
      this.showTypeDlg = true;
      this.typeId = row.id;
      this.typeOperate = 'edit';
    },

    closeGenericTypeDlg(refresh) {
      this.showGenericTypeDlg = false;
      if (refresh) {
        this.initData();
      }
    },

    closeTypeDlg(refresh) {
      this.showTypeDlg = false;
      if (refresh) {
        this.listTypes();
      }
    },

    handleDeleteType(row, mode) {
      this.$confirm('删除后无法恢复，确认删除？', '确认删除', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        if (mode == 'genericType') {
          this.deleteGenericType(row);
        } else {
          this.deleteType(row);
        }
      });
    },

    deleteGenericType(row) {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_COMMON_CFG_GENERIC_TYPE, row.id);
      let requestData = {
        method: 'DELETE',
        url: url,
      }
      this.vueRequest(requestData).then(_result => {
        if (this.dataLeftTable.length > 1 && this.genericSelectIndex > this.dataLeftTable.length - 1) {
          this.genericSelectIndex = this.dataLeftTable.length - 1;
          this.genericSelectId = this.dataLeftTable[this.genericSelectIndex].id;
        } else if (this.dataLeftTable.length <= 1){
          this.genericSelectIndex = -1;
        }
        this.initData();
      });
    },

    deleteType(row) {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_COMMON_CFG_GENERIC, row.id);
      let requestData = {
        method: 'DELETE',
        url: url,
      }
      this.vueRequest(requestData).then(_result => {
        this.listTypes();
      });
    },

    genericTypeRowClassName({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
      return this.genericSelectIndex == rowIndex ? 'table-select-row' : 'table-diselect-row'
    },
  },

  mounted() {
    this.$emit("breadcrumb", {text1: '字典数据', text2: '综合类型'});
    this.initData();
  },
}
</script>

<style scoped lang="scss">
.body-generic-type-list {
  .bk-cont-left {
    height: 100%;
    border-right: 1px solid #DCDCDC;
    box-sizing: border-box;
    padding-right: 20px;
    .table-left {
      width: 100%;
      margin: 15px 0 0 0 !important;
    }
  }
  .bk-cont-right {
    height: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    .bk-cont-right-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .table-right {
      width: 100%;
      margin: 18px 0 0 0 !important;
    }
  }
  .bk-title {
    display: flex;
    align-items: center;
    .line-vert {
      width: 4px;
      height: 16px;
      background: #CC7A00;
    }
    .text-title {
      margin-left: 10px;
      font-weight: 600;
      font-size: 16px;
      color: #606266;
      line-height: 16px;
    }
  }
  .bk-search {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bk-btns {
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    flex-wrap: wrap;
    .btn-edit, .btn-delete {
      display: none;
      width: 15px;
      height: 15px;
    }
    .btn-delete {
      margin-left: 10px;
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    .bk-btns {
      .btn-edit, .btn-delete {
        display: inline-block;
      }
    }
  }
}
</style>
<style lang="scss">
.body-generic-type-list {
  .bk-search .el-input__inner {
    border-radius: 18px !important;
  }
  .content-table {
    border: 1px solid #f0f0f0;
  }
  .el-table .el-table__cell.gutter {
    background: #EFF5FA !important;
  }
  .table-left-header-diselect .el-table__cell.gutter {
    background: white !important;
  }
  .table-header-diselect {
    background-color: white;
    font-weight: 400;
  }
  .table-header-select {
    font-weight: 600;
  }
  .table-select-row {
    background: #EFF5FA;
    font-weight: 600;
  }
  .table-diselect-row {
    font-weight: 400;
  }
}
</style>