
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      tableName="salesHistoryTable" 
      idName="sa_salesforecastbillid" 
      :apiId="{query:20220908134403,del:''}" 
      :options="options"
      :detailPath="{path:'/product_detail'}"
      @listCreate="list">
      <div slot="custom">
        <label class="search__label ">状态:</label>
        <el-select  class="inline-24" @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.label"></el-option>
        </el-select>
      </div>
      <div slot="titleRight" style="display:flex;margin-left:10px">
      </div>
       <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#3874f6" 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>
          <span style="color:#333333" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已提报'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'isrepeat'">
          <span>{{scope.data.column.data.isrepeat == 1 ?'月度提报':'单次提报'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'periodpoint'">
          <span v-if="scope.data.column.data.begdate">
            {{scope.data.column.data.begdate.split(' ')[0]}}
          </span>
          <div v-else>
            <span v-for=" item in scope.data.column.data.periodpointchange" :key="item.index">
              每月{{item}}日
            </span>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname == 'taskdays'">
          <div>
            <span v-for=" item in scope.data.column.data.taskdayschange" :key="item.index">
              {{item}}天
            </span>
          </div>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
<!--        <el-button type="text" size="mini" @click="detailGo(scope.data)">提 报</el-button>-->
      </template>
    </basicLayout>
  </div>
</template>

<script>
import DownSelect from '@/components/down_select/index'

export default {
  components:{
    DownSelect
  },
  data () {
    return {
      options:[
      ],
      statusData:[
        {
          label:'待提报',
          value:'待提报'
        },
        {
          label:'提报中',
          value:'提报中'
        },
        {
          label:'已提报',
          value:'已提报'
        }
      ],
      selectParam: {
        status:''
      },
    }
  },
  filters: {
    timer (val, type) {
      if (type == '月') {
        return '每月' + val.substr(1, val.length - 2) + '日'
      } else {
        return '每周' + val.substr(1, val.length - 2)
      }
    }
  },
  computed:{
  },
  methods:{
    /* 清除分类 */
    clearCategory () {
      this.$refs.basicLayout.param.content.where.baseonproject = ''
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.listData()
    },
    /* 分类改变 */
    categoryChange (data) {
      this.$refs.basicLayout.param.content.where.baseonproject = data
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.listData()
    },
    list (param) {
      param.content.nocache = true
    },
    selectChange(){
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    detailGo(row){
      console.log(row)
      this.$store.dispatch('changeDetailDrawer',true)
      this.$router.push({
        path:'/product_detail',
        query:{
          id:row.sa_salesforecastbillid,
          rowindex:row.rowindex
        }
      })

    },
  }
}

</script>
<style>
</style>