<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="wfDiyAttributeDTOs"
              v-bind="m1Option"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </template>
        </baseTabPane>
      </baseTabs>
    </el-form>
    <el-dialog
      :title="scritpDialogTitle"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showScriptDialog"
      :visible.sync="showScriptDialog"
      :modal="false"
      custom-class="dialog-style tips-dialog tips-1 "
      width="800px"
      @close="showScriptDialog=false"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont" style="height: 700px;">
        <code-editor mode="java" :readonly="!1" v-model="script" height="414px;"></code-editor>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain class="button-sty" @click="showScriptDialog=false">
          <i class="el-icon-close el-icon"></i>
          {{ $t1('取 消') }}
        </el-button>
        <el-button type="primary" @click="confirmScriptDialog" class="button-sty">
          <i class="el-icon-check el-icon"></i>
          {{ $t1('确 定') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'wfDiyAttributeEdit',
  props: {},
  components: {},
  data() {
    return {
      tabIndex: 0,
      isEdit: false,
      m1Option: {},
      wfDiyAttributeDTOs: [],
      showScriptDialog: false,
      script: null,
      operateIndex: -1
    };
  },
  created() {

  },
  mounted() {
    this.initM1Table();
  },
  computed: {
    scritpDialogTitle() {
      if (this.showScriptDialog) {
        let row = this.wfDiyAttributeDTOs[this.operateIndex];
        return this.$t1('脚本({attributeKey})', {attributeKey: row.attributeKey});
      }
    }
  },
  methods: {
    saveData() {
      this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
        var url = USER_PREFIX + `/wf_diy_attribute/save`;
        this.$http({
          url: url,
          method: `post`,
          data: this.wfDiyAttributeDTOs,
          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: 'attributeKey', width: 150},
          {
            title: this.$t1('名称'),
            field: 'attributeName',
            width: 200,
            slots: {
              default: ({row}) => {
                return [
                  <el-input v-model={row.attributeName} clearable></el-input>
                ]
              }
            }
          },
          {title: this.$t1('脚本'), field: 'attributeScript', width: 550},
          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.openScriptDialog(row, rowIndex);
                    }}
                  >
                    <el-tooltip enterable={false} enterable={false} effect="dark" content={this.$t1('脚本编辑')}
                                placement="top"
                                popper-class="tooltip-skin">
                      <i class="el-icon-edit"/>
                    </el-tooltip>
                  </a>
                ];
              }
            }
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.m1Option = opts;
      });
      this.$http({
        url: USER_PREFIX + '/wf_diy_attribute/list',
        method: `post`,
        data: {},
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let resList = res.objx || [];
          let defaulItems = [];
          for (let i = 1; i <= 20; i++) {
            defaulItems.push({
              attributeKey: 'param' + i,
              attributeName: null,
              attributeScript: null
            })
          }
          resList.forEach(row => {
            if (row.attributeName !== null && row.attributeName !== "" && row.attributeName !== undefined) {
              let index = defaulItems.findIndex(item => item.attributeKey === row.attributeKey);
              if (index !== null && index >= 0) {
                defaulItems[index] = row;
              }
            }
          })
          this.wfDiyAttributeDTOs = defaulItems;
        }
      });
    },
    openScriptDialog(row, index) {
      this.script = row.attributeScript;
      this.operateIndex = index;
      this.showScriptDialog = true;
    },
    confirmScriptDialog() {
      let row = this.wfDiyAttributeDTOs[this.operateIndex];
      row.attributeScript = this.script;
      this.showScriptDialog = false;
    }
  }
};
</script>
