/**
  // author：zhangb
  // time:2023-01-09
  // desc:仓库中牛只
*/
<template>
  <div class="beefInStore">
     <!-- 筛选 -->
     <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="onStoreTabData.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">
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column label="规格重量" prop="weight" />
                <el-table-column label="牛只价格" prop="price" >
                  <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="success" @click="toSafe(scope.row.id)">上架</el-button>&nbsp;
                    <el-button  size="small" type="danger" @click="delBeef(true,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="所属分类" width="200"  align="center">
        <template #default="scope">
          {{ scope.row.classifyOneName}}/{{scope.row.classifyTwoName }}/{{scope.row.classifyThreeName  }}
        </template>
      </el-table-column>
      <el-table-column prop="previewMoney" label="看牛定金(元/头)"  align="center" >
        <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 prop="previewType" label="看牛模式" align="center">
        <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="牛只所在地" width="250" >
        <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="150"  fixed="right">
        <template  #default="scope">
          <el-button  size="small" type="primary" @click="editBeef(scope.row.id)">编辑</el-button>&nbsp;
          <el-button  size="small" type="danger" @click="delBeef(false,scope.row.id)">删除</el-button>&nbsp;
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page_style">
      <Page :total="onStoreTabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
    <!-- 确定框 -->
    <Modal v-model="showModal" title="提示" @on-ok="ok" @on-cancel="cancel">
        <p v-if="delStatus">确定要上架此商品吗？</p>
        <p v-if="!delStatus">确定要删除此商品吗？</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:'1'
    })

    let onStoreTabData = ref([])  // 列表数据
    let delStatus = ref(true)  // 区分删除和上架
    let del = ref(true)  // 区分删除的数据
    let delId = ref()  // 区分删除的数据

    //获取列表内容
    async function getData(){
      await cow.getCattleItemPage(filtInfoData).then(res =>{
        if (res.code == 101) {
          onStoreTabData.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(onStoreTabData.value.limit){
        filtInfoData.offset = (page -1) *  onStoreTabData.value.limit  //更新偏移量
        currentPage = page  //切换当前页码
        getData() 
      }
    }

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

    onMounted(()=>{
      getData() 
      getAllClassifyData()
    })

    return {
      onStoreTabData,filtInfoData,currentPage,classifyDataList,showModal,skuIds,delStatus,del,delId,getAllClassifyData,changeSelClassify,
      getData,changePage,moment
    }
  },
  methods: {
      //牛只上架
      toSafe(id){
        this.skuIds = []
        this.skuIds.push(id)
        this.delStatus = true
        this.showModal = true
      },
      // 确定上架
      async ok () {
        this.showModal = false
        if(this.delStatus){
          // 上架
          await cow.setToSale(this.skuIds).then(res =>{
            if (res.code == 101) {
              this.$message.success(res.message)
              this.getData()
            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          const cattleSpu ={
            id:this.delId,
            deleted:"1"
          }
          if(this.del){
            // 删除牛只
            await cow.updateCattleSku(cattleSpu).then(res =>{
              if (res.code == 101) {
                this.$message.success('删除成功')
                this.getData()
              }else{
                this.$message.error(res.message)
              }
            })
          }else{
            // 删除商品
            await cow.updateCattleSpu(cattleSpu).then(res =>{
              if (res.code == 101) {
                this.$message.success('删除成功')
                this.getData()
              }else{
                this.$message.error(res.message)
              }
            })
          }
        }
      },
      cancel () {
        this.showModal = false
      },
      // 编辑
      editBeef(id){
        this.$router.push('editBeef?id='+id)
      },
      // 删除
      async delBeef(val,id){
        this.delStatus = false
        this.showModal = true
        this.del = val  
        this.delId = id
      }
  }
})
</script>

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