<template>
  <div>
    <div class="cardTitle">住户审核&nbsp;
        <a-radio-group default-value="1" button-style="solid" @change="tabsChange">
            <a-radio-button value="0">
            全部
            </a-radio-button>
            <a-radio-button value="1">
            待审核
            </a-radio-button>
            <a-radio-button value="3">
            已通过
            </a-radio-button>
            <a-radio-button value="2">
            已驳回
            </a-radio-button>
        </a-radio-group>
    </div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-select placeholder="请选择用户身份" style="width:200px"/>
            <a-button type="primary">查 询</a-button>
            <a-button>重 置</a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>
    <div class="main">
      <div style="margin-bottom: 16px">
        <!-- 批量操作 -->
        <a-select
          type="primary"
          v-model="activeAction"
          :disabled="!hasSelected"
          :loading="loading"
          style="width: 120px"
          @change="Actions"
          placeholder="请选择操作"
        >
          批量
          <a-select-option v-for="item in ActionsList" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `已选择 ${selectedRowKeys.length} 条` }}
          </template>
        </span>
      </div>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        :scroll="{ x: 1300 }"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: selectionChoosed,
        }"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <span slot="name" slot-scope="text, row">
          {{
            row.manageBuildingName +
            "栋/" +
            row.manageUnitName +
            "单元/" +
            row.floorLocation +
            "层-" +
            row.name +
            "室"
          }}
        </span>
        <span slot="action" slot-scope="text, row">
          <a-space>
            <a class="ant-dropdown-link" @click='audit(row.estateReviewId,1)'>通过</a>
            <a class="ant-dropdown-link" @click='audit(row.estateReviewId,2)'>驳回</a>
          </a-space>
        </span>
        <span slot="tags" slot-scope="tag">
           <a-tag
            :color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : tag === 3 ? 'geekblue' : 'red'"
          >
            {{ tag === 1 ? "业主" : tag === 2 ? "业主亲属" :tag === 3 ? "租户":tag === 4 ? "租户亲属":'-'  }}
          </a-tag>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      searchForm:{
          status:null,
          identity:null
      },
      activeAction: undefined,
      loading: false,
      // 选择的index
      selectedRowKeys: [],
      tableChoosed: [],
      // 分页
      //   列
      columns: [
        {
            title: "申请人姓名",
            dataIndex:"name",
            width:'14%'
        },
        {
          title: "申请人身份",
          key: "tags",
          width: "14%",
          dataIndex: "identity",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "房屋名称",
          dataIndex: "manageBuildingName",
          scopedSlots: { customRender: "name" },
          width: "20%",
        },
        {
            title: "申请人手机号",
            dataIndex:"tel",
            width:'14%'
        },
        {
            title: "申请人身份证号",
            dataIndex:"idCard",
            width:'14%'
        },
        {
            title: "状态",
            dataIndex:"status",
            width:'14%',
            customRender:function(status){
                switch (status) {
                    case 1:
                        return '审核中'
                    case 2:
                        return '驳回'
                    case 3:
                        return '通过'
                    default:
                        break;
                }
            }
        },
        {
            title: "房屋类型",
            dataIndex:"estateTypeName",
            width:'14%'
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "100",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      //   数据
      tableData: [
        {
          manageBuildingName: "1",
          manageUnitName: "2",
          floorLocation: "4",
          name: "502",
          roleNameList: ["点点3", "212", "点点"],
          status: 1,
        },
        {
          name: 1,
          roleNameList: ["点点3", "212", "点点"],
          status: 2,
          isEnableLease: 1,
        },
      ],
      ActionsList: [
        {
          label: "批量删除",
          value: 1,
        },
        {
          label: "批量导出",
          value: 2,
        },
      ],
    };
  },
  mounted(){
      this.getData()
  },
  methods: {
    getData(){},
    tabsChange(e){
        this.searchForm.status = e.target.value
          this.getData()
    },
    //   审核 1通过 2驳回
    audit(estateReviewId,operate){
       this.$confirm({
        title: "是否" + (operate===1?'通过':'驳回'),
        // okText:'删除',
        // cancelText:'取消',
        icon: "",
        onOk:async function () {
             let res = await this.api({
            estateReviewId:estateReviewId,
            operate:operate
        })
        if(res.code===0){
            this.$message()
        }
        },
      })
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
    },
    Actions(data) {
      console.log(data);
      this.activeAction = undefined;
    },
    selectionChoosed(data) {
      console.log(data);
      this.tableChoosed = data;
    },
  },
  computed: {
    // 是否选择selection
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less" scoped>
</style>