<template>
  <div>
    <basicLayout
        ref="list"
        formPath="recvoucher"
        tableName="recvoucherTable"
        idName="sa_cashbillid"
        :apiId="{query:20221009102903,del:20221009103203}"
        :options="options"
        :detailPath="{
          path:'/recvoucherDetails'
        }"
        @listCreate="list">
      <div slot="custom" style="display:flex">
        <label class="search__label " style="margin: auto;width: 70px;">账户类型:</label>
        <el-select style="margin-right: 24px !important;" class="inline-16" @change="selectChange" v-model="selectParam.accountname" placeholder="请选择账户类型" size="small" clearable>
          <el-option v-for="(item,index) in accountNameList" :key="index" :value="item.accountname" :label="item.accountname"></el-option>
        </el-select>
        <label class="search__label " style="margin: auto;width: 35px;">状态:</label>
        <el-select style="margin-right: 24px !important;" class="inline-16" @change="selectChange" v-model="selectParam.status" placeholder="请选择状态" size="small" clearable>
          <el-option v-for="(item,index) in statusData" :key="index" :value="item.value" :label="item.value"></el-option>
        </el-select>
        <label class="search__label" style="margin: auto;width: 65px;">单据日期:</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>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'amount'">
          <span :style="+scope.data.column.data.amount >= 0 ? 'color:green' : 'color:red'">{{ tool.formatAmount(scope.data.column.data.amount,2) }}</span>
        </div>
        <div v-else-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:#52C41A" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      options:[
        {
          label:'新建',
          value:'新建'
        },
        {
          label:'审核',
          value:'审核'
        }
      ],
      statusData:[
        {
          label:'新建',
          value:'新建'
        },
        {
          label:'审核',
          value:'审核'
        }
      ],
      selectParam: {
        status:'',
        accountname:'',
        begindate:'',
        enddate:''
      },
      accountNameList:[],
      dateSelect:''
    }
  },
  methods:{
    list (param) {
      param.content.where.isrebate = 0
    },
    /*营销账户类型*/
    async accountList(){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "cashbillaccountclassquery",
          "parameter": {
          }
        }
      })
      console.log("营销账户类型",res)
      this.accountNameList = res.data
    },
    selectChange(){
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.selectParam.begindate = this.dateSelect[0]
        this.selectParam.enddate = this.dateSelect[1]
      }else {
        this.selectParam.begindate = ''
        this.selectParam.enddate = ''
      }
      this.$refs.list.param.content.where = this.selectParam
      this.$refs.list.param.content.phonenumber = 1
      this.$refs.list.listData()
    },
  },
  mounted() {
    this.accountList()
  }
}
</script>

<style scoped>
</style>