<template>
  <div class="bodyBoxs">
          <div style="margin-bottom: 15px;width: 440px">
            <el-input placeholder="请输入道具名称" v-model="search" class="input-with-select">
              <el-select style="width: 120px;" v-model="type" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="0"></el-option>
                <el-option label="街头酷盖" value="1"></el-option>
                <el-option label="高街时尚" value="2"></el-option>
                <el-option label="时髦职场" value="3"></el-option>
                <el-option label="雅痞帅气" value="4"></el-option>
                <el-option label="休闲舒适" value="5"></el-option>
                <el-option label="高级简约" value="6"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"  @click="getData"></el-button>
<!--              <el-button slot="append" style="border-left: rgb(220,223,230) solid 1px;border-radius: 0!important;" @click="exports">导出积分日志</el-button>-->
            </el-input>
          </div>
    <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="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="queryLink.name"
          label="所属归类"
        >
        </el-table-column>
        <el-table-column
          prop="clothingName"
          label="道具名称"
        ></el-table-column>
        <el-table-column
          prop="linkUrl"
          label="跳转地址"
        >
        </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.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="form.clothing_name"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="form.link_url"></el-input>
          </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{
        tableData : [],
        dialogVisible:false,
        loading:false,
        page:1,
        pageSize:10,
        form:{
          id:0,
          clothing_name:'',
          link_url:'',
          type:'街头酷盖'
        },
        total:0,
        currentPage4:1,
        type:'0',
        search:''
      }
    },
    created(){
      this.getData()
    },
    methods:{
      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();
      },
      edit(row){
        this.dialogVisible = true;
        this.form.id = row.id;
        this.form.type = row.queryLink.name
        this.form.clothing_name = row.clothingName;
        this.form.link_url = row.linkUrl;
      },
      submitData(){
        this.$api.setLink({
          id: this.form.id,
          link_url:this.form.link_url,
          clothing_name: this.form.clothing_name,
        }).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;
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData(){
        this.loading = true;
        this.$api.getLink({
          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>
