<!--
 * @Author: your name
 * @Date: 2021-11-22 15:56:04
 * @LastEditTime: 2021-11-22 17:00:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ansu-business/src/views/Console/index.vue
-->
<template>
  <div>
    <div class="tips">
      <a-space size="large">
        第一步：请完善企业信息后，提交至工作人员审核
        <a-button type="primary" shape="round" size="default">添加小区</a-button>
      </a-space>
    </div>
    <div class="content">
        <div class="top">
            <span style="margin-left:30px">
                <div class="top-a">你好，admin</div>
                <div class="top-b">请尽快绑定企业信息，进行下一步</div>
            </span>
            <span>
                <a-button type="primary" class="top-c" shape="round" size="default" @click="settled()">入驻企业申请</a-button>
            </span>
        </div>
    </div>
    <div class="content">
        <a-row>
                 <a-col :span='18'>
                    <div class="card-a">
                        <div class="cardTitle">小区后台</div>
                        <div class="card-a-content">
                            <div v-if="estateList.length">
                                 <div style="color:#D53131" v-show="!estateList.length">当前尚未添加小区信息</div>
                                 <div class="cardBox">
                                    <a-card hoverable style="width: 30%;margin:10px;" v-for="(item,index) in estateList" :key="index">
                                        <template slot="actions" class="ant-card-actions">
                                            <span>绑定</span>
                                            <span>详情</span>
                                        </template>
                                        <a-card-meta :title="item.name" :description="'小区地址：'+item.address">
                                        </a-card-meta>
                                    </a-card>
                                    <a-card class="card-add">
                                        <div class="card-a-content-add" @click="addVillage">
                                            点击新建小区
                                        </div>
                                    </a-card>
                                 </div>
                            </div>
                        </div>
                    </div>
                </a-col>
                <a-col :span='6'>
                    <div class="card-b">
                        <div class="cardTitle">订单列表</div>
                        <div class="cardBox" v-if="orderList.length">
                            <a-card hoverable v-for="item,index in orderList" :key="index" :title="item.code" style="width: 80%;margin:auto;margin-top:20px">
                                <span slot="extra" href="#">{{item.status}}</span>
                                <span style="color:#00000073;font-size:14px;display:flex;justify-content:space-between;"><span>购买功能</span> <span style="color:#D53131;">{{'￥'+item.amount}}</span></span>
                                <div class="functionBox">
                                    <div class="functionList" v-for="ele,indexs in item.functionList" :key="indexs">{{ele}}</div>
                                </div>
                                <div style="margin-top:10px;">{{item.time}}<span style="color:#00000073;font-size:14px;">到期</span></div>
                                <template slot="actions" class="ant-card-actions">
                                            <span>续费</span>
                                            <span>解绑</span>
                                            <span>详情</span>
                                            <!-- <span>支付</span>
                                            <span>取消</span> -->
                                </template>
                            </a-card>
                            <a-card hoverable class="addOrder">
                                <div class="card-b-content-add" @click="newOrder">
                                    点击新建订单
                                </div>
                            </a-card>
                        </div>
                        <div class="card-b-content" v-else>
                            <div>当前无订单</div>
                            <div>请购买后台功能</div>
                        </div>
                    </div>
                </a-col>
            
        </a-row>
    </div>
     <a-modal
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        >
        <div class="modalContent">
            <div class="cardTitle">小区信息</div>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="inline"
                layout="vertical"
                :wrapper-col="wrapperCol"
            >
            <a-form-model-item label="小区全称">
                <a-input style="60%"></a-input>
            </a-form-model-item>
            <a-form-model-item label="小区地址">
                 <a-input style="60%"></a-input>
            </a-form-model-item>
            <a-form-model-item label="小区图片">
                <span>要求文件大小不超过5mb，支持jpg、png格式</span>
                <a-row>
                <a-col :span='12'>
                    <div class="uploadImg">+</div>
                </a-col>
                </a-row>
            </a-form-model-item>
            </a-form-model>
        </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "Console",
  data(){
      return{
          orderList:[
              {
                  code:'N20212121212',
                  status:'付款成功',
                  time:'2023/3/3',
                  amount:'25000',
                  functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
              },{
                  code:'N20212121212',
                  status:'付款成功',
                  time:'2023/3/3',
                  functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
              },{
                  code:'N20212121212',
                  status:'付款成功',
                  time:'2023/3/3',
                  functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
              },
          ],
          estateList:[
              {
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
                  status:'生效中'
              },{
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
                  status:'生效中'
              },{
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
                  status:'生效中'
              },{
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
                  status:'生效中'
              },{
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
                  status:'生效中'
              },
              {
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 11 单元 250 室 11 单元 250 室',
                  status:'生效中'
              },{
                  name:'万科·滨江花园',
                  address:'江苏省盐城市建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250 室',
                  status:'生效中'
              }
          ],
          visible: false,
          confirmLoading: false,
      }
  },
  methods:{
      settled(){
          this.$router.push({name:'settled'})
      },
      addVillage(){
          this.visible=true
      },
      handleOk(){},
      handleCancel(){
          this.visible = false
      },
      newOrder(){
          this.$router.push({name:'newOrder'})
      }
  }
};
</script>

<style lang="less" scoped>
.tips {
  background: #f7d6d6;
  height: 68px;
  line-height: 68px;
  width: 100%;
  color: #000000d9;
  font-size: 14px;
  padding-left: 40px;
}
.top {
    width: 100%;
    display: flex;
    background: #fff;
    height: 132px;
    line-height: 132px;
    justify-content: space-between;
    .top-a{
        font-weight:500;
        font-size:20px;
        color:#000000;
        line-height: 20px;
        margin-top: 40px;
        height: 30px;
    }
    .top-b{
        color:#000000A6 ;
        line-height: 20px;
        height: 20px;
    }
    .top-c{
        margin-right:30px
    }
}
.card-a{
    background: #fff;
    margin-right:24px;
    padding-top:10px;
    min-height: 600px;
    .card-a-content{
        color: #00000073;
        font-size: 14px;
        padding: 13px;
        .cardBox{
            display: flex;
            flex-direction:row;
            flex-wrap: wrap;
            // justify-content:;
            .card-add{
                width: 30%;
                margin:10px;
                border:1px dashed #9DB7DF;
                border-radius: 3%;
            }
            /deep/.ant-card-body{
                padding-bottom: 50px;
                min-height: 170px;
            }
            /deep/.ant-card {
                position: relative;
            }
            /deep/.ant-card-actions{
                position: absolute;
                bottom: 0;
                width: 100%;
                // margin-top: 50px;
            }
            .card-a-content-add{
                color:#9DB7DF;
                font-size:16px;
                cursor:pointer;
                text-align: center;
                vertical-align: middle;
                line-height: 72px;
            }
        }
    }
}
.card-b{
    background: #fff;
    padding-top:10px;
    min-height: 600px;
    .card-b-content{
        margin-top:150px;
        color: #00000073;
        font-size: 14px;
        text-align: center;
        /deep/.ant-card-head{
            background: #205FBD1A;
        }
    }
    .cardBox{
        // text-align: center;
        /deep/.ant-card-head{
            background: #205FBD1A;
        }
        /deep/.ant-card-head-title{
            font-size: 16px;
            color: #000000A6;
        }
        .functionBox{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 90%;
            .functionList{
                        color: #1F519B;
                        border:1px solid #1F519B;
                        border-radius: 5%;
                        margin: 2px;
                        padding:2px;
                        white-space: nowrap;
            }
        }
        .addOrder{
            border:1px dashed #9DB7DF;
            border-radius: 3%;
            width: 80%;
            height: 200px;
            margin:auto;
            margin-top:20px;
            .card-b-content-add{
                color:#9DB7DF;
                font-size:16px;
                cursor:pointer;
                text-align: center;
                vertical-align: middle;
                line-height: 72px;
            }
        }
    }
}
.uploadImg{
  background: #0000000A;
  border:2px solid #00000029;
  color: #00000029;
  width: 180px;
  height: 120px;
  text-align: center;
  line-height: 110px;
  font-size:60px;
  cursor: pointer;
}
</style>
