<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-row>
        <el-form-item  prop="keyWord">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入装备名称"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />   
        </el-form-item>
        <el-form-item  prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item  prop="dateRange">
            <el-date-picker
                v-model="dateRange"
                type="datetimerange" 
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至" 
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>  
        <el-form-item  prop="keyWord1">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入出租单位"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />   
        </el-form-item>
        <el-form-item  prop="keyWord2">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入承租单位"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />   
        </el-form-item>
        </el-row>
        <el-form-item  prop="keyWord2">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="租金/元"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
                style="width:100px"
            />  
            <span> ——</span> 
        </el-form-item>
          <el-form-item  prop="keyWord2">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="租金/元"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
                style="width:100px"
            />   
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> 
        <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
            <el-row style="border-bottom: 1px solid #ccc">
                <el-col :span="1">
                    <div style="text-align: center">
                        <el-checkbox
                            v-model="item.isChecked"
                            @change="onChangeCompany($event, index, item)"
                        >
                        </el-checkbox>
                    </div>
                </el-col>
                <el-col :span="22">
                  <el-row> 
                    <el-col :span="7">
                    <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span>订单编号:</span>
                      {{ item.company_name }}
                    </div>
                    </el-col>
                    <el-col :span="7">
                       <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span class="user-name">下单时间:</span>   
                      {{ item.user_name }}
                    </div>
                    </el-col>
                    <el-col :span="7">
                      <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span class="user-phone">装备所属公司:</span>
                      {{ item.user_phone }}
                    </div>   
                    </el-col>
                     <el-col :span="2">
                      <div style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                          <el-button v-if="status==0" class="item" type="primary" size="mini">出库</el-button>
                          <el-button v-if="status==0" class="item" type="primary" size="mini">驳回</el-button>
                    </div>   
                    </el-col>
                  </el-row>

                  <el-row> 
                    <el-col :span="7">
                    <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span>出租方联系电话:</span>
                      {{ item.company_name }}
                    </div>
                    </el-col>
                    <el-col :span="7">
                       <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span class="user-name">承租方联系电话:</span>   
                      {{ item.user_name }}
                    </div>
                    </el-col>
                    <el-col :span="7">
                      <div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
                        <span class="user-phone">承租方地址:</span>
                      {{ item.user_phone }}
                    </div>   
                    </el-col>
                  </el-row>
                </el-col>
            </el-row>

            <el-row class="cart-list" v-for="(goods, j) in item.good_list" :key="j">
                <el-col :span="1">
                    <div style="text-align: center">
                        <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
                        </el-checkbox>
                    </div>
                </el-col>
                <el-col :span="10" class="goods-info">
                    <el-col :span="7">
                     <img :src="goods.goods_pic" alt="" />
                    </el-col>
                    <div class="goods-code">
                        <div style="font-size: 14px; font-weight: bold">{{ goods.goods_name }}</div>
                        <div>租期： {{ goods.lease_day }}{{" "+"天"}}</div>
                        <div style="display: flex; justify-content: space-between; width: 100%;">
                          <div style="display:flex:1;text-align:left;">租金：{{ goods.lease_pic }}{{" "+"元/天"}}</div>
                          <div style="display:flex:1;text-align:left;margin-left:100px">数量：{{ goods.goods_num }}{{" "+"台"}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">总费用</div>
                        <div class="red-font">1500</div>
                </el-col>
                <el-col :span="5">
                  <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">租期</div>
                    <div  style="color:black;font-weight: bold;">
                        {{ "2024-10-11"+" " }}{{"至"}}{{ " "+"2024-10-11" }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">
                        {{ "待出租"}}
                    </div>
                </el-col>
                <el-col :span="1.1">
                    <div>
                        <el-button
                            @click="handleViewOrder(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            订单详情
                        </el-button>
                        <el-button
                            @click="handleViewOrder(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            租赁协议
                        </el-button>
                        <el-button
                            @click="handleViewOrder(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            退租检修
                        </el-button>
                        <el-button
                            @click="handleViewOrder(j)"
                            type="text"
                            size="mini"
                            style="color: #blue; font-weight: bold"
                        >
                            费用结算
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
            <pagination
            
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
    </div>
    
  </template> 
  
  <script> 
  import { getPurchaseList } from "@/api/purchase/goodsAccept"; 
  export default {
    name: "order",
    // dicts: ['purchase_task_status'],
    data() {
      return {
        // 遮罩层
        loading: false,     
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true, 
        // 显示搜索条件
        showSearch: true, 
        statusList:[{id:'1',name:'状态1'},{id:'2',name:'状态2'},{id:'3',name:'状态3'}],
        ids:[],
        // 总条数
        total: 0, 
        //表格数据
        tableList: [], 
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        dateRange:[],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
          status:undefined,
        },
        //卡片集合
        cardList:[],
        status:0,
      };
    },
    created() { 
       this.getList();
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            if(this.dateRange.length>0){
                this.queryParams.startTime=this.dateRange[0]
                this.queryParams.endTime=this.dateRange[1]
            }else{
                this.queryParams.startTime=undefined
                this.queryParams.endTime=undefined
            }  
        this.cardList = [
        {
            company_name: '安徽博诺斯有限公司',
            user_name: '王先生',
            user_phone: '18725632356',
            isChecked: false,
            good_list: [
                {
                    goods_pic:
                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                    goods_name: 'W190挖掘机',
                    goods_code: '995221_JHL',
                    goods_type: '挖地型号996',
                    lease_date: '',
                    lease_pic: 300,
                    lease_day: 1,
                    goods_num: 0,
                    totalAmount: 0,
                    isChecked: false,
                    lease_date_string: '',

                },
            ],
              },
              {
                  company_name: '安徽博诺斯有限公司',
                  user_name: '王先生',
                  user_phone: '18725632356',
                  isChecked: false,
                  good_list: [
                      {
                          goods_pic:
                              'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                          goods_name: 'W190挖掘机',
                          goods_code: '995221_JHL',
                          goods_type: '挖地型号996',
                          lease_date: '',
                          lease_pic: 300,
                          lease_day: 0,
                          goods_num: 0,
                          totalAmount: 0,
                          isChecked: false,
                          lease_date_string: '',
                      },
                      {
                          goods_pic:
                              'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                          goods_name: 'W190挖掘机',
                          goods_code: '995221_JHL',
                          goods_type: '挖地型号996',
                          lease_date: '',
                          lease_pic: 300,
                          lease_day: 0,
                          goods_num: 0,
                          totalAmount: 0,
                          isChecked: false,
                          lease_date_string: '',
                      },
                      {
                          goods_pic:
                              'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                          goods_name: 'W190挖掘机',
                          goods_code: '995221_JHL',
                          goods_type: '挖地型号996',
                          lease_date: '',
                          lease_pic: 300,
                          lease_day: 0,
                          goods_num: 0,
                          totalAmount: 0,
                          isChecked: false,
                          lease_date_string: '',
                      },
                  ],
              },
              {
                  company_name: '安徽博诺斯有限公司',
                  user_name: '王先生',
                  user_phone: '18725632356',
                  isChecked: false,
                  good_list: [
                      {
                          goods_pic:
                              'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                          goods_name: 'W190挖掘机',
                          goods_code: '995221_JHL',
                          goods_type: '挖地型号996',
                          lease_date: '',
                          lease_pic: 300,
                          lease_day: 0,
                          goods_num: 0,
                          totalAmount: 0,
                          isChecked: false,
                          lease_date_string: '',
                      },
                      {
                          goods_pic:
                              'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
                          goods_name: 'W190挖掘机',
                          goods_code: '995221_JHL',
                          goods_type: '挖地型号996',
                          lease_date: '',
                          lease_pic: 300,
                          lease_day: 0,
                          goods_num: 0,
                          totalAmount: 0,
                          isChecked: false,
                          lease_date_string: '',
                      },
                  ],
              },
          ];
            this.total = this.cardList.length;
            this.loading = false;
        },

        // 公司全选事件
        onChangeCompany(e, index, item)  {
            this.cardList[index].good_list.forEach(item=>{
                item.isChecked = e;
            })
            
        },

        // 公司子级list全选事件
        onChangeGoods(index) {
            this.cardList[index].isChecked = this.cardList[index].good_list.every(
                (e) => e.isChecked === true,
            )
        },

        //订单详情
        handleViewOrder(row){
            this.$router.push({
                path: '/lessor/order/detail',
                query: { Id:Number(5),isView:"true" }
            })
        }, 

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.dateRange=[]
            this.queryParams.keyWord=null;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.taskId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        }, 
        handleExport() {
        //     this.download('/material/ma_machine/export', {
        //       ...this.queryParams
        //     }, `仓库管理_${new Date().getTime()}.xlsx`)
        },
        

    }
  };
  </script>
  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  .app-container {

    .cart-title {
        margin-top: 20px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .cart-title div:first-child {
        width: 5px;
        height: 20px;
        background-color: #4fabfe;
    }

    .cart-th {
        margin: 15px 0;
        div {
            text-align: center;
        }
    }

    .cart-tbody {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
        .cart-user-info {
            display: flex;
            align-items: center;
            font-size: 13px;

            .user-name,
            .user-phone {
                padding: 3px 18px;
                border: 1px solid #ccc;
            }

            .user-name {
                margin-left: 20px;
                border-right: none;
            }
        }

        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;
            
            div {
                text-align: center;
            }

            .goods-info {
                display: flex;
                align-content: center;
                img {
                    width: 200px;
                    height: 100px;
                }

                .goods-code {
                    margin-left: 40px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    div {
                        text-align: left;
                    }
                }
            }

            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
    }

    .protocol-handle {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        font-size: 13px;

        .checkbox-container a {
            color: #ff4800;
            text-decoration: underline;
        }
    }
}
  </style>