<template>
  <div style="height: calc(100% - 48px); margin: 24px">
    <ht-table
      @load="loadData"
      :data="varList"
      :selectable="true"
      :nopagination="true"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="operating('')"
          >添加</el-button
        >
        <el-button size="mini" icon="el-icon-delete" @click="delClick()"
          >批量删除</el-button
        >
      </template>
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column label="变量类型" width="100">
        <template v-slot="{row}">
          <span v-if="row.nodeId == ''">全局变量</span>
          <span v-if="row.nodeId != ''">{{ row.nodeId }}</span>
        </template>
      </ht-table-column>
      <ht-table-column prop="name" align="center" label="变量名">
        <template v-slot="{row}">
          <el-link
            type="primary"
            @click="operating(row.varKey)"
            title="编辑变量"
            >{{ row.name }}</el-link
          >
        </template>
      </ht-table-column>
      <ht-table-column
        prop="varKey"
        width="150"
        align="center"
        label="变量key"
      />
      <ht-table-column
        prop="dataType"
        width="120"
        align="center"
        label="数据类型"
      />
      <ht-table-column prop="defaultVal" align="center" label="默认值" />
      <ht-table-column width="120" align="center" label="是否必需">
        <template v-slot="{row}">
          <el-tag  v-if="row.required">必填</el-tag>
          <el-tag type="info" v-if="!row.required">非必填</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column width="100" label="操作" align="center">
        <template v-slot="{row}">
          <el-button
            size="mini"
            type="text"
     
            @click="remove(row.varKey)"
            >删除</el-button
          >
        </template>
      </ht-table-column>
    </ht-table>
    <ht-sidebar-dialog
      width="28%"
      :title="title"
      :visible="dialogVisibleSetting"
      :before-close="close"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form :model="data" data-vv-scope="settingSave" label-width="90px" label-position="left" class="dialog_form">
        <el-form-item label="节点:">
          <ht-select
            clearable
            v-model="data.bpmVariableDef.nodeId"
            :options="data.nodeDefList"
            :props="{key: 'nodeId', value: 'name'}"
          />
        </el-form-item>
        <el-form-item label="变量名:" required>
          <ht-input
            v-model="data.bpmVariableDef.name"
            placeholder="请输入变量名"
            autocomplete="off"
            :validate="{required: true}"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </el-form-item>
        <el-form-item label="变量key:" required
          ><ht-input
            v-model="data.bpmVariableDef.varKey"
            placeholder="请输入变量key"
            autocomplete="off"
            :validate="{
              required: true,
              regex: {
                exp: '^[a-zA-Z0-9_-]{1,50}$',
                message: '只能包含字母或数字'
              }
            }"
            :maxlength="50"
            :showWordLimit="true"
            :disabled="!isAdd"
          ></ht-input
        ></el-form-item>
        <el-form-item label="数据类型:" required>
          <ht-select
            clearable
            v-model="data.bpmVariableDef.dataType"
            :options="[
              {key: 'string', value: '字符串'},
              {key: 'int', value: '整型'},
              {key: 'float', value: '浮点型'},
              {key: 'double', value: '双精度'}
            ]"
            validate="required"
        /></el-form-item>
        <el-form-item label="是否必需:" required>
          <ht-select
            clearable
            v-model="data.bpmVariableDef.required"
            :options="[
              {key: 'true', value: '是'},
              {key: 'false', value: '否'}
            ]"
            validate="required"
        /></el-form-item>
        <el-form-item label="默认值:">
          <ht-input
            v-model="data.bpmVariableDef.defaultVal"
            placeholder="请输入默认值"
            autocomplete="off"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input
        ></el-form-item>
        <el-form-item label="变量描述:">
          <ht-input
            type="textarea"
            :rows="8"
            v-model="data.bpmVariableDef.description"
            placeholder="请输入变量描述..."
            autocomplete="off"
            :maxlength="200"
            :showWordLimit="true"
          ></ht-input
        ></el-form-item>
        <!-- <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <th width="130px">节点:</th>
              <td>
                <ht-select
                  clearable
                  disabled
                  v-model="data.bpmVariableDef.nodeId"
                  :options="data.nodeDefList"
                  :props="{key: 'nodeId', value: 'name'}"
                />
              </td>
            </tr>
            <tr>
              <th width="130px" class="is-required">变量名:</th>
              <td>
                <ht-input
                  v-model="data.bpmVariableDef.name"
                  placeholder="请输入变量名"
                  autocomplete="off"
                  :validate="{required: true}"
                  :maxlength="50"
                  :showWordLimit="true"
                ></ht-input>
              </td>
            </tr>
            <tr>
              <th width="130px" class="is-required">变量key:</th>
              <td>
                <ht-input
                  v-model="data.bpmVariableDef.varKey"
                  placeholder="请输入变量key"
                  autocomplete="off"
                  :validate="{
                    required: true,
                    regex: {
                      exp: '^[a-zA-Z0-9_-]{1,50}$',
                      message: '只能包含字母或数字'
                    }
                  }"
                  :maxlength="50"
                  :showWordLimit="true"
                  :disabled="!isAdd"
                ></ht-input>
              </td>
            </tr>
            <tr>
              <th width="130px" class="is-required">数据类型:</th>
              <td>
                <ht-select
                  clearable
                  v-model="data.bpmVariableDef.dataType"
                  :options="[
                    {key: 'string', value: '字符串'},
                    {key: 'int', value: '整型'},
                    {key: 'float', value: '浮点型'},
                    {key: 'double', value: '双精度'}
                  ]"
                  validate="required"
                />
              </td>
            </tr>
            <tr>
              <th width="130px" class="is-required">是否必需:</th>
              <td>
                <ht-select
                  clearable
                  v-model="data.bpmVariableDef.required"
                  :options="[
                    {key: 'true', value: '是'},
                    {key: 'false', value: '否'}
                  ]"
                  validate="required"
                />
              </td>
            </tr>
            <tr>
              <th width="130px">默认值:</th>
              <td>
                <ht-input
                  v-model="data.bpmVariableDef.defaultVal"
                  placeholder="请输入默认值"
                  autocomplete="off"
                  :maxlength="50"
                  :showWordLimit="true"
                ></ht-input>
              </td>
            </tr>
            <tr>
              <th width="130px">变量描述:</th>
              <td>
                <ht-input
                  type="textarea"
                  :rows="8"
                  v-model="data.bpmVariableDef.description"
                  placeholder="请输入变量描述"
                  autocomplete="off"
                  :maxlength="200"
                  :showWordLimit="true"
                ></ht-input>
              </td>
            </tr>
          </tbody>
        </table> -->
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-right: 20px;">
        <el-button size="mini" @click="close" 
          >取 消</el-button
        >
        <el-button type="primary" size="mini" @click="save" 
          >确 认</el-button
        >
      </div>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
import {Message} from 'element-ui'
import req from '@/request.js'
export default {
  name: 'FlowVarList',
  props: {
    defId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      varList: [], //列表数据
      title: '添加流程变量',
      dialogVisibleSetting: false, //是否显示添加编辑流程变量侧边栏
      data: {
        bpmVariableDef: {nodeId: '', isRequired: 'false', dataType: 'string'},
        nodeDefList: []
      }, //添加编辑流程变量时的数据
      isAdd: false
    }
  },
  methods: {
    //保存流程变量
    save() {
      const this_ = this
      this_.$validator.validateAll('settingSave').then(result => {
        if (result) {
          let isAdd = true //是否新增流程变量
          if (this_.title == '添加流程变量') {
            isAdd = true
          } else {
            isAdd = false
          }
          let param = {
            variableDef: this_.data.bpmVariableDef,
            isAdd: isAdd,
            defId: this_.defId
          }
          req.post('${bpmModel}/flow/var/v1/save', param).then(function(data) {
            data = data.data
            if (data.state) {
              Message.success((isAdd ? '添加' : '编辑') + '变量成功')
              this_.dialogVisibleSetting = false
              this_.$refs.htTable.load() //重新加载列表数据
            }
          })
        } else {
          let arr = this_.$validator.errors.items.filter(
            item => item.scope == 'settingSave'
          )
          let errorLength = arr.length
          this_.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    //删除流程变量
    remove(key) {
      const this_ = this
      let url =
        '${bpmModel}/flow/var/v1/remove?defId=' + this_.defId + '&varKey=' + key
      this_
        .$confirm('是否确认删除？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false
        })
        .then(() => {
          req.remove(url).then(function(rep) {
            rep = rep.data
            if (rep.state) {
              if (rep.message) {
                Message.success(rep.message)
                this_.$refs.htTable.load() //重新加载列表数据
              }
            } else {
              Message.error(rep.message)
            }
          })
        })
    },
    //批量删除
    async delClick() {
      const this_ = this
      if (this.$refs.htTable.selection.length == 0) {
        this.$message({message: '请至少选择一条记录', type: 'warning'})
        return false
      }
      let status = []
      for (const i of this.$refs.htTable.selection) {
        status.push(i.varKey)
      }
      let url =
        '${bpmModel}/flow/var/v1/remove?defId=' +
        this.defId +
        '&varKey=' +
        status.join(',')
      this_
        .$confirm('是否确认删除？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false
        })
        .then(() => {
          req.remove(url).then(rep => {
            let res = rep.data
            if (res.state) {
              Message.success(res.message)
              this.$refs.htTable.load() //重新加载列表数据
            } else {
              Message.error(res.message)
            }
          })
        })
    },

    //添加或编辑流程变量
    operating(key) {
      this.title = key == '' ? '添加流程变量' : '编辑流程变量'
      this.isAdd = key === '' ? true : false
      this.dialogVisibleSetting = true //显示添加编辑流程变量侧边栏 req.remove(url)
      this.data = {
        bpmVariableDef: {nodeId: '', isRequired: 'false', dataType: 'string'},
        nodeDefList: []
      } //清空值
      const this_ = this
      req
        .get(
          '${bpmModel}/flow/var/v1/defVarEdit?defId=' +
            this_.defId +
            '&varKey=' +
            key
        )
        .then(function(res) {
          res = res.data
          if (res.bpmVariableDef && !res.bpmVariableDef.required) {
            res.bpmVariableDef.required = 'false'
          } else if (
            res.bpmVariableDef &&
            res.bpmVariableDef.required === true
          ) {
            res.bpmVariableDef.required = 'true'
          }
          if (this_.title == '添加流程变量') {
            this_.data.nodeDefList = res.nodeDefList
          } else {
            this_.data = res
          }
          this_.data.nodeDefList.push({nodeId: '', name: '全局变量'})
        })
    },
    //关闭侧边栏
    close() {
      this.dialogVisibleSetting = false
    },
    //页面加载显示数据
    loadData(param, cb) {
      const this_ = this
      let listUrl =
        '${bpmModel}/flow/var/v1/listJson?defId=' + this_.defId + '&nodeId='
      req
        .get(listUrl)
        .then(function(data) {
          this_.varList = data.data
        })
        .finally(() => cb())
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  }
}
</script>
<style lang="scss" scoped>
.el-main {
  padding-top: 0px;
}
.dialog_form{
  .inputs{
    width: 100%;
  }
}
</style>