<template>
  <el-dialog title="新增客户图片" :close-on-click-modal="false" :visible.sync="open" width="700px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item :label="'用户编号'" prop="usercode">
        {{ info.userId }}
      </el-form-item>
      <el-form-item label="手机号" v-if="info.mobile">
        {{ info.mobile }}
      </el-form-item>
      <el-form-item label="昵称" v-if="info.nickname">
        {{ info.nickname }} 【{{ info.usercode }}】
      </el-form-item>
      <el-form-item label="头像" v-if="info.avatar">
        <image-avatar :src="info.avatar"/>
      </el-form-item>
      <el-form-item label="图片" prop="picture">
        <image-upload2 v-model="form.picture" :limit="6" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { vipTypeList } from '@/constant/statusMap'
import {batchUpdateUserPictures, listUserPicturesByUserId} from '@/api/xq/userPictures'

export default {
  components: {
  },
  data () {
    return {
      vipTypeList,
      open: false,
      title: '',
      form:{
        usercode: undefined,
        picture: undefined,
      },
      info:{
      },
      // 表单校验
      rules: {
        picture: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
      },
      buttonLoading: false,
      oldUserPictureList: [],
    }
  },
  created() {
  },
  methods: {
    init (item) {
      this.open = true;
      this.info = item;
      this.form.usercode = undefined
      this.form.picture = []
      listUserPicturesByUserId(item.userId).then(res => {
        this.oldUserPictureList = res.data || []
        if (this.oldUserPictureList.length > 0) {
          this.oldUserPictureList.forEach((item) => {
            this.form.picture.push({
              name: item.updateTime,
              ossId: item.id,
              path: item.picture,
              status: "success",
              uid: 1713801600193,
              url: item.picture,
            })
          })
        }

      })
    },
    // 表单提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const userPictures = []
          let pList = this.form.picture
          if (!Array.isArray(this.form.picture)) {
            pList = this.form.picture.split(',')
          }
          pList.forEach((item) => {
            const p = this.oldUserPictureList.find((it) => it.picture === item)
            if (!!p) {
              userPictures.push(p)
            } else {
              userPictures.push({
                userId: this.info.userId,
                picture: item,
              })
            }
          })
          this.buttonLoading = true;
          batchUpdateUserPictures(
            this.info.userId,
            userPictures
          ).then(data => {
            this.$modal.msgSuccess("保存图片成功");
            this.buttonLoading = false;
            this.open = false
            this.$emit('refreshDataList')
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      })
    },
  }
}
</script>
