<template>

  <section class="screen flex">

    <!--  头部部分  -->
    <header class="personal-data-header flex-1 row">

      <aside class="personal-assets">
        <header class="row personal-assets-header">
          <aside class="personal-avatar-container">
            <header class="personal-header-info">头像</header>
            <section class="personal-upload-avatar">
              <v-upload size="big" @upload-next="updateAvatar" :src="user.head_pic" :trigger-image="false">
                <template v-slot:image="{trigger}">
                  <div @click="trigger" class="cursor-pointer personal-update-avatar center absolute">修改头像</div>
                </template>
              </v-upload>
            </section>
          </aside>
          <aside class="flex-1">
            <header class="personal-header-info">声音</header>
            <section class="personal-audio-container">
              <sound-recording
                  @upload-next="updateVoice"
                  :src="user.voicefile"
              ></sound-recording>
            </section>
          </aside>
        </header>

        <footer class="personal-assets-footer row between">

          <aside
            v-for="(item,index) in photoWallNumber"
            class="personal-assets-footer-item"
            :key="'footer-'+index"
          >
            <v-upload
                @upload-next="updatePhotoWallPool(index,$event)"
                :src="$store.getters.photoWall[index]"
            ></v-upload>
          </aside>

        </footer>


      </aside>
      <aside class="personal-info flex">
        <header class="personal-header-info rowACenter">
          <div class="flex-1">资料</div>
          <aside @click="switchEditMode" class="rowACenter personal-edit-icon cursor-pointer">
            <img src="../images/info.png" />
            <span>{{infoEdit?'保存资料':'编辑资料'}}</span>
          </aside>
        </header>
        <section class="flex-1 overflow personal-info-scroll">
          <scroll-view>
            <aside
                v-for="(item,index) in infoData"
                class="personal-info-item row"
                :class="{'personal-info-edit-item':infoEdit}"
                :key="'info-item-'+index"
            >
              <div class="personal-info-label">{{item.label}}:</div>
              <div class="personal-info-value flex-1"
                   :class="{'personal-info-placeholder': !infoDataValue[item.key].value}"
                   v-if="infoDataValue[item.key] && !infoEdit"
              >{{ infoDataValue[item.key].label || item.labelPlaceholder }}</div>
              <div v-else-if="infoEdit" class="flex-1 overflow">

                <v-address
                    v-if="LibComponent.address === item.component"
                    @change="changeAddress(item,$event)"
                >

                </v-address>
                <a-date-picker
                    v-else-if="LibComponent.date === item.component"
                    :default-value="infoDataValue[item.key].value"
                    :placeholder="item.placeholder"
                    class="personal-edit-input personal-edit-date"
                    @change="changeValue(item,$event)"
                />
                <a-select v-else-if="LibComponent.select === item.component"
                          class="personal-edit-input personal-edit-select"
                          :value="infoDataValue[item.key].value"
                          :placeholder="item.placeholder"
                          @change="changeValue(item,$event)"
                >
                  <a-select-option
                      v-for="(cItem,cIndex) in item.data"
                      :value="cItem.value"
                  >
                    {{cItem.label}}
                  </a-select-option>
                </a-select>

                <div v-else-if="LibComponent.textarea === item.component" class="personal-edit-input personal-edit-textarea-container">
                <textarea class="personal-edit-textarea screen"
                          :placeholder="item.placeholder"
                          :maxlength="item.maxLength"
                          v-model="infoDataValue[item.key].value"
                ></textarea>
                  <section class="personal-edit-textarea-length">{{infoDataValue[item.key].value ? infoDataValue[item.key].value.length  : 0}}/{{item.maxLength}}</section>
                </div>

                <!--    默认输入     -->
                <div v-else class="personal-edit-input">

                  <input type="text" class="screen" :placeholder="item.placeholder"
                         v-model="infoDataValue[item.key].value"
                         :disabled="item.disabled"
                  />
                </div>
              </div>
            </aside>
          </scroll-view>
        </section>
      </aside>

    </header>

    <!--  底部  -->
    <footer class="personal-data-footer row">
      <div
        v-for="(item,index) in footerData"
        :key="'footer-'+index"
        class="flex-1 rowCenter"
      >
        <img :src="item.icon" class="personal-footer-icon"  />
        <div class="flex-1">{{item.label}}</div>
        <div @click="triggerFooter(item.key && item.dataObject ? item.dataObject[user[item.key]]:undefined)" class="cursor-pointer personal-footer-button center">{{item.key && item.dataObject && item.dataObject[user[item.key]] ? item.dataObject[user[item.key]].label :'认证'}}</div>
      </div>
    </footer>

  </section>

</template>

<script>
import footerData from '../data/footer';
import mixins from '../mixins/index';
import {
  Select,
  DatePicker
} from 'ant-design-vue';
import {
  vAddress,
  scrollView,
  vUpload,
  soundRecording
} from '$components';

export default {
  name: "personal-data",
  data() {
    return {
      footerData
    }
  },
  mixins,
  components:{
    [Select.name]:Select,
    [Select.Option.displayName]:Select.Option,
    [DatePicker.name]:DatePicker,
    vAddress,
    scrollView,
    vUpload,
    soundRecording
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>

<style>
.personal-edit-select .ant-select-selector,.personal-edit-date .ant-input{
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.personal-edit-date .ant-input{
  height: 32px;
}

.personal-edit-date .ant-input::placeholder{
  color: rgba(255,255,255,0.5);
}

.personal-edit-select .ant-select-selection-item,.personal-edit-select .ant-select-arrow,.personal-edit-date .ant-calendar-picker-icon {
  color: #fff !important;

}
.personal-edit-date .ant-calendar-picker-clear{
  display: none;
}
</style>