<template>
  <div id="containt">
    <x-tabs ref="xTabs" v-model="activeName" class="tab-box">
      <el-tab-pane :label="$t1('常规')" name="first">
        <editView
          v-if="showEdit"
          visible-key="showEdit"
          :_dataId.sync="dataId"
          :formCode="formTemplate.formCode"
          :formTemplate="formTemplate"
          :parent-target="_self"
          @reload="$reloadHandle"
        ></editView>
      </el-tab-pane>
      <el-tab-pane :label="$t1('列表')" name="second">
        <div class="grid-height">
          <vxe-grid
            ref="table-m1"
            v-bind="vxeOption"
            @resizable-change="$vxeTableUtil.onColumnWitchChange"
            @custom="$vxeTableUtil.customHandle"
          >
            <template #form>
              <tableForm
                :formData.sync="formData"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
              >
                <template #buttonLeft>
                  <vxe-button
                    status="primary"
                    class="button-sty"
                    icon="el-icon-plus"
                    @click="openEditDialog"
                    v-if="isDev && menuKindAuth.addAuth === 1"
                    >{{ $t1("新增") }}
                  </vxe-button>
                  <projectTagAddButton
                    :option="addProjectTagOption"
                    v-if="isDev && menuKindAuth.editAuth === 1"
                  ></projectTagAddButton>
                  <projectTagDeleteButton
                    :option="deleteProjectTagOption"
                    v-if="isDev && menuKindAuth.editAuth === 1"
                  ></projectTagDeleteButton>
                  <el-button
                    icon="el-icon-setting"
                    class="button-sty"
                    @click="showScriptDialog = true"
                    type="success"
                    v-if="isDev && menuKindAuth.editAuth === 1"
                    >{{ $t1("选择需要定制的后台脚本模板") }}
                  </el-button>
                </template>
                <template #buttonRight>
                  <vxe-button
                    icon="el-icon-brush"
                    class="button-sty"
                    @click="resetEvent"
                    type="text"
                    status="primary"
                    plain
                    >{{ $t1("重置") }}
                  </vxe-button>
                  <vxe-button
                    status="warning"
                    icon="el-icon-search"
                    class="button-sty"
                    @click="searchEvent"
                    >{{ $t1("搜索") }}
                  </vxe-button>
                </template>
                <template #tag>
                  <vxe-form-item :title="$t1('项目标签') + ':'" field="tag">
                    <template v-slot>
                      <el-input
                        class="search-input"
                        max="200"
                        :value="getTabNames()"
                        @clear="checkTags = []"
                        v-el-readonly
                        clearable
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          @click="openProjectTagDialog3"
                        ></i>
                      </el-input>
                    </template>
                  </vxe-form-item>
                </template>
              </tableForm>
            </template>
            <template #tag="{ row }">
              <projectTagView
                v-model="row.formScriptTagDTOs"
                :readonly="true"
              ></projectTagView>
            </template>
            <template #operation="{ row }">
              <a href="javascript:void(0);" class="a-link" @click="openEditDialog(row)">
                <el-tooltip
                  :enterable="false"
                  effect="dark"
                  :content="$t1('查看')"
                  placement="top"
                  popper-class="tooltip-skin"
                >
                  <i class="el-icon-edit" />
                </el-tooltip>
              </a>
              <formVersionButton
                objType="FormScript"
                :objCode="row.scriptCode"
                :relationCode="row.formCode"
                @reverCallback="searchEvent"
              ></formVersionButton>
            </template>
          </vxe-grid>
        </div>
      </el-tab-pane>
      <template #editTab="{ tab, index, reloadTabContent }">
        <el-tab-pane
          :key="tab.data.id"
          :label.sync="tab.data.scriptName"
          :name="tab.data.id + ''"
          :closable="true"
        >
          <editView
            v-if="tab.showContent"
            :_dataId="tab.dataId"
            :formCode="formTemplate.formCode"
            :formTemplate="formTemplate"
            :parent-target="_self"
            @reload="reloadTabContent"
          ></editView>
        </el-tab-pane>
      </template>
    </x-tabs>
    <scriptDialog
      v-if="showScriptDialog"
      :visiable.sync="showScriptDialog"
      @confirm="confirmScriptDialog"
      :param="{ scriptType: 99 }"
      :multi="true"
      :title="$t1('初始化模板脚本')"
    ></scriptDialog>
    <projectTagDialog
      v-if="showProjectTagDialog3"
      :visiable.sync="showProjectTagDialog3"
      @confirm="confirmProjectTagDialog3"
      :rows="checkTags"
      :multi="true"
    ></projectTagDialog>
  </div>
</template>

<script>
import mixin from "./mixins/form_list";

export default {
  name: "form_script:form_list",
  mixins: [mixin],
};
</script>
