<template>
  <div class="report pagePadding">
    <el-row :gutter="10">
      <el-col :span="24" style="padding: 0 0 18px 0">
        <el-col :span="3">
          <el-input
            :size="searchSize"
            v-model="parmValue.loginName"
            :maxlength="40"
            placeholder="账户"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <el-input
            :size="searchSize"
            v-model="parmValue.fullName"
            :maxlength="40"
            placeholder="姓名"
          ></el-input>
        </el-col>
        <el-col :span="3" style="width: 152px">
          <el-button
            type="primary"
            :size="searchSize"
            @click="searchList"
            icon="el-icon-search"
          ></el-button>
          <el-button type="warning" :size="searchSize" @click="restSearch">
            重置
          </el-button>
        </el-col>
        <el-col :span="3" style="width: 195px; float: right">
          <el-button
            type="primary"
            :size="searchSize"
            style="float: right; margin-left: 5px"
            @click="searchList"
          >
            刷新
          </el-button>
          <el-button
            type="success"
            :size="searchSize"
            style="float: right"
            @click="openModal('add', false)"
          >
            添加
          </el-button>
        </el-col>
      </el-col>
    </el-row>
    <ex-table-new
      :table="table"
      :data="tableData"
      :columns="columns"
      :page="pageInfo"
      :isRowDrop="false"
      :isColDrop="true"
    >
      <!-- <template #table-header="{ selection, alldata }">
        <div style="width:100%; display: flex; justify-content: space-between;">
          <div>
            <el-button
              size="small"
            >启用</el-button>
            <el-button
              size="small"
            >禁用</el-button>
          </div>
          <div>
            <el-button
              size="small"
            >新建共享规则</el-button>
          </div>
        </div>
      </template> -->
      <template #status="{ scope }">
        <el-tag
          :type="
            scope.row.status == 1
              ? 'success'
              : scope.row.status == 0
              ? 'warning'
              : ''
          "
          v-text="
            (statusOptions.find((item) => item.id == scope.row.status) || {})
              .label || '--'
          "
        ></el-tag>
      </template>
      <template #operation="{ scope }">
        <el-tooltip
           
          effect="dark"
          :content="
            scope.row.status == 0
              ? '启用'
              : scope.row.status == 1
              ? '禁用'
              : '--'
          "
          placement="top"
        >
          <i
            class="tb-icon"
            :class="
              scope.row.status == 0
                ? 'el-icon-circle-check'
                : scope.row.status == 1
                ? 'el-icon-circle-close'
                : ''
            "
          ></i>
        </el-tooltip>
        <el-tooltip   effect="dark" content="编辑" placement="top">
          <i class="tb-icon el-icon-edit"></i>
        </el-tooltip>
      </template>
    </ex-table-new>
    <div
      class="Pagination"
      style="text-align: right; margin-top: 10px"
      v-show="count > 0"
    >
      <el-pagination
        :size="searchSize"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="parmValue.page"
        :page-sizes="[10, 15, 20, 30, 40]"
        :page-size="parmValue.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
    <add-edit
      :showModel="showModel"
      :id="modelId"
      :isDetail="isDetail"
      @refresh="searchList"
      @cancel="showModel = false"
    ></add-edit>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/report";
import addEdit from "./addEdit";
import ExTableNew from "@/components/ExTableNew";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
export default {
  name: "report",
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  mixins:[resToken,mixinPage],
  data() {
    return {
      loading: true,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        loginName: "", // 账户
        fullName: "", // 姓名
        type: 2, // 用户类型（1运营人员 2物业人员）
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      count: 0, // 总条数
      // 状态
      statusOptions: [
        { id: 0, label: "禁用" },
        { id: 1, label: "启用" },
      ],
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: [],
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "role",
          label: "role",
          "min-width": "100",
        },
        {
          prop: "role_name",
          label: "角色名称",
          "min-width": "120",
        },
        // { type: "selection", fixed: "left", _noset_: true },
        {
          prop: "id",
          label: "id",
          "min-width": "80",
        },

        {
          prop: "username",
          label: "账号",
          "min-width": "120",
        },
        {
          prop: "name",
          label: "业务员姓名",
          "min-width": "120",
        },

        //  {
        //   prop: "status",
        //   label: "状态",
        //   // fixed: "right",
        //   "min-width": "100",
        //   // sortable: true,
        //   _slot_: "status"
        // },
        {
          prop: "addtime",
          label: "添加时间",
          "min-width": "160",
          // sortable: true
        },

        // {
        //   prop: "",
        //   label: "操作",
        //   // fixed: "right",
        //   "min-width": "120",
        //   _noset_: true,
        //   _slot_: "operation"
        // }
      ],
    };
  },
  
  mounted() {
    this.searchList();
  },
  components: {
    addEdit,
    ExTableNew,
  },
  methods: {
    restSearch() {
      this.parmValue = {
        loginName: "", // 账户
        fullName: "", // 姓名
        type: 2, // 用户类型（1运营人员 2物业人员）
        page: 1, // 页码
        size: 10, // 每页显示条数
      };
      this.searchList();
    },
    openModal(id, isDetail) {
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
    },
    async deleteById(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.delete({ id });
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          }else{
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async searchList() {
      this.loading = true;
      let res = await asyncRequest.list(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        // this.tableData.map((v1) => {
        //   if (v1.addtime) {
        //     v1.addtime = v1.addtime.replace(".000", "");
        //   }
        //   return v1;
        // });
        this.count = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.count = 0;
      }
      this.loading = false;
    },
    async statusConfirm(id, status) {
      console.log(id, status);
      let str = status === "1" ? "禁用" : "启用";
      await this.$confirm("确定要改为" + str, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            id: id,
            status: status === "1" ? "0" : "1",
          };
          const res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "状态修改成功！",
              message: "",
            });
            await this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>
   <style lang="scss" scoped>
.report {
}
</style>
   