<template>
  <div v-loading="loading" class="container">
    <el-table ref="multipleTable" :data="infoList" tooltip-effect="dark" style="width: 100%" :header-cell-style="headerColor">
      <el-table-column prop="drama_name" label="短剧" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="user_name" min-width="160" label="推手" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column min-width="200" label="日期" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.start_date + ' - ' + scope.row.end_date}}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.enable==1" class="c-448AFF">启用</span>
          <span v-else class="c-F03F5C">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="160" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editEvent(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" v-if="scope.row.enable==1" @click="enableEvent(scope.row,0)">禁用</el-button>
          <el-button type="primary" size="mini" v-else @click="enableEvent(scope.row,1)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
    <!-- 编辑投手 -->
    <el-dialog class="dialogCon_permission" title="编辑投手" :visible.sync="editTsFlag" :append-to-body="true" width="400px">
      <addPitcher :gzhData='gzhData' :editPitcher='editPitcher' v-if="editTsFlag" @returnAddPitcher="returnAddPitcher"></addPitcher>
    </el-dialog>
  </div>
</template>
<script>
import addPitcher from './addPitcher.vue'
export default {
  props: ['gzhData'],
  components: { addPitcher },
  data () {
    return {
      infoList: [],
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 40,
      editTsFlag: false,
      editPitcher: {}
    }
  },
  created () {
    this.init(1)
  },
  methods: {
    async enableEvent ({ drama_id, user_id, start_date, end_date, rela_id }, type) {//启用/禁用
      try {
        const params = { drama_id, user_id, start_date, end_date, rela_id, enable: type }
        this.loading = true
        const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.adqAccount_adqEditPitcher, params)
        if (res && res.errno == 0) {
          this.init(this.page)
          this.$message.success('操作成功')
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
        this.loading = false
      }
    },
    editEvent (data) {
      this.editPitcher = data;
      this.editTsFlag = true
    },
    returnAddPitcher (val) {//编辑投手回调
      this.editTsFlag = false
      if (val == 'update') {
        this.init(this.page)
      }
    },
    async init(page) {
      try {
        this.page = page ? page : this.page;
        this.loading = true
        const { data: res = {} } =  await this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_adqPitcherIndex, {
          params: {
            account_id: this.gzhData.account_id,
            page: this.page,
            page_size: this.page_size
          }
        })
        if (res && res.errno == 0) {
          this.infoList = res.rst.data;
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    headerColor (rowIndex) {
      if (rowIndex === 0) {
        return { background: "#ebeef5", };
      } else {
        return { background: "#ebeef5", };
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 0 10px;
}
</style>