<template>
  <div>
    <div class="cardTitle">房屋管理</div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-input placeholder="请输入房屋名称" />
            <a-select style="width: 200px" placeholder="请选择房屋类型" />
            <a-select 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="drawerConfig.addShow = 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="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='edit(row)'>编辑</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' : 'green'"
          >
            {{ tag === 1 ? "闲置" : tag === 2 ? "在住" : "在租" }}
          </a-tag>
        </span>
        <span slot="switch" slot-scope="switchV, row">
          <a-switch :checked="switchV === 1" @change="enable(row)"></a-switch>
        </span>
      </a-table>
    </div>
    <a-drawer
      title="添加房屋"
      :width="720"
      :visible="drawerConfig.addShow"
      :body-style="{ paddingBottom: '80px' }"
      @close="addClose"
    >
      <div class="drawer-content">
        基本信息
        <a-divider></a-divider>
        <a-form-model
          layout="vertical"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :wrapper-col="{span:18}"
        >
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="楼栋" prop="manageBuildingId">
                <a-select
                  v-model="form.manageBuildingId"
                  placeholder="请选择楼栋"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="单元" prop="manageUnitId">
                <a-select
                  v-model="form.manageUnitId"
                  placeholder="请选择单元"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="楼层" prop="floorLocation">
                <a-select
                  v-model="form.floorLocation"
                  placeholder="请选择楼层"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="房屋名称" prop="name">
                <a-input
                  v-model="form.name"
                  placeholder="请输入房屋名称"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="室内面积" prop="indoorArea">
                <a-input
                  type="number"
                  v-model="form.indoorArea"
                  placeholder="请输入室内面积"
                  suffix="㎡"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="建筑面积" prop="constructionArea">
                <a-input
                  v-model="form.constructionArea"
                  type="number"
                  suffix="㎡"
                  placeholder="请输入建筑面积"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="房屋类型" prop="manageEstateTypeId">
                <a-select
                   mode="multiple"
                  v-model="form.manageEstateTypeId"
                  placeholder="请选择房屋类型"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="是否开启租赁" prop="isEnableLease">
                <a-select
                  v-model="form.isEnableLease"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <div>房屋户型</div>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="厅" prop="houseTypeHall">
                <a-input
                  type="number"
                  :min="0"
                  v-model="form.houseTypeHall"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="室" prop="houseTypeRoom">
                <a-input
                  type="number"
                  :min="0"
                  v-model="form.houseTypeRoom"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="卫" prop="houseTypeBathroom">
                <a-input
                  type="number"
                  :min="0"
                  v-model="form.houseTypeBathroom"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="房屋照片" prop="estateImgUrls">
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture-card"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      Upload
                    </div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
            </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" prop="remarks">
                <a-textarea v-model="form.remarks" :rows="4"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="addClose">
          关闭
        </a-button>
        <a-button type="primary" @click="addClose"> 提交 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data() {
    return {
      drawerConfig:{
        addShow:false,
      },
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-4',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-5',
          name: 'image.png',
          status: 'error',
        },
      ],
      form:{
        manageBuildingId:undefined,
        manageUnitId:undefined,
        floorLocation:undefined,
        name:undefined,
        indoorArea:undefined,
        constructionArea:undefined,
        manageEstateTypeId:undefined,
        isEnableLease:undefined,
        houseTypeHall:undefined,
        houseTypeRoom:undefined,
        houseTypeBathroom:undefined,
        estateImgUrls:undefined,
        remarks:undefined,
      },
      rules:{},
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      activeAction: undefined,
      loading: false,
      // 选择的index
      selectedRowKeys: [],
      tableChoosed: [],
      // 分页
      //   列
      columns: [
        {
          title: "房屋名称",
          dataIndex: "manageBuildingName",
          scopedSlots: { customRender: "name" },
          width: "20%",
        },
        {
          title: "室内面积",
          dataIndex: "indoorArea",
          width: "15%",
        },
        {
          title: "建筑面积",
          dataIndex: "constructionArea",
          width: "15%",
        },
        {
          title: "房屋类型",
          dataIndex: "manageEstateTypeName",
          width: "15%",
        },
        {
          title: "居住状态",
          key: "tags",
          dataIndex: "status",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "是否开启租赁",
          dataIndex: "isEnableLease",
          scopedSlots: { customRender: "switch" },
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "180",
          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,
        },
        {
          name: 1,
          roleNameList: ["点点3", "212", "点点"],
          status: 3,
          isEnableLease: 0,
        },
        {},
        { isEnableLease: 1 },
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
      ActionsList: [
        {
          label: "批量删除",
          value: 1,
        },
        {
          label: "批量导出",
          value: 2,
        },
      ],
    };
  },
  methods: {
    addHouse() {},
     handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    enable(data) {
      console.log(data);
    },
    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;
    },
    addClose(){
      this.drawerConfig.addShow = false;
    }
  },
  computed: {
    // 是否选择selection
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less" scoped>
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>