<template>
    <div class="equipDetail">
        <div class="top">
            <div class="showImg">
                <showImg></showImg>
            </div>
            <div class="baseInfo">
                <div class="equipInfo">
                    <div class="left">
                        <div class="title">
                            <div class="name">
                                220El履带挖掘机
                            </div>
                            <div class="tag">
                                <div class="item">
                                    待租
                                </div>
                                <div class="item otherItem">
                                    已审核
                                </div>
                            </div>
                        </div>
                        <div class="viewNnum">
                            浏览1000+
                        </div>
                        <div class="infoBox">
                            <div class="item" v-for="(v,i) in equipBaseInfoList" :key="i">
                                <div class="label">
                                    {{ v.label }}：
                                </div>
                                <div class="value">
                                    操作重量：22吨 铲斗容量：1立方亩
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="right">
                        <div class="price">
                            ￥<span>18500</span>/月
                        </div>
                        <div class="options">
                            <div class="item contact">
                                联系商家
                            </div>
                            <div class="item applyFor">
                                我要租
                            </div>
                        </div>
                    </div>
                </div>
                <div class="businessInfo">
                    <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png">

                    <div class="business">
                        <img src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd" class="avatar">
                        <div class="fonts">
                            <div class="name">珠海嘉昌设备有限责任公司</div>
                            <div class="other">
                                <div class="item" v-for="(v,i) in businessList" :key="i">
                                    <div class="label">
                                        {{ v.label }}：
                                    </div>
                                    <div class="value">
                                        111111111{{ v.key }}{{v.unit}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail">
            <div class="publicTitle">
                装备详情
            </div>
            <div class="publicLine"></div>
            <div class="list publicContent">
               <div class="item" v-for="(v,i) in equipDetailKeyList" :key="i">
                   <div class="label">
                       {{ v.label }}：
                   </div>
                   <div :class="v.fn ? 'fnValue' :'value'">
                          111111111111
                   </div>
               </div>
            </div>
        </div>
        <div class="appearance">
            <div class="publicTitle">
                装备外观
            </div>
            <div class="publicLine"></div>
            <div class="urlList publicContent">
                <img :src="v" v-for="(v,i) in testUrl" :key="i">
            </div>
        </div>
        <div class="recommend">
            <div class="publicTitle">
                <div>为您推荐</div>

                <div class="change">
                    换一批
                </div>
            </div>
            <div class="content">
                <equip-card class="item" v-for="(v,i) in 3" :key="i" :id="i"></equip-card>
            </div>

        </div>
    </div>
</template>
<script lang="ts" setup>
import ShowImg from "./comoonents/showImg.vue"
import { reactive, ref} from "vue";
import EquipCard from "@/compontents/equipCard.vue";

//设备简略基本信息
const equipBaseInfoList = reactive([
    {
        label:'设备规格',
        key:''
    },{
        label:'设备单位',
        key:''
    },{
        label:'配备机手',
        key:''
    },{
        label:'发布时间',
        key:''
    },{
        label:'更新时间',
        key:''
    },
])
//商家标签信息
const businessList = reactive([
    {
        label:'入驻时间',
        key:'',
        unit:''
    },{
        label:'上架数量',
        key:'',
        unit:''
    },{
        label:'访问量',
        key:'',
        unit:'次'
    },
])

const equipDetailKeyList = reactive([
    {
        label:'装备编号',
        key:'',
        fn:'',
        arg:''
    },{
        label:'装备类别',
        key:'',
        fn:'',
        arg:''
    },{
        label:'装备组别',
        key:'',
        fn:'',
        arg:''
    },{
        label:'装备名称',
        key:'',
        fn:'',
        arg:''
    },{
        label:'规格/操作重量',
        key:'',
        fn:'',
        arg:''
    },{
        label:'品牌',
        key:'',
        fn:'',
        arg:''
    },{
        label:'装备型号',
        key:'',
        fn:'',
        arg:''
    },{
        label:'序列号码',
        key:'',
        fn:'',
        arg:''
    },{
        label:'出场时间',
        key:'',
        fn:'',
        arg:''
    },{
        label:'工作时长',
        key:'',
        fn:'',
        arg:''
    },{
        label:'检验信息',
        key:'',
        fn:'1',
        arg:''
    },{
        label:'保险信息',
        key:'',
        fn:'2',
        arg:''
    }
])

const testUrl = [
    'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
    'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
]

const fn = () => {
    console.log('fn 111111111111111111111')
}

const that = {
    fn
}





</script>
<style scoped lang="scss">
.equipDetail{
    .top{
        display: flex;
        margin-bottom: 50px;
        .showImg{
          width: 38%;
          border-radius: 15px;
          overflow: hidden;
          margin-right: 30px;
        }
        .baseInfo{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .equipInfo{
            display: flex;
            .left{
              margin-right: 5px;
              .title{
                display: flex;
                align-items: center;
                .name{
                  font-size: 24px;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  color: #000000;
                }
                .tag{
                  display: flex;
                  align-items: center;
                  .item{
                    font-size: 13px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #005AF2;
                    margin-left: 15px;
                    padding: 2px 10px;
                    border: 1px solid #005AF2;
                    border-radius: 4px;
                  }
                  .otherItem{
                    border-color: #FF6734;
                    color: #FF6734;
                  }
                }
              }
              .viewNnum{
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #BCBCBC;
                margin-top: 10px;
              }
              .infoBox{
                margin-top: 20px;
                .item{
                  display: flex;
                  align-items: center;
                  margin-bottom: 18px;
                  .label{
                    font-size: 15px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #8E8E8E;
                    margin-right: 15px;
                  }
                  .value{
                    font-size: 15px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                  }
                }
              }
            }
            .right{
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .price{
                font-size: 15px;
                font-weight: 500;
                font-family: PingFangSC, PingFang SC;
                color: #FF4800;
                text-align: right;
                span{
                  font-size: 30px;
                  font-weight: 600;
                }
              }
              .options{
                display: flex;
                justify-content: flex-end;

                .item{
                  width: 110px;
                  height: 40px;
                  line-height: 40px;
                  border-radius: 4px;
                  font-size: 18px;
                  font-weight: 600;
                  text-align: center;
                }
                .contact{

                  color: #FFFFFF;
                  background: #3CABFF;
                  margin-right: 20px;
                }
                .applyFor{
                  border: 1px solid #3CABFF;
                  color: #3CABFF;
                  box-sizing: border-box;
                  line-height: 38px;

                }
              }
            }
          }
          .businessInfo{
            width: 100%;
            height: 147px;
            background: #F7F9FA;
            border-radius: 15px;
            position: relative;
            box-sizing: border-box;
            padding: 25px 15px;
              .bgCar{
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                z-index: 0;
              }

            .business{
              display: flex;
              align-items: center;
              .avatar{
                width: 65px;
                height: 65px;
                border-radius: 100%;
                margin-right: 10px;
              }
              .fonts{
                .name{
                  font-size: 20px;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  color: #333333;
                  margin-bottom: 12px;
                }
                .other{
                  display: flex;
                  .item{
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    display: flex;
                    margin-right: 15px;
                    .label{

                    }
                    .value{

                    }
                  }
                }
              }
            }
          }
        }
    }

    .publicTitle{
      font-size: 20px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #333333;

      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .publicLine{
      width: 100%;
      height: 12px;
      border-bottom: 1px solid #E0E0E0;
      position: relative;
      &:before{
        content: '';
        height: 3px;
        width: 40px;
        background: #2282FF;
        border-radius: 2px;
        position: absolute;
        bottom: -1px;
        left: 20px;
      }
    }
    .publicContent{
      box-sizing: border-box;
      padding: 40px 70px 10px;
    }

    .detail{
        .list{
          display: flex;
          flex-wrap: wrap;
            .item{
              width: calc(100% / 3);
              font-size: 16px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              display: flex;
              margin-bottom: 35px;
              .label{
                color: #8E8E8E;

              }
              .value{

                color: #333333;
              }
              .fnValue {

                color: #0087CD;
              }
            }
        }
    }

    .appearance{
      margin-bottom: 20px;
      .urlList{
        img{
          width: 100%;
        }
      }
    }

  .recommend{
      .change{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #9D9D9D;
        cursor: pointer;
      }

    .content{
        margin-top: 20px;
        width: 100%;
        display: flex;
        .item{
          width: calc((100% - 40px) / 3);
          &:nth-child(3n - 1){
            margin: 0 20px;
          }
        }
    }
  }
}
</style>
