/**publishDetail // author：zhangyy // time:2023-03-23 // desc:采购需求详情 */
<template>
  <div class="publishDetail">
    <Button @click="$router.go(-1)">返回</Button>
    <Divider orientation="left"><b>牛只信息</b></Divider>
    <DescriptionList :col="1" style="margin: 30px 60px" :gutter="40">
      <Description term="发布时间:">
        {{ moment(newContentForm.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
      </Description>
      <Description term="联系人:">
        {{ newContentForm.contactName }}
      </Description>
      <Description term="联系方式:">
        {{ newContentForm.contactCell }}
      </Description>
      <Description term="消息标题:">
        {{ newContentForm.name }}
      </Description>      
      <Description :term="newContentForm.type == 1 ? '采购牛只类别:' : '销售牛只类别:'">
        {{ newContentForm.classifyOneName }}/{{ newContentForm.classifyTwoName }}/{{ newContentForm.classifyThreeName }}
      </Description>
      <Description term="意向采购单价:" v-if="newContentForm.type == 1">
        <b style="color: red">{{ newContentForm.price }}</b>
      </Description>
      <Description term="销售单价:" v-if="newContentForm.type == 2">
        <b style="color: red">{{ newContentForm.price }}</b>
      </Description>
      <Description :term="newContentForm.type == 1 ? '采购数量:' : '销售数量:'">
        {{ newContentForm.count }}
      </Description>
      <Description term="牛只重量:">
        <Tag color="blue">{{ newContentForm.weight }}</Tag>
      </Description>
      <Description term="牛只膘情:" v-if="newContentForm.type == 1">
        <Tag color="#B62D4A" v-for="item in newContentForm.fatInfo.split('#')">{{ item }} </Tag>
      </Description>
      <Description :term="newContentForm.type == 1 ? '采购地区:' : '销售地区:'">
        <Icon type="md-pin" color="#2db7f5" />
        <span v-if="newContentForm.type == 2"
          >{{ newContentForm.province }}-{{ newContentForm.city }}-{{ newContentForm.area }}</span
        >
        <span v-if="newContentForm.type == 1">{{ newContentForm.addressInfo }}</span>
      </Description>
      <Description term="发布天数:">
        <div>{{ newContentForm.validDays }}天</div>
      </Description>
      <Description term="牛只图片:" v-if="newContentForm.type == 2">
        <span
          v-for="(item, index) in newContentForm.imgList"
          :key="index"
          style="margin-right: 10px"
          @click="preCowImage(item)"
        >
          <img :src="item" style="max-width: 50%" />
        </span>
      </Description>
      <Description term="牛只视频:" v-if="newContentForm.type == 2">
        <div>
          <video style="max-width: 80%;max-height:800px" :src="item" :key="item" v-for="item in videoList" controls></video>
        </div>
      </Description>
      <Description :term="newContentForm.type == 1 ? '采购要求:' : '销售详情:'">
        <div v-html="newContentForm.dealContent" class="content_box"></div>
      </Description>
    </DescriptionList>
  </div>
</template>

<script>
import { Message, ImagePreview } from 'view-ui-plus'
import { defineComponent, reactive, getCurrentInstance, onMounted, ref } from 'vue'
import router from '@/router'
import { cow } from '@/request/api'
import moment from 'moment'

export default defineComponent({
  setup() {
    let newContentForm = ref({})
    const videoList = ref([])
    async function getNeedsDetail(id) {
      const params = {
        id: id,
      }
      await cow.getCattleDealInfo(params).then(res => {
        if (res.code == 101) {
          res.data.fat = []
          res.data.fat = res.data.fatInfo
          res.data.imgList = []
          res.data.imgList = res.data.imageUrl.split('#')
          if (res.data.videoUrl) {
            videoList.value = res.data.videoUrl.split('#')
          }
          newContentForm.value = res.data
        } else {
          Message.error(res.message)
        }
      })
    }

    function preCowImage(pic) {
      ImagePreview.show({
        previewList: [pic],
      })
    }

    onMounted(async () => {
      await getNeedsDetail(router.currentRoute.value.query.id) //获取采购需求
    })

    return {
      newContentForm,
      getNeedsDetail,
      moment,
      preCowImage,
      videoList,
    }
  },
})
</script>

<style lang="scss" scoped>
.publishDetail {
  padding: 1em;
}
</style>
<style lang="scss">
.publishDetail {
  background-color: #FFF;
  .content_box {
    width: 90%;
    img {
      max-width: 80%;
      max-height: 600px;
    }
    video {
      width: 100%;
    }
  }
  .ivu-description-term {
    font-weight: 550;
  }
  .ivu-description-detail {
    padding-left: 2em;
  }
}
</style>
