<template>
  <!-- 修改房屋信息 -->
  <view class="publish" :class="{'publish--elder':$uiStyle==='elder'}">
    <view class="house">
      <view class="house-info">
        <view class="title">房源信息</view>
        <view class="cell">
          <view class="label">
            <image class="icon" mode="scaleToFill" src="/subPages/static/images/rent/asterisk.png"/>
            <view class="value">小区名称或者地址</view>
          </view>
          <view style="display:flex;align-items:center;justify-content:space-between;margin-right:5px">
            <view class="cell-value" @tap="chooseLocation">{{xqName}}</view>
            <image style="width:20px;height:20px;" mode="scaleToFill" src="/subPages/static/images/rent/location.png"/>
          </view>
        </view>
        <view class="cell">
          <view class="label">
            <image class="icon" mode="scaleToFill" src="/subPages/static/images/rent/asterisk.png"/>
            <view class="value">房屋面积(平方米)</view>
          </view>
          <uni-easyinput type="number" v-model="areaSquare" placeholder="请填写" :inputBorder="false"></uni-easyinput>
        </view>
        <view class="cell">
          <view class="label">
            <image class="icon" mode="scaleToFill" src="/subPages/static/images/rent/asterisk.png"/>
            <view class="value">户型|朝向</view>
          </view>
          <view class="cell-value" @tap="selectHxCx">{{hxCx}}</view>
        </view>
        <view class="cell">
          <view class="label">
            <image class="icon" mode="scaleToFill" src="/subPages/static/images/rent/asterisk.png"/>
            <view class="value">楼层|总楼层</view>
          </view>
          <view class="cell-value" @tap="selectFloor">{{floor}}</view>
        </view>
        <view class="cell">
          <view class="label">
            <image class="icon" mode="scaleToFill" src="/subPages/static/images/rent/asterisk.png"/>
            <view class="value">月租金</view>
          </view>
          <view class="cell-value" @tap="selectCostMonthly">{{costInfo}}</view>
        </view>
      </view>
      <view class="house-image">
        <view class="title">房源图片</view>
        <view class="sub-title">遵守图片上传规范，杜绝房源下架风险</view>
        <file-upload2 ref="files" :maxCount="9" placeholder="添加房源照片"></file-upload2>
      </view>
      <view class="house-detail">
        <view class="title">房源详情</view>
        <view class="sub-title">信息丰富，可以更快的找到合适租客</view>
        <view class="detail">
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlRequirement" :key="item.code"
              :text = "item.name"
              :circle="true"
              size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectRequest(index, item)"
            />
            <uni-tag text="更多 >" :circle="true" size="normal" custom-style="color:#fff;background:#3a78f5!important;" @click="checkMoreDetail"/>
          </view>
        </view>
      </view>
      <view class="house-desc">
        <view class="title">房源描述</view>
        <uni-easyinput type="textarea" v-model="houseDesc" placeholder="遵守房源描述规，杜绝房源下架风险"></uni-easyinput>
      </view>
    </view>
    <button class="publish-bth" type="primary" @tap="modifyPublishInfo">保存</button>

    <!-- 户型和朝向 -->
    <uni-popup ref="popupHx" type="bottom" background-color="#F8F8F8">
      <view class="popup-class">
        <view class="list">
          <view class="title">选择户型: </view>
          <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="hxIndex" @change="hxChanged">
            <picker-view-column>
              <view v-for="(item,index) in shiList" :key="index">{{item}}室</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item,index) in tingList" :key="index">{{item}}厅</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item,index) in weiList" :key="index">{{item}}卫</view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="list">
          <view class="title">选择朝向:</view>
          <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="cxIndex" @change="cxChanged">
            <picker-view-column>
              <view v-for="(item,index) in fwzlOrientation" :key="index">{{item.name}}</view>
            </picker-view-column>
          </picker-view>
        </view>
        <button type="primary" class="save-btn" @tap="confirmHx">确定</button>
      </view>
    </uni-popup>

    <!-- 楼层和总楼层 -->
    <uni-popup ref="popupFloor" type="bottom" background-color="#F8F8F8">
      <view class="popup-class">
        <view class="list">
          <view class="title">选择楼层:</view>
          <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="floorIndex" @change="floorChanged">
            <picker-view-column>
              <view v-for="(item,index) in floorList" :key="index">{{item}}层 </view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="(item,index) in floorTotalList" :key="index">共{{item}}层</view>
            </picker-view-column>
          </picker-view>
        </view>
        <button type="primary" class="save-btn" @tap="confirmFloor">确定</button>
      </view>
    </uni-popup>

    <!-- 出租类型-->
    <uni-popup ref="popupType" type="bottom" background-color="#F8F8F8">
      <view class="popup-class">
        <view class="list">
          <view class="title">出租类型:</view>
          <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="typeIndex" @change="typeChanged">
            <picker-view-column>
              <view v-for="(item,index) in typeOptions" :key="index">{{item}}</view>
            </picker-view-column>
          </picker-view>
        </view>
        <button type="primary" class="save-btn" @tap="confirmRentType">确定</button>
      </view>
    </uni-popup>

    <!-- 租金和结付类型-->
    <uni-popup ref="popupCost" type="bottom" background-color="#F8F8F8">
      <view class="popup-class">
        <view class="list">
          <view class="title">月租金(元):</view>
          <uni-easyinput type="number" v-model="costMonthlyTemp"></uni-easyinput>
        </view>
        <view class="list cost-type">
          <view class="title">结付类型:</view>
          <uni-data-select class="uni-select" v-model="costTypeCodeTemp" :localdata="fwzlCostType"></uni-data-select>
        </view>
        <button type="primary" class="save-btn" @tap="confirmCostInfo">确定</button>
      </view>
    </uni-popup>

    <!-- 房源详情 -->
    <uni-popup ref="popup" type="bottom" background-color="#F8F8F8">
      <view class="more-detail">
        <view class="decoration">
          <view class="title">装修情况</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlDecoration" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectDecoration(index, item)"
            />
          </view>
        </view>
        <view class="light-spot">
          <view class="title">房屋亮点</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlLightspot" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectLightspot(index, item)"
            />
          </view>
        </view>
        <view class="configure">
          <view class="title">房屋配置</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlConfig" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectConfig(index, item)"
            />
          </view>
        </view>
        <view class="required">
          <view class="title">出租要求</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlRequirement" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectRequest(index, item)"
            />
          </view>
        </view>
        <view class="look-time">
          <view class="title">看房时间</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlLookPeriod" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important;' : 'color:#888888;'"
              @click="selectLookTime(index, item)"
            />
          </view>
        </view>
        <view class="lift">
          <view class="title">是否有电梯</view>
          <view class="tags">
            <uni-tag
              v-for="(item, index) in fwzlLift" :key="item.code"
              :text="item.name" :circle="true" size="normal"
              :custom-style="item.checked ? 'color:#fff;background:#3a78f5!important; padding:4px 20px' : 'color:#888888; padding:4px 20px'"
              @click="selectLift(index, item)"
            />
          </view>
        </view>
        <button type="primary" class="save-btn" @tap="confirmDetail">确定</button>
      </view>
    </uni-popup>


  </view>
</template>

<script>
import { modifyPushRecord, getHouseDetail } from '@/api/rent';
const app = getApp();

export default {
  name: "publish",
  components: {
  },
  props: {},
  data() {
    return {
      userInfo: {},
      uuid: '',
      xqName: '',           //小区名称或地址
      xqAddress: '',        //小区详细地址
      xqLongitude: '',      //小区经度
      xqLatitude: '',       //小区纬度
      areaSquare: '',       //房屋面积
      hxCx: '',             //户型和朝向
      floor: '',            //楼层和总楼层
      floorType: 'medium',  //楼层类型
      costMonthly: null,    //月租金
      costTypeCode: '',     //结付类型
      houseDesc: '',        //房源描述
      costInfo: '',
      costMonthlyTemp: 0,
      costTypeCodeTemp: 'f3y1',
      decoration: '',
      decorationCode: '',
      lightspot: '',
      lightspotCode: '',
      config: '',
      configCode: '',
      lookPeriod: '',
      lookPeriodCode: '',
      requirement: '',
      requirementCode: '',
      hasLift: true,
      phone: '',
      fileIds: [],
      fwzlDecoration: [],   //装修情况
      fwzlLightspot: [],    //房屋亮点
      fwzlConfig: [],       //房屋配置
      fwzlRequirement: [],  //出租要求
      fwzlLookPeriod: [],   //看房时间
      fwzlOrientation: [],  //房屋朝向
      fwzlCostType: [],     //租金结付类型
      fwzlCostInclude: [],  //租金包含费用
      fwzlLift: [{code: true, name: '是'}, {code: false, name: '否'}],  //是否有电梯
      hxIndex: [0, 1, 0],
      hxIndexTemp: [0, 1, 0],
      shiList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      tingList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      weiList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      cxIndex: [0],
      cxIndexTemp: [0],
      indicatorStyle: `height: 50px;`,
      floorIndex: [0, 0],
      floorIndexTemp: [0, 0],
      floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
      floorTotalList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
      typeIndex: [0],
      typeIndexTemp: [0],
      typeOptions: ['整租', '合租'],
      fwzlCostTypeDic: {},
    }
  },
  onLoad(options) {
    this.uuid = options.uuid;
    this.userInfo = uni.getStorageSync('userInfo') || {};
    this.phone = this.userInfo.phoneNumber;
    const globalData = app.globalData;
    this.getDicByNameList();
    this.getHouseDetail(options.uuid);
  },
  methods: {
    // 查询字典
    getDicByNameList () {
      const fwzlDicList = JSON.parse(JSON.stringify(app.globalData.fwzlDicList));
      this.fwzlRequirement = fwzlDicList.fwzlRequirement;
      this.fwzlConfig = fwzlDicList.fwzlConfig;
      this.fwzlDecoration = fwzlDicList.fwzlDecoration;
      this.fwzlOrientation = fwzlDicList.fwzlOrientation;
      this.fwzlCostType = fwzlDicList.fwzlCostType.map(item => {return {value: item.code, text: item.name}});
      this.fwzlCostInclude = fwzlDicList.fwzlCostInclude;
      this.fwzlLookPeriod = fwzlDicList.fwzlLookPeriod;
      this.fwzlLightspot = fwzlDicList.fwzlLightspot;
      fwzlDicList.fwzlCostType.forEach(item => {
        this.fwzlCostTypeDic[item.code] = item.name;
      })
    },
    // 获取房屋详情
    getHouseDetail(uuid) {
      const data = {
        userInfoId: this.userInfo.uuid,
        uuid: uuid,
      }
      getHouseDetail(data).then(res =>{
        const houseInfo = res.data;
        this.xqName = houseInfo.mc;
        this.xqAddress = houseInfo.bzdz;
        this.xqLongitude = houseInfo.x;
        this.xqLatitude = houseInfo.y;
        this.areaSquare = houseInfo.areaSquare;
        this.hxCx = `${houseInfo.shiNum}室 | ${houseInfo.tingNum}厅 | ${houseInfo.weiNum}卫 | ${houseInfo.orientation}`;
        this.hxIndex = [houseInfo.shiNum-1, houseInfo.tingNum, houseInfo.weiNum-1];
        this.fwzlOrientation.forEach((item,index) =>{
          if (item.name === houseInfo.orientation) {
            this.cxIndex = [index];
          }
        })
        this.floor = `${houseInfo.floor}层 | 共${houseInfo.floorTotal}层`
        this.floorIndex = [houseInfo.floor-1, houseInfo.floorTotal-1];
        if (houseInfo.floor < 6) {
          this.floorType = 'low'
        } else if (houseInfo.floor < 12) {
          this.floorType = 'medium'
        } else{
          this.floorType = 'high'
        }
        this.costMonthly = houseInfo.costMonthly;
        this.costMonthlyTemp = houseInfo.costMonthly;
        this.costTypeCode = houseInfo.costType;
        tis.costTypeCodeTemp = houseInfo.costType;
        this.costInfo = `${this.costMonthly}元 | ${this.fwzlCostTypeDic[this.costTypeCode]}`;
        this.houseDesc = houseInfo.description;
        this.decoration = houseInfo.decoration;
        this.decorationCode = houseInfo.decorationCode;
        this.lightspot = houseInfo.lightspot;
        this.lightspotCode = houseInfo.lightspotCode;
        this.config = houseInfo.config;
        this.configCode = houseInfo.configCode;
        this.lookPeriod = houseInfo.lookPeriod;
        this.lookPeriodCode = houseInfo.lookPeriodCode;
        this.requirement = houseInfo.requirement;
        this.requirementCode = houseInfo.requirementCode;
        this.hasLift = houseInfo.elevator;
      })
    },
    // 获取小区的定位
    chooseLocation () {
      const _this = this;
      uni.chooseLocation({
        success: function (res) {
          _this.xqName = res.name;
          _this.xqAddress = res.address;
          _this.xqLongitude = res.longitude;
          _this.xqLatitude = res.latitude;
        }
      });
    },
    // 选择户型和朝向
    selectHxCx () {
      this.$refs.popupHx.open();
    },
    // 改变户型
    hxChanged(e) {
      this.hxIndexTemp = e.detail.value;
    },
    // 改变朝向
    cxChanged(e) {
      this.cxIndexTemp = e.detail.value;
    },
    // 确定户型和朝向
    confirmHx() {
      this.hxIndex = this.hxIndexTemp;
      this.cxIndex = this.cxIndexTemp;
      this.hxCx = `${this.hxIndex[0] + 1}室 | ${this.hxIndex[1]}厅 | ${this.hxIndex[2] + 1}卫 |
                   ${this.fwzlOrientation[this.cxIndex[0]].name}`;
      this.$refs.popupHx.close();
    },
    // 选择楼层
    selectFloor() {
      this.$refs.popupFloor.open();
    },
    // 改变楼层
    floorChanged(e) {
      this.floorIndexTemp = e.detail.value;
    },
    // 确定楼层
    confirmFloor() {
      if (this.floorIndexTemp[1] + 1 < 6) {
        this.floorType = "low";
      } else if (this.floorIndexTemp[1] + 1 < 12) {
        this.floorType = "medium";
      } else {
        this.floorType = "high";
      }
      this.floorIndex = this.floorIndexTemp;
      this.floor = `${this.floorIndex[0] + 1}层 | 共${this.floorIndex[1] + 1}层`;
      this.$refs.popupFloor.close();
    },
    // 选择出租类型
    selectRentType() {
      this.$refs.popupType.open();
    },
    // 改变出租类型
    typeChanged(e) {
      this.typeIndexTemp = e.detail.value;
    },
    // 确定出租类型
    confirmRentType() {
      this.typeIndex = this.typeIndexTemp;
      this.rentType = this.typeOptions[this.typeIndex[0]];
      this.$refs.popupType.close();
    },
    // 选择租金和结付类型
    selectCostMonthly() {
      this.$refs.popupCost.open();
    },
    // 确定租金信息
    confirmCostInfo() {
      this.costMonthly = this.costMonthlyTemp;
      this.costTypeCode = this.costTypeCodeTemp;
      this.fwzlCostType.forEach(item => {
        if (item.value === this.costTypeCode) {
          this.costType = item.text;
        }
      });
      this.costInfo = `${this.costMonthly}元 | ${this.costType}`
      this.$refs.popupCost.close();
    },
    // 查看更多房源详情
    checkMoreDetail () {
      this.$refs.popup.open();
    },
    // 确定房屋详情
    confirmDetail () {
      this.$refs.popup.close();
    },
    // 选择出租要求
    selectRequest (index, item) {
      item.checked = !item.checked;
      this.$set(this.fwzlRequirement, index, item);
      this.$refs.popup.open();
      let requirementList = [];
      let requirementCodeList = [];
      this.fwzlRequirement.forEach(item => {
        if (item.checked) {
          requirementList.push(item.name);
          requirementCodeList.push(item.code);
        }
      })
      this.requirement = requirementList.join(',');
      this.requirementCode = requirementCodeList.join(',');
    },
    // 选择装饰情况
    selectDecoration (index) {
      const fwzlDecoration = JSON.parse(JSON.stringify(this.fwzlDecoration));
      fwzlDecoration.forEach((item, i) => {
        if (index === i) {
          item.checked = true;
          this.decoration = item.name;
          this.decorationCode = item.code;
        } else {
          item.checked = false;
        }
      })
      this.fwzlDecoration = fwzlDecoration;
    },
    // 选择房屋亮点
    selectLightspot (index, item) {
      item.checked = !item.checked;
      this.$set(this.fwzlLightspot, index, item);
      let lightspotList = [];
      let lightspotCodeList = [];
      this.fwzlLightspot.forEach(item => {
        if (item.checked) {
          lightspotList.push(item.name);
          lightspotCodeList.push(item.code);
        }
      })
      this.lightspot = lightspotList.join(',');
      this.lightspotCode = lightspotCodeList.join(',');
    },
    // 选择房屋配置
    selectConfig (index, item) {
      item.checked = !item.checked;
      this.$set(this.fwzlConfig, index, item);
      let configList = [];
      let configCodeList = [];
      this.fwzlConfig.forEach(item => {
        if (item.checked) {
          configList.push(item.name);
          configCodeList.push(item.code);
        }
      })
      this.config = configList.join(',');
      this.configCode = configCodeList.join(',');
    },
    // 选择看房时间
    selectLookTime (index) {
      const fwzlLookPeriod = JSON.parse(JSON.stringify(this.fwzlLookPeriod));
      fwzlLookPeriod.forEach((item, i) => {
        if (index === i) {
          item.checked = true;
          this.lookPeriod = item.name;
          this.lookPeriodCode = item.code;
        } else {
          item.checked = false;
        }
      })
      this.fwzlLookPeriod = fwzlLookPeriod;
    },
    // 选择是否有电梯
    selectLift (index) {
      const fwzlLift = JSON.parse(JSON.stringify(this.fwzlLift));
      fwzlLift.forEach((item, i) => {
        if (index === i) {
          item.checked = true;
          this.hasLift = item.code;
        } else {
          item.checked = false;
        }
      })
      this.fwzlLift = fwzlLift;
    },
    // 保存修改信息
    modifyPublishInfo () {
      if (!this.xqName || !this.areaSquare || !this.hxCx || !this.floor || !this.costMonthly || !this.costInfo) {
        uni.showToast({title: '请将必须信息填写完整！', icon: 'none'});
        return;
      }
			const fileList = this.$refs.files.fileList;
			fileList.forEach(item =>{
				this.fileIds.push(item.fileId)
			})
      const data = {
        uuid: this.uuid,
        userInfoId: this.userInfo.uuid,
        createUserId: this.userInfo.uuid,
        mc: this.xqName,
        bzdz: this.xqAddress,
        type: this.typeOptions[this.typeIndex[0]],
        draft: 0,
        areaSquare: this.areaSquare,
        shiNum: this.hxIndex[0] + 1,
        tingNum: this.hxIndex[1],
        weiNum: this.hxIndex[2] + 1,
        floor: this.floorIndex[0] + 1,
        floorTotal: this.floorIndex[1] + 1,
        orientation: this.fwzlOrientation[this.cxIndex].name,
        floorType: this.floorType,
        costType: this.costTypeCode,
        costMonthly: this.costMonthly,
        costInclude: '',
        picHome: this.fileIds[0],
        pics: this.fileIds.join(','),
        decoration: this.decoration,
        decorationCode: this.decorationCode,
        lightspot: this.lightspot,
        lightspotCode: this.lightspotCode,
        config: this.config,
        configCode: this.configCode,
        requirement: this.requirement,
        requirementCode: this.requirementCode,
        lookPeriod: this.lookPeriod,
        lookPeriodCode: this.lookPeriodCode,
        contactTel: this.phone,
        suitableNum: 2,   // 宜主人数
        checkinTime: '',  //入住时间
        elevator: this.hasLift,
        description: this.houseDesc,
        x: this.xqLongitude,
        y: this.xqLatitude,
        address: '浙江省宁波市奉化区',
        addressCode: '330213',
      }
      modifyPushRecord(data).then(res => {
        if (res.code === 0) {
          setTimeout(() => {
            const pages = getCurrentPages();
            const beforePage = pages[pages.length - 2];
            const beforePage2 = pages[pages.length - 3];
            beforePage.$vm.getHouseDetail(this.uuid);
            beforePage2.$vm.getPushRecordList();
            uni.navigateBack({
              delta: 1
            })
          }, 1000);
        }
      })
    }
  },
} 
</script>

<style lang="scss" scoped>
.publish {
  height: 100vh;
  overflow: auto;
  .title {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px;
  }
  .sub-title {
    font-size: 10px;
    font-weight: 200;
    color: #999999;
    margin-bottom: 5px;
  }
  .label {
    display: flex;
    align-items: center;
    .icon {
      width: 10px;
      height: 10px;
      margin-right: 2px;
    }
    .value {
      font-size: 13px;
      font-weight: 500;
      color: #333333;
    }
  }
  .house {
    height: calc(100% - 60px);
    overflow: auto;
    .house-info {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
      .cell {
        margin-top: 15px;
        border-bottom: 0.5px solid #e9e5e5;
        .cell-value {
          width: 100%;
          height: 35px;
          line-height: 35px;
          padding-left: 10px;
          font-size: 13px;
          font-weight: 400;
        }
      }
    }
    .house-image {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .house-detail {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
      .detail {
        .tags {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
    .house-desc {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
  }
  .publish-bth {
    width: calc(100% - 10px);
    background-color: #1676fe;
    position: absolute;
    bottom: 10px;
    left: 5px;
    z-index: 10;
  }
  .more-detail {
    height: 88vh;
    overflow: auto;
    background: #F8F8F8;
    .tags {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .decoration {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .light-spot {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .configure {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .required {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .look-time {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .lift {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 60px;
    }
    .save-btn {
      width: calc(100% - 10px);
      background-color: #1676fe;
      position: fixed;
      bottom: 10px;
      left: 5px;
    }
  }
  .popup-class {
    width: calc(100vw - 50px);
    padding: 15px 20px;
    .list {
      display: flex;
      margin-bottom: 10px;
      .title {
        width: 120px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        color: #333333;
        font-weight: 400;
      }
      picker-view {
        width: 100%;
        height: 50px;
        line-height: 50px;
      }
      .uni-select {
        width: 100%;
        height: 50px;
        line-height: 50px;
      }
    }
    .cost-type {
      margin-bottom: 85px;
    }
  }
}

.publish--elder {
  .title {
    font-size: calc(15px * $zlb-elder-font-scale);
  }
  .sub-title {
    font-size: calc(10px * $zlb-elder-font-scale);
  }
  .label {
    .icon {
      width: calc(10px * $zlb-elder-font-scale);
      height: calc(10px * $zlb-elder-font-scale);
    }
    .value {
      font-size: calc(13px * $zlb-elder-font-scale);
    }
  }
  .house { 
    .house-info {
      .cell {
        .cell-value {
          font-size: calc(13px * $zlb-elder-font-scale);
        }
      }
    }
    .house-detail {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
      .detail {
        .tags {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
}
</style>

<style>
.uni-tag {
  margin-right: 5px !important;
  /* #ifdef MP-WEIXIN */
  line-height: 32px !important;
  /* #endif */
  /* #ifdef MP-ALIPAY */
  line-height: 20px !important;
  /* #endif */
  margin-bottom: 10px;
  background-color: #e6eaf2 !important;
  border: none !important;
}
.input-value-border {
  border: none !important;
}
.input-arrow {
  display: none;
}
</style>