
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HManagement/salesForecastTemplate/modules'
      }"
      tableName="templateTable" 
      idName="sa_salesforecastmodelid" 
      :apiId="{query:20220906150203,del:20220906150603}"
      :options="options"
      :detailPath="{
        path:'/salesForecastDetail'
      }">
      <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>
      <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 v-if="scope.data.column.data.begdate">
            {{scope.data.column.data.enddate?scope.data.column.data.enddate.split(' ')[0]:'--'}}
          </div>
          <div v-else>
            <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>
    </basicLayout>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
 * @param {Array} options:{label:描述,value:值} 
 */
export default {
  data () {
    return {
      options:[],
      statusData:[
        {
          label:'新建',
          value:'新建'
        },
        {
          label:'发布',
          value:'发布'
        },
        {
          label:'结束',
          value:'结束'
        }
      ],
      selectParam: {
        status:''
      },
    }
  },
  methods:{
    selectChange(){
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    }
  }
}

</script>
<style>
</style>