<template>
  <div class="fullheight">
    <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        quick-search-props="demName"
        ref="htTable"
        :show-custom-column="false"
        :show-export="false"
        @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="demDeleteUrl"
              :htTable="$refs.htTable"
              @after-delete="afterDelete"
              :disabled="isDisabled"
              style="margin-left:10px;"
          >删除</ht-delete-button>
        <!-- </el-button-group> -->
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
            prop="demName"
            label="名称"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
          <template v-slot="{row,column,$index}">
            <el-link type="primary"  @click="handleCommand({row:row,command:'assignMenu'})" title="点击编辑" >{{row.demName}}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column prop="demCode" label="别名"  />
        <ht-table-column
            prop="isDefault"
            label="是否默认"
            width="100"
            :render-header="renderHeaderMethod"
            :filters="[{text:'否', value:0},{text:'是', value:1}]"
        >
          <template v-slot="{row}">
            <el-tag type="danger" v-if="row.isDefault=='0'">否</el-tag>
            <el-tag type="success" v-if="row.isDefault=='1'">是</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column label="操作" width="150" align="left">
          <template v-slot="{row}">
            <el-button size='mini' v-if="row.isDefault!='1'"  @click="handleCommand({row:row,command:'setDemDefault'})"
            type="text" >
              设置为默认
            </el-button>
          </template>
        </ht-table-column>

      </template>
    </ht-table>

    <ht-sidebar-dialog
        width="28%"
        :title="dialogTitle"
        :visible="dialogVisible"
        :before-close="handleClose"
        :append-to-body="true"
    >
      <el-form v-model="demension" data-vv-scope="editForm">
        <ht-form-item label="维度名称" prop="name" label-width="100px">
          <ht-input
              v-model="demension.name"
              autocomplete="off"
              :maxlength="30"
              show-word-limit
              :validate="{required:true,regex: {
                        exp: '^[\\s\\S]{1,30}$',
                        message: '内容不超出30字'
                      }}"
              placeholder="请输入名称"
              :disabled="readOnly"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="维度别名" prop="code" label-width="100px">
          <ht-input
              v-model="demension.code"
              v-pinyin="demension.name"
              autocomplete="off"
              :maxlength="30"
              show-word-limit
              :validate="{required:true,alpha_dash:true,regex: {
                        exp: '^[\\s\\S]{1,30}$',
                        message: '内容不超出30字'
                      }}"
              placeholder="请输入别名"
              :disabled="demension.id?true:false || readOnly"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="描述" label-width="100px">
          <ht-input type="textarea"
                    :validate="{
                    regex: {
                        exp: '^[\\s\\S]{0,80}$',
                        message: '内容不超出80字'
                      }
                    }"
                    :maxlength="80"
                    :showWordLimit="true"
                    v-model="demension.description" :disabled="readOnly" placeholder="请输入描述" />
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!readOnly">
        <el-button @click="dialogCancle('dialogVisible')">{{$t('eip.common.cancel')}}</el-button>
        <ht-submit-button
            :url="saveRoleUrl"
            :model="demensionParams"
            :isSubmit="isSubmit"
            :requestMethod="requestMethod"
            scopeName="editForm"
            :restoreUrl="restoreUrl"
            aliasProp="code"
            @before-save-data="beforeSaveData"
            @after-save-data="afterSaveData"
        >{{$t('eip.common.save')}}</ht-submit-button>
      </div>
    </ht-sidebar-dialog>

  </div>
</template>
<script>
  import org from "@/api/org.js";
  import EipUserDialog from "@/components/dialog/EipUserDialog.vue";
  import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'


  export default {
    components: {
      EipUserDialog
    },
    mixins: [tableHeaderFilter],
    computed: {
      demDeleteUrl: function() {
        return window.context.uc + "/api/demension/v1/dem/deleteDemByIds";
      },
      restoreUrl: function() {
        return window.context.uc + "/api/demension/v1/restoreByAlias/";
      },
      saveRoleUrl: function() {
        let preUrl = window.context.uc + "/api/demension/v1/dem";
        if (this.demension.id) {
          preUrl += "/updateDem";
        } else {
          preUrl += "/addDem";
        }
        return preUrl;
      },
      requestMethod: function() {
        return this.demension.id ? "PUT" : "POST";
      }
    },
    data() {
      return {
        dialogVisible: false,
        dialogVisibleMenuPerm: false,
        demension: {
          name:"",
          code:""
        },
        demensionParams:{},
        isSubmit: false,
        data: [],
        pageResult: {
          page: 1,
          pageSize: 50,
          total: 0
        },
        loadDataUrl: "",
        menuPerm: {},
        allowRoles: [],
        readOnly: false,
        dialogTitle:'',
        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, column, event){
        this.$refs.htTable.$refs.htTable.toggleRowSelection(row);
      },
      setDemDefault(row){
        org.setDemDefault(row.code).then(() => {
          this.$refs.htTable.load();
        })
      },
      handleClose() {
        this.dialogVisible = false;
        this.loadDataUrl = "";
      },
      handleCloseMenuPerm() {
        this.dialogVisibleMenuPerm = false;
      },
      showDialog(row) {
        this.dialogVisible = true;
        if (row) {
          this.dialogTitle = '编辑维度';
          row.description = row.demDesc;
          this.demension = JSON.parse(JSON.stringify(row));
        } else {
          this.dialogTitle = '添加维度';
          this.demension = {name:"",code:"",description:''};
        }
      },
      dialogCancle(dialogVisible) {
        this[dialogVisible] = false;
      },
      loadData(param, cb) {
        org.getDemListAll(param)
          .then(response => {
            this.data = response.rows;
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            };
          })
          .finally(() => cb());
      },
      handleCommand(params) {
        this.readOnly = false
        switch (params.command) {
          case "showInfo":
            this.readOnly = true
            this.showDialog(params.row)
            break;
          case "assignMenu":
            this.showDialog(params.row)
            break;
          case "setDemDefault":
            this.setDemDefault(params.row)
            break;
          default:
            break;
        }
      },
      async beforeSaveData() {
        let {name,code,description,isDefault} =this.demension
        this.demensionParams = {name,code,description,isDefault}
        this.isSubmit = true;
      },
      afterSaveData() {
        this.dialogVisible = false;
        this.$refs.htTable.load();
      },
      afterDelete() {
        this.$refs.htTable.load();
      }
    }
  };
</script>
<style lang="scss" scoped>
::v-deep{
  .cell>.el-table__column-filter-trigger{
    display: none;
  }
}

  div[aria-invalid="true"] >>> .el-input__inner,
  div[aria-invalid="true"] >>> .el-input__inner:focus {
    border-color: #f56c6c;
  }
  ::v-deep .el-textarea .el-input__count {
    height: 12px;
    line-height: 12px;
  }
</style>