/**
  // author：zhangb
  // time:2023-01-09
  // desc:销售中牛只
*/
<template>
  <div class="beefOnsaleList">
     <!-- 筛选 -->
     <Row :gutter="8">
      <Col span="5">
        <Input placeholder="请输入商品名称" v-model="filtInfoData.name" @on-change="getData" style="width: 95%" clearable>
        </Input>
      </Col>
      <Col span="4">
        <Cascader :data="classifyDataList" change-on-select v-model="filtInfoData.classifyId" @on-change="changeSelClassify" style="width:13rem;" />
      </Col>
    </Row>
    <!-- 表格部分 -->
    <el-table :data="onsaleTabData.data" border style="width: 100%; margin-top:20px;">
      <el-table-column type="expand">
          <template #default="props">
            <div style="width:90%; margin:1em auto;">
              <el-table :data="props.row.cattleSkuList" size="small">
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column label="规格重量" prop="weight" />
                <el-table-column label="牛只价格" >
                  <template #default="scope">
                    <Numeral :value="scope.row.price" format="0,0.00" style="color:#D64E47; font-weight:bold;">
                      <template #prefix>
                        <strong>¥</strong>
                      </template>
                    </Numeral>
                  </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" />
                <el-table-column label="库存数量(头)" prop="count" />
                <el-table-column label="起售量(头)" prop="quantity" />
                <el-table-column label="规格图片"  >
                  <template #default="scope">
                    <img :src="scope.row.imgUrl"  style="width: 5rem;"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200"  fixed="right">
                  <template  #default="scope">
                    <el-button  size="small" type="danger" @click="offSafe(scope.row.id)">下架</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column label="上架时间" align="center" width="170">
        <template #default="scope">
          {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="所属分类" align="center" width="200">
        <template #default="scope">
          {{ scope.row.classifyOneName}}/{{scope.row.classifyTwoName }}/{{scope.row.classifyThreeName  }}
        </template>
      </el-table-column>
      <el-table-column prop="previewMoney" label="看牛定金(元/头)" align="center" width="130">
        <template #default="scope">
          <Numeral :value="scope.row.previewMoney" format="0,0.00" style="color:#D64E47; font-weight:bold;">
            <template #prefix>
              <strong>¥</strong>
            </template>
          </Numeral>
        </template>
      </el-table-column>
      <el-table-column label="看牛模式" align="center" width="100">
        <template #default="scope">
          <Tag color="green" v-if="scope.row.previewType == 2">现场看牛</Tag>
          <Tag color="magenta" v-if="scope.row.previewType == 1">预约看牛</Tag>
        </template>
      </el-table-column>
      <el-table-column label="牛只所在地">
        <template #default="scope">
          <Icon type="md-pin" color="#2db7f5" /> 
          <span style="color:#999; font-size:12px;">{{ scope.row.province}}-{{ scope.row.city  }}-{{scope.row.area }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="200"  fixed="right">
        <template  #default="scope">
          <el-button  size="small" type="danger" @click="offSafe(scope.row.id)">下架</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="page_style">
      <Page :total="onsaleTabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
    <!-- 确定框 -->
    <Modal v-model="showModal" title="提示" @on-ok="ok" @on-cancel="cancel">
        <p>确定要下架此商品吗？</p>
    </Modal>
  </div>
</template>

<script>
import { defineComponent, ref ,reactive, onMounted} from 'vue'
import { cow } from '@/request/api'
import moment from 'moment'

export default defineComponent({
  components:{
    
  },
  setup() {
   
   let filtInfoData = reactive({ // 搜索
      limit:10,offset:0,
      name:'',
      classifyId:[],
      status:'3'
    })

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

    //获取列表内容
    async function getData(){
      await cow.getCattleItemPage(filtInfoData).then(res =>{
        if (res.code == 101) {
          onsaleTabData.value = res
        }
      })
    }

    // 获取全部牛只分类内容
    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:''
      getData()
    }

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

    const showModal = ref(false)
    const skuIds = ref([])

    onMounted(()=>{
      getData() 
      getAllClassifyData()  //获取全部分类

    })

    return {
      onsaleTabData,filtInfoData,currentPage,classifyDataList,showModal,skuIds,getAllClassifyData,
      getData,changePage,changeSelClassify,moment
    }
  },
  methods: {
      //牛只下架
      offSafe(id){
        this.skuIds = []
        this.skuIds.push(id)
        this.showModal = true
      },
      //确定下架
      async ok () {
        this.showModal = false
        await cow.setOffSale(this.skuIds).then(res =>{
        if (res.code == 101) {
          this.$message.success(res.message)
          this.getData()
        }else{
          this.$message.error(res.message)
        }
      })
      },
      cancel () {
        this.showModal = false
      }
  }
})
</script>

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