<template>
  <vxe-modal v-model="mShow" width="70%" height="80%" title="审核广告计划" show-footer>
    <template #default>
      <el-descriptions v-loading="load" :column="2">
        <el-descriptions-item label="商品信息">
          <div class="goods-info">
            <el-image style="width: 60px; height: 60px" :src="goodsImgHandle(value.goodsImg)" fit="contain" />
            <div class="goods-txt">
              <div class="goods-title">{{ value.goodsName }}</div>
              <!-- <div class="goods-price">￥{{ value.goodsPrice }}</div> -->
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="推送海报">
          <div class="goods-info">
            <el-image style="width: 60px; height: 60px" :src="value.goodsLogo" fit="contain" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="广告名称">{{ value.planName }}</el-descriptions-item>
        <el-descriptions-item label="来源平台">{{ value.appName }}</el-descriptions-item>
       
        <el-descriptions-item label="申请商户">{{ value.commercialName }}</el-descriptions-item>
        <el-descriptions-item label="申请状态">{{ value.state }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ value.planCreateTime }}</el-descriptions-item>
      </el-descriptions>
      <div class="table-title">推广设备</div>
      <vxe-table show-overflow size="mini" :sync-resize="mShow" :data="value.planItems" v-loading="load">
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="equipmentName" title="设备名称"></vxe-column>
        <vxe-column field="addrCodeInfo" title="地区"></vxe-column>
        <vxe-column field="addrInfo" title="详细地址"></vxe-column>
      </vxe-table>
    </template>
    <template #footer>
      <div class="btn">
        <el-button type="danger" @click="btn(2)">不通过</el-button>
        <el-button type="primary" @click="btn(1)">通过</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script setup>
  import {detail,au} from '@/api/base/adPlan'
  import { computed,getCurrentInstance,ref,markRaw,shallowRef,defineEmits } from "vue";
  const { proxy } = getCurrentInstance();
  const emits = defineEmits(['successHandle']);
  const mShow = ref(false)
  const value = ref({})
  const load = ref(false)

  const setShow = v => {
    mShow.value = v
  }
  const setValue= data =>{
    loadData(data)
  }

  const btn = v =>{
    if(v === 2){
      proxy.$confirm('您确定拒绝该广告计划审核？', '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        handle(v)
      })
      .catch(() => {})
    }else{
      handle(v)
    }
    
  }
  const handle = v => {
    let data = {
      planId:value.value.planId,
      state:v
    }
    load.value = true
    au(data).then(() => {
      load.value = false;
      mShow.value = false;
      proxy.$message({
        message:'操作成功',
        type:'success'
      });
      emits('successHandle')
    }).catch(() => {
      load.value = false
    })
  }
  const goodsImgHandle = path => {
    let n = '';
    if(path) {
      try{
        path = JSON.parse(path);
        n = path.length > 0 ? path[0] : '';
      }catch(e){}
    }
    return n;
  }

  const loadData = v => {
    if(!v && !v.planId) return
    load.value = true
    detail(v.planId).then(res => {
      load.value = false;
      value.value = res.data
    }).catch(() => {
      load.value = false
    })
  }

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

<style lang="scss" scoped>
.goods-info{
  display: flex;
  align-items: center;
  .goods-txt{
    padding-left: 8px;
    .goods-title{
      font-size: 14px;
      color: #000;
    }
    .goods-price{
      font-size: 14px;
      color: #f00;
    }
  }
}
.table-title{
  font-size: 16px;
  padding-top: 24px;
  padding-bottom: 8px;
}
</style>