<template>
  <div class="fullheight">
    <div style="height: 96%">
      <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        quick-search-props="name,alias,description"
        :default-sorter="[{direction: 'DESC',property: 'createTime'}]"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
        @row-click="rowClick"
        :header-cell-class-name="headerCellClassName"
        @selection-change="handleSelectionChange"
      >
        <template v-slot:toolbar>
          <!-- <el-button-group> -->
            <el-button size="small" @click="showDialog()" icon="el-icon-plus" type="primary">添加</el-button>
            <ht-delete-button url="${portal}/sys/sysProperties/v1/remove" :htTable="$refs.htTable" style="margin-left:10px;"
            :disabled="isDisabled">删除</ht-delete-button>
          <!-- </el-button-group> -->
        </template>
        <template>
          <ht-table-column type="index" width="50" align="center" label="序号" />
          <ht-table-column prop="name" label="属性名称" :sortable="true" :show-overflow-tooltip="true">
            <template v-slot="{row}">
              <el-link type="primary" @click="showDialog(row)" title="编辑详情">{{row.name}}</el-link>
            </template>
          </ht-table-column>
          <ht-table-column width="150" prop="alias" label="属性代码" :sortable="true" :show-overflow-tooltip="true" />
          <ht-table-column
            prop="encrypt"
            label="存储方式"
            width="120"
            :render-header="renderHeaderMethod"
            :filters="[{text:'加密存储', value:1},{text:'明文存储', value:0}]"
          >
            <template v-slot="{row}">
              <el-tag type="info" v-if="row.encrypt=='0'">明文存储</el-tag>
              <el-tag type="warning" v-if="row.encrypt=='1'">加密存储</el-tag>
            </template>
          </ht-table-column>
        </template>
        <ht-table-column prop="description" label="属性说明" :show-overflow-tooltip="true" />
      </ht-table>
    </div>
    <ht-sidebar-dialog
      width="28%"
      title="系统属性编辑"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      v-if="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="propertyForm">
        <ht-form-item label="属性名称">
          <ht-input v-model="currentProperty.name" validate="required"
                    :maxlength="50"
                    :width="350"
                    :showWordLimit="true"
                    placeholder="请输入属性名称..."/>
        </ht-form-item>
        <ht-form-item label="属性代码">
          <ht-input v-model="currentProperty.alias" validate="required"
                    :maxlength="50"
                    :showWordLimit="true"
                    :width="350"
                    placeholder="属性代码用于区分不同的属性"/>
        </ht-form-item>
        <ht-form-item label="属性值">
          <ht-input type="textarea" class="set-width" :rows="5" :width="350" v-model="currentProperty.value" validate="required" :maxlength="32767" placeholder="请输入属性的值..."/>
        </ht-form-item>
        <ht-form-item label="存储方式">
          <ht-radio
            v-model="currentProperty.encrypt"
            :options="[{ key: 0, value: '明文存储' },{ key: 1, value: '加密存储' }]"
          />
        </ht-form-item>
        <ht-form-item label="属性说明">
          <ht-input type="textarea" class="set-width" v-model="currentProperty.description" :rows="5"
                    :maxlength="200"
                    :width="350"
                    :showWordLimit="true"
                    placeholder="请输入属性的作用..."/>
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseDialog">{{$t("eip.common.cancel")}}</el-button>
        <ht-submit-button
          :url="saveUrl"
          :model="currentProperty"
          scope-name="propertyForm"
          @after-save-data="afterSaveData"
        >{{$t("eip.common.save")}}</ht-submit-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
import portal from "@/api/portal.js";
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'

export default {
  mixins: [tableHeaderFilter],
  data() {
    return {
      dialogVisible: false,
      data: [],
      saveUrl: `${window.context.portal}/sys/sysProperties/v1/save`,
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      currentProperty: { encrypt: 1 },
      isDisabled:true,  //按钮的禁用
      selectedList:[]
    };
  },
    watch: {
    // 监听选中下
     selectedList:{
      handler(val){
        this.isDisabled = val.length < 1 ? true : false
      },
      deep:true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator;
  },
  methods: {
    handleSelectionChange(selection){
      this.selectedList = selection
    },
    rowClick(row){
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row);
    },
    showDialog(row) {
      if( row && row.alias === "sysSetting"){
        this.$message.warning("请前往系统设置查看详情");
        return;
      }
      if (row && row.id) {
        portal.getSysProperty(row.id).then(response => {
          this.currentProperty = response;
          this.dialogVisible = true;
        });
      } else {
        this.dialogVisible = true;
      }
    },
    beforeCloseDialog() {
      this.currentProperty = { encrypt: 1 };
      this.dialogVisible = false;
    },
    loadData(param, cb) {
      portal
        .getSysProperties(param)
        .then(response => {
          this.data = response.rows;
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          };
        })
        .finally(() => cb());
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog();
        this.$refs.htTable.load();
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped>
.fullheight {
  padding: 20px;
}
::v-deep{
  .cell>.el-table__column-filter-trigger{
    display: none;
  }
  .set-width.ht-textarea{
      width: 350px;
      border: none;
      .el-textarea__inner{
        border: 1px solid #dcdfe6;
      }
  }
}
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 190px);
}
</style>