/**
  // author：zhangb
  // time:2023-05-04
  // desc:用户发布卖牛信息管理
*/
<template>
  <div class="pubSaleInfo">
     <!-- 筛选 -->
     <Row :gutter="8">
      <Col span="4">
        <Input v-model="filtInfoData.name" placeholder="请输入牛只标题" />
      </Col>
      <Col span="4">
        <Cascader placeholder="请选择牛只分类" :data="classifyDataList" change-on-select v-model="filtInfoData.classifyId" @on-change="changeSelClassify" />
      </Col>
      <Col span="3">
        <Select v-model="filtInfoData.status" disabled clearable placeholder="信息审核状态">
          <Option value="">全部</Option>
          <Option :value="1">待审核</Option>
          <Option :value="3">发布中</Option>
          <Option :value="2">已拒绝</Option>
          <Option :value="4">强制下架</Option>
          <Option :value="5">已过期</Option>
        </Select>
      </Col>
      <Col span="3">
        <DatePicker type="date" placeholder="请选择开始时间" v-model="filtInfoData.startDate" @on-change="changeStartDate"  />
      </Col>
      <Col style="display:inline-block;margin-top:5px">-</Col>
      <Col span="3">
        <DatePicker type="date" placeholder="请选择结束时间" v-model="filtInfoData.endDate" @on-change="changeEndDate" />
      </Col>
      <Col span="5">
        <Button type="primary" @click="getData">查询信息</Button>
      </Col>
    </Row>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="needTabData.data" border style="width: 100%; margin-top:20px;">
      <el-table-column type="index" label="序号" width="55" align="center" fixed="left" />
      <el-table-column label="发布时间" width="160" align="center">
        <template #default="scope">
          {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无'}}
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="100" prop="contactName" align="center"></el-table-column>
      <el-table-column label="联系电话" width="120" prop="contactCell" align="center"></el-table-column>
      <el-table-column label="信息标题" prop="name" width="200"></el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <Tag color="orange" v-if="scope.row.status == 4">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="green" v-if="scope.row.status == 3">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="red" v-if="scope.row.status == 2">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="blue" v-if="scope.row.status == 1">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="skyblue" v-if="scope.row.status == 5">{{ publishStatus(scope.row.status) }}</Tag>
        </template>
      </el-table-column>
      <el-table-column label="牛只分类"  width="200">
        <template #default="scope">
          {{ scope.row.classifyOneName}}/{{scope.row.classifyTwoName }}/{{scope.row.classifyThreeName  }}
        </template>
      </el-table-column>
      <el-table-column label="牛只规格重量" prop="weight" min-width="120">
        <template #default="scope">
          <Tag color="blue">{{ scope.row.weight }}</Tag>
        </template>
      </el-table-column>
      <el-table-column prop="buyPrice" label="意向价格" align="center" min-width="120">
        <template #default="scope">
          <b style="color:red">{{ scope.row.price }}</b>
        </template>
      </el-table-column>
      <el-table-column label="销售数量" min-width="120" align="center">
        <template #default="scope">
          {{  scope.row.count }}
        </template>
      </el-table-column>
      <el-table-column label="牛只图片" align="center" width="120">
        <template #default="scope">
          <img :src="scope.row.imageUrl" style="width:100%;"/>
        </template>
      </el-table-column>
      <el-table-column label="发布天数" align="center" width="100" prop="validDays"></el-table-column>
      <el-table-column label="操作" width="200"  fixed="right">
        <template  #default="scope">
          <Button class="opt_btn" size="small" type="primary" ghost @click="needsDetail(scope.row.id)" >查看详情</Button>
          <Button class="opt_btn" size="small" type="warning" @click="offSafeReason(scope.row,'下架')" v-if="scope.row.status == 4">下架原因</Button>
          <Button class="opt_btn" size="small" type="warning" @click="offSafeReason(scope.row,'拒绝')" v-if="scope.row.status == 2">拒绝原因</Button>
          <Button class="opt_btn" size="small" type="error" @click="offSafe(scope.row.id)" v-if="scope.row.status == 3">强制下架</Button>
          <Button class="opt_btn" size="small" type="success" @click="passPublish(scope.row.id)" v-if="scope.row.status == 1">审核通过</Button>
          <Button class="opt_btn" size="small" type="error" @click="refusePublish(scope.row.id)" v-if="scope.row.status == 1">审核拒绝</Button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page_style">
      <Page :total="needTabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref ,reactive, onMounted} from 'vue'
import { cow } from '@/request/api'
import { Message,Modal,Spin,Input } from 'view-ui-plus'
import moment from 'moment'
import {publishStatus} from '@/utils/system/filters'
import {useRoute} from 'vue-router'
export default defineComponent({
  components:{
    
  },
  setup() {
    const route = useRoute()
    let filtInfoData = reactive({ // 搜索
      limit:10,offset:0,type:2
    })

    let needTabData = ref([])  // 列表数据

    let refuseValue = ref('')
    let offSafeValue = ref('')
    let loading = ref(false)
    //获取列表内容
    async function getData(){
      loading.value = true
      await cow.getCattleDealPage(filtInfoData).then(res =>{
        if (res.code == 101) {
          needTabData.value = res
        }
      })
      loading.value = false
    }

    // 获取全部牛只分类内容
    let classifyDataList = ref([])  //分类列表数据
    async function getAllClassifyData(){
      await cow.getCattleClassify().then(res=>{
        if(res.code === 101){
          let finalData = rinseClassiftData(res.data)
          classifyDataList.value = finalData
        }
      })
    }
    // 清洗分类数据
    function rinseClassiftData(data){
      data = JSON.parse(JSON.stringify(data).replace(/name/g, 'label'))
      data = JSON.parse(JSON.stringify(data).replace(/id/g, 'value'))
      return data
    }
    
    // 改变选择的分类
    function changeSelClassify(val,arr){
      filtInfoData.classifyOne = arr[0]?arr[0].value:''
      filtInfoData.classifyTwo = arr[1]?arr[1].value:''
      filtInfoData.classifyThree = arr[2]?arr[2].value:''
    }

    let currentPage = ref(1)
    //更改页码
    function changePage (page) {
      if(needTabData.value.limit){
        filtInfoData.offset = (page -1) *  needTabData.value.limit  //更新偏移量
        currentPage = page  //切换当前页码
        getData() 
      }
    }

    // 搜索日期格式
    function changeEndDate(val){
      filtInfoData.endDate = val;
    }

    function changeStartDate(val){
      filtInfoData.startDate = val
    }

    // 审核通过
    async function passPublish(id){
      Modal.confirm({
        title: '温馨提示',
        content: '<p>该条发布确定通过审核?</p>',
        onOk: async () => {
          const params={
            id:id,
            status:3 
          }
          await cow.cattleDealAudit(params).then(res=>{
            if(res.code === 101){
              Message.success('审核通过！');
              getData()
            }
        })
        },
        onCancel: () => {
          Message.info('您已取消操作');
        }
      });
    }

    // 审核拒绝
    async function refusePublish(id){
      this.$Modal.confirm({
        title: '审核拒绝',
        render: (h) => {
          return h( Input, {
            size: "large",
            modelValue: refuseValue.value,
            autofocus: true,
            placeholder: '请输入拒绝原因',
            'onInput': async (event) => {
              refuseValue.value = event.target.value;
            },
          })
        },
        onOk: async () => {
          const params={
            id:id,
            status:2,
            reason:refuseValue.value
          }
          await cow.cattleDealAudit(params).then(res=>{
            if(res.code === 101){
              Message.success('拒绝成功！');
              getData()
            }
          })
        },
      })
    }

    // 下架原因
    function offSafeReason(item,title){
      console.log(item)
      let reason = ''
      if(title == '下架'){
        reason = item.offSaleReason
      }else{
        reason = item.refuseReason 
      }
      this.$Modal.info({
        title: `${title}原因`,
        content: `${reason }`
      });
    }

    //牛只下架
    function offSafe(id){
      this.$Modal.confirm({
        title: '下架原因',
        render: (h) => {
          return h( Input, {
            size: "large",
            modelValue: offSafeValue.value,
            autofocus: true,
            placeholder: '请输入下架原因',
            'onInput': async (event) => {
              offSafeValue.value = event.target.value;
            },
          })
        },
        onOk: async () => {
          const params={
            id:id,
            reason:offSafeValue.value
          }
          await cow.cattleDealoffSale(params).then(res=>{
            if(res.code === 101){
              Message.success('下架成功！');
              getData()
            }
          })
        },
      })
    }

    // 查看详情
    function needsDetail(id){
      this.$router.push({path:'/userPublishSellManage/publishDetail',query:{id:id}})
    }

    onMounted(()=>{
      filtInfoData.status = Number(route.path.charAt(route.path.length-1))
      getData() 
      getAllClassifyData()  //获取全部分类
      console.log(route.path);
    })

    return {
      needTabData,filtInfoData,currentPage,classifyDataList,publishStatus,offSafeValue,getAllClassifyData,moment,refuseValue,refusePublish,offSafeReason,
      getData,changePage,changeSelClassify,offSafe,needsDetail,changeStartDate,changeEndDate,passPublish,loading
    }
  },
})
</script>

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