<template>
  <div class="fullheight">
    <ht-table
      :header-cell-class-name="headerCellClassName"
      @load="loadData"
      @row-click="rowClick"
      :data="data"
      :pageResult="pageResult"
      :selectable="false"
      :selection="false"
      :show-export="false"
      :show-custom-column="false"
      quick-search-props="name,alias"
      ref="table"
    >
      <!-- <template v-slot:toolbar>
                <el-button-group>
                    <el-button size="small" @click="edit()" icon="el-icon-plus">添加</el-button>
                    <ht-delete-button
              :url="deleteUrl"
              style="margin:0;"
              :htTable="$refs.table">删除
          </ht-delete-button>
                </el-button-group>
            </template> -->
      <template v-slot:toolbar>
        <div class="tipslabel">
          温馨提示：修改后如希望对所有流程立即生效，请先清除流程模块缓存！
        </div>
      </template>
      <ht-table-column type="index" width="150" align="center" label="序号" />
      <ht-table-column
        prop="name"
        label="按钮名称"
        :show-overflow-tooltip="true"
        :sortable="true"
      />
      <ht-table-column
        prop="alias"
        label="别名"
        width="500"
        :show-overflow-tooltip="true"
        :sortable="true"
      />
      <ht-table-column
        prop="disabled"
        label="是否默认启用"
        width="200"
        :filters="[
          {text: '启用', value: 0},
          {text: '不启用', value: 1}
        ]"
      >
        <template v-slot="{row}">
          <el-tag type="info" v-if="row.disabled === 0">启用</el-tag>
          <el-tag type="danger" v-else>不启用</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column label="操作" width="160" align="left">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.id)" size="mini" type="text"
            >修改</el-button
          >
        </template>
      </ht-table-column>
    </ht-table>

    <ht-sidebar-dialog
      title="修改按钮信息"
      :visible="dialogVisible"
      :before-close="handleClose"
      width="28%"
    >
      <el-form v-form :model="ButtonData" data-vv-scope="ButtonDataForm">
        <ht-form-item label="按钮名称">
          <ht-input
            v-model="ButtonData.name"
            autocomplete="off"
            validate="required"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="别名">
          <ht-input
            v-model="ButtonData.alias"
            autocomplete="off"
            validate="required"
            disabled
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="是否启用">
          <el-radio-group v-model="ButtonData.disabled">
            <el-radio-button :label="0">是</el-radio-button>
            <el-radio-button :label="1">否</el-radio-button>
          </el-radio-group>
        </ht-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        :style="isIe ? 'bottom: 0px' : ''"
        style="padding-right: 20px;"
      >
      <el-button @click="close()">取消</el-button>
      <el-button @click="save()" type="primary">保存</el-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
import flow from '@/api/flow.js'
const secretaryEdit = () => import('@/components/flow/SecretaryEdit.vue')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  components: {
    secretaryEdit
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      data: [],
      pageResult: {
        page: 0,
        pageSize: 50,
        total: 0
      },
      isIe: false,
      ButtonData: {},
      dialogVisible: false
      // filterButton: ['instanceTrans', 'backToStart', 'commu']
    }
  },
  methods: {
    rowClick(row, column, event) {
      this.$refs.table.$refs.htTable.toggleRowSelection(row)
    },
    loadData(param, cb) {
      flow
        .getButtonsByType(param, 'signTask')
        .then(response => {
          if (response.state) {
            // let buttons = response.value.rows.filter(e => {
            //   if (this.filterButton.indexOf(e.alias) != -1) {
            //     return false
            //   }
            //   return true
            // })
            this.data = response.value.rows
            this.pageResult = {
              page: response.value.page,
              pageSize: response.value.pageSize,
              total: response.value.total
            }
          } else {
            this.$message.error(response.message || '获取数据失败！')
          }
        })
        .finally(() => {
          cb()
        })
    },
    async edit(id) {
      flow
        .getButtonsById(id)
        .then(response => {
          if (response.state) {
            this.ButtonData = response.value
            this.dialogVisible = true
          } else {
            this.$message.error(response.message || '获取数据失败！')
          }
        })
        .finally(() => {
          cb()
        })
    },
    save() {
      let param = this.ButtonData
      flow
        .updateButtonById(param)
        .then(response => {
          if (response.state) {
            this.$message.success(response.message || '保存成功！')
            this.dialogVisible = false
            this.$refs.table.load()
          } else {
            this.$message.error(response.message || '保存失败！')
          }
        })
        .finally(() => {
          cb()
        })
    },
    close() {
      this.dialogVisible = false
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}
.tipslabel {
  font-size: 14px;
  font-weight: 400;
  color: #409eff;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: rgba(64, 158, 255, 0.05);
  padding-left: 16px;
}
</style>