
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HManagement/clueManage/m_activity/modules',
        edit:'HManagement/clueManage/m_activity/modules',
      }"
      tableName="activitylist" 
      idName="sat_campaignid" 
      :apiId="{query:20221101095102,del:''}" 
      :options="options"
      :detailPath="{path:'/marketing_activityDetails',param:{tabIndex:tabIndex}}"
      :specialKey="[{key:'leader',value:'name'}]"
      @listCreate="list"
      @listData="listData"
    >
     <template #custom >
       <div class="mt-10">
        <p class="search__label">范围:</p>
        <el-select
          class="inline-24"
          size="small"
          v-model="area"
          placeholder="请选择范围"
          @change="areaChange"
        >
          <el-option
            v-for="item in areaList2"
            :key="item.index"
            :label="item.templetname"
            :value="item.templetid"
          ></el-option>
        </el-select>
      </div>
       <div class="mt-10">
        <p class="search__label">活动类型:</p>
        <el-select v-model="search.type" class="inline-24" size="small" placeholder="请选择活动类型" @change="campaigntypeChange" clearable>
          <el-option
            v-for="item in campaigntypeList"
            :key="item.index"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="mt-10">
        <p class="search__label">活动状态:</p>
        <el-select v-model="search.status" class="inline-24" size="small" placeholder="请选择活动状态" @change="statusChange" clearable>
          <el-option label="新建" value="新建">
          </el-option>
          <el-option label="发布" value="发布">
          </el-option>
          <el-option label="结束" value="结束">
          </el-option>
        </el-select>
      </div>
     </template>
      <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:#000000" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#cccccc" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '结束'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color: rgb(82, 196, 26)" 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 == 'director'">
          <span >{{scope.data.column.data.director || '--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'leader'">
          <span >{{scope.data.column.data.leader ? scope.data.column.data.leader[0].name : '--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'allocationstatus'">
          <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:#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>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
<!--        <span v-if="!scope.data.column.data[scope.data.column.columnname] && scope.data.column.data[scope.data.column.columnname] !== 0">&#45;&#45;</span>-->
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  components:{
  },
  data () {
    return {
      options:[],
      search:{},
      campaigntypeList:'',
      areaList2:[
      ],
      area:'',
      tabIndex:"1",
    }
  },
  provide () {
    return {
      campaigntypeList: () => this.campaigntypeList
    }
  },
  methods:{
    listData(data) {
      console.log(data)
    },
    list (param) {
      param.content.isAll = 0
      param.content.nocache = true
      param.content.type = 1
    },
    async campaigntype () {
      const res = await this.$api.requested({
        "id": 20220901092501,
        "content": {
          "typename":'campaigntype'
        }
      })
      this.campaigntypeList = res.data
    },
    campaigntypeChange () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where.type = this.search.type
      this.$refs.basicLayout.listData()
    },
    statusChange () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where.status = this.search.status
      this.$refs.basicLayout.listData()
    },
    areaChange(){
      this.tabIndex = this.area
      this.$refs.basicLayout.param.content.pageNumber=1;
      this.$refs.basicLayout.param.content.type = this.area;
      this.$refs.basicLayout.listData()
    },
    async querytemplet () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.querytemplet.querytemplet",
        "method":"query",
        "content": {}
      })
      this.areaList2 = res.data
      this.area = res.data[0].templetid
    }
  },
  created () {
    this.campaigntype()
    this.querytemplet()
   /* const res = await this.$store.dispatch('optiontypeselect','dataarea')
    this.areaList2 = res.data
    console.log(this.areaList2)*/
  }
}

</script>
<style>
</style>