<template>
  <div>
        <div class="cardTitle">楼栋管理</div>
        <div class="search-box">
          <a-row>
            <a-col :span='20'>
              <a-space size="large">
                <a-input 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="addBuilding">添加楼栋</a-button>
            </a-col>
          </a-row>
        </div>
        <commonTable
          :columns="columns"
          :tableData="tableData"
          :ActionsList="ActionsList"
          @handleTableChange="handleTableChange"
          @Actions="Actions"
          @selectionChoosed="selectionChoosed"
        >
          <template v-slot:actionBox="data">
            <a-space size="small">
              <a class="ant-dropdown-link" @click='detail(data)'>详情</a>
              <a class="ant-dropdown-link" @click='del(data)'>删除</a>
            </a-space>
          </template>
        </commonTable>
        <!-- 添加 -->
        <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"
            >
              <a-form-model-item label="楼栋号" prop="name">
                <a-input v-model="form.name" placeholder='请输入楼栋号' style="width:50%"/>
              </a-form-model-item>
              <a-form-model-item label='上传照片' style="width:70%" prop='fileList'>
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture"
                  :default-file-list="fileList"
                >
                  <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                </a-upload>
              </a-form-model-item>
            </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>
        <!-- 详情 -->
        <a-drawer
          title="楼栋详情"
          :width="720"
          :visible="drawerConfig.detailShow"
          :body-style="{ paddingBottom: '80px' }"
          @close="detailClose"
        >
          <!-- 编辑 -->
          <div class="drawer-content" v-if="drawerConfig.editNow">
            楼栋信息
            <a-divider></a-divider>
            <a-form-model
              layout='vertical'
              ref="ruleForm"
              :model="form"
              :rules="rules"
            >
              <a-form-model-item label="楼栋号" prop="name">
                <a-input v-model="form.name" placeholder='请输入楼栋号' style="width:50%"/>
              </a-form-model-item>
              <a-form-model-item label='上传照片' style="width:70%" prop='fileList'>
              </a-form-model-item>
            </a-form-model>
          </div>
          <!-- 详情 -->
          <div class="drawer-content" v-else>
            楼栋信息
            <a-divider></a-divider>
            <a-form
              layout='vertical'
            >
              <a-form-item label="楼栋号" prop="name">
                <span>1栋</span>
              </a-form-item>
              <a-form-item label='上传照片' style="width:70%" >
              </a-form-item>
            </a-form>
            单元信息
            <a-divider></a-divider>
            <a-table :columns="unitColumns" :data-source="unitData">
              <span slot="action" slot-scope="text, row">
                <a-button @click="edit(text,row)">编辑</a-button>
                <a-button @click="del(text,row)">删除</a-button>
              </span>
            </a-table>
          </div>
          <div class="drawer-footer">
            <a-button :style="{ marginRight: '8px' }" @click="detailClose">
              关闭
            </a-button>
            <a-button type="primary" @click="detailClose" v-if="drawerConfig.editNow"> 提交 </a-button>
            <a-button type="primary" @click="drawerConfig.editNow=true" v-else> 编辑 </a-button>
          </div>
        </a-drawer>
        <a-modal
          title="新增单元"
          :visible="addUnitShow"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <div></div>
        </a-modal>
      </div>
</template>

<script>
export default {
  data() {
    return {
      drawerConfig:{
        addShow:false,
        detailShow:false,
        title:'添加楼栋',
        editNow:false,
      },
      addUnitShow:false,
      form:{
        name:''
      },
      rules:{
        name:[{required:true,message:'请输入楼栋',trigger:'blur'}],
        fileList:[{required:true}]
      },
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'yyy.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
      tableChoosed: [],
      // 分页
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
      },
      //   列
      columns: [
        {
          title: "楼栋名称",
          dataIndex: "name",
          width: "20%",
        },
        {
          title: "房屋总数",
          dataIndex: "estateTotals",
          width: "20%",
        },
        {
          title: "租赁房屋数",
          dataIndex: "leaseEstateNums",
          width: "20%"
        },
        {
          title: "租赁率",
          dataIndex: "leaseRate",
          width: "20%",
          customRender:function(leaseRate){
            return leaseRate+'%'
          }
        },
        {
          title: "入住率",
          dataIndex: "occupancyRate",
          width: "20%",
          customRender:function(occupancyRate){
            return occupancyRate+'%'
          }
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "180",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      unitData:[],
      unitColumns: [
        {
          title: "单元名称",
          dataIndex: "name",
          width: "15%",
        },
        {
          title: "楼层数",
          dataIndex: "floor",
          width: "15%",
        },
        {
          title: "公共楼层数",
          dataIndex: "publicFloor",
          width: "18%",
        },
        {
          title: "是否有电梯",
          dataIndex: "elevator",
          width: "18%",
          customRender:function(elevator){
            switch (elevator) {
              case 1:
                return  '有'
              case 0:
                return  '无'
              default:
                break;
            }
          }
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "180",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      //   数据
      tableData: [
        { name: 1, roleNameList: ['点点3','212','点点'] },
      ],
      ActionsList: [
        {
          label: "批量删除",
          value: 1,
        },
        {
          label: "批量导出",
          value: 2,
        },
      ],
    };
  },
  methods: {
    addBuilding(){
      this.drawerConfig.addShow = true
    },
    addSubmit(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addClose(){
      this.drawerConfig.addShow = false
    },
    detail(data){
      console.log(data);
      this.drawerConfig.detailShow = true;
    },
    detailClose(){
      this.drawerConfig.detailShow = false;
      this.drawerConfig.editNow = false;
    },
    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);
    },
    selectionChoosed(data) {
      console.log(data);
      this.tableChoosed = data;
    },
  },
};
</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>