<template>
  <div class="detail-wrap">
    <el-form ref="editForm">
      <div class="d-header clearfix">
        <div class="fl">
          <i class="el-icon-info"/>
          {{ $t1('查看流程参数') }}
        </div>
        <div class="fr">
          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">
            {{ $t1('重置') }}
          </el-button>
          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{ $t1('保存') }}
          </el-button>
        </div>
      </div>
      <baseTabs :showNav="false">
        <baseTabPane :label="$t1('基本信息')">
          <template #default>
            <vxe-grid
              ref="m1Grid"
              :data="wfParamDTOs"
              v-bind="m1Option"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </template>
        </baseTabPane>
      </baseTabs>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'wfParamEdit',
  props: {},
  components: {},
  data() {
    return {
      tabIndex: 0,
      isEdit: false,
      m1Option: {},
      wfParamDTOs: []
    };
  },
  created() {

  },
  mounted() {
    this.initM1Table();
  },
  methods: {
    saveData() {
      this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
        var url = USER_PREFIX + `/wf_param/save`;
        this.$http({
          url: url,
          method: `post`,
          data: this.wfParamDTOs,
          isLoading: true,
          success: res => {
            this.$message({
              message: res.content,
              type: 'success',
              duration: 500,
              onClose: t => {
                this.$baseReload();
              }
            });
          }
        });
      });
    },
    initM1Table() {
      const tableOption = {
        vue: this,
        tableRef: 'm1Grid',
        tableName: 'editParam-m1Grid',
        columns: [
          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
          {title: this.$t1('编码'), field: 'paramKey', width: 150},
          {
            title: this.$t1('名称'),
            field: 'paramName',
            width: 200,
            slots: {
              default: ({row}) => {
                return [
                  <el-input v-model={row.paramName} clearable></el-input>
                ]
              }
            }
          },

          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.m1Option = opts;
      });
      this.$http({
        url: USER_PREFIX + '/wf_param/list',
        method: `post`,
        data: {},
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let resList = res.objx || [];
          let defaulItems = [
            {
              paramKey: 'param1',
              paramName: null
            },
            {
              paramKey: 'param2',
              paramName: null
            },
            {
              paramKey: 'param3',
              paramName: null
            },
            {
              paramKey: 'param4',
              paramName: null
            },
            {
              paramKey: 'param5',
              paramName: null
            },
            {
              paramKey: 'param6',
              paramName: null
            },
            {
              paramKey: 'param7',
              paramName: null
            },
            {
              paramKey: 'param8',
              paramName: null
            },
            {
              paramKey: 'param9',
              paramName: null
            },
            {
              paramKey: 'param10',
              paramName: null
            },
          ];
          resList.forEach(row => {
            if (row.paramName !== null && row.paramName !== "" && row.paramName !== undefined) {
              let index = defaulItems.findIndex(item => item.paramKey === row.paramKey);
              if (index !== null && index >= 0) {
                defaulItems[index] = row;
              }
            }
          })
          this.wfParamDTOs = defaulItems;
        }
      });
    },
  }
};
</script>
