<template>
  <div>
    <el-dialog
      :title="$t1('过程更改业务数据')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
      width="1200px"
      @close="dialogClose"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont">
        <div class="grid-height" style="height: 500px">
          <vxe-grid
            class="is-pointer"
            ref="table-m1"
            :data="tableData"
            v-bind="vxeOption"
            @resizable-change="$vxeTableUtil.onColumnWitchChange"
            @custom="$vxeTableUtil.customHandle"
          >
            <template #form>
              <div class="clearfix screen-btns">
                <div class="fl">
                  <vxe-button status="primary" class="button-sty" icon="el-icon-plus" @click="addItem">
                    {{ $t1('新增') }}
                  </vxe-button>
                </div>
                <div class="fl screen-breadcrumb" style="margin-left: 30px;">
                  <span style="font-size: 12px;">{{ $t1('流程模板名称') }}：</span>
                  {{ objConfigItem.modelName }}
                </div>
              </div>
            </template>
            <template #user="{row,rowIndex}">
              <el-input
                class="search-input"
                v-model="row.nickName"
                clearable
                @clear="
                  row.userId = null;
                "
                v-if="!row._isParent"
                v-el-readonly
              >
                <i slot="suffix" class="el-input__icon el-icon-search" @click="openUserRowDialog(row,rowIndex)"></i>
              </el-input>
              <template v-else>{{ row.nickName }}</template>
            </template>
            <template #switch="{row,column,rowIndex}">
              <el-switch v-model="row[column.field]" :key="column.field+rowIndex" :active-value="1"
                         :inactive-value="0" :disabled="column.params.disabled"></el-switch>
            </template>
          </vxe-grid>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
			<el-button type="primary" plain class="button-sty" @click="dialogClose">
				<i class="el-icon-close el-icon"></i>
				{{ $t1('取 消') }}
			</el-button>
			<el-button type="primary" @click="saveData" class="button-sty">
				<i class="el-icon-check el-icon"></i>
				{{ $t1('确 定') }}
			</el-button>
		</span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    objConfigItem: Object,
    serviceId: String
  },
  components: {},
  computed: {
    current_prefix() {
      return '/' + this.serviceId;
    }
  },
  async mounted() {
    this.initTableList();
  },
  data() {
    let that = this;
    return {
      showDialog: true,
      activeName: 'second',
      value10: '',
      dataId: '',
      showEdit: false,
      formData: {
        nickName: null,
      },
      vxeOption: {},
      showUserDialog: false,
      showPositionDialog: false,
      showSaleOrgDialog: false,
      operateIndex: 0,
      showViewDialog: false,

      tableData: [],
      showUserRowDialog: false,
      showUserAddDialog: false,
      currentRow: null,
      isDev: true

    };
  },
  methods: {
    searchEvent() {
      this.$refs['table-m1'].commitProxy('reload');
    },
    resetEvent() {
      this.formData = {};
      this.$refs['table-m1'].commitProxy('reload');
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'user_wf-objConfig-wfBizDataSetting-m1',
        config: {
          height: "auto"
        },
        columns: [
          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
          {
            title: this.$t1('流程动作'),
            field: 'action',
            width: 150,
            slots: {
              default: ({row}) => {
                return [
                  <el-select v-model={row.action} clearable>
                    <el-option label="流程启动" value="start"></el-option>
                    <el-option label="流程中断" value="interrupt"></el-option>
                    <el-option label="流程完成" value="end"></el-option>
                  </el-select>
                ];
              }
            }
          },
          {
            title: this.$t1('数据库表名'),
            field: 'tableName',
            width: 250,
            slots: {
              default: ({row}) => {
                return [
                  <el-input v-model={row.tableName} clearable></el-input>
                ];
              }
            }
          },
          {
            title: this.$t1('数据库字段名'),
            field: 'tableField',
            width: 250,
            slots: {
              default: ({row}) => {
                return [
                  <el-input v-model={row.tableField} clearable></el-input>
                ];
              }
            }
          },
          {
            title: this.$t1('设置的值'),
            field: 'toValue',
            width: 250,
            slots: {
              default: ({row}) => {
                return [
                  <el-input v-model={row.toValue} clearable></el-input>
                ];
              }
            }
          },
          {
            width: 100,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onClick={() => {
                      this.tableData.splice(rowIndex, 1)
                    }}
                  >
                    <el-tooltip enterable={false} effect="dark" content={this.$t1('删除')} placement="top"
                                popper-class="tooltip-skin">
                      <i class="el-icon-delete"/>
                    </el-tooltip>
                  </a>
                ]
              }
            }
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption = opts;
      });
      this.initData();
    },
    initData() {
      this.$http({
        // aes: true,
        url: this.current_prefix + '/wf_biz_data_setting/list',
        method: `post`,
        data: {
          objConfigItemId: this.objConfigItem.id,
          modelId: this.objConfigItem.modelId,
        },
        isLoading: true,
        modalStrictly: true,
        success: res1 => {
          let tableData = res1.objx || [];
          this.tableData = tableData;

        }
      });
    },
    dialogClose() {
      this.showDialog = false
      this.$emit('update:visiable', false)
    },
    dialogConfirm() {
      this.$emit('confirm');
      this.$emit('update:visiable', false);
    },
    addItem() {
      let row = this.createRow();
      this.tableData.push(row)
    },
    saveData() {
      this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
        var url = this.current_prefix + `/wf_biz_data_setting/saveUpdates`;
        this.$http({
          aes: true,
          url: url,
          method: `post`,
          data: {
            objConfigItemId: this.objConfigItem.id,
            modelId: this.objConfigItem.modelId,
            wfBizDataSettingDTOs: this.tableData
          },
          isLoading: true,
          success: res => {
            this.$message({
              message: res.content,
              type: 'success',
              duration: 500,
              onClose: t => {
                this.dialogConfirm()
              }
            });
          }
        });
      });
    },
    createRow() {
      let row = {
        objConfigItemId: this.objConfigItem.id,
        modelId: this.objConfigItem.modelId,
        action: 'start',
        tableName: null,
        tableField: null,
        toValue: null
      }
      return row;
    }
  }
}
</script>

<style scoped>

</style>
