<template>
  <div class="adManage">
    <moduleView :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" @detail="detail" />

    <vxe-modal v-model="show" width="600" height="300" show-footer title="修改时间段">
      <div class="cont">
        <div class="label">时间段：</div>
        <el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
      </div>
      <template #footer>
        <div class="btn">
          <el-button plain @click="show = false">取消</el-button>
          <el-button type="primary" @click="updateHandle">新增</el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,ref  } from "vue";
  const { proxy } = getCurrentInstance();
  import goodsImg from "./components/goodsImg.vue";
  import equipList from "./components/equipList.vue";
  import rangTime from './components/rangTime.vue';
  import broadcastState from './components/broadcastState.vue'
  import {list,upDownShelves,detailHandle,updateTime} from '@/api/base/adManage'
  import Format from '@/benyun/utils/dateFormat'

  const timeValue = ref([])
  const show = ref(false)
  const formValue = ref()
  const config = ref({
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini',
        rules:{
          name:[{
            required: true, message: '请输入名称', trigger: 'blur'
          }]
        }
      },
      columns:[
        [{
          span:8,
          // label:'设备名称',
          labelWidth:1,
          prop:'text',
          component:'by-input',
          compConfig:{ 
            attr:{
              placeholder:'请输入广告名称、负责人、联系方式',
              prefixIcon:'vxe-icon-search'
            }
          }
        },
        {
          span:10,
          labelWidth:100,
          label:'申请时间',
          prop:'time',
          component:'by-date',
          compConfig:{
            attr:{
              startPlaceholder:'开始时间',
              endPlaceholder:'结束时间',
              // format:'yyyy-MM-dd',
              type:'datetimerange'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true,
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[
      //   {
      //   title:'广告ID',
      //   field:'planId',
      // },
      {
        title:'广告名称',
        isDetail:true,
        field:'planName',
      },
      {
        title:'广告图',
        field:'goodsLogo',
        component:shallowRef(goodsImg)
      },
      {
        title:'商品图片',
        field:'goodsImg',
        component:shallowRef(goodsImg)
      },
      {
        title:'广告负责人',
        field:'principalName'
      },
      {
        title:'联系方式',
        field:'principalTelephone'
      },
      {
        title:'上架状态',
        field:'onState',
        component:'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'上架',
              value:'上架',
              backgroundColor:'#f0f9eb',
              color:'#67c23a'
            },{
              label:'下架',
              value:'下架',
              backgroundColor:'#fef0f0',
              color:'#f56c6c'
            }]
          }
        }
      },
      {
        title:'时间段',
        field:'time',
        width:150,
        component:shallowRef(rangTime)
      },
      {
        title:'播放状态',
        field:'bState',
        width:150,
        component:shallowRef(broadcastState)
      },
      {
        title:'申请时间',
        field:'planCreateTime'
      },
      {
        title:'操作',
        action:true,
        plugins:[{
          name:'上架',
          event:{
            show:row => {
              return row.onState == '下架'
            },
            click:item => {
              upDownShelvesHandle(item.planId)
            }
          }
        },{
          name:'下架',
          event:{
            show:row => {
              return row.onState == '上架'
            },
            click:item => {
              upDownShelvesHandle(item.planId)
            }
          }
        },{
          name:'编辑',
          event:{
            click:item => {
              show.value = true;
              formValue.value = item;
              timeValue.value = [item.planStartTime, item.planEndTime];
            }
          }
        }]
      }]
    },
    modal:{
      tool:{
        tools:{
          return:true
        }
      },
      form:{
        attr:{
          width:'1000px',
          showType:'desc',
          labelWidth:'130px',
          itemCount:3
        },
        columns:[
          [{
            label:'广告名称',
            colspan:1,
            prop:'planName'
          }],
          [{
            label:'广告负责人',
            colspan:1,
            prop:'principalName'
          }],
          [{
            label:'联系方式',
            colspan:1,
            prop:'principalTelephone'
          }],
          [{
            label:'申请时间',
            colspan:1,
            prop:'planCreateTime'
          }],
          [{
            label:'开始时间',
            colspan:1,
            prop:'planStartTime'
          }],
          [{
            label:'结束时间',
            colspan:1,
            prop:'planEndTime'
          }],
          // [{
          //   label:'上下架状态',
          //   prop:'onState'
          // }],
          [{
            label:'广告图片',
            colspan:1,
            prop:'goodsLogo',
            showComp:true,
            component:shallowRef(goodsImg)
          },{
            label:'商品图片',
            colspan:2,
            prop:'goodsImg',
            showComp:true,
            component:shallowRef(goodsImg)
          }],
          [{
            label:'推广设备',
            prop:'planItems',
            colspan:3,
            showComp:true,
            component:shallowRef(equipList)
          }]
        ]
      }
    }
  })
  const load = ref(false)
  const isSearch = ref(false)
  const timeNum = ref(0);

  const upDownShelvesHandle = id => {
    load.value = true
    upDownShelves(id).then(res => {
      proxy.$message({
        message:'操作成功',
        type:'success'
      })
      load.value = false
      getList()
    }).catch(()=>{
      load.value = false;
    })
  }

  const updateHandle = () => {
    
    if(timeValue.value.length != 2){
      proxy.$message({
        showClose: true,
        message: '请选择时间段！',
      })
      return
    }
    load.value = true
    updateTime(
      {
        planId:formValue.value.planId,
        planStartTime: Format(timeValue.value[0],'yyyy-MM-dd HH:mm:ss'),
        planEndTime: Format(timeValue.value[1],'yyyy-MM-dd HH:mm:ss')
      }
    ).then(res => {
      load.value = false;
      proxy.$message({
        showClose: true,
        message: '修改成功',
        type: 'success'
      })
      show.value = false;
      getList()
    }).catch(()=>{
      load.value = false
    })
  }

  const detail = row => {
    // config.value.modal.tool.tools.save = true;
    delete config.value.modal.tool.tools.add;
    proxy.$refs.view.initFormTool();
    getDetailData(row.planId)
  }
  //详细
  const getDetailData = id => {
    load.value = true
    detailHandle(id).then(res => {
      load.value = false;
      proxy.$refs.view.setFormValue(res.data)
    }).catch(() => {
      load.value = false;
    })
  }
  const pagination = () => {
    if(isSearch.value){
      queryList();
    }else{
      getList()
    }
  }
  //列表请求（包含分页和搜素条件）
  const queryList = () => {
    isSearch.value = true;
    let data = proxy.$refs.view.getQuery();
    requestList(data);
  }
  const getList = () => {
    if(!proxy.$refs.view){
      if(timeNum.value > 5){
        return
      }
      setTimeout(()=>{
        getList()
      },500) 
      timeNum.value ++;
      return
    }
    timeNum.value = 0;
    isSearch.value = false;
    let data = proxy.$refs.view.getPage();
    requestList(data);
  }
  const requestList = data => {
    load.value = true;
    data.pageNum = data.pageNo;
    delete data.pageNo;
    if(data.time && data.time.length > 0) {
      data.startTime = data.time[0]
      data.endTime = data.time[1]
    }
    delete data.time;
    list(data).then(res => {
      load.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(()=>{
      load.value = false;
    })
  }
  nextTick(()=>{
    getList()
  })
</script>

<style lang="scss" scoped>
.adManage{
  width: 100%;
  height: 100%;
}
.cont{
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 30px;
  .label{
    width: 100px;
    text-align: right;
  }
}
</style>