<template>
  <div class="popup-config">
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="wrapper-inner">
          <div class="top">
            <img src="@/assets/img/chat/popup-top-bg.png" />
          </div>

          <div class='main'>
            <div class="row">
              <div class="col" v-for="(item, index) in popupConfig" :key="item.id">
                <div class="title">{{ index+1 }}.{{ item.tittle }}</div>

                <div v-for="(todo,idx) in item.list" :key="todo.cid">
                  <van-radio-group v-model="item.checked">
                    <div class='have'>
                      <van-radio :name="todo.cid"  @click="setChecked(index,todo.cid,todo.name)">{{todo.name}}</van-radio>
                      <input
                        v-if="todo.name ==='有' && todo.cid === item.checked"
                        v-model="item.platformAccount"
                        type="text" class='inputText'
                        placeholder="请填写账号"
                        :id="`33-${item.id}`"
                        @input="keyupVerification(`33-${item.id}`)"
                        maxlength="50"
                      >
                    </div>
                  </van-radio-group>

                <div  class="desc" v-if="idx !==0 && item.isImg && item.cusImg">
                  <div class="upload-box">
                    <div class="upload">
                      <img :src="item.platformAccountImg? item.platformAccountImg : defaultImg" class="upload-icon" :id="item.id">
                      <input
                        type="file"
                        :id="`1-${item.id}`"
                        class="uploadIt"
                        @change="getFiles($event,index,`1-${item.id}`)"
                        accept="image/*"
                      />
                    </div>
                    <img
                      v-if="item.platformAccountImg"
                      class='delImg'
                      src="@/assets/img/chat/del-img.png"
                      @click='delImg(index)'
                    >
                  </div>
                  <div class="tips">请上传LD图片，<span @click="imgPreview(item.img)">示例查看</span></div>
                </div>
                </div>
              </div>
            </div>

            <div class='submit' @click="submit">
              <van-button color="#00B1FE" round  :loading='loading' >提交</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { reactive, toRefs, ref ,computed} from 'vue'
import { Overlay, RadioGroup, Radio, Cell, CellGroup,Uploader,Button,ImagePreview ,Toast} from 'vant'
import { useStore } from 'vuex'
const { v4: uuidv4 } = require('uuid')
import { addLqbMemberPlatformIni,uploadFileImg } from '@/api/index.ts'
import {omit,cloneDeep} from 'lodash'
export default {
  components: {
    [Overlay.name]: Overlay,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [ImagePreview.name]: ImagePreview,
  },
  setup() {
    let store = useStore()
    let data = reactive({
      loading:false,
      defaultImg:require('@/assets/img/chat/upload-img.png'),
      checked: [],
      imgPreview:(url)=>{
        // data.show = false
        ImagePreview({
          images: [url],
          closeable: true,
          showIndex: false,
          className:'overlayStyle',
          teleport:"#myContainer",
          onClose() {
            // data.show = true
          },
        })
      },
      show:computed(()=>{
        if (store.state.me.info.isPopup >= 1) {
          return true
        }
        return false
      }),
      popupConfig: computed(()=>{
        let oldData = store.state.me.popupConfig
        let newArr =  oldData.map((item,index)=>{
          item.checked=''
          item.platformAccount ='',
          item.platformAccountImg='',
          item.cusImg= 0,
          item.select = '',
          item.list = [
            {
              cid:uuidv4(),
              name:'有',
            },
            {
              cid:uuidv4(),
              name:'无',
            }
          ]
          return item
        })
        console.log('newArr',newArr)
        return newArr
      }),

      setChecked:(index,cid,name)=>{
        data.popupConfig[index].checked = cid
        data.popupConfig[index].cusImg = 0
        if(name === '有') {
          data.popupConfig[index].cusImg = 1
          data.popupConfig[index].select = 1
        } else {
          data.popupConfig[index].select = 2
          data.popupConfig[index].platformAccount = ''
          data.popupConfig[index].platformAccountImg = ''
        }
      },
    })

    const getFiles = (e,index,fId) =>{
      if (!e.target.files.length) {
        return
      }
      Toast.loading({
        message: '图片上传中...',
        forbidClick: true,
      })
      let element = e.target.files[0]
      const fd = new FormData()
      fd.append('file', element)
      fd.append('toId', '')
      fd.append('flag', '1')
      fd.append('type', '')
      fd.append('fileName', element.name)
      console.log(e.target.files,'e.target.files')
      uploadFileImg(fd).then((res)=>{
        data.popupConfig[index].platformAccountImg = res.data[0].thumbnailPath
        document.getElementById(fId).value = ''
      }).catch((err) => {
        Toast('上传失败！')
        document.getElementById(fId).value = ''
      })
    }

    const delImg = (index) => {
      data.popupConfig[index].platformAccountImg = ''
    }

    const submit = ()=>{
      let cloneData = cloneDeep(data.popupConfig)
      const formData = JSON.parse(
        JSON.stringify(cloneData,["id","platformAccount","platformAccountImg"]).replace(
        /id/g,
        'accountLoginConfigId')
      )
      console.log(formData,'formData')
      let validator = true
      cloneData.map((els,i)=>{
        if ((els.select ===1 && !els.platformAccount)) {
          validator = false
        }
        if (els.select ===1 && els.isImg ===1 && !els.platformAccountImg) {
          validator = false
        }
        if (!els.select) {
          return validator = false
        }
      })
      console.log('validator:',validator)

      if (validator) {
        data.loading = true
        addLqbMemberPlatformIni({platformAccountInitDTOs:formData}).then((res) => {
          data.loading = false
          Toast('提交成功！')
          store.commit('me/update_popup',0)
        }).catch((err) => {
          data.loading = false
        })
      }
    }

    const keyupVerification = (id)=>{
      let val = document.getElementById(id)
      if (!val?.value) {
        return
      }
      val.value = val.value.replace(/[\W]/g,'')
    }

    return {
      ...toRefs(data),
      submit,
      getFiles,
      delImg,
      keyupVerification
    }
  },
}
</script>

<style lang="scss" scoped>
.popup-config {
  .wrapper {
    margin: 20px;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    &-inner {
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      .top {
        overflow: hidden;
        max-height: 100px;
        img {
          width: 100%;
        }
      }
      .main{
        min-height: 200px;
        max-height: 330px;
        overflow-y: auto;
        padding: 30px 30px 25px;
      }
      .row {
        min-height: 100px;
        .col{
          .title{
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
          }
          .have{
            margin-bottom: 20px;
            display: flex;
            .inputText{
              flex:1;
              width:100%;
              font-size: 14px;
              color: #04040F;
              padding:5px 10px;
              background:#F4F6F8;
              border-radius: 4px;
              border:none;
              outline: none;
              margin-left: 7px;
              &::-webkit-input-placeholder{
                color: #BBBCC1;
              }
            }
          }
          .desc{
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 15px;
            .upload{
              width: 60px;
              height: 60px;
              position: relative;
              .uploadIt{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                width: 60px;
                height: 60px;
                border: none;
                outline: none;
                opacity: 0;
              }
              &-box{
                position: relative;
              }
              img{
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }
            }
            .delImg{
              position: absolute;
              right: -9px;
              top: -9px;
              width: 19px;
              height: 19px;
            }
            .tips{
              margin-left: 10px;
              color: #C2C5CC;
              span{
                color: #00B1FE;
              }
            }
          }
        }
      }
      .submit{
        .van-button{
          width: 100%;
          min-width: 275px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.popup-config {
  .van-overlay {
    z-index: 1111;
  }
}
</style>