<template>
  <div>
    <div class="tips" v-if="companyInfo === null">
      <a-space size="large">
        第一步：请完善企业信息后，提交至工作人员审核
        <a-button type="primary" shape="round" size="default"
          >关联企业信息</a-button
        >
      </a-space>
    </div>
    <div class="tips" v-else-if="estateList===null">
      <a-space size="large" >
        第二步：请添加小区信息，用于绑定后续的功能
        <a-button type="primary" shape="round" size="default"
          >创建小区</a-button
        >
      </a-space>
    </div>
    <div class="tips" v-else>
        第三步：请在添加的小区中绑定购买的套餐 或 在购买功能时直接选择小区绑定
    </div>
    <div class="content">
      <div class="top" v-if="companyInfo === null">
        <span style="margin-left: 30px">
          <div class="top-a">你好，{{ username }}</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 v-else style="background: #fff">
        <a-row style="padding-left:40px;vertical-align:middle;height:130px;padding: 20px;">
          <a-col :span="3">
              <!-- 头像没接口 -->
          </a-col>
          <a-col :span="16">
            <a-col class="com-name">{{ companyInfo.companyName }}</a-col>
            <a-col class="com-sta">{{
              companyInfo.status == 1
                ? "待确认"
                : companyInfo.status == 2
                ? "已通过"
                : companyInfo.status == 3
                ? "已驳回"
                : "已取消"
            }}</a-col>
            <a-col :span="3" class="com-conta"
              ><a-icon type="user" />&nbsp;{{ companyInfo.contactsName }}</a-col
            >
            <a-col :span="6" class="com-conta"
              ><a-icon type="phone" />&nbsp;{{ companyInfo.contactsTel }}</a-col
            >
            <a-col :span="10" class="com-conta"
              ><a-icon type="mail" />&nbsp;{{
                companyInfo.contactsEmail
              }}</a-col
            >
          </a-col>
          <a-col :span="5" style="line-height:130px;margin-top:-20px"
            ><a-button shape="round" size="default" @click="editCompany()"
              >修改公司信息</a-button
            ></a-col
          >
        </a-row>
      </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 !== null">
                <div style="color: #d53131" v-show="estateList === null">
                  当前尚未添加小区信息
                </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 @click="handlerBound(item)">绑定</span>
                      <span @click="handlerDetail(item)">详情</span>
                    </template>
                    <a-card-meta
                      :title="item.name"
                      :description="'小区地址：' + item.addressDetails"
                    >
                    </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 !== null">
              <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==1?'未绑定':2?'业务受理中':3?'生效中':'已失效'}}</span>
                <span
                  style="
                    color: #00000073;
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                  "
                  ><span>购买功能</span>
                  <span style="color: #d53131">{{
                    item.includeFunctionModelList
                  }}</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.expirationDate
                  }}<span style="color: #00000073; font-size: 14px">到期</span>
                </div>
                <template slot="actions" class="ant-card-actions">
                  <span><a>续费</a></span>
                  <span><a @click="unbound(item)">解绑</a></span>
                  <span><a>详情</a></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>
              <a @click="newOrder"> 点击新建订单</a>
            </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"
          layout="vertical"
        >
          <a-form-model-item label="小区全称" prop='name'>
            <a-input v-model="form.name" style="60%"></a-input>
          </a-form-model-item>
          <a-form-model-item label="小区地址" prop='address'>
            <allCity @onchange='onchange'></allCity>
          </a-form-model-item>
          <a-form-model-item label="小区详细地址" prop='addressDetails'>
            <a-input  v-model="form.addressDetails" style="60%"></a-input>
          </a-form-model-item>
          <a-form-model-item label="小区图片">
            <span>要求文件大小不超过5mb，支持jpg、png格式</span>
            <a-row>
              <a-col :span="12">
                <commonUpload @handleChange='handleChange'></commonUpload>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
    <a-modal title="选择绑定订单" :visible="boundVisible" @ok="boundConfirm" @cancel="boundCancel">
      <a-select style="width: 200px" v-model="boundForm.adminFunctionOrderId">
        <a-select-option v-for="(item, index) in orderList" :key="index" :value="item.id">
          {{item.code}}
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { consoleShow, communityInsert } from "@/api/basic/console";
import { userUnbindingCommunity, userBindingCommunity } from "@/api/basic/console";
import store from "@/store";
export default {
	name: "Console",
	computed: {
		username() {
			return store.state.Info.name; //用户
		},
	},
	data() {
		return {
			form: {
				name:'',
				address:undefined,
				addressDetails:'',
				communityUrls:[],
        companyId: undefined
			},
			rules: {
				name:[{required: true,message: "请输入",trigger: "blur"}],
				address:[{required: true,message: "请选择",trigger: "change"}],
				addressDetails:[{required: true,message: "请输入",trigger: "blur"}],
			},
			orderList: [],
			estateList: [],
			visible: false,
			confirmLoading: false,
			companyInfo: {},
      //绑定弹窗
      boundVisible: false,
      boundForm: {communityId: undefined, adminFunctionOrderId: undefined}
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		async getData() {
			let res = await consoleShow();
      this.form.companyId = res.data.consoleCompanyVo.id
			this.estateList = res.data.consoleCommunityVoList;
			this.orderList = res.data.consoleOrderVoList;
			this.companyInfo = res.data.consoleCompanyVo;
		},
		settled() {
			this.$router.push({ name: "settled" });
		},
		addVillage() {
			this.visible = true;
		},
		editCompany() {},
		handleOk() {
			this.$refs.ruleForm.validate(async (valid) => {
				if (valid) {
					let res = await communityInsert(this.form);
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.getData();
						this.handleCancel()
					} else {
						this.$message.error(res.msg);
					}
				}
			});
		},
		handleCancel() {
			this.$refs.ruleForm.resetFields();
			this.visible = false;
		},
		newOrder() {
			this.$router.push({ name: "newOrder" });
		},
		handleChange(data){
			this.form.communityUrls[0] = data[0].response.data
		},
		onchange(data){
			this.form.address = data[2]
		},
    //小区后台
    handlerBound(val) {
      this.boundForm.communityId = val.id
      this.boundVisible = true;
    },
    boundConfirm() {
      userBindingCommunity(this.boundForm).then(res => {
        if (res.code === 200) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
      })
      this.boundVisible = false;
    },
    boundCancel() {
      this.boundVisible = false;
    },
    handlerDetail(val) {
      console.log(val)
    },
    //订单列表解绑
    unbound(val) {
      let obj = {adminFunctionOrderId : val.id}
      this.$confirm({
            title: "是否解绑？",
            icon:'close',
            onOk:async()=>{
              let res = await userUnbindingCommunity(obj);
              if (res.code === 200) {
                this.$message.success(res.msg);
                this.getData();
              } else {
                this.$message.error(res.msg);
              }
            },
      })
    }
	},
};
</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;
    }
  }
}
.uploadImg {
  background: #0000000a;
  border: 2px solid #00000029;
  color: #00000029;
  width: 180px;
  height: 120px;
  text-align: center;
  line-height: 110px;
  font-size: 60px;
  cursor: pointer;
}
.card-b-content-add {
  color: #9db7df;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  line-height: 72px;
}
.com-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: #000000;
}
.com-sta {
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: #5bc980;
}
.com-conta {
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
</style>
