<template>
  <div class="container">
    <el-form :model="queryParams">
      <el-form-item label="事业公司:">
        <el-select
          v-model="queryParams.company"
          placeholder="请选择事业公司"
          style="width: 20vw"
        >
          <el-option
            v-for="item in companyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商:">
        <div class="supplier_container">
          <div class="left_supplier">
            <el-input v-model="queryParams.supplierName"></el-input>
            <i class="el-icon-edit"></i>
          </div>
          <div class="right_supplier">
            <i class="el-icon-search"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="主单号:">
        <el-input v-model="queryParams.dhNumber" style="width: 20vw"></el-input>
      </el-form-item>
      <el-form-item label="收货单位:">
        <el-select
          v-model="queryParams.shUnit"
          placeholder="请选择收货单位"
          style="width: 20vw"
        >
          <el-option
            v-for="item in shLocalList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单类:">
        <el-select
          v-model="queryParams.dlType"
          placeholder="请选择单类"
          style="width: 20vw"
        >
          <el-option
            v-for="item in danList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主单状态:">
        <el-select
          v-model="queryParams.zdStatus"
          placeholder="请选择状态"
          style="width: 20vw"
        >
          <el-option
            v-for="item in zhuStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="right_tip">
          * 如需查询历史单据,请修改“订货日”日期
          <!-- *如需下载EXCEL,请点击[单号] 进入主单查询,再点击[报表] -->
        </span>
      </el-form-item>
      <el-form-item label="订货日:">
        <el-date-picker
          v-model="queryParams.orderDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 20vw"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="交货预定日:">
        <el-date-picker
          v-model="queryParams.deliveryDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 20vw"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <span class="right_tip">
          *如需下载EXCEL,请点击[单号] 进入主单查询,再点击[报表]
        </span>
      </el-form-item>
    </el-form>
    <div class="tip_content">
      <span class="left_tip">{{ getNowDate() }}订单已经可以正常下载</span>
    </div>
    <div class="btn_container">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <el-button
        type="primary"
        style="background: #0187fb; border: none"
        @click="handleSearch"
      >
        查询
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableDate"
      border
      :header-cell-style="headerStyle"
      :cell-style="rowStyle"
      height="42vh"
    >
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="dhTime" label="订货日"></el-table-column>
      <el-table-column prop="jhTime" label="交货预定日"></el-table-column>
      <el-table-column prop="zdStatus" label="主单状态"></el-table-column>
      <el-table-column prop="fdStatus" label="分单状态" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.fdStatus">{{ scope.row.fdStatus }}</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column prop="dlType" label="单类"></el-table-column>
      <el-table-column prop="dhNumber" label="单号">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #0187fb; border: none"
            @click="handleDetail(scope.row)"
          >
            {{ scope.row.dhNumber }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="closeNumber" label="结算厂编"></el-table-column>
      <el-table-column prop="supplierName" label="供应商"></el-table-column>
      <el-table-column prop="shUnit" label="收货单位"></el-table-column>
      <el-table-column prop="ckName" label="仓库名称"></el-table-column>
      <el-table-column prop="ckAddress" label="仓库地址"></el-table-column>
      <el-table-column prop="jinMoney" label="进价金额"></el-table-column>
      <el-table-column prop="fd" label="分单" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.fd">{{ scope.row.fd }}</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="text">主单下载</el-button>
      </el-table-column>
    </el-table>
    <!-- <button @click="handleDetail">行</button> -->
  </div>
</template>

<script>
  import { orderList } from '../../../api/purchase'
  export default {
    name: 'GetOrder',
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dhTimeStart: '', //订货日开始时间
          dhTimeEnd: '', //订货日结束时间
          supplierName: '', //供应商
          dhNumber: '', // 主单号
          shUnit: '', //收货单位
          dlType: '', // 单类
          zdStatus: '', //主单状态
          jhTimeStart: '', //交货预定日开始时间
          jhTimeEnd: '', //交货预定日结束时间
          orderDate: [], //订货
          deliveryDate: [], //交货
          company: '上海',
        },
        tableDate: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        companyList: [
          {
            value: '上海',
            label: '上海',
          },
        ],
        shLocalList: [
          {
            value: '上海虹梅常温',
            label: '上海虹梅常温',
          },
          {
            value: '上海虹梅冷藏',
            label: '上海虹梅冷藏',
          },
          {
            value: '上海虹梅冷冻',
            label: '上海虹梅冷冻',
          },
          {
            value: '杭州常温物流',
            label: '杭州常温物流',
          },
          {
            value: '金山冷藏物流',
            label: '金山冷藏物流',
          },
          {
            value: '金山冷冻物流',
            label: '金山冷冻物流',
          },
          {
            value: '江阴常温',
            label: '江阴常温',
          },
          {
            value: '江阴冷藏',
            label: '江阴冷藏',
          },
          {
            value: '江阴冷冻',
            label: '江阴冷冻',
          },
          {
            value: '上海青浦常温',
            label: '上海青浦常温',
          },
          {
            value: '上海青浦冷藏',
            label: '上海青浦冷藏',
          },
          {
            value: '上海青浦冷冻',
            label: '上海青浦冷冻',
          },
          {
            value: '南京常温',
            label: '南京常温',
          },
          {
            value: '南京冷藏',
            label: '南京冷藏',
          },
          {
            value: '南京冷冻',
            label: '南京冷冻',
          },
          {
            value: '上海常温中央仓(红梅)',
            label: '上海常温中央仓(红梅)',
          },
          {
            value: '直送常温',
            label: '直送常温',
          },
          {
            value: '直送冷冻',
            label: '直送冷冻',
          },
          {
            value: '直送冷藏',
            label: '直送冷藏',
          },
          {
            value: '上海直送香烟',
            label: '900004 上海直送香烟',
          },
          {
            value: '江苏直送香烟',
            label: '江苏直送香烟',
          },
          {
            value: '浙江直送香烟',
            label: '浙江直送香烟',
          },
          {
            value: '浙江香烟-吉森',
            label: '浙江香烟-吉森',
          },
          {
            value: '浙江香烟-和华',
            label: '浙江香烟-和华',
          },
          {
            value: '上海代售香烟',
            label: '上海代售香烟',
          },
        ],
        zhuStatusList: [
          {
            value: '未下载',
            label: '未下载',
          },
          {
            value: '已下载',
            label: '已下载',
          },
        ],
        danList: [
          {
            value: '物流进货单',
            label: '物流进货单',
          },
          {
            value: '物流紧急进货单',
            label: '物流紧急进货单',
          },
          {
            value: '物流退货单',
            label: '物流退货单',
          },
          {
            value: '供应商欠货单',
            label: '供应商欠货单',
          },
        ],
        loading: false,
      }
    },
    mounted() {
      this.getNowDate()
    },
    methods: {
      //获取列表
      getOrderList() {
        this.loading = true
        orderList(this.queryParams)
          .then((res) => {
            console.log(res.data, '段时间客户端')
            this.tableDate = res.data.list
            this.total = res.data.totalRecord
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getOrderList()
      },
      headerStyle() {
        return 'text-align:center;'
      },
      rowStyle() {
        // return 'text-align:center;'
      },
      handleDetail(info) {
        console.log(info.dhNumber, '段时间看看')
        this.$router.push({
          path: 'orderDetail',
          query: info,
        })
      },
      handleSearch() {
        this.getOrderList()
      },
      getNowDate() {
        const timeOne = new Date()
        const year = timeOne.getFullYear()
        let month = timeOne.getMonth() + 1
        let day = timeOne.getDate()
        month = month < 10 ? '0' + month : month
        day = day < 10 ? '0' + day : day
        const NOW_MONTHS_AGO = `${year}年${month}月${day}日`
        return NOW_MONTHS_AGO
      },
    },
  }
</script>

<style lang="scss" scoped>
  .right_tip {
    // font-size: calc(100vh * 30 / 1920);
    font-size: 1rem;
    color: #e60000;
  }
  .container::v-deep {
    padding: 1.5vh 1vw;
    box-sizing: border-box;

    .el-form {
      width: 89%;
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        // width: 40%;
        display: flex;
        align-items: center;
        height: 4vh;

        .el-form-item__label {
          // font-size: calc(100vh * 28 / 1920);
          font-size: 0.9rem;

          font-weight: bold;
          width: 5.5vw;
        }

        .el-input__inner {
          // font-size: calc(100vh * 26 / 1920);
          font-size: 0.8rem;

          height: 3.5vh;
        }

        .supplier_container {
          display: flex;
          align-items: center;
          width: 25vw;
          height: 3.5vh;
          border: 1px solid #dcdfe6;
          border-radius: 4px;

          .left_supplier {
            width: 89%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-input__inner {
              border: none;
            }

            i {
              font-size: calc(100vh * 32 / 1920);
              margin-right: 0.8vw;
            }
          }

          .right_supplier {
            border-left: 1px solid #dcdfe6;
            width: 11%;
            height: 100%;
            background: #f1f1f1;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
              font-size: calc(100vh * 32 / 1920);
            }
          }
        }
      }
    }

    .tip_content {
      width: 81%;
      display: flex;
      justify-content: space-between;
      .left_tip {
        font-size: calc(100vh * 45 / 1920);
      }
    }
    .btn_container {
      display: flex;
      align-items: center;
      .el-pagination {
        text-align: left;
        margin-bottom: 1.5vh;
        width: 75%;
      }
      .el-button {
        width: 4vw;
        height: 3vh;
        line-height: 3vh;
        padding: 0;
      }
    }
  }
  ::v-deep .el-table th .cell {
    // font-size: calc(100vh * 28 / 1920);
    font-size: 0.9rem;
  }
  ::v-deep .el-table td .cell {
    // font-size: calc(100vh * 24 / 1920);
    font-size: 0.8rem;
  }
  ::v-deep .el-date-editor .el-range-input {
    // font-size: calc(100vh * 24 / 1920);
    font-size: 0.8rem;
  }
</style>