<template>
  <div class="ele-body">
    <el-card shadow="never">
      <form-search @search="reload" />

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        cache-key="systemRoleTable8"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="btnCreate()"
          >
            添加
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="btnDelete()"
          >
            批量删除
          </el-button>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link"
              >操作<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)"
                >查看</el-dropdown-item
              >
              <!-- <el-dropdown-item
                icon="el-icon-edit"
                divided
                @click.native="btnUpdate(row)"
                >修改
              </el-dropdown-item> -->
              <el-dropdown-item
                icon="el-icon-edit"
                divided
                @click.native="btnUpdateFormJson(row)"
                >修改表单
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-delete"
                divided
                @click.native="btnDelete(row.formKey)"
                >删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </ele-pro-table>
    </el-card>

    <ele-modal
      width="30%"
      :visible="dialogFormVisible"
      :append-to-body="true"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      title="流程表单"
      @update:visible="updateVisible"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        :disabled="dialogStatus === 'view'"
        label-position="right"
        label-width="110px"
      >
        <el-form-item label="表单key" prop="formKey">
          <el-input
            v-model="temp.formKey"
            :disabled="dialogStatus === 'update'"
          />
        </el-form-item>
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="temp.formName" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button icon="el-icon-close" @click="dialogFormVisible = false"
          >取消</el-button
        >
        <el-button
          v-if="dialogStatus !== 'view'"
          icon="el-icon-check"
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >确定
        </el-button>
      </template>
    </ele-modal>
  </div>
</template>

<script>
  import {
    deleteAction,
    getAction,
    postAction,
    putAction
  } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  import FormSearch from './components/form-search.vue';

  export default {
    name: 'FlowableForm',
    components: { FormSearch },
    data () {
      return {
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },

          {
            prop: 'formKey',
            label: '表单key',
            align: 'center',

            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'formName',
            label: '表单名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        selection: [],
        dialogFormVisible: false,
        dialogStatus: '',
        temp: {
          formKey: '',
          formName: ''
        },
        rules: {
          formKey: [
            { required: true, message: '表单KEY不能为空', trigger: 'blur' }
          ],
          formName: [
            { required: true, message: '表单名称不能为空', trigger: 'blur' }
          ]
        }
      };
    },
    created () {},
    methods: {
      updateVisible () {
        this.dialogFormVisible = false;
      },
      /* 表格数据源 */
      async datasource ({ page, limit, where, order }) {
        const res = await getAction('/flowable/form/list', {
          current: page,
          size: limit,
          ...where
        });
        const { data } = res.data;
        return data;
      },
      /* 刷新表格 */
      reload (where) {
        this.$refs.table.reload({ page: 1, where });
      },

      resetTemp () {
        this.temp = {
          formKey: '',
          formName: ''
        };
      },
      btnView (row) {
        this.temp = Object.assign({}, row);
        this.dialogStatus = 'view';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });
      },
      btnCreate () {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });
      },
      createData () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            postAction('/flowable/form/save', this.temp).then(({ data }) => {
              this.dialogFormVisible = false;
              Message.success('添加' + data.message);
              this.reload();
            });
          }
        });
      },
      btnUpdate (row) {
        this.temp = Object.assign({}, row);
        console.log(this.temp);
        this.dialogStatus = 'update';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });
      },
      btnUpdateFormJson (row) {
        this.$router.push({
          path: '/flowable/form/edit',
          query: { formKey: row.formKey }
        });
      },
      updateData () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            putAction('/flowable/form/update', this.temp).then(({ data }) => {
              this.dialogFormVisible = false;
              Message.success('修改' + data.message);
              this.reload();
            });
          }
        });
      },
      btnDelete (id) {
        let ids = id ? [id] : this.selection.map((record) => record.formKey);
        console.log(ids);
        if (ids.length == 0) {
          Message.error('请选择要删除的记录');
          return;
        }
        deleteAction('/flowable/form/delete', { ids: ids.toString() }).then(
          ({ data }) => {
            console.log(data);
            Message.success('删除' + data.message);
            this.reload();
          }
        );
      }
    }
  };
</script>
