<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">项目标签设置</el-divider>
    </el-form-item>
    <el-form-item label="标签长度">
      <el-input v-model="optionModel.tagWidth" clearable></el-input>
    </el-form-item>
    <el-form-item label="弹框表单编码">
      <el-input v-model="optionModel.tagFormCode" clearable></el-input>
    </el-form-item>
    <el-form-item label="弹框查询参数">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('tagFormParam', ['dataId', 'formCode'])"
      >
        <span>{{ optionModel.tagFormParam }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="展示字段">
      <el-input v-model="optionModel.tagLabelField" clearable></el-input>
    </el-form-item>
    <el-form-item label="唯一关键字段">
      <el-input v-model="optionModel.tagUniqueField" clearable></el-input>
    </el-form-item>
    <el-form-item label="来源展示字段">
      <el-input v-model="optionModel.tagFormLabelField" clearable></el-input>
    </el-form-item>
    <el-form-item label="来源唯一关键字段">
      <el-input v-model="optionModel.tagFormUniqueField" clearable></el-input>
    </el-form-item>

    <el-form-item label="明细字段回填">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
        <span>{{ optionModel.tagFillConfig.length ? "已维护" : "" }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="确认回调">
      <!--      <el-input v-model="optionModel.tagConfirmCallback" clearable></el-input>-->
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('tagConfirmCallback', ['dataId', 'formCode', 'rows'])"
      >
        <span>{{ optionModel.tagConfirmCallback }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="删除回调">
      <!--      <el-input v-model="optionModel.tagDeleteCallback" clearable></el-input>-->
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('tagDeleteCallback', ['dataId', 'formCode'])"
      >
        <span>{{ optionModel.tagDeleteCallback }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="是否可以删除">
      <el-switch v-model="optionModel.tabDeleteEnabled" clearable></el-switch>
    </el-form-item>

    <!--    <el-form-item label="查询参数">
          <a href="javascript:void(0);" class="a-link link-oneLind"
             @click="editEventHandler('formScriptParam', ['dataId', 'formCode'])">
            <span>{{ optionModel.formScriptParam }}</span>
            <i class="el-icon-edit"></i>
          </a>
        </el-form-item>-->
    <el-dialog
      custom-class="dialog-style list-dialog"
      title="数据回填"
      :visible.sync="showDialog"
      :modal="false"
      :show-close="!0"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      top="5vh"
      width="500px"
      v-dialog-drag
    >
      <div class="cont">
        <el-table
          ref="singleTable"
          width="100%"
          height="500"
          :data="tableData"
          border=""
          stripe=""
          default-expand-all
        >
          <el-table-column label="目标字段" width="150" prop="targetField">
            <template slot-scope="scope">
              <el-input v-model="scope.row.targetField"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="来源字段" width="150" prop="sourceField">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sourceField"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="50" fixed="right">
            <template #header="{ row, $index }">
              <el-tooltip
                :hide-after="500"
                class="item"
                effect="dark"
                content="添加"
                placement="top"
              >
                <el-button
                  size="mini"
                  type=""
                  circle=""
                  icon="el-icon-plus"
                  @click="tableData.push({})"
                />
              </el-tooltip>
            </template>
            <template #default="{ row, $index }">
              <el-tooltip effect="dark" content="删除" placement="top">
                <el-button
                  size="mini"
                  type=""
                  circle=""
                  icon="el-icon-delete"
                  @click="tableData.splice($index, 1)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="showDialog = false" class="button-sty" icon="el-icon-close">
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="confirmDialog"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('流程节点信息')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="true"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      top="5vh"
      v-dialog-drag
      :fullscreen="true"
    >
      <div class="cont" style="padding-bottom: 8px">
        <el-table
          ref="singleTable"
          width="100%"
          :data="tableData"
          height="100%"
          border=""
          row-key="columnId"
          stripe=""
          style="margin-bottom: 0px"
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column :label="i18nt('服务')" width="150">
            <template slot-scope="{ row }">
              <el-select v-model="row.serveType" @change="changeServeType(row)">
                <el-option :value="1" label="正式"></el-option>
                <el-option :value="2" label="UAT"></el-option>
                <el-option :value="3" label="测试"></el-option>
                <el-option :value="4" label="自定义"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('自定义服务')" width="150">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.serveName"
                clearable
                :disabled="row.serveType !== 4"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input v-model="row.companyCodes" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('流程模板编码')" width="150">
            <template slot-scope="{ row }">
              <el-input v-model="row.modelKey" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('节点步骤')" width="250">
            <template slot-scope="{ row }">
              <el-input v-model="row.taskSteps" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('设置')" width="150">
            <template slot-scope="{ row }">
              <el-select v-model="row.type" clearable>
                <el-option :value="1" label="可编辑"></el-option>
                <el-option :value="2" label="仅显示"></el-option>
                <el-option :value="3" label="隐藏"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!--          <el-table-column :label="i18nt('流程模板')" width="250" prop="label">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.modelId" @change="changeModelId">
                          <el-option v-for="(wfDefItem,index) in wfDefItems" :key="index" :value="wfDefItem.modelId"
                                     :label="wfDefItem.modelName"></el-option>
                        </el-select>

                      </template>
                    </el-table-column>
                    <el-table-column :label="i18nt('流程节点')" width="550" prop="prop">
                      <template slot-scope="scope">
                        <el-checkbox-group v-model="scope.row.nodeIds" v-if="!!wfNodeMap[scope.row.modelId]">
                          <el-checkbox v-for="(node,index) in wfNodeMap[scope.row.modelId]" :key="index"
                                       :label="node.nodeId">{{ node.nodeName }}
                          </el-checkbox>
                        </el-checkbox-group>
                      </template>
                    </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="addItem"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="tableData.splice(scope.$index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false" class="button-sty" icon="el-icon-close">
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="colSubmit"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import i18n from "../../../../../components/xform/utils/i18n";
import eventMixin from "../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";

export default {
  name: "project-tag-editor",
  mixins: [i18n, eventMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      formScriptEnabledTypes: ["select", "checkbox", "radio", "census"],
      showDialog: false,
      tableData: [],

      dialogVisible: false,
      wfConfigData: [],
    };
  },
  methods: {
    getIsShow() {
      return this.selectedWidget.type !== "data-table";
    },
    openDialog() {
      this.tableData = this.$baseLodash.cloneDeep(this.optionModel.tagFillConfig);
      this.showDialog = true;
    },
    confirmDialog() {
      this.optionModel.tagFillConfig = this.$baseLodash.cloneDeep(this.tableData);
      this.showDialog = false;
    },

    openDialog() {
      let reportTemplate = this.getReportTemplate();
      let objTypeCode = reportTemplate.objTypeCode;
      let wfConfigData = this.optionModel.wfConfigData || [];
      this.dialogVisible = true;
      this.tableData = this.$baseLodash.cloneDeep(wfConfigData);
    },
    addItem() {
      let newItem = {
        type: null,
        serveType: null,
        serveName: null,
        modelKey: null,
        taskSteps: null,
        companyCodes: null,
      };
      this.tableData.push(newItem);
    },
    colSubmit() {
      this.dialogVisible = !1;
      this.optionModel.wfConfigData = this.tableData;
    },
  },
};
</script>

<style scoped></style>
