<template>
  <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
    <div class="grid-content bg-purple">
      <el-input
        v-model="form.name"
        placeholder="合同名称/编号、承兑人名称或出票..."
        clearable
        style="width: 100%"
        @change="handleFilter"
      >
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
    </div>
    <div class="grid-content bg-purple">
      <el-dropdown @command="handleCommand">
        <div class="pulldown">
          <span v-if="!status" class="el-dropdown-link"> 合同状态 </span>
          <span v-if="status" class="el-dropdown-link">
            {{ status }}
          </span>
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
          <el-dropdown-item command="正常">正常</el-dropdown-item>
          <el-dropdown-item command="删除">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="grid-content bg-purple">
      <el-dropdown @command="handlehpCommand">
        <div class="pulldown">
          <span v-if="!hpstatus" class="el-dropdown-link"> 汇票状态 </span>
          <span v-if="hpstatus" class="el-dropdown-link">
            {{ hpstatus }}
          </span>
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
          <el-dropdown-item command="正常">正常</el-dropdown-item>
          <el-dropdown-item command="删除">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="grid-content bg-purple">
      <el-dropdown @command="handleCommandAuditstatus">
        <div class="pulldown">
          <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
          <span v-if="Auditstatus" class="el-dropdown-link">
            {{ Auditstatus }}
          </span>
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
          <el-dropdown-item command="待审核">待审核</el-dropdown-item>
          <el-dropdown-item command="成功">成功</el-dropdown-item>
          <el-dropdown-item command="失败">失败</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="grid-content bg-purple">
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleFilter"
        />
      </div>
    </div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      form: {
        startTime: '',
        endTime: '',
        name: '',
        contractStatus: 0,
        draftStatus: '',
        supplierName: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  methods: {
    handleFilter() {
      this.$emit('filter', {
        ...this.form,
        pageIndex: 1
      })
    }
  }
}
</script>

<style>

</style>
