<template>
  <vxe-modal v-model="mShow" width="70%" height="80%" :title="'广告设置 - '+equipRow.equipmentName">
    <template #default>
      <moduleView :propConfig="config" ref="view" v-loading="modalLoad" @onRefresh="getList" @pagination="getList"/>
    </template>
  </vxe-modal>
</template>

<script setup>
  import { computed,getCurrentInstance,ref,markRaw,shallowRef,defineEmits } from "vue";
  import { adSetting,adList,adMove } from '@/api/base/equipment.js'
  import tableImg from "./tableImg.vue";
  const { proxy } = getCurrentInstance();
  const emits = defineEmits(['successHandle']);
  const equipRow=ref({})
  const mShow = ref(false)
  const timeNum = ref(0)
  const modalLoad = ref(false)
  const config = ref({
    attr:{
      calculateH:true
    },
    // search:{
    //   attr:{
    //     size:'mini'
    //   },
    //   columns:[
    //     [{
    //       span:14,
    //       labelWidth:100,
    //       // label:'扫描时间',
    //       prop:'time',
    //       component:'by-date',
    //       compConfig:{
    //         attr:{
    //           startPlaceholder:'开始时间',
    //           endPlaceholder:'结束时间',
    //           type:'datetimerange'
    //         }
    //       }
    //     }]
    //   ]
    // },
    tool:{
      tools:{
        // search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
      },
      columns:[
      // {
      //   title:'广告ID',
      //   field:'planId'
      // },
      {
        title:'广告名称',
        field:'planName'
      },
      {
        title:'图片',
        field:'goodsImg',
        component:shallowRef(tableImg)
      },
      {
        title:'排序',
        field:'sort',
        component:'by-input',
        compConfig:{
          attr:{
            type:'number'
          }
        }
      },
      {
        title:'操作',
        action:true,
        plugins:[{
          name:'保存',
          event:{
            click:item => {
              editAd(item)
            }
          }
        },{
          name:'移除',
          event:{
            click:item => {
              adMoveHandle(item)
            }
          }
        }]
      }
      ]
    }
  })
  const setShow = v => {
    mShow.value = v;
  }
  const setValue = v => {
    equipRow.value = v;
    getList()
  }

  const getList = () => {
    if(!proxy.$refs.view){
      if(timeNum.value > 5){
        return
      }
      setTimeout(()=>{
        getList()
      },500) 
      timeNum.value ++;
      return
    }
    timeNum.value = 0;
    let data = proxy.$refs.view.getPage();
    getAdData(data);
  }

  //获取广告列表
  const getAdData = data => {
    data.equipmentId = equipRow.value.equipmentId
    modalLoad.value = true
    adList(data).then(res =>{
      modalLoad.value = false;
      proxy.$refs.view.setTableValue(res.data.records);
      let page = {
        pageNo: res.data.current, //当前页
        pageSize: data.pageSize, //每页条数
        total: res.data.total //总条数
      };
      proxy.$refs.view.setPage(page)
    }).catch(()=>{
      modalLoad.value = false;
    })
  }
  //编辑广告
  const editAd = row => {
    modalLoad.value = true
    adSetting({itemId:row.itemId,sort:row.sort}).then(() =>{
      modalLoad.value = false;
      proxy.$message({
        message:'编辑成功！',
        type:'success'
      });
      // getList();
      emits('successHandle')
    }).catch(()=>{
      modalLoad.value = false;
    })
  }
  //移除
  const adMoveHandle = row => {
    proxy.$confirm('您确定删除该列广告信息?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      modalLoad.value = true;
      adMove({planItemIds:[row.itemId]}).then(() =>{
        modalLoad.value = false;
        proxy.$message({
          message:'删除成功！',
          type:'success'
        });
        getList();
        emits('successHandle');
      }).catch(()=>{
        modalLoad.value = false;
      })
    }).catch(()=>{})
    
  }

  defineExpose({
    setValue,setShow
  })
</script>

<style lang="scss" scoped>

</style>