<template>
  <div>
    <div class="cardTitle">住户信息</div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-select style="width: 200px" placeholder="请选择性别" >
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
              <a-select-option value="3">保密</a-select-option>
            </a-select>
            <a-input style="width: 200px" placeholder="请输入关键字（姓名/手机号）" />
            <a-button type="primary">查 询</a-button>
            <a-button>重 置</a-button>
          </a-space>
        </a-col>
        <a-col :span="4">
          <a-button class="add-btn" @click="drawer.add.show = true">添加住户</a-button>
        </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="newData"
        :pagination="pagination"
        :scroll="{ x: 1300 }"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: selectionChoosed,
        }"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <span slot="name" slot-scope="text, row">
          <a-select style="width :200px" @change='changeHouse' placeholder='请选择房屋'>
            <a-select-option v-for="item,index in row.residentListEstateVoList" :key='index' :value="item.id">
              {{
            item.manageBuildingName +
            "栋/" +
            item.manageUnitName +
            "单元/" +
            item.floorLocation +
            "层-" +
            item.manageEstateName +
            "室"
          }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="action" slot-scope="text, row">
            <a-space>
              <a class="ant-dropdown-link">编辑</a>
              <a class="ant-dropdown-link" @click="del(row)">删除</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>
    <!-- add -->
    <a-drawer
      title="新增住户"
      :width="720"
      :visible="drawer.add.show"
      :body-style="{ paddingBottom: '80px' }"
      @close="addClose"
    >
      <div class="drawer-content">
        基本信息
        <a-divider></a-divider>
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          layout="vertical"
        >
          <a-row>
            <a-col :span='8'>
              <a-form-model-item label="关联房屋" prop="manageEstateId">
                <a-cascader :options="options" placeholder="Please select" @change="onChange" style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='8'>
              <a-form-model-item label="房屋类型">
                <a-input placeholder='请先选择关联房屋' disabled style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='8'>
              <a-form-model-item label="住户身份" prop="identity">
                <a-select placeholder='请选择住户身份' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="姓名" prop="name">
                <a-input placeholder='请输入姓名' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="手机号" prop="tel">
                <a-input placeholder='请输入手机号' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="性别" prop="sex">
                <a-input placeholder='请选择性别' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="身份证号" prop="idCard">
                <a-input placeholder='请输入身份证号' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="入住时间" prop="checkTime">
                <a-date-picker @change="onChange" />
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="户籍所在地" prop="domicile">
                <a-input placeholder='户籍所在地' style='width:90%'/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              身份证徽面照
              <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                  </div>
                </div>
              </a-upload>
            </a-col>
            <a-col :span='12'>
              身份证头像照
              <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                  </div>
                </div>
              </a-upload>
            </a-col>
            <div v-show='form.identity===2||form.identity===4'>
              关联信息
            <a-divider></a-divider>
            </div>
            <div v-if="form.identity===2">
              <a-col :span="12">
                <a-form-model-item label="业主姓名" prop="ownerName">
                  <a-input placeholder='请输入业主姓名' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="业主电话" prop="ownerTel">
                  <a-input placeholder='请输入业主电话' style='width:90%'/>
                </a-form-model-item>
              </a-col>
            </div>
            <div  v-else-if="form.identity===4">
              <a-col :span="12">
                <a-form-model-item label="租户姓名" prop="tenantName">
                  <a-input placeholder='请输入租户姓名' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="租户电话" prop="tenantTel">
                  <a-input placeholder='请输入租户电话' style='width:90%'/>
                </a-form-model-item>
              </a-col>
            </div>
            联系信息
            <a-divider></a-divider>
             <a-col :span="12">
                <a-form-model-item label="紧急联系人" prop="emergencyContact">
                  <a-input placeholder='请输入紧急联系人' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="紧急联系人电话" prop="emergencyContactNumber">
                  <a-input placeholder='请输入紧急联系人电话' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              其他信息
              <a-divider></a-divider>
              <a-col :span="12">
                <a-form-model-item label="婚姻状况" prop="maritalStatus">
                  <a-select placeholder='请选择婚姻状况' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="民族" prop="nation">
                  <a-input placeholder='请输入民族' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="政治面貌" prop="politicalOutlook">
                  <a-select placeholder='请选择婚姻状况' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="户口类型" prop="accountType">
                  <a-select placeholder='请选择户口类型' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="从事职业" prop="occupation">
                  <a-input placeholder='请输入从事职业' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="工作单位" prop="employer">
                  <a-input placeholder='请输入工作单位' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="工作单位地址" prop="employerAddress">
                  <a-input placeholder='请输入工作单位地址' style='width:90%'/>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" prop="remarks">
                  <a-textarea placeholder='请输入备注' style='width:90%'/>
                </a-form-model-item>
              </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="drawer.add.show = false">
          关闭
        </a-button>
        <a-button type="primary" @click="addClose"> 提交 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      form:{
        identity:2
      },
      drawer:{
        add:{
          show: false
        },
        detail:{}
      },
      changeId:null,
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      activeAction: undefined,
      loading: false,
      // 选择的index
      selectedRowKeys: [],
      tableChoosed: [],
      // 分页
      //   列
      columns: [
        {
          title: "住户姓名",
          dataIndex: "name",
          width: "10%",
        },
        {
          title: "住户手机号",
          dataIndex: "tel",
          width: "10%",
        },
        {
          title: "住户性别",
          dataIndex: "sex",
          width: "8%",
          customRender:function(sex){
            switch (sex) {
              case 1:
                return '男'
              case 2:
                return '女'
              case 3:
                return '保密'
              default:
                break;
            }
          }
        },
        {
          title: "住户身份证号",
          dataIndex: "idCard",
          width: "10%",
        },
        {
          title: "房屋名称",
          dataIndex: "manageBuildingName",
          scopedSlots: { customRender: "name" },
          width: "20%",
        },
        {
          title: "房屋类型",
          dataIndex: "manageEstateTypeName",
          width: "10%",
        },
        {
          title: "用户身份",
          key: "tags",
          dataIndex: "identity",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "180",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],newData:[],
      //   数据
      tableData: [
        {
          "id": 1,
                "name": "张三",
                "tel": "13738611462",
                "sex": 1,
                "idCard": "331022199711273812",
                "residentListEstateVoList": [
                    {
                        "id": 1,
                        "manageBuildingName": "1",
                        "manageUnitName": "单元1",
                        "floorLocation": 1,
                        "manageEstateName": "1室",
                        "manageEstateTypeName": "住宅",
                        "identity": 1
                    },
                    {
                        "id": 2,
                        "manageBuildingName": "2",
                        "manageUnitName": "单元2",
                        "floorLocation": 3,
                        "manageEstateName": "3室",
                        "manageEstateTypeName": "住宅",
                        "identity": 2
                    }
                ]
        },
        {
          "id": 1,
                "name": "张的三",
                "tel": "13738611462",
                "sex": 1,
                "idCard": "331022199711273812",
                "residentListEstateVoList": [
                    {
                        "id": 3,
                        "manageBuildingName": "3",
                        "manageUnitName": "单元3",
                        "floorLocation": 3,
                        "manageEstateName": "3室",
                        "manageEstateTypeName": "住宅",
                        "identity": 3
                    },{
                        "id": 4,
                        "manageBuildingName": "4",
                        "manageUnitName": "单元4",
                        "floorLocation": 4,
                        "manageEstateName": "4室",
                        "manageEstateTypeName": "住宅",
                        "identity": 4
                    }
                ]
        },
      ],
      ActionsList: [
        {
          label: "批量删除",
          value: 1,
        },
        {
          label: "批量导出",
          value: 2,
        },
      ],
    };
  },
  mounted(){
    this.newData  =  this.tableData
  },
  methods: {
    addClose(){
      this.drawer.add.show = false;
    },
    handleChange(info){
      console.log(info);
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    // 表格行切换房屋
    changeHouse(value){
      // 遍历每行
      this.newData.forEach((item,index)=>{
        // 遍历每行中的所有房子
        item.residentListEstateVoList.forEach(items=>{
          // 当有房子id和changeid相同时
          if(items.id === value){
            // 给newData赋值
            this.$set(this.newData[index],'identity' ,items.identity )
            this.$set(this.newData[index],'manageEstateTypeName' ,items.manageEstateTypeName )
          }
        })
      })
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
    },
    del(data) {
       this.$confirm({
        title: "是否删除",
        // okText:'删除',
        // cancelText:'取消',
        icon: "",
        onOk: function () {
          console.log(data);
        },
      });
    },
    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>
/deep/.ant-upload.ant-upload-select-picture-card{
  width: 240px;
  height: 160px;
}
/deep/.avatar-uploader > .ant-upload {
  width: 240px;
  height: 160px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>