<template>
  <div class="app-container customer_potential">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="filter-container">
          <el-input v-model="tel" placeholder="请输入刊登号码" class="filter-item"/>
          <el-input v-model="phone" placeholder="请输入400号码" class="filter-item"/>
          <el-select
            v-model="launchTypeID"
            class="filter-item"
            filterable
            clearable
            placeholder="请选择投放类型"
        >
        <el-option
          v-for="item in launchType"
          :key="item.F_ValueId"
          :label="item.F_Value"
          :value="item.F_ValueId"
        />
      </el-select>
        <el-select
        v-model="mediaNameId"
        class="filter-item"
        filterable
        clearable
        placeholder="请选择媒体名称"
        >
        <el-option
        v-for="item in mediaName"
        :key="item.F_ID"
        :label="item.F_Name"
        :value="item.F_ID"
        />
    </el-select>
        <el-select
        v-model="boundGoodsId"
        class="filter-item"
        filterable
        clearable
        placeholder="请选择绑定商品"
        >
        <el-option
          v-for="item in boundGoods"
          :key="item.F_ProductId"
          :label="item.F_ProductNumberName"
          :value="item.F_ProductId">
        </el-option>
        </el-select>
          <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
          <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
          <el-button v-permission="'HY_deletes'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deletes">批量删除</el-button>
        </div>
        <el-table v-loading="loading" :data="dataLists" border stripe @selection-change="changeSelects">
          <!-- <el-table-column type="selection" width="40"/> -->
          <el-table-column prop="F_TypeName" label="投放类型" align="center"  width="100"/>
          <el-table-column prop="F_Name_MT" label="媒体名称" align="center" min-width="100" />
          <el-table-column prop="F_Tel" label="刊登号码" align="center" min-width="100" />
          <el-table-column prop="F_Phone" label="400号码" align="center" min-width="100" />
          <el-table-column prop="F_CommodityName" label="绑定商品" align="center" min-width="100" />
          <el-table-column prop="F_LaunchTime" label="投放日期" align="center" min-width="100" />
          <el-table-column prop="F_DailyExpenses" label="日费用" align="center" min-width="100" />
          <el-table-column prop="F_IsRemind" label="是否提醒" align="center" min-width="100" >
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.F_IsRemind==0">否</el-tag>
              <el-tag type="success" v-else>是</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="F_State" label="媒体状态" align="center" min-width="100" >
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.F_State==0">启动</el-tag>
              <el-tag type="warning" v-else-if="scope.row.F_State==1">暂停</el-tag>
              <el-tag type="danger" v-else>终止</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" align="center" class-name="oparate_btn" fixed="right">
            <template slot-scope="scope">
              <!-- <el-button v-permission="'HY_detail'" size="mini" plain type="success" @click="btn_detail(scope.row.id)">详情</el-button> -->
              <el-button v-permission="'HY_edit'" size="mini" plain type="text" @click="btn_edit(scope.row.F_ID)">编辑</el-button>
              <el-button v-permission="'HY_delete'" size="mini" plain type="text" @click="btn_delete(scope.row.F_ID)">删除</el-button>
              <el-button v-permission="'HY_addPlan'" size="mini" plain type="text" @click="btn_addPlan(scope.row.F_ID.toString())">添加计划</el-button>
              <el-button v-permission="'HY_addChange'" size="mini" plain type="text" @click="btn_addChange(scope.row.F_ID.toString())">添加变更</el-button>
              <el-button v-permission="'HY_manage'" size="mini" plain type="text" @click="btn_administration(scope.row.F_ID.toString())">管理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="pageParams.total > 0" :total="pageParams.total" :pageindex.sync="pageParams.pageindex" :pagesize.sync="pageParams.pagesize" class="pagination" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { pickerOptions } from '@/utils'
import { getDictionaryValueList } from '@/api/commonAPI'
import manage from './manage'
import addPlan from './addPlan'
import addChange from './addChange'
import administration from './administration'
import { getMediaList,getMedia,deleteMediaDelivery,getShopList} from '@/api/mediaCenter/mediaInformation'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'CustomerInfoQZ',
  components: {
    Pagination
  },
  filters: {
    timeFilter: function(value) {
      return value === '0001-01-01 00:00:00' ? '-' : value
    }
  },
  data() {
    return {
      loading: false,
      searchDate: '',
      tel: '',
      phone: '',
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      searchDate:'',//时间日期
      pickerOptions, // 日期数据
      multipleSelection: [], // 列表选中的数据
      dataLists: [], // 列表数据
      launchTypeID:'',//投放类型id
      launchType:[],//投放类型
      mediaNameId:'',//媒体名称id
      mediaName:[],//媒体名称
      boundGoodsId:'',//绑定商品id
      boundGoods:[],//绑定商品
      mediaChangeId:'',//媒体变更id
      mediaChange:[],//媒体变更
    }
  },
  computed: {
    ...mapGetters([
      'usercode', // 工号
      'extension', // 分机号
      'telIsLogin', // 是否签入
      'telSeatState', // 坐席状态
      'telLineState', // 线路状态
      'telIsVisCallout' // 外呼面板是否显示
    ]),
    // 是否可以点击外呼
    isAllowCallout: function() {
      // `this` 指向 vm 实例
      return this.telIsLogin && this.telSeatState === 2 && this.telLineState === 1
    }
    //
  },
  created() {
    this.getList()
    this.getDeliveryType();//投放类型
    this.getMediaName();//媒体名称
    this.getChangeType();//媒体变更类型
    this.getGoods();//绑定商品数据
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // 第几页
          pagesize: this.pageParams.pagesize, // 每页几条信息
          type: this.launchTypeID, // 投放类型
          name: this.mediaNameId, // 媒体名称
          commodity: this.boundGoodsId, // 媒体名称
          tel: this.tel.trim(), // 刊登号码
          phone: this.phone.trim(), // 400号码
        }
        getMediaList(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.total
            this.dataLists = response.rows
          }
        })
        resolve()
      })
    },
    changeSelects(val) {
      this.multipleSelection = val
    },
    // 搜索
    btn_search() {
      this.pageParams.pageindex = 1
      this.getList()
    },
    //管理
    btn_administration(changeId){
        this.$layer.iframe({
        content: {
          content: administration, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {'rowid': changeId} // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '20%'],
        title: '更改媒体状态'
      })
    },
    //添加变更
    btn_addChange(changeId){
        this.$layer.iframe({
        content: {
          content: addChange, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {'rowid': changeId} // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '40%'],
        title: '添加变更信息'
      })
    },
    btn_add() {
      this.$layer.iframe({
        content: {
          content: manage, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['90%', '70%'],
        title: '添加媒体投放 '
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: manage, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['90%', '70%'],
        title: '编辑媒体投放'
      })
    },
    btn_detail(editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['60%', '75%'],
        title: '查看仓库信息'
      })
    },
    //添加计划
    btn_addPlan(addPlanId){
      this.$layer.iframe({
        content: {
          content: addPlan, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': addPlanId } // props
        },
        area: ['80%', '70%'],
        title: '添加计划信息'
      })
    },
    btn_delete(editId) {
      this.$confirm('您确定要将此投放信息删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteMediaDelivery(editId).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.getList()
              this.$message.success('删除成功!')
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    btn_deletes() {
      const ids = []
      for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message.warning('没有可删除的选项')
        return
      }
      this.btn_delete(ids)
    },
     //获取投放类型
    getDeliveryType(){
      return new Promise(resolve=>{
        const params={
          isleaf:true,
          code:'MTTFLX'
        }
        getDictionaryValueList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.launchType = response.data.Rows
          }
        })
      })
    },
     //获取媒体名称
    getMediaName(){
      return new Promise(resolve=>{
        const params={}
        getMedia(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.mediaName = response.rows.Rows
            console.log(this.mediaName)
          }
        })
      })
    },
    //获取变更类型
    getChangeType() {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: "MTBGLX"
        };
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            this.mediaChange = response.data.Rows;
          }
        });
      });
    },
    //获取商品下拉
    getGoods() {
      return new Promise(resolve => {
        const params = {};
        getShopList(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            this.boundGoods = response.data;
          }
        });
      });
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .customer_potential{
    .el-table .el-button+.el-button{
      margin-left: 0;
      margin-bottom: 5px;
    }
  }
</style>
