<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input clearable standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg" v-model="msg.Title"
            label="标题" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input clearable standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg" v-model="msg.SubTitle"
            label="副标题" maxlength="20" />
        </div>
        <div class="col-6">
          <div class="full-width full-height flex justify-end items-center">
              <q-btn  size="sm" icon="add" color="accent"  label="新增"
              @click="add" />
              <q-btn  size="sm" icon="add" color="accent"  label="保存" class="q-ml-md"
              @click="setInfo" />
          </div>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="pagination" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" :data="msg.SlideShowList" :columns="columns" row-key="name">
        <template v-slot:body-cell-Image="props">
          <q-td>
            <div class="ItemImgDiv ">
                <q-img :src="props.row.Image" contain  spinner-color="white" style="height: 100%;height:100%" />
              </div>
          </q-td>
        </template>
        <template v-slot:bottom>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
              @click="Edit(props.row,props.rowIndex)" />
            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
              @click="del(props.rowIndex)" />
          </q-td>
        </template>
      </q-table>
      <editForm v-if="ShowForm" :type="editType" :save-obj="FormOption" @close="ShowForm=false" @save="getForm">
      </editForm>
    </div>
  </div>
</template>
<script>
  import {
    getB2BSlideShowInfo,
    setB2BSlideShowInfo
  } from '../../api/system/webkit'
  import editForm from "../../components/system/b2bindex-form"
  export default {
    meta: {
      title: "同业小程序配置"
    },
    components: {
      editForm
    },
    data() {
      return {
        pagination: {
          rowsPerPage: 0,
        },
        editType:0,
        ShowForm:false,
        FormOption:{},
        rowIndex:0,
        msg: {
          Title: "",
          SubTitle: "",
          SlideShowList: []
        },
        loading: false,
        columns: [{
          name: 'Sort',
          label: '排序',
          field: 'Sort',
          align: 'left'
        }, {
          name: 'Image',
          label: '图片',
          field: 'Image',
          align: 'left'
        }, {
          name: 'Path',
          label: '跳转路径',
          field: 'Path',
          align: 'left'
        }, {
          name: 'Remark',
          label: '描述',
          field: 'Remark',
          align: 'left'
        }, {
          name: 'optioned',
          label: '操作',
          field: 'MenuId'
        }],
      }
    },
    mounted() {
      this.getInfo()
    },
    methods: {
      
      //获取幻灯片配置
      getInfo() {
        this.loading = true;
        getB2BSlideShowInfo({}).then(res => {
          this.loading = false
          this.msg.SlideShowList = res.Data.List;
          this.msg.Title = res.Data.Title;
          this.msg.SubTitle = res.Data.SubTitle;
         
        }).catch(() => {
          this.loading = false
        })
      },
      setInfo(){
        setB2BSlideShowInfo(this.msg).then(res=>{
           if(res.Code==1){
              this.$q.notify({
                type :'positive',
                position :'top',
                message :res.Message
            })
            this.getInfo()
           }
        })
      },
      add(){
        this.editType=0
        this.ShowForm=true
        this.FormOption={}
      },
      Edit(row,index){
        this.rowIndex=index
        this.editType=1
        this.ShowForm=true
        this.FormOption=row
      },
      del(index){
        let that=this
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          that.msg.SlideShowList.splice(index,1)
          that.setInfo()
        })
        
      },
      getForm(val){
        this.ShowForm=false
        if(this.editType===0){
            this.msg.SlideShowList.push(val)
        }else if(this.editType===1){
          this.msg.SlideShowList.splice(this.rowIndex,1,val)
        }
        this.setInfo()
      }
    }
  }

</script>
<style lang="sass" scoped>
  @import url('~assets/css/table.sass')

</style>
<style scoped>
  .ItemImgDiv{
    width: 118px;
    height: 118px;
  }
</style>
