<template>
  <div class="contentList">
    <Input v-model="typesearchFilter.name" placeholder="请输入标题名称" style="width: 480px"></Input>

    <el-button type="primary" @click="changePage(1)">查询</el-button>

    <el-table v-loading="loading" :data="tabData.data" style="width: 100%; margin-top: 2em" border>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="消息名称" prop="cattleDeal.name"> </el-table-column>
      <el-table-column label="发布者" align="center" prop="cattleDeal.contactName"> </el-table-column>
      <el-table-column label="报价人" align="center" prop="contactName"> </el-table-column>
      <el-table-column label="报价人联系方式" align="center" prop="contactPhone"> </el-table-column>
      <el-table-column label="报价金额" align="center" prop="quotePrice"> </el-table-column>
      <el-table-column label="报价数量（头）" align="center" prop="quoteCount"> </el-table-column>
      <el-table-column label="报价时间" align="center" prop="addTime">
        <template #default="scope">
          {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="报价有效期(天)" align="center" prop="validTime"> </el-table-column>
      <el-table-column label="牛只图片" align="center" prop="imgUrl">
        <template #default="scope">
          <div>
            <img
              @click="previewImage({ urlList: scope.row.imgUrl.split('#'), 'initial-index': index })"
              style="max-width: 80px"
              v-for="(img, index) in scope.row.imgUrl.split('#')"
              :src="img"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="牛只视频" align="center" prop="validTime">
        <template #default="scope">
          <div>
            <video
              style="max-width: 80px"
              v-for="(videoitem, index) in scope.row.videoUrl.split('#')"
              @click="showVideo(videoitem)"
              :src="videoitem"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="scope">
          <!--按钮-->
          <!-- <el-button type="danger" size="small" @click="delContent(scope.row.id)">删除</el-button> -->
          <el-button size="small" @click="audit(scope.row, 6)" type="danger">审核拒绝</el-button>
          <el-button size="small" @click="audit(scope.row, 0)" type="primary">审核通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>

    <el-dialog v-model="videoShow" title="视频播放">
      <div style="text-align: center">
        <video :src="videoUrl" style="max-width: 780px" controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import previewImage from '../../components/imgPreview'
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { Modal } from 'view-ui-plus'
import moment from 'moment'
import { cow } from '@/request/api'
let typesearchFilter = reactive({ limit: 10, offset: 0 })
import { ElMessage } from 'element-plus'

let tabData = ref({})
const loading = ref(false)
//获取列表内容
async function getData() {
  loading.value = true
  await cow.querySaleQuoteWaitAuditList(typesearchFilter).then(res => {
    if (res.code == 101) {
      tabData.value = res || {}
    }
  })
  loading.value = false
}

let currentPage = ref(1)
//更改页码
function changePage(page) {
  if (tabData.value.limit) {
    typesearchFilter.offset = (page - 1) * tabData.value.limit //更新偏移量
    currentPage.value = page //切换当前页码
    getData() //获取广告数据
  }
}

async function audit(row, type) {
  loading.value = true
  await cow.saleQuoteAudit({ quoteId: row.id, status: type }).then(res => {
    ElMessage({
      message: res.message || '操作成功!',
      type: res.code == 101 ? 'success' : 'warning',
    })
    loading.value = false
    changePage(1)
  })
  loading.value = false
}

function delContent(id) {
  Modal.confirm({
    title: '温馨提示',
    content: '您确定删除当前内容吗?',
    onOk: async () => {
      // await content
      //   .DeleteContent({ id: id })
      //   .then(res => {
      //     if (res.code == 101) {
      //       ElMessage({
      //         message: res.message || '操作成功!',
      //         type: 'success',
      //       })
      //       this.changePage(1) //重新获取列表
      //     } else {
      //       ElMessage({
      //         message: res.message || '操作失败!',
      //         type: 'warning',
      //       })
      //     }
      //   })
      //   .catch(e => {
      //     ElMessage({
      //       message: e.message || '添加失败!',
      //       type: 'error',
      //     })
      //   })
    },
  })
}

const videoUrl = ref('')
const videoShow = ref(false)
function showVideo(url) {
  videoUrl.value = url
  videoShow.value = true
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.contentList {
  padding: 1em;
  .page_style {
    text-align: right;
    margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>
