<template>
  <div id="containt">
    <el-tabs v-model="activeName" class="tab-box">
      <el-tab-pane :label="$t1('列表')" name="second">
        <div class="grid-height">
          <vxe-grid
            class="is-pointer"
            ref="table-m1"
            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="addTopItem"
                    ><i></i>
                    {{ $t1("新增一级地区") }}
                  </vxe-button>
                  <!-- <vxe-button
                    status="primary"
                    class="button-sty"
                    icon="el-icon-plus"
                    @click="showAreaDialog = true"
                    ><i></i>
                    {{ $t1("测试") }}
                  </vxe-button> -->
                </div>
                <div class="fr">
                  <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>
                </div>
              </div>
              <vxe-form
                class="screen-box"
                title-width="92px"
                title-align="right"
                :data="formData"
                @submit="searchEvent"
                @reset="resetEvent"
              >
                <vxe-form-item :title="$t1('地区名称') + ':'" field="name">
                  <template v-slot>
                    <el-input v-model="formData.name" size="small" clearable />
                  </template>
                </vxe-form-item>
                <vxe-form-item :title="$t1('地区全称') + ':'" field="fullName">
                  <template v-slot>
                    <el-input v-model="formData.fullName" size="small" clearable />
                  </template>
                </vxe-form-item>
                <vxe-form-item :title="$t1('国家名称') + ':'" field="countryName">
                  <template v-slot>
                    <el-input
                      class="search-input"
                      max="200"
                      v-model="formData.countryName"
                      @clear="formData.locale = null"
                      placeholder="默认中国"
                      v-el-readonly
                      clearable
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-search"
                        @click="showCountryDialog = true"
                      ></i>
                    </el-input>
                  </template>
                </vxe-form-item>
                <vxe-button
                  type="submit"
                  @click="searchEvent"
                  v-show="false"
                ></vxe-button>
              </vxe-form>
            </template>
            <template #operate="obj">
              <div class="cell-operate">
                <template v-if="$refs['table-m1'].isActiveByRow(obj.row)">
                  <a @click="saveRowEvent(obj)" class="a-link">
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('保存')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-circle-check"></i
                    ></el-tooltip>
                  </a>
                  <a
                    @click="cancleRowEvent(obj)"
                    class="a-link"
                    v-if="hasSaveRow(obj.row)"
                  >
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('取消行编辑')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-circle-close"></i
                    ></el-tooltip>
                  </a>
                  <a
                    @click="removeRowEvent(obj)"
                    class="a-link"
                    v-if="!hasSaveRow(obj.row)"
                  >
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('删除')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-delete"></i
                    ></el-tooltip>
                  </a>
                </template>
                <template v-else>
                  <a class="a-link" @click="insertChildEvent(obj)">
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('新增')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-circle-plus-outline"></i
                    ></el-tooltip>
                  </a>
                  <a @click="editRowEvent(obj)" class="a-link" v-if="obj.row">
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('行编辑')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-edit-outline"></i
                    ></el-tooltip>
                  </a>
                </template>
              </div>
            </template>
          </vxe-grid>
        </div>
      </el-tab-pane>
    </el-tabs>
    <countryDialog
      v-if="showCountryDialog"
      :visiable.sync="showCountryDialog"
      :multi="false"
      @confirm="countryDialogConfirm"
    ></countryDialog>
    <!-- <areaDialog
      v-if="showAreaDialog"
      :visiable.sync="showAreaDialog"
      :multi="false"
    ></areaDialog> -->
  </div>
</template>

<script>
import { tableTreeMixins } from "@base/mixins/tableTree/index.js";
import countryDialog from "@base/views/user/country/dialog.vue";
// import areaDialog from "@base/views/user/area/dialog.vue";

export default {
  name: "menu:in_list",
  components: { countryDialog /* , areaDialog */ },
  mixins: [tableTreeMixins],
  mounted() {
    this.initTableList();
  },
  data() {
    let that = this;
    return {
      activeName: "second",
      dataId: "",
      formData: {
        countryName: null,
        locale: null,
      },
      vxeOption: {},
      showCountryDialog: false,
      showAreaDialog: false,
    };
  },
  methods: {
    searchEvent() {
      this.$refs["table-m1"].commitProxy("reload");
    },
    resetEvent() {
      this.formData = {};
      this.$refs["table-m1"].commitProxy("reload");
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: "table-m1",
        tableName: "user_area_list-m1",
        path: USER_PREFIX + "/area/list",
        treeNodeUrl: USER_PREFIX + "/area/getChildren",
        editSaveUrl: USER_PREFIX + "/area/save",
        editDefaultRow: ({ row }) => {
          let locale = row?.locale || null;
          return { enabled: true };
        },
        param: () => {
          let locale = this.formData.locale || null;
          return {
            ...this.formData,
            locale,
          };
        },
        treeNodeParam: (row) => {
          return {
            id: row.id,
            // enabled: this.formData.enabled,
          };
        },
        config: {
          treeConfig: {
            parentField: "parent",
          },
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            title: this.$t1("地区名称"),
            field: "name",
            width: 250,
            fixed: "left",
            treeNode: true,
            editRender: {},
            slots: {
              edit: ({ row }) => {
                return [<el-input v-model={row.name} clearable />];
              },
            },
          },
          {
            field: "code",
            title: this.$t1("地区编码"),
            width: 250,
            editRender: {},
            slots: {
              edit: ({ row }) => {
                return [<el-input v-model={row.code} clearable />];
              },
            },
          },
          {
            field: "fullName",
            title: this.$t1("地区全称"),
            width: 250,
          },
          {
            field: "locale",
            title: this.$t1("国家编码"),
            width: 250,
            editRender: {},
            slots: {
              edit: ({ row }) => {
                return [<el-input v-model={row.locale} clearable />];
              },
            },
          },
          { title: this.$t1("创建人"), field: "createBy", width: 150 },
          { title: this.$t1("创建时间"), field: "createDate", width: 150 },
          { title: this.$t1("更新人"), field: "modifyBy", width: 100 },
          { title: this.$t1("更新时间"), field: "modifyDate", width: 150 },
          {
            width: 100,
            title: "",
            fixed: "right",
            sortable: false,
            slots: { default: "operate" },
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        this.vxeOption = opts;
      });
    },
    addTopItem(type, parentParam) {
      this.insertTopRow(this.$refs["table-m1"]);
    },
    countryDialogConfirm(rows) {
      if (rows.length > 0) {
        let row = rows[0];
        this.formData.locale = row.countryCode;
        this.formData.countryName = row.simpleName;
      }
    },
  },
};
</script>
<style scoped lang="scss"></style>
