<template>
  <div class="container-from">
    <div class="from-left">
      <div class="from-item">
        <span class="span-left">交付单号：</span>
        <el-input
          v-model="from.deliveryOrderNo"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="from-item">
        <span class="span-left">业务类型：</span>
        <el-select v-model="from.itemName" placeholder="请选择">
          <el-option
            v-for="item in businessType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="from-item">
        <span class="span-left">交付状态：</span>
        <el-select v-model="from.deliveryStatus" placeholder="请选择">
          <el-option
            v-for="item in DeliveryStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="from-item">
        <span class="span-left">下单时间：</span>
        <el-date-picker
          v-model="from.CreateDate"
          type="daterange"
          align="right"
          start-placeholder="起始"
          end-placeholder="结束"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="from-item">
        <span class="span-left">商标名称：</span>
        <el-input v-model="from.tmName" placeholder="请输入内容"></el-input>
      </div>
      <div class="from-item">
        <span class="span-left">申请人：</span>
        <el-input v-model="from.name" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="from-right">
      <el-button @click="find">查询</el-button>
      <el-button class="btnTwo" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //from表单选择内容
      from: {
        channelServiceNo: null,
        deliveryOrderNo: "",
        itemCode: "",
        deliveryStatus: "",
        payStatus: "",
        tmName: "",
        name: "",
        startTime: "2019-12-1",
        entTime: "2020-1-5",
        pageIndex: 1,
        pageSize: 30,
        timeStamp: 1577787047,
        channelUserId: "a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0",
        itemName: "",
        CreateDate: []
      },
      //业务类型
      businessType: [
        {
          value: "zzzc",
          label: "自助申请"
        },
        {
          value: "zzfzzc",
          label: "专家辅助申请"
        },
        {
          value: "dbsbzc",
          label: "担保申请"
        }
      ],
      //交付状态
      DeliveryStatus: [
        {
          value: "dfwsfw",
          label: "待服务"
        },
        {
          value: "dsccl",
          label: "待上传材料"
        },
        {
          value: "dqrfa",
          label: "待确认方案"
        },

        {
          value: "fabtg",
          label: "方案不通过"
        },
        {
          value: "dsh",
          label: "待审核"
        },
        {
          value: "ddj",
          label: "待递交"
        },
        {
          value: "ydj",
          label: "已递交"
        },
        {
          value: "ywc",
          label: "已完成"
        }
      ],
      //日期选择器
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            }
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    find() {
      console.log(this.from);
    },
    reset() {
      this.from = {
        channelServiceNo: null,
        deliveryOrderNo: "",
        itemCode: "",
        deliveryStatus: "",
        payStatus: "",
        tmName: "",
        name: "",
        startTime: "2019-12-1",
        entTime: "2020-1-5",
        pageIndex: 1,
        pageSize: 30,
        timeStamp: 1577787047,
        channelUserId: "a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0",
        itemName: "",
        CreateDate: []
      };
    }
  }
};
</script>

<style lang="scss">
.container-from {
  width: 100%;
  padding: 30px 40px;
  display: flex;
}
.from-left {
  flex: 8;
  display: flex;
  flex-wrap: wrap;
  .from-item {
    display: flex;
    margin-right: 30px;
    margin-bottom: 24px;
    .span-left {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 70px;
      color: rgba(47, 47, 47, 1);
    }
    .el-input > input,
    .el-input__inner {
      width: 175px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 0;
      border: 1px solid rgba(225, 225, 225, 1);
    }
  }
}
.from-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  button,
  button:hover,
  button:focus {
    border-radius: 100px;
    width: 58px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    margin-top: 20px;
    border: 1px solid rgb(48, 113, 254);
    background: rgb(49, 113, 255);
    color: rgb(255, 255, 255);
  }
  .btnTwo,
  .btnTwo:hover,
  .btnTwo:focus {
    background: #fff !important;
    color: #000 !important;
  }
}
</style>
