<template>
  <view class="">
    <!-- <view class="top_box">
      <view class="item" :class="current==0?'active':''" @click="current=0">基本信息</view>
      <view class="item" :class="current==1?'active':''" @click="current=1">商机信息</view>
    </view> -->
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabLists" @click="changeCurrent" lineColor='#3274F9' :scrollable="false" lineWidth='40'
        inactiveStyle='color:#666' activeStyle="color:#3274F9"></u-tabs>
    </u-sticky>
    <u-skeleton :style="{'margin': skeleton?28+'rpx':0}" :loading="skeleton" :animate="true" title rows="6"
      rows-width="100%" rowsHeight="56">
      <u--form v-show="current==0" labelPosition="left" :model="formData" ref="archives">
        <view class="card">
          <view class="item">
            <view class="title">基本信息</view>
            <u-form-item labelWidth="auto" label="姓名" required prop="name" borderBottom>
              <u--input v-model="formData.name" :readonly="readonly" placeholder="请输入姓名"></u--input>
            </u-form-item>
            <u-form-item label="性别" required prop="sex" borderBottom>
              <u-radio-group v-model="formData.sex" :disabled="readonly" style="margin: 16rpx;">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'男'},{value:2,label:'女'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item label="年龄" required prop="age" borderBottom>
              <u--input v-model="formData.age" :readonly="readonly" placeholder="请输入年龄"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
              <u--input v-model="formData.id_card" :readonly="readonly" placeholder="请输入身份证号" type="idcard"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
              <u--input v-model="formData.phone" :readonly="readonly" placeholder="请输入手机号" type="number"></u--input>
            </u-form-item>
          </view>
        </view>
        <view class="card" style="margin-bottom: 0;">
          <view class="item">
            <view class="title">地区信息</view>
            <!-- <districtSelector ref="districtSelectorRef" :datas="formData" :readonly="true"></districtSelector> -->
            <u-form-item labelWidth="auto" label="地址" borderBottom>
              <u--textarea :value="nowAddress" autoHeight readonly></u--textarea>
            </u-form-item>
            <u-form-item labelWidth="auto" label="小队" required prop="address" borderBottom>
              <!-- <u--input v-model="formData.brigade_name&&formData.brigade_name[0].brigade_name" :readonly="readonly" placeholder="请选择小队"></u--input> -->
              <u--input v-model="formData.brigade_name" :readonly="readonly" placeholder="请选择小队"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
              <u--input v-model="formData.address" :readonly="readonly" placeholder="请输入详细地址"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="汽车是否能到家" required prop="highway" borderBottom>
              <u-radio-group v-model="formData.highway" :disabled="readonly" style="margin: 16rpx;">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <block value="智能手机">
              <u-form-item labelWidth="auto" label="是否使用智能手机" required prop="smart_phone" borderBottom>
                <u-radio-group v-model="formData.smart_phone" :disabled="readonly" style="margin: 16rpx;">
                  <u-radio :customStyle="{marginRight: '16px'}"
                    v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                    :name="item.value">
                  </u-radio>
                </u-radio-group>
              </u-form-item>
              <block v-if="formData.smart_phone>0">
                <u-form-item labelWidth="auto" label="微信号" required borderBottom>
                  <u--input v-model="formData.wechat" :readonly="readonly" placeholder="请输入微信号"></u--input>
                </u-form-item>
              </block>
            </block>
          </view>
        </view>
      </u--form>
      <residents v-show="current==0" ref="residentsRef" :readonly="true" :datas="formData"></residents>
      <view v-show="current==1">
        <block v-for="(item, index) in formData.datas" :key="'demand'+index+item.id">
          <view class="update_time">
            <view>更新时间:{{item.update_time}}</view>
            <view class="right">{{updateTo(item.update_time)}}</view>
          </view>
          <block>
            <breeding v-if="item.id==32" ref="demandRef32" :datas="item.datas" :readonly="true"></breeding>
            <plant v-if="item.id==7" ref="demandRef7" :datas="item.datas" :readonly="true"></plant>
            <store v-if="item.id==8" ref="demandRef8" :datas="item.datas" :readonly="true"></store>
            <deepProcessing v-if="item.id==9" ref="demandRef9" :datas="item.datas" :readonly="true"></deepProcessing>
            <thickProcessing v-if="item.id==10" ref="demandRef10" :datas="item.datas" :readonly="true"></thickProcessing>
          </block>
          <block>
            <houseRepair v-if="item.id==12" ref="demandRef12" :datas="item.datas" :readonly="true"></houseRepair>
            <houseDecoration v-if="item.id==13" ref="demandRef13" :datas="item.datas" :readonly="true"></houseDecoration>
            <houseRenovate v-if="item.id==14" ref="demandRef14" :datas="item.datas" :readonly="true"></houseRenovate>
            <houseTransaction v-if="item.id==15" ref="demandRef15" :datas="item.datas" :readonly="true"></houseTransaction>
          </block>
          <block>
            <banquetMarry v-if="item.id==17" ref="demandRef17" :datas="item.datas" :readonly="true"></banquetMarry>
            <banquetBirthday v-if="item.id==18" ref="demandRef18" :datas="item.datas" :readonly="true"></banquetBirthday>
            <banquetFullMoon v-if="item.id==19" ref="demandRef19" :datas="item.datas" :readonly="true"></banquetFullMoon>
            <banquetOther v-if="item.id==20" ref="demandRef20" :datas="item.datas" :readonly="true"></banquetOther>
            <banquetFuneral v-if="item.id==21" ref="demandRef21" :datas="item.datas" :readonly="true"></banquetFuneral>
          </block>
        </block>
        <u-empty v-if="formData.datas.length==0" icon="/static/img/empty/data.png" text="没有数据"></u-empty>
      </view>
    </u-skeleton>
  </view>
</template>

<script>
  import { Toast } from "../../libs/uniApi"
  import { informationAdd, informationDetails } from "@/api/information.js"
  import { comonentList } from '@/static/server/archives.js'
  import { getTimeAgo } from "@/utils/time.js"
  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
  import residents from "@/components/newArchives/residents.vue" // 常住人口
  import breeding from "@/components/newArchives/breeding.vue" // 种养殖
  import plant from "@/components/newArchives/plant.vue" // 种养殖
  import store from "@/components/newArchives/store.vue" // 开设店铺
  import deepProcessing from "@/components/newArchives/deepProcessing.vue" // 深加工
  import thickProcessing from "@/components/newArchives/thickProcessing.vue" // 粗加工
  import houseRepair from "@/components/newArchives/houseRepair.vue" // 修房
  import houseDecoration from "@/components/newArchives/houseDecoration.vue" // 装房
  import houseRenovate from "@/components/newArchives/houseRenovate.vue" // 翻新
  import houseTransaction from "@/components/newArchives/houseTransaction.vue" // 买卖房子
  import banquetMarry from "@/components/newArchives/banquetMarry.vue" // 婚宴
  import banquetBirthday from "@/components/newArchives/banquetBirthday.vue" // 寿宴
  import banquetFullMoon from "@/components/newArchives/banquetFullMoon.vue" // 满月酒
  import banquetOther from "@/components/newArchives/banquetOther.vue" // 其他庆祝宴
  import banquetFuneral from "@/components/newArchives/banquetFuneral.vue" // 白事
  export default {
    components: {
      districtSelector,
      residents,
      breeding,
      plant,
      store,
      deepProcessing,
      thickProcessing,
      houseRepair,
      houseDecoration,
      houseRenovate,
      houseTransaction,
      banquetMarry,
      banquetBirthday,
      banquetFullMoon,
      banquetOther,
      banquetFuneral
    },
    data() {
      return {
        listMap: new Map(),
        tabLists: [{
          name: '基本信息',
        }, {
          name: '商机信息'
        }],
        skeleton: true,
        readonly: true,
        current: 0,
        showDemandList: [],
        formData: {
          id_card: '',
          sex: '',
          name: '',
          phone: '', //电话
          highway: '', //汽车是否能到家
          smart_phone: '', //是否使用智能手机
          wechat: '', //微信号
          address: '', //家庭地址
          age: '', //年龄
          category_id: 1,
          category_child: 1,
          data_type: '1',
          datas: []
        },

      }
    },
    onLoad(options) {
      this.initInformationDetails({ id: options.id });
      this.initMap();
    },
    onShow() {},
    computed: {
      nowAddress() {
        let address = this.$store.state.app.userInfo;
        let str = '';
        address.province_name?str+=address.province_name:null;
        address.city_name?str+=address.city_name:null;
        address.area_name?str+=address.area_name:null;
        address.street_name?str+=address.street_name:null;
        address.village_name?str+=address.village_name:null;
        return str;
      }
    },
    methods: {
      initMap() {
        comonentList.forEach(item => {
          this.listMap.set(item.id, item.name);
        })
      },
      async initInformationDetails(id) {
        let res = await informationDetails(id);
        this.$u.sleep(100).then(()=>{
          this.skeleton = false;
          Object.keys(res.data).forEach(key => {
            this.formData[key] = res.data[key];
          })
        })
      },
      toastShow() {
        Toast('不可修改')
      },
      changeCurrent(e) {
        this.current = e.index;
      },
      updateTo(time){
        return getTimeAgo(time)
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .top_box {
    background-color: #fff;
    display: flex;

    .item {
      width: 175rpx;
      height: 53rpx;
      background: #F5F5F5FF;
      color: #999999FF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 28rpx;
    }

    .active {
      background: $theme-oa-color;
      color: #fff;
    }
  }

  .update_time {
    padding: 32rpx 28rpx 0 28rpx;
    display: flex;
    justify-content: space-between;
    .right{
      color: $theme-oa-color;
    }
  }
  
  
  
  .card {
    background-color: #fff;
    margin: 28rpx;
    padding: 28rpx;
    border-radius: 14rpx;

    .item {
      margin-top: 30rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .title {
        font-weight: 500;
        font-size: 34rpx;

        &::before {
          width: 8rpx;
          height: 26rpx;
          border-radius: 4rpx;
          background-color: #3175f9;
          content: "";
          display: inline-block;
          margin-right: 8rpx;
        }
      }
    }

    .btn {
      margin-top: 32rpx;
      // margin-bottom: 40rpx;
      width: 100%;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }
  }

  .delete {

    margin: 22rpx 0;

    // margin-bottom: 40rpx;

    width: 100%;

    height: 64rpx;

    line-height: 64rpx;

    background: #f56c6c;

    border-radius: 14rpx;

    font-size: 28rpx;

    color: #fff;

    text-align: center;

  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .demand {
    margin-top: 40rpx;
    margin-bottom: 50rpx;
  }
</style>