<template>
  <div class="app-container">
    <UploadModal
      ref="uploadModal"
      :account-list="accountList"
      @finish="modalSuccess(false)"
    />
    <div class="search-layout" style="margin-bottom: 0px; margin-top: -10px">
      <el-form :inline="true" :model="page.data">
        <el-button
          class="filter-item"
          style="margin-right: 0"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
        >
          添加人员
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="download"
        >下载模板</el-button>
        <el-button
          type="primary"
          plain
          @click="addOrUpdate"
        >批量导入白名单</el-button>
        <!--      权限是1这个不显示-->
        <el-form-item v-if="roleId == 1" class="margin-left input">
          <el-select
            v-model="page.data.account"
            style="width: 100%"
            filterable
            clearable
            placeholder="请选择账号"
          >
            <el-option
              v-for="item in accountList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            v-model="page.data.taskName"
            placeholder="请输入任务名称"
            clearable
          />
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            v-model="page.data.name"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            v-model="page.data.IDNumber"
            placeholder="请输入身份证号"
            clearable
          />
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-select
            v-model="page.data.type"
            style="width: 100%"
            filterable
            clearable
            placeholder="请选择人员类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-select
            v-model="page.data.type"
            style="width: 100%"
            filterable
            clearable
            placeholder="请选择有效期状态"
          >
            <el-option
              v-for="item in stateList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-select
            v-model="page.data.type"
            style="width: 100%"
            filterable
            clearable
            placeholder="请选择临期时间"
          >
            <el-option
              v-for="item in deadlineList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            v-model="page.data.point"
            placeholder="请输入点位"
            clearable
          />
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            v-model="page.data.tenantName"
            placeholder="请输入商铺名称"
            clearable
          />
        </el-form-item>
        <el-form-item class="margin-left">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="fetchData"
          >查询</el-button>
        </el-form-item>
        <el-button
          class="filter-item"
          style="margin-right: 0"
          type="primary"
          icon="el-icon-edit-outline"
          :plain="batchState"
          @click="handleBatch"
        >
          {{ !batchState ? '多选编辑' : '取消多选编辑' }}
        </el-button>
        <tempalte v-if="batchState">
          <el-button
            class="margin-left"
            style="margin-right: 0"
            type="primary"
            plain
            icon="el-icon-edit"
            @click="handleBatchUpdate"
          >
            编辑人员信息
          </el-button>
          <el-button
            class="margin-left"
            style="margin-right: 0"
            type="danger"
            plain
            icon="el-icon-delete"
            @click="handleBatchDelete"
          >
            删除选中人员
          </el-button>
        </tempalte>
      </el-form>
    </div>
    <div class="search-layout">
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      highlight-current-row
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        prop="taskName"
        label="任务名称"
        show-overflow-tooltip
      />
      <el-table-column
        width="180"
        align="center"
        prop="name"
        label="姓名"
        show-overflow-tooltip
      />
      <el-table-column label="身份证号">
        <template v-slot="{ row }">
          {{ row.IDNumber }}
          <!--          {{ row.mode | modeFilter }}-->
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" prop="type" label="人员类型">
        <template v-slot="{ }">
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(136, 195, 255, 1);background: rgba(231, 243, 255, 1);color: rgba(64, 158, 255, 1);"
          >
            员工
          </el-tag>
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(161, 239, 234, 1);background: rgba(239, 255, 254, 1);color: rgba(43, 206, 215, 1);"
          >
            商户
          </el-tag>
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(194, 231, 176, 1);background: rgba(240, 249, 235, 1);color: rgba(103, 194, 58, 1);"
          >
            居民
          </el-tag>
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(205, 214, 232, 1);background: rgba(237, 243, 246, 1);color: rgba(164, 171, 189, 1);"
          >
            其他
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        prop="createTime"
        label="有效期开始时间"
        show-overflow-tooltip
      />
      <el-table-column
        width="180"
        align="center"
        prop="createTime"
        label="有效期结束时间"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="点位">
        <template v-slot="{ row }">
          {{ row.point | modeFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商铺名称">
        <template v-slot="{ row }">
          {{ row.tenantName | modeFilter }}
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作区" width="210">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleUpdate(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--新增编辑人员白名单-->
    <UpdateWhiteModal
      ref="updateWhiteModal"
      :type-list="typeList"
      :account-list="accountList"
      @finish="modalSuccess(false)"
    />
    <!--批量编辑人员白名单-->
    <BatchUpdateModal
      ref="batchUpdateWhiteModal"
      :type-list="typeList"
      :account-list="accountList"
      @finish="modalSuccess(false)"
    />
  </div>
</template>

<script>
import UploadModal from './components/UploadModal.vue';
import UpdateWhiteModal from './components/AddOrUpdateModal.vue';
import BatchUpdateModal from './components/BatchUpdateModal.vue';
import Pagination from '@/components/Pagination';
import { doGetShoplist } from '@/api/shoplist';
export default {
  components: { Pagination, UploadModal, UpdateWhiteModal, BatchUpdateModal },
  filters: {
    statusFilter(status) {
      return status ? 'success' : 'info';
    },
    statusFilterStr(status) {
      return status ? '已授权' : '未授权';
    },
    modeFilter(value) {
      if (value === 'public') {
        return '开放';
      } else if (value === 'close') {
        return '封闭';
      } else if (value === 'elasticity') {
        return '弹性';
      } else {
        return '-';
      }
    }
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      // 分页参数
      page: {
        data: {
          account: '', // 账号
          taskName: '', // 任务名称
          name: '', // 姓名
          IDNumber: '', // 身份证号
          type: '', // 人员类型
          state: '', // 有效期状态
          deadline: '', // 临期时间
          point: '', // 点位
          tenantName: '' // 商铺名称
        },
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      accountList: [
        {
          label: '账号A',
          code: 'a'
        },
        {
          label: '账号B',
          code: 'b'
        }
      ],
      typeList: [
        {
          label: '员工',
          code: 'a'
        },
        {
          label: '商户',
          code: 'b'
        },
        {
          label: '居民',
          code: 'c'
        },
        {
          label: '其他',
          code: 'd'
        }
      ],
      stateList: [
        {
          label: '待生效',
          code: 'a'
        },
        {
          label: '有效',
          code: 'b'
        },
        {
          label: '已到期',
          code: 'c'
        }
      ],
      deadlineList: [
        {
          label: '30天内到期',
          code: 'a'
        },
        {
          label: '14天内到期',
          code: 'b'
        },
        {
          label: '7天内到期',
          code: 'c'
        }
      ],
      templateData: {},
      dialogVisible: false,
      form: {
        id: null
      },
      rules: {
        id: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ]
      },
      multipleSelection: [],
      batchState: false
    };
  },
  computed: {
    roleId() {
      return this.$store.getters.role;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      doGetShoplist(this.page).then((res) => {
        this.tableData = JSON.parse(JSON.stringify(res)).data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 下载模板
    download() {
      window.location.href =
        process.env.VUE_APP_BASE_API + '/static/deviceListExcel.xlsx';
    },
    addOrUpdate() {
      this.$refs.uploadModal.open();
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        // this.clearPageParams();
      }
    },
    handleCreate() {
      this.$refs.updateWhiteModal.open();
    },
    handleBatch() {
      this.batchState = !this.batchState;
    },
    handleBatchUpdate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection.length > 0) {
        this.$refs.batchUpdateWhiteModal.open({
          isUpdate: false
        });
      } else {
        this.$message({
          type: 'warning',
          message: '至少选中一条数据'
        });
      }
    },
    handleBatchDelete() {
      console.log(this.multipleSelection);
      if (this.multipleSelection.length > 0) {
        this.$confirm('确定将选中的人员删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          /* doDeleteBuyer(id).then((res) => {
            this.fetchData();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }); */
        });
      } else {
        this.$message({
          type: 'warning',
          message: '至少选中一条数据'
        });
      }
    },
    handleUpdate(row) {
      const updateData = JSON.parse(JSON.stringify(row));
      this.$refs.updateWhiteModal.open({
        isUpdate: true,
        updateData
      });
    },
    handleDelete(id) {
      // const that = this;
      this.$confirm('确定要将人员删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        /* doDeleteBuyer(id).then((res) => {
          this.fetchData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }); */
      });
      /* this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.cancelButtonLoading = true;
            instance.confirmButtonText = '提交中...';
            try {
              // await configDel(row.iotDeviceConfigId);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                instance.cancelButtonLoading = false;
              }, 300);
            }
          } else {
            done();
          }
        }
      })
        .then(() => {})
        .catch(() => {}); */
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped>
.search-layout {
  margin-bottom: 20px;
}
.search-layout .filter-item {
  margin-right: 20px;
  margin-top: 10px;
}
.search-layout .filter-item:last-of-type {
  margin-right: 0;
}
.head {
  margin-left: 16px;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
}
.input {
  width: 200px;
  margin-right: 15px;
}
.m-r {
  margin-right: 15px;
}
</style>
