<template>
  <div id="containt">
    <el-tabs v-model="activeName" class="tab-box">
      <el-tab-pane :label="$t1('常规')" name="first">
        <editView
          v-if="showEdit"
          visible-key="showEdit"
          :_dataId.sync="dataId"
          :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"
                  >
                    {{ $t1("新增") }}
                  </vxe-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 #transferFromName>
                  <vxe-form-item :title="$t1('审批人') + ':'" field="transferFromName">
                    <template v-slot>
                      <el-input
                        class="search-input"
                        max="200"
                        v-model="formData.transferFromName"
                        @clear="
                          formData.transferFromName = null;
                          formData.transferFrom = null;
                          $forceUpdate();
                        "
                        v-el-readonly
                        clearable
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          @click="showUserDialog1 = true"
                        ></i>
                      </el-input>
                    </template>
                  </vxe-form-item>
                </template>
                <template #transferToName>
                  <vxe-form-item :title="$t1('转派到') + ':'" field="transferToName">
                    <template v-slot>
                      <el-input
                        class="search-input"
                        max="200"
                        v-model="formData.transferToName"
                        @clear="
                          formData.transferToName = null;
                          formData.transferTo = null;
                          $forceUpdate();
                        "
                        v-el-readonly
                        clearable
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          @click="showUserDialog2 = true"
                        ></i>
                      </el-input>
                    </template>
                  </vxe-form-item>
                </template>
              </tableForm>
            </template>
          </vxe-grid>
        </div>
      </el-tab-pane>
    </el-tabs>
    <userDialog
      v-if="showUserDialog1"
      :visiable.sync="showUserDialog1"
      @confirm="confirmUserDialog1"
      :multi="false"
      :param="{ enabled: null }"
    />
    <userDialog
      v-if="showUserDialog2"
      :visiable.sync="showUserDialog2"
      @confirm="confirmUserDialog2"
      :multi="false"
    />
  </div>
</template>

<script>
import editView from "./edit.vue";
import tableForm from "@base/components/table/tableForm.vue";
import userDialog from "@base/views/user/user/dialog";
export default {
  name: "wf_transfer_setting:list",
  components: { tableForm, editView, userDialog },
  data() {
    return {
      activeName: "second",
      dataId: 0,
      showEdit: false,
      vxeOption: {},
      formData: {},
      showUserDialog1: false,
      showUserDialog2: false,
    };
  },
  mounted() {
    this.initTableList();
  },
  methods: {
    searchEvent() {
      this.$refs["table-m1"].commitProxy("reload");
    },
    resetEvent() {
      this.formData = {};
      this.$refs["table-m1"].commitProxy("reload");
    },
    openEditDialog(id) {
      this.dataId = !id || typeof id == "object" ? 0 : id;
      this.activeName = "first";
      this.$openEditView("showEdit");
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: "table-m1",
        tableName: "wf_wf_transfer_setting_list-m1",
        path: USER_PREFIX + "/wf_transfer_setting/listPage",
        param: () => {
          return this.formData;
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            title: this.$t1("审批人"),
            field: "transferFromName",
            width: 150,
            fixed: "left",
          },
          {
            title: this.$t1("转派给"),
            field: "transferToName",
            width: 250,
          },
          {
            title: this.$t1("有效开始时间"),
            field: "startDate",
            width: 150,
          },
          {
            title: this.$t1("有效结束时间"),
            field: "endDate",
            width: 150,
          },
          {
            title: this.$t1("创建人"),
            field: "_createBy",
            width: 150,
          },
          {
            title: this.$t1("创建时间"),
            field: "createDate",
            width: 150,
          },
          {
            title: this.$t1("更新人"),
            field: "_modifyBy",
            width: 150,
          },
          {
            title: this.$t1("更新时间"),
            field: "modifyDate",
            width: 150,
          },
          {
            width: 90,
            fixed: "right",
            title: "",
            sortable: false,
            slots: {
              default: ({ row }) => {
                return [
                  <div>
                    <a
                      href="javascript:void(0);"
                      class="a-link"
                      onclick={() => {
                        this.openEditDialog(row.id);
                      }}
                    >
                      <el-tooltip
                        enterable={false}
                        effect="dark"
                        content={this.$t1("查看")}
                        placement="top"
                        popper-class="tooltip-skin"
                      >
                        <i class="el-icon-edit" />
                      </el-tooltip>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="a-link"
                      onclick={() => {
                        this.delete(row);
                      }}
                    >
                      <el-tooltip
                        enterable={false}
                        effect="dark"
                        content={this.$t1("删除")}
                        placement="top"
                        popper-class="tooltip-skin"
                      >
                        <i class="el-icon-delete" />
                      </el-tooltip>
                    </a>
                  </div>,
                ];
              },
            },
          },
        ],
        searchColumns: [
          {
            title: this.$t1("审批人"),
            field: "transferFromName",
            type: "input",
            slot: "transferFromName",
            common: true,
          },
          {
            title: this.$t1("转派给"),
            field: "transferToName",
            type: "input",
            slot: "transferToName",
            common: true,
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        this.vxeOption = opts;
      });
    },
    confirmUserDialog1(rows) {
      if (rows.length) {
        let row = rows[0];
        this.$set(this.formData, "transferFrom", row.id);
        this.$set(this.formData, "transferFromName", row.nickName);
      }
    },
    confirmUserDialog2(rows) {
      if (rows.length) {
        let row = rows[0];
        this.$set(this.formData, "transferTo", row.id);
        this.$set(this.formData, "transferToName", row.nickName);
      }
    },
    delete(row) {
      this.$baseConfirm(this.$t1("您确定要删除选中行数据吗？")).then(() => {
        var url = USER_PREFIX + "/wf_transfer_setting/delete";
        this.$http({
          url: url,
          method: `post`,
          data: {
            id: row.id,
          },
          isLoading: true,
          success: (res) => {
            this.$message({
              message: res.content,
              type: "success",
            });
            this.searchEvent();
          },
        });
      });
    },
  },
};
</script>
