<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="productName" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加
      </el-button>

      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getInfo" />
        </el-tooltip>
      </div>
    </div>
      <el-table
        :data="tableData"
        row-key="id"
        border>
        <el-table-column
          label="产品图片" align="center">
          <template slot-scope="{row}">
            <el-image
              style="width: 60px; height: 60px"
              v-if="row.viewImageUrl"
              :src="row.viewImageUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="排序" prop="sortNum" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="deleteImg(row)" type="danger" size="mini">
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form label-width="100px" label-position="right">
        <el-form-item label="产品名称">
          <el-input v-model="productName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="apis/upload/uploadProductImage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
        <el-input v-model="form.sortNum"></el-input>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBtn()">确 定</el-button>
      </div>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
  import {
    getProductImageAll,
    addProductImage,
  } from '@/api/productFile/productInfo.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'

  const form={
    idProduct:'',
    srcFileName:'',
    fileDescription:'',
    viewImageUrl:'',
    sortNum:'',
  }
  export default {
    name:'productImgList',
    components: {
      Cancledialog
    },
    data() {
      return {
        idProduct: '',
        productName:'',

        dialogStatus: 1,//1增加，2修改
        dialogTitle: '',
        dialogVisible: false,

        tableData:[],

        form:Object.assign({},form),

        imageUrl:'',
      }
    },
    mounted() {
      this.idProduct = this.$route.query.idProduct
      this.productName = this.$route.query.productName
      this.getInfo();
    },
    methods: {
      //获取列表
      getInfo() {
        const _that = this

        var data = {
          "idProduct": _that.idProduct
        }

        getProductImageAll(data).then(response => {
          console.log(response)
          const data = response.data
          _that.tableData = data
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //刷新变革
      tableRefresh(){
        //刷新变革
        this.getInfo()
      },
      //增加产品档案
      handleCreateAdd(){
        const _that = this
        _that.form=Object.assign({}, form),
          _that.form.idProduct = _that.idProduct;
          _that.dialogTitle = '增加产品档案'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;
        _that.nameTitle = '请选择'
        _that.imageUrl =''

      },

      //上传图片
      handleAvatarSuccess(res, file) {
        // console.log(res);
        // console.log(file);
        this.imageUrl = res.data[0];
        this.form.viewImageUrl = this.imageUrl
      },
      beforeAvatarUpload(file) {
        // console.log(file);
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        //
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },


      //增加图片
      addBtn(){
        const _that = this
        var printerTypeInfo =JSON.stringify(_that.form)
        var data = {
          "productImage": printerTypeInfo ,
        }
        // console.log(data);
        // return

        addProductImage(data).then(res => {
          // console.log(res);
          if(res.httpCode == 200){
            _that.dialogVisible = false
            _that.$message({
              message: '增加成功',
              type: 'success'
            });
            _that.tableRefresh();
          }else{
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })
      },

      //删除
      deleteImg(row){
        var _that = this;
        var personFileInfo = {
          id:row.id,
        }
        var params = {
          "productImage": JSON.stringify(personFileInfo),
        }

        var url = '/product/deleteProductImage';
        _that.$refs.confirmDialog.updataClick(params, url);
      }


    }
  }
</script>
<style>
  /*处理input type = number的上下箭头*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d1c7;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
