<template>
  <el-dialog
    :title="'设置组织流程单据类型（'+formTemplate.formName+'）'"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :modal="false"
    custom-class="dialog-style list-dialog dialog-checkbox pd_0"
    width="1200px"
    @close="closeDialog"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div class="cont">
      <div id="containt">
        <el-form ref="editForm" :model="formData">
          <div class="grid-height" style="height: 500px">
            <vxe-grid
              class="is-pointer"
              ref="table-m1"
              :data="formData.wfObjConfigDTOs"
              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="openCompanyDialog">
                      新增
                    </vxe-button>
                    <span class="button-sty tips">{{ $t1('选择表单所在的组织，填写组织对应的流程单据类型数据。') }}</span>
                  </div>
                </div>
              </template>
              <template #objTypeName="{row,rowIndex}">
                <el-form-item :prop="'wfObjConfigDTOs.'+rowIndex+'.objTypeName'"
                              :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input v-model="row.objTypeName" clearable></el-input>
                </el-form-item>
              </template>
              <template #operate="{row}">
                <a
                  href="javascript:void(0);"
                  class="a-link"
                  @click="openEditDialog(row.id)"
                >
                  <el-tooltip :enterable="false" effect="dark" :content="$t2('查看','common.view')" placement="top"
                              popper-class="tooltip-skin">
                    <i class="el-icon-edit"/>
                  </el-tooltip>
                </a>
              </template>
            </vxe-grid>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
			<el-button type="primary" plain class="button-sty" @click="closeDialog">
				<i class="el-icon-close el-icon"></i>
				取 消
			</el-button>
			<el-button type="primary" @click="saveData" class="button-sty">
				<i class="el-icon-check el-icon"></i>
				确 定
			</el-button>
		</span>
    <companyInfoDialog v-if="showCompanyInfoDialog" :visiable.sync="showCompanyInfoDialog"
                       @confirm="confirmCompanyDialog" :multi="true" :allCompany="true"/>
  </el-dialog>
</template>
<script>
import companyInfoDialog from "@base/views/user/company_info/dialog.vue";
import fileObjNotifyEdit from "@base/components/fileLibrary/fileObjNotifyEdit.vue";

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

  },
  mounted() {
    this.formData.objTypeCode = this.formTemplate.objTypeCode;
    this.getListByObjTypeCode();
    this.initTableList()
  },
  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;
        let companyCodes = this.formData.wfObjConfigDTOs.map(item => item.companyCode)
        let items = rows.filter(item => !companyCodes.includes(item.companyCode)).map(item => {
          return {
            objTypeCode: formTemplate.objTypeCode,
            objTypeName: formTemplate.objTypeName,
            serviceId: formTemplate.serviceName,
            url: "form",
            companyCode: row.companyCode,
            companyName: row.companyName
          }
        })
        this.formData.wfObjConfigDTOs.push(...items);
      }
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'user_form_template-wfObj-list-m1',
        config: {
          height: "auto"
        },
        columns: [
          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
          {
            title: this.$t1('单据类型名称'),
            field: 'objTypeName',
            width: 250,
            slots: {
              default: "objTypeName"
            }
          },
          {
            title: this.$t1('组织名称'),
            field: 'companyName',
            width: 200,
          },
          {
            title: this.$t1('单据类型编码'),
            field: 'objTypeCode',
            width: 200
          },
          {
            title: this.$t1('服务名'),
            field: 'serviceId',
            width: 150
          },
          {
            width: 100,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onClick={() => {
                      this.formData.wfObjConfigDTOs.splice(rowIndex, 1)
                    }}
                  >
                    <el-tooltip enterable={false} effect="dark" content="删除" 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();
    },
  }
}
</script>


<style scoped>

</style>
