<template>
  <div style="padding:10px">
    <q-card inline class="fit shadow-6">
      <q-card-main style="height:80%">
        <q-table
          ref="table"
          color="primary"
          :data="serverData"
          :columns="columns"
          separator="cell"
          :selected.sync="selected"
          row-key="id"
          :pagination.sync="serverPagination"
          @request="request"
          :loading="loading"
          :rows-per-page-label="$t('Rows per page')"
          :rows-per-page-options="[5,10,20,30,40,50,60,200,500]"
          :no-data-label="$t('No data')"
        >
          <template slot="top-left" slot-scope="props">
            <q-input v-model="filter.kindcode" type="text" prefix="类型代码：" />&nbsp;&nbsp;
            <q-input v-model="filter.kindname" type="text" prefix="类型名称：" />&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="add" @click="addsaveSysCodelist">{{$t('Add')}}</q-btn>&nbsp;&nbsp;
            <!-- <q-btn push dense color="primary" icon="swap horiz" @click="synchronousAvatar">同步微信头像</q-btn> -->
          </template>
          <template slot="top-right" slot-scope="props">
            <q-btn
              flat
              round
              dense
              :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
              @click="props.toggleFullscreen"
            />
          </template>
          <template slot="top-selection" slot-scope="props">
            <!-- <q-btn color="negative" flat round delete icon="delete" @click="delUsers" /> -->
            <q-btn
              icon="create"
              color="positive"
              label="启用"
              @click="updateSysCodelistsStatuslist (1)"
            />&nbsp;&nbsp;
            <q-btn
              icon="create"
              color="negative"
              label="停用"
              @click="updateSysCodelistsStatuslist (0)"
            />
          </template>
          <q-td slot="body-cell-id" slot-scope="props" :props="props" style="width:200px">
            <!-- <q-btn
              small
              icon="toc"
              push
              glossy
              dense
              color="primary"
              label="管理子码"
              @click="selectSysCodelistListByPid(props)"
            />
            <q-btn
              small
              round
              push
              glossy
              dense
              icon="edit"
              color="primary"
              @click="editSysCodelist(props.row.codelistid,1)"
            ></q-btn>
            <q-btn
              small
              round
              push
              glossy
              dense
              icon="delete"
              color="red"
              @click="delSysCodelist(props.row.codelistid)"
            ></q-btn> -->
            <q-btn-dropdown color="secondary" label="操作" no-wrap>
                <q-list link>
                  <q-item v-close-overlay @click.native="selectSysCodelistListByPid(props)">
                    <q-item-main>
                      <q-item-tile sublabel>管理子码</q-item-tile>
                    </q-item-main>
                  </q-item>
                  <q-item v-close-overlay @click.native="editSysCodelist(props.row.codelistid,1)" >
                    <q-item-main>
                      <q-item-tile sublabel>修改</q-item-tile>
                    </q-item-main>
                  </q-item>
                  <q-item v-close-overlay @click.native="delSysCodelist(props.row.codelistid)" >
                    <q-item-main>
                      <q-item-tile sublabel >删除</q-item-tile>
                    </q-item-main>
                  </q-item>
                  <q-item v-close-overlay>
                    <q-item-main>
                    <q-item-tile sublabel>关闭弹窗</q-item-tile>
                    </q-item-main>
                  </q-item>
                </q-list>
            </q-btn-dropdown>
          </q-td>
        </q-table>
      </q-card-main>
    </q-card>
    <!-- 新增修改页面 -->
    <q-modal v-model="editModal" maximized>
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="editModal = false" icon="reply" />
          <q-toolbar-title v-if="subtype=='edit'">{{$t('Edit')}}</q-toolbar-title>
          <q-toolbar-title v-if="subtype=='add'">{{$t('Add')}}</q-toolbar-title>
        </q-toolbar>
        <q-toolbar slot="footer">
          <q-toolbar-title></q-toolbar-title>
          <q-btn round color="red" @click="saveUpdateSysCodelist" v-if="subtype=='edit'">{{$t('Save')}}</q-btn>
          <q-btn round color="red" @click="saveSysCodelist" v-if="subtype=='add'">{{$t('Add')}}</q-btn>
          <q-btn round  @click="editModal = false">{{$t('Cancel')}}</q-btn>
        </q-toolbar>

        <div class="layout-padding">
          <q-field class="liststype" v-if="chiladstatus">
            <q-input v-model="tempSyscodelist.codevalue" float-label="代码值" />
          </q-field>
          <q-field class="liststype" v-if="chiladstatus">
            <q-input v-model="tempSyscodelist.codename" float-label="代码名" />
          </q-field>
          <q-field class="liststype" v-if="parentstatus">
            <q-input v-model="tempSyscodelist.kindcode" float-label="类型编码" />
          </q-field>
          <q-field class="liststype" v-if="parentstatus">
            <q-input v-model="tempSyscodelist.kindname" float-label="类型名称" />
          </q-field>
          <q-field class="liststype" v-if="chiladstatus">
            <q-input v-model="tempSyscodelist.ordernum" float-label="排序" />
          </q-field>
          <q-field class="liststype">
            <q-input v-model="tempSyscodelist.memo" float-label="描述" />
          </q-field>
        </div>
      </q-modal-layout>
    </q-modal>
    <!-- 所属部门 -->
    <q-modal v-model="menuModal" maximized>
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn
            flat
            round
            dense
            @click="menuModal = false,addDept='0',filter.name='',pid='1'"
            icon="reply"
          />
          <q-toolbar-title>子码列表</q-toolbar-title>
        </q-toolbar>
        <q-toolbar slot="footer">
          <q-toolbar-title></q-toolbar-title>
          <q-btn round color="red" @click="menuModal = false,addDept='0',filter.name='',pid='1'">关闭</q-btn>
        </q-toolbar>
        <q-table
          ref="table"
          color="primary"
          :data="nextserverData"
          :columns="next_columns"
          separator="cell"
          :selected.sync="selected"
          row-key="id"
          :pagination.sync="nextserverPagination"
          @request="next_request"
          :loading="loading"
          :rows-per-page-label="$t('Rows per page')"
          :no-data-label="$t('No data')"
        >
          <template slot="top-left" slot-scope="nextprops">
            <q-input v-model="filter.codevalue" type="text" prefix="代码值：" />&nbsp;&nbsp;
            <q-input v-model="filter.codename" type="text" prefix="代码名" />&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="search" @click="nextsearch">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="add" @click="nextaddSysCodelist">{{$t('Add')}}</q-btn>&nbsp;&nbsp;
            <!-- <q-btn push dense color="primary" icon="swap horiz" @click="synchronousAvatar">同步微信头像</q-btn> -->
          </template>
          <template slot="top-selection" slot-scope="props">
            <!-- <q-btn color="negative" flat round delete icon="delete" @click="delUsers" /> -->
            <q-btn
              icon="create"
              color="positive"
              label="启用"
              @click="updateSysCodelistsStatuslist (1)"
            />&nbsp;&nbsp;
            <q-btn
              icon="create"
              color="negative"
              label="停用"
              @click="updateSysCodelistsStatuslist (0)"
            />
          </template>
          <q-td slot="body-cell-id" slot-scope="nextprops" :props="nextprops" style="width:200px">
            <!-- <q-btn
              small
              round
              push
              glossy
              dense
              icon="edit"
              color="primary"
              @click="editSysCodelist(nextprops.row.codelistid,2)"
            ></q-btn>
            <q-btn
              small
              round
              push
              glossy
              dense
              icon="delete"
              color="red"
              @click="delSysCodelist(nextprops.row.codelistid)"
            ></q-btn> -->
            <q-btn-dropdown color="secondary" label="操作" no-wrap>
                <q-list link>
                  <q-item v-close-overlay @click.native="editSysCodelist(nextprops.row.codelistid,2)" >
                    <q-item-main>
                      <q-item-tile sublabel>修改</q-item-tile>
                    </q-item-main>
                  </q-item>
                  <q-item v-close-overlay @click.native="delSysCodelist(nextprops.row.codelistid)">
                    <q-item-main>
                      <q-item-tile sublabel >删除</q-item-tile>
                    </q-item-main>
                  </q-item>
                  <q-item v-close-overlay>
                    <q-item-main>
                    <q-item-tile sublabel>关闭弹窗</q-item-tile>
                    </q-item-main>
                  </q-item>
                </q-list>
            </q-btn-dropdown>
          </q-td>
        </q-table>
      </q-modal-layout>
    </q-modal>
  </div>
</template>

<script>
import {
  getSysCodelistPagedList,
  delSysCodelist,
  updateSysCodelistStatus,
  saveSysCodelist,
  editSysCodelist,
  updateSysCodelistsStatus,
  loadSysCodelist,
  countByExample
} from "@/service/syscodelist/syscodelist";
export default {
  name: "syscodelist",
  data() {
    return {
      serverData: [],
      nextserverData: [],
      menuModal: false,
      nextEditModal: false,
      chiladstatus: false,
      parentstatus: true,
      childkindcode: "",
      childkindname: "",
      tempFunction: {
        id: 0,
        name: "",
        moduleId: 0,
        module: "",
        code: "",
        description: ""
      },
      menuList: [],
      roleList: [],
      menuSelected: 0,
      addtype: "0",
      roleSelected: [],
      menuModal: false,
      roleModal: false,
      pid: "-1",
      serverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 10 // current rows per page being displayed
      },
      nextserverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 100 // current rows per page being displayed
      },
      selectOptions: [
        {
          label: "启用",
          value: "1"
        },
        {
          label: "停用",
          value: "0"
        }
      ],
      yeornoOptions: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ],
      columns: [
        {
          name: "kindcode",
          required: true,
          label: "类型代码",
          align: "center",
          field: "kindcode",
          sortable: false
        },
        {
          name: "kindname",
          label: "类型名称",
          field: "kindname",
          sortable: false,
          align: "center"
        },
        {
          name: "ext1",
          label: "子码数量",
          field: "ext1",
          sortable: false,
          align: "center"
        },
        {
          name: "memo",
          label: "描述",
          field: "memo",
          sortable: false,
          align: "left"
        },
        {
          name: "id",
          required: true,
          label: this.$t("ID"),
          align: "center",
          field: "codelistId"
        }
      ],
      //   子部门菜单
      next_columns: [
        {
          name: "codevalue",
          label: "代码值",
          field: "codevalue",
          sortable: false,
          align: "center"
        },
        {
          name: "codename",
          label: "代码名",
          field: "codename",
          sortable: false,
          align: "center"
        },
        {
          name: "kindcode",
          required: true,
          label: "父级类型代码",
          align: "center",
          field: "kindcode",
          sortable: false
        },
        {
          name: "kindname",
          label: "父级类型名称",
          field: "kindname",
          sortable: false,
          align: "center"
        },
        {
          name: "ordernum",
          label: "排序",
          field: "ordernum",
          sortable: false,
          align: "center"
        },
        {
          name: "memo",
          label: "描述",
          field: "memo",
          sortable: false,
          align: "left"
        },
        {
          name: "id",
          required: true,
          label: this.$t("ID"),
          align: "left",
          field: "codelistid"
        }
      ],
      filter: {
        name: "",
        pid: "",
        kindcode: "",
        kindname: "",
        codename: "",
        codevalue: ""
      },
      selected: [],
      loading: false,
      editModal: false,
      subtype: "add",
      tempSyscodelist: {
        codelistid: "",
        kindcode: "",
        kindname: "",
        codevalue: "",
        codename: "",
        parentcodevalue: "",
        ordernum: "",
        memo: "",
        ext1: ""
      }
    };
  },
  methods: {
    async request(props) {
      this.loading = true;
      if (props.filter == undefined) {
        props.filter = this.filter;
      }
      this.serverPagination = props.pagination;
      let table = this.$refs.table,
        { page, rowsPerPage, sortBy, descending } = props.pagination;
      let query = {
        pageNum: page,
        pageSize: rowsPerPage,
        sortBy: sortBy,
        descending: descending,
        parentcodevalue: "-1",
        kindcode: props.filter.kindcode,
        kindname: props.filter.kindname
      };

      let dataRes = await getSysCodelistPagedList(query);
      let data = dataRes.data.data;

      this.serverPagination.rowsNumber = data.total;
      this.serverData = data.list;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    async delSysCodelist(id) {
      let count = await countByExample({ id: id });

      if (count.data.data > 0) {
        this.$q.notify({
          type: "negative",
          message: this.$t("Please delete subcategories first"),
          position: "bottom-right"
        });
        return;
      } else {
        try {
          await this.$q.dialog({
            title: "删除操作",
            message: this.$t("Comfirm do it"),
            position: "right",
            ok: {
              push: true,
              label: "确认"
            },
            cancel: {
              push: true,
              color: "negative",
              label: "取消"
            }
          });
          await delSysCodelist({ id: id });
          this.$q.notify({
            type: "positive",
            message: this.$t("Successfully"),
            position: "bottom-right"
          });
          this.search();
          this.nextsearch();
        } catch (e) {}
      }
    },
    /**
     * 批量更新状态
     */
    async updateSysCodelistsStatuslist(type) {
      try {
        await this.$q.dialog({
          title: this.$t("Batch do it"),
          message: this.$t("Comfirm do it"),
          ok: {
            push: true,
            label: "提交"
          },
          cancel: {
            push: true,
            color: "negative",
            label: "取消"
          }
        });
        let idlist = this.selected.map(s => {
          return s.id;
        });
        await updateSysCodelistsStatus(idlist.join(","), type);
        this.$q.notify({
          type: "positive",
          message: this.$t("Successfully"),
          position: "bottom-right"
        });
        this.selected = [];
        this.search();
        this.nextsearch();
      } catch (e) {}
    },
    /**修改 */
    editSysCodelist(id, type) {
      this.subtype = "edit";
      let editSysCodelist = "";
      if (type == "2") {
        editSysCodelist = this.nextserverData.filter(s => {
          this.parentstatus = false;
          this.chiladstatus = true;
          return s.codelistid === id;
        });
      } else {
        editSysCodelist = this.serverData.filter(s => {
          this.parentstatus = true;
          this.chiladstatus = false;
          return s.codelistid === id;
        });
      }

      if (editSysCodelist && editSysCodelist.length > 0) {
        this.tempSyscodelist = JSON.parse(JSON.stringify(editSysCodelist[0]));
      } else {
        return true;
      }
      this.editModal = true;
    },
    async saveUpdateSysCodelist() {
      if (this.chiladstatus) {
        if (
          this.tempSyscodelist.codevalue == null ||
          this.tempSyscodelist.codename == null ||
          this.tempSyscodelist.codevalue == "" ||
          this.tempSyscodelist.codename == "" ||
          this.tempSyscodelist.ordernum == null ||
          this.tempSyscodelist.ordernum == ""
        ) {
          this.$q.notify({
            message: "请完善信息",
            type: "negative",
            icon: "error_outline",
            timeout: 3000,
            position: "center"
          });
          return false;
        }
      }
      if (this.parentstatus) {
        if (
          this.tempSyscodelist.kindcode == null ||
          this.tempSyscodelist.kindname == null ||
          this.tempSyscodelist.kindcode == "" ||
          this.tempSyscodelist.kindname == ""
        ) {
          this.$q.notify({
            message: "请完善信息",
            type: "negative",
            icon: "error_outline",
            timeout: 3000,
            position: "center"
          });
          return false;
        }
      }
      await editSysCodelist(this.tempSyscodelist);
      this.$q.notify({
        type: "positive",
        message: this.$t("Saved successfully"),
        position: "bottom-right"
      });
      this.editModal = false;
      this.search();
      this.nextsearch();
    },
    search() {
      this.request({
        pagination: this.serverPagination,
        filter: this.filter
      });
    },
    /**
     * 更新用户
     */
    async saveSysCodelist() {
      if (this.chiladstatus) {
        if (
          this.tempSyscodelist.codevalue == null ||
          this.tempSyscodelist.codename == null ||
          this.tempSyscodelist.codevalue == "" ||
          this.tempSyscodelist.codename == "" ||
          this.tempSyscodelist.ordernum == null ||
          this.tempSyscodelist.ordernum == ""
        ) {
          this.$q.notify({
            message: "请完善信息",
            type: "negative",
            icon: "error_outline",
            timeout: 3000,
            position: "center"
          });
          return false;
        }
      }
      if (this.parentstatus) {
        if (
          this.tempSyscodelist.kindcode == null ||
          this.tempSyscodelist.kindname == null ||
          this.tempSyscodelist.kindcode == "" ||
          this.tempSyscodelist.kindname == ""
        ) {
          this.$q.notify({
            message: "请完善信息",
            type: "negative",
            icon: "error_outline",
            timeout: 3000,
            position: "center"
          });
          return false;
        }
      }
      this.tempSyscodelist.parentcodevalue = this.pid;
      await saveSysCodelist(this.tempSyscodelist);
      this.$q.notify({
        type: "positive",
        message: this.$t("Saved successfully"),
        position: "bottom-right"
      });
      this.editModal = false;
      this.search();
      this.nextsearch();
    },
    search() {
      this.request({
        pagination: this.serverPagination,
        filter: this.filter
      });
    },
    addsaveSysCodelist() {
      this.pid = "-1";
      this.tempSyscodelist = {};
      this.subtype = "add";
      this.parentstatus = true;
      this.chiladstatus = false;

      this.editModal = true;
    },
    // 下级部门方法
    //   查询子部门
    async next_request(props) {
      this.loading = true;
      this.nextserverPagination = props.pagination;
      let table = this.$refs.table,
        { page, rowsPerPage, sortBy, descending } = props.pagination;
      let query = {
        pageIndex: page,
        pageSize: rowsPerPage,
        sortBy: sortBy,
        descending: descending,
        parentcodevalue: props.parentcodevalue,
        codevalue: props.filter.codevalue,
        codename: props.filter.codename
      };
      let dataRes_next = await getSysCodelistPagedList(query);
      let data_next = dataRes_next.data.data;
      this.nextserverPagination.rowsNumber = data_next.total;
      this.nextserverData = data_next.list;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    selectSysCodelistListByPid(props) {
      this.pid = props.row.codelistid;
      this.childkindcode = props.row.kindcode;
      this.childkindname = props.row.kindname;
      this.addDept = "1";
      this.next_request({
        pagination: this.nextserverPagination,
        filter: this.filter,
        parentcodevalue: props.row.codelistid
      });
      this.menuModal = true;
    },
    nextsearch() {
      this.next_request({
        pagination: this.nextserverPagination,
        filter: this.filter,
        parentcodevalue: this.pid
      });
    },
    nextaddSysCodelist() {
      this.tempSyscodelist = {};
      this.tempSyscodelist.parentcodevalue = this.pid;
      this.tempSyscodelist.kindcode = this.childkindcode;
      this.tempSyscodelist.kindname = this.childkindname;
      this.subtype = "add";
      this.addtype = "1";
      this.parentstatus = false;
      this.chiladstatus = true;
      this.editModal = true;
    }
  },

  mounted() {
    this.request({
      pagination: this.serverPagination,
      filter: this.filter
    });
  }
};
</script>
<style scoped>
.liststype {
  width: 98%;
  /* padding-left: 4%; */
  /* float: left; */
}
</style>
