
<template>
  <div>
    <basicLayout 
      ref="list" 
      :oldFormPath="{
        add:'HDrpManagement/toolBillMag/components',
      }"
      tableName="afterSalesMagTable" 
      idName="sa_aftersalesmagid" 
      :apiId="{query:20230104160703,del:'20230104160803'}"
      :options="options"
      :detailPath="{
        path:'/toolManageDetail',
        param:{type:this.type}
      }"
      @listData="list"
      @listCreate="listCreate">
      <div slot="custom" style="display:flex">
        <div class="label_center">
          <p class="search__label">状态:</p>
          <el-select @clear="$refs.list.param.content.pageNumber = 1 ;$refs.list.param.content.where.status = '';$refs.list.listData()" v-model="status" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="$refs.list.param.content.pageNumber = 1 ;$refs.list.param.content.where.status = status;$refs.list.listData()">
            <el-option label="新建" value="新建" />
            <el-option label="提交" value="提交" />
            <el-option label="审核" value="审核" />
            <el-option label="复核" value="复核" />
          </el-select>
        </div>
        <div  class="label_center">
        <label class="search__label">单据日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </div>
      <template v-slot:tbList="scope">
        <span v-if="scope.data.column.columnname == 'status'">
          <span style="color:#000000" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#d90a0a" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '提交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#52C41A" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#3874f6" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '复核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </span>
        <div v-else-if="scope.data.column.columnname == 'isitemreturn'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]] ? '是' : '否'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'returnamount'">
          {{ tool.formatAmount(scope.data.column.data.returnamount,2) }}
        </div>
        <span v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </span>
        <div v-if="scope.data.column.columnname != 'operation' && !scope.data.column.data[[scope.data.column.columnname]] && scope.data.column.data[[scope.data.column.columnname]] !== 0">--</div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options:[],
      status:'',
      dateSelect:'',
      type:'借用归还单'
    }
  },
  methods:{
    list(data) {
      console.log(data);
      
    },
    listCreate (param) {
      param.content.type = this.type
    },
    selectChange(){
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.$refs.list.param.content.where.begindate = this.dateSelect[0]
        this.$refs.list.param.content.where.enddate = this.dateSelect[1]
      }else {
        this.$refs.list.param.content.where.begindate = ''
        this.$refs.list.param.content.where.enddate = ''
      }
      this.$refs.list.listData()
    },
  }
}

</script>
<style>
</style>