<template>
  <div class="bodyBoxs">
    <div class="boxs">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :cell-style="rowStyle"
        :header-cell-style="headerStyle"
        :row-class-name="tableRowClassName"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="head"
          label="长图预览"
        >
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                @click="onSrcList(scope.row)"
                style="width: 40px; height: 40px"
                :src="scope.row.url ? scope.row.url : ''"
                :preview-src-list="srcList">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          label="更新时间"
        >
        </el-table-column>
        <el-table-column
          prop="updatedBy"
          label="更新人"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="warning" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <el-dialog
        title="编辑长图"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="长图">
            <el-upload
              class="upload-demo"
              :action="url"
              :multiple="true"
              accept="jpg/png"
              :on-success="upSuccess"
              :show-file-list="true"
              :on-remove="onremove"
              :file-list="fileList"
              :limit=10
              list-type="picture">
              <el-button class="myBtn" style="background:#317caf;color:#fff">选择图片</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  export default {
    data(){
      return{
        url:'https://h5.km-china.cn/index.php?s=imagesUpload',  //http://localhost/2022/7/3347_1j8nu0ymk45i/index.php?s=imagesUploadhttps://h5.km-china.cn/index.php?s=imagesUpload
        tableData : [],
        loading:false,
        page:1,
        pageSize:10,
        total:0,
        currentPage4:1,
        type:'0',
        form:{
          id:0,
          name:'',
          url:''
        },
        search:'',
        srcList:[],
        fileList:[],
        dialogVisible:false
      }
    },
    created(){
      this.getData()
    },
    methods:{
      onremove(res){
        for (var i = 0;i < this.fileList.length; i++){
          if (this.fileList[i].url == res.url){
            this.fileList.splice(i, 1);
            console.log(this.fileList)
          }
        }
      },
      upSuccess(e){
        if(e.code==0){
          this.form.url = e.data.url
        }else{
          this.$message(res.message);
        }
      },
      onSrcList(row){
        this.srcList = [row.url]
      },
      expData(){
        window.location.href = 'https://h5.km-china.cn/index.php?s=awardExport';// https://h5.km-china.cn http://localhost/2022/7/3347_1j8nu0ymk45i
      },
      rowStyle() {
        return "text-align:center;border:none;color:#727272";
      },
      headerStyle(){
        return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        console.log('点击了');
        this.page = val;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      edit(row){
        this.dialogVisible = true;
        this.form.id = row.id;
        this.form.name = row.name;
        this.form.url = row.url;
        this.fileList = [{url:row.url}]
      },
      submitData(){
        this.$api.setClothingLinkImage({
          id: this.form.id,
          name: this.form.name,
          url:this.form.url,
        }).then((res) => {
          this.loading = false;
          if(res.code==0){
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.getData()
            this.dialogVisible = false
          }else{
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      handleClose(){
        this.dialogVisible = false;
      },
      getData(){
        this.loading = true;
        this.$api.getClothingLinkImage({
          page: this.page,
          size: this.pageSize,
          type:this.type,
          search:this.search
        }).then((res) => {
          this.loading = false;
          if(res.code==0){
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.currentPage4 = res.data.current_page;
          }else{
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      }
    }
  }
</script>
<style scoped>
  .bodyBoxs{
    padding: 40px;
  }
  .boxs{
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }

</style>
