@extends('layouts.base')
@section('title', trans('商品专辑编辑'))
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/albumEdit.css?time='.time())}}">
<div class="all">
  <div id="app" v-cloak>
    <el-dialog :visible>
    <el-form ref="form" label-width="400px">
      <div class="base_set">
        <el-form-item label="专辑名称">
          <el-input style="width: 40%;" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="专辑描述">
          <el-input type="textarea" v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="专辑封面">
          <div class="cover-pane">
            <div class="upload-boxed" v-if="form.covers.length" @click="openUploadImage">
              <img :src="form.covers[0]" alt="" >
              <div class="upload-boxed-text">点击重新上传</div>
            </div>
            <div class="upload-box" @click="openUploadImage" v-if="!form.covers.length">
              <div class="upload-box-member">
                <i class="el-icon-plus notcie_icon"></i><br>
              </div>
            </div>
            <div class="tip">建议尺寸: 正方形</div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    </el-dialog>
  <upload-multimedia-img :upload-show="coverImgShow" :type="type" sel-num="one" select="open" @replace="coverImgShow = !coverImgShow" @sure="selectedMaterial"></upload-multimedia-img>
  </div>
</div>
@include('public.admin.uploadMultimediaImg')
<script>
  const album_id = "{{ request()-> album_id }}"
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        album_id: album_id,
        form: {
          name: "",
          describe: "",
          covers: []
        },
        type: "",
        coverImgShow: false,
        info: false
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getAlbumDetailByShop') !!}", {
          album_id: this.album_id
        }).then(({
          data
        }) => {
          if (data.result) {
            this.form.name = data.data.album.name == null ? "" : data.data.album.name;
            this.form.describe = data.data.album.describe == null ? "" : data.data.album.describe;
            this.form.covers = data.data.album.covers == null ? [] : data.data.album.covers;
            this.info = true;
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      openUploadImage() {
        this.type = "1";
        this.coverImgShow = true;
      },
      // 上传图片
      selectedMaterial(name, image, imageUrl) {
        this.form.covers = [imageUrl[0].url]
      },
      saveData() {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.updateShopAlbum') !!}", {
          album_id: this.album_id,
          data: this.form
        }).then(({
          data
        }) => {
          console.log(data, 'data,result,msg');
          if (data.result) {
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
        })
      }
    }
  })
</script>
@endsection