<template>
  <el-dialog
    custom-class="dialog-style list-dialog"
    title="流程单据定义"
    :visible.sync="dialogVisible"
    :show-close="!0"
    :append-to-body="false"
    :modal="false"
    :close-on-click-modal="!1"
    :close-on-press-escape="!1"
    :destroy-on-close="!0"
    width="1220px"
    top="5vh"
    v-dialog-drag
    @close="closeDialog"
  >
    <div class="cont">
      <el-form ref="editForm" :model="formData">
        <el-table
          ref="singleTable"
          width="100%"
          :data="formData.wfObjConfigDTOs"
          height="500"
          border=""
          row-key="columnId"
          stripe=""
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column :label="i18nt('表单类型名称')" width="150" prop="objTypeName">
            <template slot-scope="scope">
              <el-form-item :prop="'wfObjConfigDTOs.'+scope.$index+'.objTypeName'"
                            :rules="[{ required: true, trigger: 'blur' }]">
                <el-input v-model="scope.row.objTypeName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('组织名称')" width="150" prop="companyCode">
            <template slot-scope="scope">
              {{ scope.row.companyName }}
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('表单类型编码')" width="200" prop="objTypeCode"></el-table-column>
          <el-table-column :label="i18nt('服务名')" width="150" prop="serviceId"></el-table-column>
          <el-table-column :label="i18nt('designer.setting.actionColumn')" width="100" align="center">
            <template #header>
              <span>{{ i18nt('designer.setting.actionColumn') }}</span>
              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
                         icon="el-icon-plus" @click="openCompanyDialog"></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="formData.wfObjConfigDTOs.splice(scope.$index,1)"
              ></el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-form>
    </div>
    <div class="dialog-footer" slot="footer">
      <el-button @click="closeDialog" class="button-sty" icon="el-icon-close">
        {{ i18nt('designer.hint.cancel') }}
      </el-button>
      <el-button type="primary" @click="saveData" class="button-sty" icon="el-icon-check">
        {{ i18nt('designer.hint.confirm') }}
      </el-button>
    </div>
    <companyInfoDialog v-if="showCompanyInfoDialog" :visiable.sync="showCompanyInfoDialog"
                       @confirm="confirmCompanyDialog" multi="false"/>
  </el-dialog>
</template>
<script>
import i18n from '../../../../components/xform/utils/i18n';
import companyInfoDialog from "@base/views/user/company_info/dialog.vue";

export default {
  components: {companyInfoDialog},
  props: ['formTemplate'],
  mixins: [i18n],
  data() {
    return {
      dialogVisible: true,
      formData: {
        objTypeCode: null,
        wfObjConfigDTOs: []
      },
      operateIndex: 0,
      showCompanyInfoDialog: false
    }
  },
  created() {

  },
  mounted() {
    this.formData.objTypeCode = this.formTemplate.objTypeCode;
    this.getListByObjTypeCode();
  },
  methods: {
    getListByObjTypeCode(callback) {
      let formTemplate = this.formTemplate
      this.$http({
        url: `/${formTemplate.serviceName}/wf_obj_config/listByObjTypeCode`,
        method: `post`,
        data: {
          stringOne: formTemplate.objTypeCode
        },
        isLoading: true,
        success: res => {
          let rows = res.objx || [];
          this.formData.wfObjConfigDTOs = rows;
          callback && callback(rows)
        }
      });
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = `/${this.formTemplate.serviceName}/wf_obj_config/saveUpdates`;
            this.$http({
              url: url,
              method: `post`,
              data: this.formData,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 1000
                });
                this.getListByObjTypeCode(rows => {
                  this.$emit('confirm', rows)
                  this.closeDialog();
                })
              }
            });
          });
        }
      });
    },
    addItem() {
      let formTemplate = this.formTemplate;
      let row = {
        objTypeCode: formTemplate.objTypeCode,
        objTypeName: formTemplate.objTypeName,
        serviceId: formTemplate.serviceName,
        url: "form",
        companyCode: null,
        companyName: null
      }
      this.formData.wfObjConfigDTOs.push(row);
    },
    closeDialog() {
      this.dialogVisible = false;
      this.$emit("update:visiable", false);
    },
    openCompanyDialog() {
      this.showCompanyInfoDialog = true;
    },
    confirmCompanyDialog(rows) {
      if (rows.length) {
        let row = rows[0];
        let formTemplate = this.formTemplate;
        if (!this.formData.wfObjConfigDTOs.find(item => item.companyCode == row.companyCode)) {
          let newrow = {
            objTypeCode: formTemplate.objTypeCode,
            objTypeName: formTemplate.formName,
            serviceId: formTemplate.serviceName,
            url: "form",
            companyCode: row.companyCode,
            companyName: row.companyName
          }
          this.formData.wfObjConfigDTOs.push(newrow);
        }
      }
    }
  }
}
</script>


<style scoped>

</style>
