pk-mall/src/view/evaluate/index.vue

<template>
  <div class="login-wrapper">
    <div>
      <indexHeaders/>
    </div>
    <div class="boxs">
      <el-dialog v-model="tcFlag" :show-close="true" align-center title="提示">
        <div class="success">
          <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/success-icon.png">
        </div>
        <div class="tetemp_idsxts">{{texts}}</div>
      </el-dialog>
    </div>
    <el-dialog v-model="schemeNameFlag" :show-close="true" align-center title="方案命名" style="width: 708px">
      <div class="input-s" style="display: flex;padding: 0 100px;line-height: 30px">
        <div style="margin-right: 20px">请命名本次方案</div>
        <el-input v-model="schemeName"></el-input>
      </div>
      <div class="buttons">
        <div @click="schemeNameFlag=false">取消</div>
        <div @click="submits" style="color: #fff;border: none;background-color: #4171B3">保存</div>
      </div>
    </el-dialog>
    <el-dialog v-model="examinFlag" :show-close="true" @close="Clears" align-center title="查看方案" style="width: 708px">
      <div class="scheme">
        <div class="scheme-tops">
          <div class="scheme-name">方案商品</div>
          <div @click="checkGoodsTap">
            <div class="scheme-name" @click="disFlag=false" v-if="!checkGoodsFlag" style="color: #4171B3">编辑</div>
            <div style="display: flex">
              <div class="scheme-name" @click.stop="checkGoodsFlag=false;disFlag=true" v-if="checkGoodsFlag" style="color: #4171B3;margin-right: 20px">完成</div>
              <div class="scheme-name" @click.stop="deletes()" v-if="checkGoodsFlag" style="color: #4171B3">删除</div>
            </div>

          </div>
        </div>
        <div class="examin-content">
          <div class="examin-list" v-for="(item,index) in goods.arr" @click="checksSel(item)" :key="index">
            <div class="check" v-if="checkGoodsFlag">
              <div class="check-icon" v-if="item.flag">
                <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/check.png">
              </div>
              <div v-else>
                <div class="boxs"></div>
              </div>
            </div>
              <div class="examin-goods">
                <img :src="item.logo[0]">
              </div>
            <div class="examin-list-right">
              <div class="examin-name">{{ item.name }}</div>
              <div class="examin-rule">{{ item.sku }}</div>
<!--              <div class="examin-money" style="display: flex">-->
<!--                {{item.num}}/¥{{ item.amount }}/¥{{item.amount_total}}-->

<!--              </div>-->
              <div style="margin-top: 20px">
                <div class="input_s" >
                  <div>采购单价</div>
                  <div class="" style="color:#EA2813;margin-left: 10px">¥{{ item.amount }}</div>
                  <div style="margin-left: 20px">采购数量</div>
                  <div style="display: flex;margin:1px 0 0 20px;">
                    <div class="add-icons" @click.stop="!disFlag?addNum(item):''" style="color: #333!important;" >+</div>
                    <el-input :disabled="disFlag" v-model="item.num" ></el-input>
                    <div class="del-icons" @click.stop="!disFlag?delNum(item):''" style="color: #333;margin-left: 20px" >-</div>
                  </div>
                </div>
                <div class="input_s" >
                  <div>安装单价</div>
                  <div class="" style="color:#EA2813;margin-left: 10px">¥{{ item.amount_install }}</div>
                  <div style="margin-left: 20px">安装数量</div>
                  <div style="display: flex;margin:0 0 0 20px;">
                    <div class="add-icons" @click.stop="!disFlag?addInstallNum(item):''"  style="color: #333!important;" >+</div>
                    <el-input :disabled="disFlag" v-model="item.num_install" ></el-input>
                    <div class="del-icons" @click.stop="!disFlag?delInstallNum(item):''"  style="color: #333;margin-left: 20px" >-</div>
                  </div>
                </div>
              </div>
              <div style="color: #EA2813">总计:¥{{item.amount_total}}</div>
            </div>
          </div>
          <div class="pages">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalNumber1"
                class="mt-4"
                :page-size="limit1"
                @current-change="handleCurrentChange1"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="schemeFlag"  :show-close="true" align-center title="我的方案" style="width: 708px">
      <div class="scheme">
        <div class="scheme-tops">
          <div class="scheme-name" style="flex: 0 0 150px;text-align: center">方案名称</div>
          <div class="scheme-time" style="margin-left: 50px">
            <div>创建时间</div>
            <div class="sort-icon">
              <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/sort-icon.png">
            </div>
          </div>
          <div class="scheme-name">操作</div>
          <div class="scheme-name" style="    text-align: right; flex: 0 0 50px;">分享</div>
        </div>
        <div class="scheme-content">
          <div class="scheme-list" v-for="(item,index) in schemeLists.arr" :key="index">
            <div class="scheme-text overflow1" style="flex: 0 0  150px;text-align: center">{{ item.name }}</div>
            <div class="scheme-time" style="flex: 1;margin-left: 30px">{{ item.createtime }}</div>
            <div class="scheme-time scheme-flex" style="margin-right: 30px">
              <div @click.stop="routeTaps('/evaluateDetail',item.id)">查看方案</div>
              <div class="line"></div>
              <div @click="schemeShop(item)">使用方案</div>
              <div class="line"></div>
              <div @click="deletesTaps(item.id)">删除</div>
            </div>
            <div class="scheme-time" @click="shares(item.id,item.name)">
              <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-share.png">
            </div>
          </div>
          <div class="pages">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalNumber"
                class="mt-4"
                :page-size="limit"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="evaluate">
      <div class="evaluate-goods">
        <div class="evaluate-list" v-show="categoryGoods.arr" v-for="(item,index) in categoryGoods.arr" :key="index">
          <div class="evaluate-rule" v-if="item.goods!=''" @click="changeFatherClick(index,item)">
            <div>{{item.name}}</div>
            <div>{{item.flag?'-':'+'}}</div>
          </div>
          <div class="evaluate-gds" v-if="item.flag && item.goods!=''">
            <div class="evaluate-img">
              <img :src="showImg.arr.logo[0]">
            </div>
            <div class="evaluate-contents">
                <div class="evaluate-lists" v-for="(items,indexs) in item.goods" :key="indexs">
                <div class="evaluate-rules" @click.stop="changeClick(indexs,items,item)">
                  <div class="overflow1">{{items.name}}</div>
                  <div>{{items.flag?'-':'+'}}</div>
                </div>
                <div class="evaluate-goods-rules">
                  <div class="flex-views" v-for="(size,sizeIndex) in items.size" v-if="items.sku!='' && items.flag" :key="sizeIndex">
                    <div style="flex: 0 0 40px;margin-right: 10px;">{{ size.type }}</div>
                    <div class="goods-rule" v-for="(sizes,sizeIndexs) in size.names" @click.stop="checkRule(size,sizes,sizeIndexs,sizeIndex,items)" :key="sizeIndexs">
                      <div class="goods-rule-name overflow1" :class="sizes.check==true?'classIndex':''">
                          {{ sizes.name }}
                      </div>
                    </div>
                  </div>
                  <div
class="evaluate-goods-rules"
v-if="items.flag"
                       style="margin:0;border-bottom: none; justify-content: space-between;display: flex;padding: 10px 0">
                    <div>
                      <div>采购单价：¥{{eval_adds.arr.amount}}/台</div>
                    </div>
                    <div class="sum" style="margin-left: 10px">
                      <div>采购数量</div>
                      <div style="display: flex;margin:10px 0 0 10px;">
                        <div class="add-icons" @click.stop="addSum(eval_adds.arr)">+</div>
                        <el-input @blur="blurs" v-model="eval_adds.arr.num"></el-input>
                        <div class="del-icons" @click.stop="delSum(eval_adds.arr)">-</div>
                      </div>
                    </div>
                    <div v-if="eval_adds.arr.is_ni==1">
                      <div>安装单价：¥{{eval_adds.arr.amount_install}}/台</div>
                    </div>
                    <div class="sum" style="margin-left: 10px" v-if="eval_adds.arr.is_ni==1">
                      <div>安装数量</div>
                      <div style="display: flex;margin:10px 0 0 10px;">
                        <div class="add-icons" @click.stop="addSumInstall(eval_adds.arr)">+</div>
                        <el-input @blur="blurs" v-model="eval_adds.arr.num_install"></el-input>
                        <div class="del-icons" @click.stop="delSumInstall(eval_adds.arr)">-</div>
                      </div>
                    </div>
                  </div>
                  <div class="confirms" @click.stop="shopSub(eval_adds.arr)" v-if="items.flag && addSub==true">添加</div>
                  <div class="confirms colorStyles" v-if="items.flag && addSub==false">暂无库存</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="evaluate-right" v-show="categoryGoods.arr!=''">
        <div class="evaluate-text" @click="schemeFlag=true">
          <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-text1.png">
        </div>
        <div class="evaluate-text1">
          <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-text2.png">
          <div class="kf" @click="serviceTap">
            <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/kf-icon.png">
          </div>
          <div class="evaluate-right-money">
              <div class="money">¥<span style="font-size: 34px">{{ cartGoods.arr.total?Math.floor(cartGoods.arr.total* 100)/ 100:0 }}</span></div>
          </div>
        </div>
        <div class="evaluate-bottom">
          <div class="evaluate-titles">
            <div class="shopping">
              <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-shop.png">
            </div>
            <div class="shopping-text">已选产品</div>
            <div class="manage" style="margin-right: 20px" v-if="checkFlag==false" @click="checkFlag=true">完成</div>
            <div class="manage" @click="checkFlag=!checkFlag">管理</div>
          </div>
          <div class="shopping-content">
            <div v-for="(item,index) in cartGoods.arr.goods" :key="index">
              <div class="shopping-list" v-if="item.num!=0 && item.install_num!==0">
                <div class="check" v-if="!checkFlag" @click.stop="shopChecks(item)">
                  <div class="check-icon" v-if="item.checks">
                    <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/check.png">
                  </div>
                  <div v-else>
                    <div class="boxs"></div>
                  </div>
                </div>
                <div class="check" v-else style="width: 20px">
                </div>
                <div class="shopping-left" v-if="item.logo">
                  <img :src="item.logo[0]">
                </div>
                <div class="shopping-right">
                  <div class="goods-name overflow2">{{item.name}}</div>
                  <div class="goods-rule">{{item.sku}}</div>
                  <div class="shopping-spec">
                    <div class="money">采购单价：{{item.amount}}</div>

                  </div>
                  <div class="shopping-spec">
                    <div class="sum">购买数量：{{item.num}}</div>
                    <div class="sum" style="display: flex;margin-left: 15px">
                      <div @click.stop="addSums(item,index)" class="add-icons">+</div>
                      <el-input @keyup="keys(item)" @blur="updateBlur(item)" v-model="item.num" ></el-input>
                      <div @click.stop="delSums(item,index)" class="del-icons">-</div>
                    </div>
                  </div>
                  <div class="shopping-spec" v-if="item.is_ni==1">
                    <div class="money">安装单价：{{item.amount_install_single}}</div>

                  </div>

                  <div class="shopping-spec" v-if="item.is_ni==1">
                    <div class="sum">安装数量：{{item.num_install}}</div>
                    <div class="sum" style="display: flex;margin-left: 15px">
                      <div @click.stop="addSumInstalls(item,index)" class="add-icons">+</div>
                      <el-input @blur="updateBlur(item)" v-model="item.num_install"></el-input>
                      <div @click.stop="delSumInstalls(item,index)" class="del-icons">-</div>
                    </div>
                  </div>

                  <div class="money-all">
                    共计：<span>¥{{ item.amount_total }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="shopping-buttons" v-if="checkFlag">
            <div class="shopping-button flex-s " @click="share">
              <div class="share ">
                <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-share.png">
              </div>
              <div>分享</div>
            </div>
            <div class="shopping-button" @click="schemeNameFlag=true">保存方案</div>
            <div class="shopping-button pay" @click="pay">立即支付</div>
          </div>
          <div class="shopping-buttons" v-else style="margin: 20px 0 0 70px">
            <div class="shopping-button" @click.stop="checkAll">全选</div>
            <div class="shopping-button pay" @click.stop="delete_goods" style="margin-left: 30px">删除</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <RightSliderBar :navIndexs="0"/>
  </div>
  <Footer/>
</template>

<script setup>
// 记录访问次数

import { provide, reactive, ref, onUnmounted, onMounted } from 'vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'

import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import { getUrlParams2, isLogin, rouseService } from '@/utils'
import {
  amount_s,
  calculate,
  category,
  deleteGoods,
  programme_del,
  programme_detail, programme_detail1,
  programme_list,
  submit_calulate, updateProGramme, user_lsp
} from '@/api/menu1'
import { ElMessage, ElMessageBox } from 'element-plus'
import { router } from '@/router'
import {useRouter} from "vue-router";
let disFlag=ref(true)
const Clears=()=>{
  disFlag.value=true
  checkGoodsFlag.value=false
}
// 根据sku计算商品
const getGoodsAmount = (...item) => {
  const data = {
    sku: item[0],
    num: item[1],
    num_install: item[2]
  }
  amount_s(data).then((res) => {
    console.error(eval_adds.arr)
    eval_adds.arr.amount = res.data.amount
    eval_adds.arr.amountKill = res.data.amount

    eval_adds.arr.amount_install = res.data.amount_install

  })
}
const addNum=(item)=>{
  item.num++
  goodsAmounts(item)
}
if (localStorage.getItem('USER__INFO__')) {
  user_lsp().then((res) => {
  })
}
// 根据商品计算方案的价格
const goodsAmounts = (item) => {
  console.error(item)
  const data = {
    skuid: item.sku_id,
    num: item.num,
    num_install: item.num_install,
    pid:item.programme_id
  }
  updateProGramme(data).then((res) => {
    console.error(res)
  })
}
const share = () => {
  if (cartGoods.arr == '') {
    ElMessage.error('请选择产品')
    return
  }
  const list = schemeLists.arr
  setTimeout(() => {
    shares(list[0].id, list[0].name)
  }, 50)
}
const shares = (id, name) => {
  console.error(id,name)
  const windows = window.location
	  const url = windows.protocol + '//' + windows.host +'/evaluateDetail'
  console.error(url)
	  // 创建input标签
	  const input = document.createElement('input')
	  // 将input的值设置为需要复制的内容
  input.value = '【屏酷】打开链接查看方案,方案名称'+ ' '  + name + '   ' + url + '?id=' + id+'&share=1'
	  // 添加input标签
	  document.body.appendChild(input)
	  // 选中input标签
	  input.select()
	  // 执行复制
	  document.execCommand('copy')
	  // 移除input标签
	  document.body.removeChild(input)
	   ElMessage.success('复制分享链接成功')
}
const page = ref(1)
const limit = ref(10)
const totalNumber = ref(null)
const handleCurrentChange = (size) => {
  page.value = size
  programme_lists()
}

const page1 = ref(1)
const limit1 = ref(10)
const totalNumber1 = ref(null)
const handleCurrentChange1 = (size) => {
  page.value = size
  selScheme()
}
const schemeNameFlag = ref(false)
const checkGoodsFlag = ref(false)
const schemeFlag = ref(false)
const examinFlag = ref(false)
const tcFlag = ref(false)
const schemeName = ref('')
const texts = ref('保存成功~')
const checkFlag = ref(true)
const checksFlag = ref(false)
const schemeShop = (item) => {
  console.error(item)
  const data = {
    frm: 1,
    form: {},
    flag: false
  }
  for (let i = 0; i < item.goods.length; i++) {
    if (item.goods[i].num > 0) {
      data.form[item.goods[i].sku_id] = {
        num: item.goods[i].num,
        num_install: item.goods[i].num_install ?
          item.goods[i].num_install : 0
      }
      data.flag = true
    }
  }
  if (data.flag == true) {
    localStorage.setItem('order', JSON.stringify(data))
    router.push('/user/order/submit')
  }
}
const routeTaps=(url,id)=>{
  const $router=useRouter()
  router.push({path:url,query:{id:id}})
}
const serviceTap = () => {
  rouseService()
}
const datas = {
  frm: 1,
  form: {}
}
const pay = () => {
  const data = {
    frm: 1,
    form: {}
  }
  data.form = arr.sku
  for (const i in data.form) {
    if (data.form.hasOwnProperty(i)) {
      if (data.form[i].num == 0) {
        Reflect.deleteProperty(data.form, i)
      }
    }
  }
  if (JSON.stringify(data.form) == '{}') {
    ElMessage.error('请选择商品')
    return
  }
  localStorage.setItem('order', JSON.stringify(data))
  router.push('/user/order/submit')
}
onMounted(() => {
  const url = getUrlParams2(window.location.href)
  if (localStorage.getItem('USER__INFO__')) {
    programme_lists()
    getCateList()
  }
  if (url.id) {
    // 如果用户没登录的时候记录地址
    if (localStorage.getItem('USER__INFO__')) {
      programme_details1(url.id)
      programme_lists()
    } else {
      programme_details1(url.id)
      const urls = window.location.href
      localStorage.setItem('redirectUrl', JSON.stringify(urls))
    }
  }
})
const shareUpdateData = (data) => {
  if (data) {
    for (let i = 0; i < data.length; i++) {
      arr.sku[data[i].sku_id] = { num: data[i].num, num_install: data[i].num_install ? data[i].num_install : 0 }
    }
  }
	 const formData = new FormData()
	 formData.append('sku', JSON.stringify(arr.sku))
	 skusSub.value = arr.sku
	 calculate(formData).then((res) => {
	   if (res.code == 1) {
	     for (let i = 0; i < res.data.goods.length; i++) {
	       res.data.goods[i].checks = false
	     }

	     cartGoods.arr = res.data
	   } else {
	     ElMessage.error(res.msg)
	   }
	 })
}
const programme_details1 = (id) => {
  const data = {
	  id: id
  }
  programme_detail1(data).then((res) => {
	  if (res.code == 1) {
      shareUpdateData(res.data.data)
	  } else {
	    ElMessage.error(res.msg)
	  }
  })
}
const updateBlur=(item)=>{
  console.error("333")
  updateInput(item)
}

const deletes = () => {
  const Goods = goods.arr

  const data = {
    id: schemeId.value
  }
  const arr = []
  for (let i = 0; i < Goods.length; i++) {
    if (Goods[i].flag == true) {
      arr.push(Goods[i].goods_id)
    }
  }
  const textss = arr.join(',')
  if (textss == '') {
    ElMessage.error('请选择要删除的商品')
  } else {
	  ElMessageBox({
	    title: '提示',
	    message: '是否删除该商品?',
	    showCancelButton: true,
	    confirmButtonText: '确定',
	    cancelButtonText: '取消',
	    callback: (action) => {
	  		data.goods_ids = textss
	  		deleteGoods(data).then((res) => {
	  		  if (res.code == 1) {
	  		    selScheme(schemeId.value)

            texts.value = '删除成功~'
            tcFlag.value = true
            setTimeout(() => {
              tcFlag.value = false
            }, 1000)
	  		  } else {
	  		    ElMessage.error(res.msg)
	  		  }
	  		})
	    }
	  })

    // data.goods_ids=texts
    // deleteGoods(data).then((res)=>{
    //   if(res.code==1){
    //     selScheme(schemeId.value)
    //   }else{
    //     ElMessage.error(res.msg)

    //   }
    // })
  }
}
const checksSel = (item) => {
  item.flag = !item.flag
}
const eval_adds = reactive({
  arr: []
})
const goods_oper = () => {
  if (checkFlag.value == false) {
    checkFlag.value = true
    checksFlag.value = false
  } else if (checkFlag.value = true) {
    checkFlag.value = false
    checksFlag.value = true
  }
  console.error(checkFlag)
}
const shopChecks = (item) => {
  item.checks = !item.checks
}
const schemeLists = reactive({
  arr: []
})
const categoryGoods = reactive({
  arr: []
})
const cartGoods = reactive({
  arr: []
})
const goods = reactive({
  arr: []
})
const schemeId = ref('')
const selScheme = (id) => {
  schemeId.value = id
  const data = {
    id: id,
    page: page1.value,
    limit: limit1.value
  }
  programme_detail(data).then((res) => {
    if (res.code == 1) {
      for (let i = 0; i < res.data.data.length; i++) {
        console.error(res.data.data)
        res.data.data[i].flag = false
      }
      goods.arr = res.data.data
      totalNumber1.value = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const deletesTaps = (id) => {
	  ElMessageBox({
	    title: '提示',
	    message: '是否删除该方案?',
	    showCancelButton: true,
	    confirmButtonText: '确定',
	    cancelButtonText: '取消',
	    callback: (action) => {
      programme_del({ id: id }).then((res) => {
		  if (res.code == 1) {
          // ElMessage.success('删除方案成功')
          programme_lists()
          texts.value = '删除方案成功~'
          tcFlag.value = true
          setTimeout(() => {
			  tcFlag.value = false
          }, 1000)
		  } else {
          ElMessage.error(res.msg)
		  }
      })
	    }
	  })
}
const skusSub = ref('')
const submits = () => {
  if (cartGoods.arr != '') {
    if (schemeName.value == '') {
      ElMessage.error('请输入方案名称')
      return
    }
    const formData = new FormData()
    formData.append('sku', JSON.stringify(arr.sku))
    formData.append('name', schemeName.value)

    submit_calulate(formData).then((res) => {
      if (res.code == 1) {
        ElMessage.success('保存方案成功')
        schemeNameFlag.value = false
        programme_lists()
      } else {
        ElMessage.error(res.msg)
      }
    })
  } else {
    ElMessage.error('请选择产品')
  }
}
const delete_goods = () => {
  const data = {
    sku: {}
  }
  const skus = arr.sku// SKU
  let arrs=[];
  const goods_cate = cartGoods.arr.goods
  let nums=goods_cate.filter((num)=>{
    return num.checks==false
  })
  nums.forEach((item,index)=>{
    data.sku[item.sku_id] = { num: item.num, num_install: item.num_install}
  })
  const formData = new FormData()
  formData.append('sku', JSON.stringify(data.sku))
  arr.sku=data.sku
  console.error(data)
  // skusSub.value = data.sku
  calculate(formData).then((res) => {
    if (res.code == 1) {
      for (let i = 0; i < res.data.goods.length; i++) {
        res.data.goods[i].checks = false
      }
      cartGoods.arr = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const checkAll = () => {
  const goods = cartGoods.arr.goods
  console.error(goods)
  for (let i = 0; i < goods.length; i++) {
    goods[i].checks = true
  }
}
const blurs = () => {
  updateCart()
}
const checkGoodsTap = () => {
  checkGoodsFlag.value = true
}
const arr = reactive({
  sku: {}
})
const shopArr = reactive({
  sku: {}
})
const temp_ids = reactive([], [], [])
isLogin()

const updateCart = (items) => {
  if (items) {
    if (items.num > 0) {
      arr.sku[items.id] = { num: items.num, num_install: items.num_install }
    }
  }
  const formData = new FormData()
  formData.append('sku', JSON.stringify(arr.sku))
  skusSub.value = arr.sku
  calculate(formData).then((res) => {
    if (res.code == 1) {
      for (let i = 0; i < res.data.goods.length; i++) {
        res.data.goods[i].checks = false
      }
      cartGoods.arr = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const updateInput = (items) => {
  if (items.num > 0) {
    arr.sku[items.sku_id] = { num: items.num, num_install: items.num_install }
  }
  const formData = new FormData()
  formData.append('sku', JSON.stringify(arr.sku))
  skusSub.value = arr.sku
  console.error(arr.sku)

  calculate(formData).then((res) => {
    if (res.code == 1) {
      cartGoods.arr = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
// 更新选择的状态
const updateRuleIndexChang = (index, item_name, item) => {
  const id = item.temp_id
  const items = item_name.names
  if (items) {
    for (let j = 0; j < items.length; j++) {
      items[j].check = false
    }
  }
  item.check = true
}
const ruleSelList = reactive({
  arr: []
})
//切换list
const checkRule = (item, items, index, indexs, item_s) => {
  ruleSelList.arr[indexs] = items.temp_id
  let _selKey = ''
  ruleSelList.arr.forEach((item, index) => {
    if (index == 0) {
      _selKey += item
    } else {
      _selKey += ',' + item
    }
  })
  // console.error(items)
  let goods=goodsJson.value[ruleSelList.arr].split(',')
  console.error(eval_adds.arr)
  if(eval_adds.arr.is_ni==0){
    eval_adds.arr.num_install=0;
  }else{
    eval_adds.arr.num_install=1;
  }
  eval_adds.arr.num=1;
  // eval_adds.arr.num_install=1;
  eval_adds.arr.id=goods[2];
  eval_adds.arr.amountKill=goods[3];
  eval_adds.arr.amountNum=goods[4];
  getGoodsAmount(goods[2],1,1)
  if(goods[3]>0){
    addSub.value = goods[4]==0?false:true
  }else if(goods[3]==0){
    addSub.value = goods[1]==0?false:true

  }  updateRuleIndexChang(indexs, item, items) // 更改状态

}
const addSums = (item, index) => {
  item.num++
  updateInput(item)
}
const delSums = (item, index) => {
  if (item.num > 0) {
    item.num--
    updateInput(item)
  }
}
const addSumInstalls = (item, index) => {
  item.num_install++
  updateInput(item)
}
const delSumInstalls = (item, index) => {
  if (item.num_install > 0) {
    item.num_install--
    updateInput(item)
  }
}

const addSum = (item, index) => {
  item.num++
  getGoodsAmount(item.id, item.num, item.num_install)
}
const shopSub = (item) => {
  updateCart(item)
}
const addSumInstall = (item) => {
  item.num_install++
}
const delSumInstall = (item) => {
  if (item.num_install > 0) {
    item.num_install--
  }
}
const delSum = (item) => {
  if (item.num > 0) {
    item.num--
  }
}
const updateLists = (index, item) => {
  const res = {
    data: ''
  }
  res.data = categoryGoods.arr
  for (let i = 0; i < res.data.length; i++) {
    res.data[i].flag = false
    for (let j = 0; j < res.data[i].goods.length; j++) {
      res.data[i].goods[j].flag = false
    }
  }
  item.flag = !item.flag
}
const goodsJson = ref({})
// 根据接口获取值
const getCateList = () => {
  const objNew = {}
  category().then((res) => {
    if (res.code == 1) {
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].flag = false
        if (res.data[i].goods != '') {
          for (let j = 0; j < res.data[i].goods.length; j++) {
            res.data[i].goods[j].size.forEach((key) => {
              key.names[0].check = true
            })
            res.data[i].goods[j].sku.forEach((key) => {
              // console.error(key.amount)
              // 价格 库存 id 秒杀价
              key.num = 1
              key.num_install = 1
              objNew[key.temp_ids] = key.amount + ',' + key.num_stock + ',' + key.id + ',' + (key.amount_kill == null ? 0 : key.amount_kill) +','
              + (key.num_stock_kill)
            })
          }
        }
      }
      console.error(goodsJson)
      goodsJson.value = objNew
      categoryGoods.arr = res.data
    }
  })
}
const programme_lists = () => {
  const data = {
    page: page.value,
    limit: limit.value
  }
  programme_list(data).then((res) => {
    if (res.code == 1) {
      schemeLists.arr = res.data.data
      totalNumber.value = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const addSub = ref(true)
const changeClick = (index, item, items) => {
  showImg.arr=item
  if(item.flag==true){
    item.flag=false
    return;
  }
  const data = goodsJson.value
  ruleSelList.arr = []
  item.size.forEach((_item) => {
    ruleSelList.arr.push(_item.names[0].temp_id)
  })
  let _selKey = ''
  ruleSelList.arr.forEach((item, index) => {
    if (index == 0) {
      _selKey += item
    } else {
      _selKey += ',' + item
    }
  })
  // console.error(item.sku)
  // console.error(index)
  // console.error(item.sku[index])
  // console.error(item.sku)
  // console.error(eval_adds.arr)
  eval_adds.arr = item.sku[0]

  //如果是0的话 设置安装费不可选择
  if(item.is_ni==0){
    eval_adds.arr.is_ni=0
    eval_adds.arr.num_install=0
  }else{
    eval_adds.arr.is_ni=1
  }
  // console.error(eval_adds.arr)
  // console.error(item.sku[index=='undefined'])
  // console.error(item.sku[index].num_)
  // 点击分类的时候把第一项的第一个值设置为true

  //item.flag = !item.flag
  items.goods.forEach((_item,_index) => {
    if(_index == index){
      _item.flag = true;
    }else{
      _item.flag = false;
    }
  })
  const value = goodsJson.value[_selKey].split(',')
  if(value[3]>0){
    addSub.value = value[4]==0?false:true
  }else if(value[3]==0){
    addSub.value = value[1]==0?false:true
  }
  getGoodsAmount(value[2], 1, 1) // 更新阶梯价格
  item.size.forEach((_item,_index) => {
    _item.names.forEach((nameItem,nameIndex) => {
      if(nameIndex == 0){
        nameItem['check'] = true
      }else{
        nameItem['check'] = false
      }
    });
  });
}
let showImg=reactive({
    arr:[]
})
const changeFatherClick = (index, item) => {
  showImg.arr=item.goods[0]
  if(item.flag==true){
    item.flag=false
    return;
  }
  updateLists(index, item)
}
</script>

<style lang="less" scoped >
.tetemp_idsxts{
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding: 30px 0;
  font-size: 20px;
}
.input_s{
  display: flex;
  line-height: 20px;
  margin-bottom: 10px
}
.colorStyles{
  color: #333!important;
  background-color: #F0F2F5!important;
}
.flex-views{
  display: flex;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  //padding-bottom: 10px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.confirms{
  width: 100px;
  margin: 20px auto;
  height: 40px;
  background: #4171B3;
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
  color:#fff;
  font-size: 16px;
  //position: absolute;
  //bottom: 20px;
  //left: 50%;

  // margin:20px auto;
}
.buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  div{
    width: 100px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #4171B3;
    color: #4171B3;
    text-align: center;
    line-height: 40px;
    margin-right: 20px;
  }
}
/deep/ .input_s .el-input{
  width: 30px;
  height: 24px;
}
/deep/ .input_s .el-input .el-input__inner{
  width: 50px!important;
  height: 22px!important;;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
/deep/ .input-s .el-input{
  padding: 0;
  margin: 0;
  width: 300px;
}
/deep/ .sum .el-input{
  padding: 0;
  margin: 0;
  width: 40px;
}
/deep/ .sum .el-input .el-input__inner{
  text-align: center;
  width: 40px;
  height: 22px;
  line-height: 26px;
  background: #F0F2F5;
  border-radius: 2px;
  border: 1px solid #D7DBE0;
  padding: 0;
  margin: 0;
}
.classIndex{
  //background: #F0F2F5!important;
  border: 1px solid #4171B3!important;
  color: #4171B3!important;
}
.success{
  text-align: center;
  img{
    width: 80px;
    height: 80px;
  }
}
.texts{
  color: #999;
  font-size: 18px;
  text-align: center;
  padding: 20px 0 40px 0;
}
/deep/ .boxs  .el-dialog{
  width: 550px!important;
}
/deep/ .el-dialog{
  width: 750px!important;
}
/deep/ .el-dialog__body{
  //padding: 0!important;
}
.scheme{
  .examin-content{
    height: 400px;
    overflow-y: auto;
  }
  .examin-list{
    border-bottom: 1px solid #EEEEEE;
    padding: 10px 10px;
    display: flex;
    position: relative;
    .check{
      margin: 40px 10px 0 10px;
      .boxs{
        width: 14px;
        height: 14px;
        border: 1px solid #999999;
        border-radius: 10px;
      }
      .check-icon{
        img{
          width: 20px;
          height: 20px;
        }
      }
    }
    .examin-goods{
      img{
        width: 100px;
        height: 100px
      }
    }
    .examin-list-right{
      margin-left: 10px;
      .examin-name{
        color: #333;
        font-size: 14px;
        margin: 10px 0 10px 0;
      }
      .examin-rule{
        font-size: 12px;
        color: #999999;
      }
      .examin-money{
        color: #EA2813;
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
  .scheme-content{
    height:400px;
    overflow-y: auto;
    .scheme-list{
      .scheme-text{
        width:180px;
      }
      height: 76px;
      border-bottom: 1px solid #DDDDDD;
      padding: 0 24px;
      line-height: 76px;
      display: flex;
      justify-content: space-between;
      .scheme-flex{
        color: #4171B3;
        font-size: 14px;
        display: flex;
        .line{
          background: #EEEEEE;
          width: 1px;
          height: 14px;
          margin: 30px 10px 0 10px;
        }
      }
      .scheme-time{

        img{
          width: 24px;
          height: 24px;
          margin:25px 0 0 0;
        }
      }
    }
  }
  .scheme-tops{
    display: flex;
    height: 54px;
    background: #FAFAFA;
    border-radius: 4px 4px 0px 0px;
    padding: 0 25px;
    justify-content: space-between;
    line-height: 54px;
    border-bottom: 1px solid #DDDDDD;

    .scheme-name{
      color: #666;
      font-size: 14px;
      flex: 1;
      text-align: center;
    }
    .scheme-time{
      display: flex;
      .sort-icon{
        img{
          width: 24px;
          height: 24px;
          margin: 15px 0 0 3px;
        }
      }
    }
  }
}
/deep/ .el-dialog__header::before{
 display: none;

}
 /deep/ .el-dialog__header{
    height: 76px;
    line-height: 76px;
    text-align: center;
    border:none;
    color: #333;
   font-size: 20px;
 }
  .add-icons{
    width: 20px;
    height: 20px;
    background: #F0F2F5;
    border-radius: 2px;
    border: 1px solid #D7DBE0;
    line-height: 20px;
    text-align: center;
  }
  .sum-icons{
    width: 37px;
    height: 20px;
    background: #F0F2F5;
    border-radius: 2px;
    border: 1px solid #D7DBE0;
    line-height: 20px;
    text-align: center;
  }
  .del-icons{
    width: 20px;
    height: 20px;
    background: #F0F2F5;
    border-radius: 2px;
    border: 1px solid #D7DBE0;
    line-height: 20px;
    text-align: center;
  }
  .login-wrapper{
    background-color: #F7F8FA;
    .evaluate{
      .evaluate-right{
        margin-left: 12px;
        .evaluate-text1{
          height: 150px;
          margin:10px 0;
          .evaluate-right-money{
            position: relative;
            text-align: center;
            padding-top: 70px;
            .money{
              color: #EA2813;
              font-size: 17px;
              margin-bottom: 10px;
              font-weight: bold;
            }
            .discounts{
              color: #999;
              font-size: 12px;
            }
          }
          .kf{
            position: relative;
            z-index: 1;
            cursor: pointer;
            img{
              width: 92px;
              height: 30px;
              position: absolute;
              right: 20px;
              top: 20px;
            }
          }
          img{
            width: 396px;
            height: 160px;
            position: absolute;
          }
        }
        .evaluate-bottom{
          margin-bottom: 30px;
          padding-bottom: 30px;
          .shopping-buttons{
            .pay{
              background-color: #4171B3!important;
              border: none!important;
              color: #fff!important;
            }
            display: flex;
            padding: 0;
            margin-top: 30px;
            .flex-s{
              display: flex;
              margin-left: 25px;
            }
            .shopping-button{
              .share{
                img{
                  width: 30px;
                  height: 30px;
                  margin: 5px 5px 0 10px;
                }
              }
              width: 100px;
              height: 40px;
              border-radius: 2px;
              border: 1px solid #4171B3;
              text-align: center;
              line-height: 40px;
              color: #4171B3;
              font-size: 16px;
              margin-right: 22px;
            }
          }
          background-color: #fff;
          //height: 300px;
          margin-top: 20px;
          .shopping-content{
            .shopping-list{
              margin-top: 10px;
              display: flex;
              padding: 0 0 10px 0;
              .check{
                margin: 40px 10px 0 10px;
                .boxs{
                  width: 14px;
                  height: 14px;
                  border: 1px solid #999999;
                  border-radius: 10px;
                }
                .check-icon{
                  img{
                    width: 20px;
                    height: 20px;
                  }
                }
              }
              .shopping-left{
                img{
                  width: 100px;
                  height: 100px;
                }
              }
              .shopping-right{
                width: 240px;
                .money-all{
                  color: #000;
                  font-size: 12px;
                  margin-top: 10px;
                  text-align: right;
                  span{
                    font-size: 14px;
                    color: #EA2813;
                  }
                }
                margin: 10px 10px;
                .shopping-spec{
                  display: flex;
                  margin: 0 0 5px 0;
                  line-height: 25px;
                  .money{
                    color: #EA2813;
                    font-size: 12px;
                  }
                  .sum{
                    color: #999;
                    font-size: 12px;
                  }
                  .shoppings{
                    margin-left: 10px;
                  }
                }
                .goods-name{
                  color: #333;
                  font-size: 14px;
                }
                .goods-rule{
                  color: #999;
                  font-size: 12px;
                  margin-top: 10px;
                  margin-bottom: 10px;
                }
              }
            }
          }
          .evaluate-titles{
            .manage{
              color: #4171B3;
              font-size: 16px;
            }
            height: 70px;
            border-bottom: 1px solid #f4f4f4;
            line-height: 70px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            .shopping-text{
              color: #333;
              font-size: 18px;
              margin-left: 10px;
              flex: 1;
              font-weight: 500;
            }
            .shopping{
              margin-top: 6px;
              img{
                width: 30px;
                height: 30px;
              }

            }
          }
        }
        .evaluate-text{
          cursor: pointer;
          img{
            width: 396px;
            height: 60px;
          }
        }
      }
      display: flex;
      padding: 10px 260px 0 260px;
      .evaluate-goods{
        background-color: #fff;
        margin-bottom: 30px;
        height: fit-content;
        .evaluate-list:nth-child(1){
          margin-top: 0;
        }
        .evaluate-list{
          cursor: pointer;
          width: 992px;
          background: #F0F2F5;
          border-radius: 2px;
          margin-top: 10px;
          .evaluate-gds{
            display: flex;
            background-color: #fff;
            padding: 10px 20px;
            .evaluate-contents{
              margin-left: 20px;
              .evaluate-lists{
                .rule-style{
                  //position: absolute;
                  width:700px;
                  //left: 0;
                }
                .evaluate-goods-rules{
                  .sum{
                    flex: 1;
                    // margin-left: 80px;
                    display: flex;
                  }
                  //border-bottom: 1px solid #EDEDED;
                  line-height: 46px;
                  //display: flex;
                  margin: 0 10px;
                  .goods-rule{
                    margin-right: 20px;
                    //width: 10px!important;
                    //min-width: 100px;
                    //flex: 1;
                    .colors{
                      background-color: #F0F2F5;
                      border: 1px solid #4171B3;
                    }
                    .goods-rule-name{
                      background: #F0F2F5;
                      color: #333;
                      font-size: 14px;
                      padding: 0 14px;
                      height: 24px;
                      line-height: 24px;
                      margin-top: 10px;
                      //width: fit-content;
                      width: fit-content;
                    }
                  }
                }
                width: 812px;
                border-radius: 2px;
                margin-bottom: 10px;
                justify-content: space-between;
                .evaluate-rules{
                  display: flex;
                  justify-content: space-between;
                  height: 46px;
                  line-height: 46px;
                  background-color: #F0F2F5;
                  padding: 0 20px;
                }
              }
            }
            .evaluate-img{
              img{
                width: 120px;
                height: 120px;
              }
            }
          }
          .evaluate-rule{
            display: flex;
            justify-content: space-between;
            line-height: 46px;
            padding: 0 20px;
            height: 46px;
          }
        }
      }
    }
  }
</style>