<template>

  <base-list @showHeader="tableHeight=660" @hideHeader="tableHeight=560">
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>

        <el-form-item
          label="国家"
        >
          <el-input
            v-model="pagerDto._Eq_CountryCode"
            placeholder="国家"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="主渠道"
        >
          <el-select
            v-model="pagerDto._Eq_RootId"
            placeholder="主渠道"
            clearable
            filterable
          >
            <el-option
              v-for="item in channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="子渠道"
        >
          <el-select
            v-model="pagerDto._Eq_PublicId"
            placeholder="子渠道"
            clearable
            filterable
          >
            <el-option
              v-for="item in channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>

        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" :loading="ladding" @click="pagerSerach">搜索</el-button>
        </el-form-item>
      </el-form>

    </template>
    <template slot="n_option">
      <el-button icon="el-icon-plus" type="primary" size="mini" @click="addDto">添加</el-button>
    </template>
    <template>
      <el-table
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column
          prop="RootName"
          label="主渠道"
        />
        <el-table-column
          prop="PublicName"
          label="子渠道"
        />
        <el-table-column
          prop="CountryCodes"
          label="国家"
        />
        <el-table-column label="操作">
          <template slot-scope="t">
            <el-link icon="el-icon-edit" type="primary" @click="editDto(t.row)">
              编辑</el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="修改关系" :visible.sync="dialogAddOrEdit">
        <el-form :model="row" label-width="80px">
          <el-row :gutter="9">
            <el-col :span="12">
              <el-form-item label="主渠道">
                <el-select
                  v-model="row.RootId"
                  placeholder="主渠道"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in channels"
                    :key="item.Id"
                    :label="item.Name"
                    :value="item.Id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子渠道">
                <el-select
                  v-model="row.PublicId"
                  placeholder="子渠道"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in channels"
                    :key="item.Id"
                    :label="item.Name"
                    :value="item.Id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="国家">
                <el-input v-model="row.CountryCodes" placeholder="国家" min="0" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="postEditDto">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </base-list>
</template>

<script>
import BaseList from '@/components/Xyy/baselist'
import { _getAllPublic } from '@/api/baseInfo'
import { _getDtos, _addDto, _editDto } from '@/api/channel/public'
export default {
  name: 'PublicCategory',
  components: { 'base-list': BaseList },
  data() {
    return {
      dialogAddOrEdit: false,
      channels: [],
      ladding: false,
      pagerDto: {
        PageIndex: 1,
        PageSize: 20,
        total: 0
      },
      data: [],
      row: {},
      tableHeight: 560
    }
  },
  mounted() {
    this.pagerSerach()
    _getAllPublic().then((resp) => {
      this.channels = resp
    })
  },
  methods: {
    pagerSerach() {
      _getDtos(this.pagerDto).then(response => { this.data = response })
    },
    addDto() {
      this.row = {
        RootId: '',
        PublicId: '',
        Coutrnys: ''
      }
      this.dialogAddOrEdit = true
    },
    editDto(row) {
      this.row = row
      this.dialogAddOrEdit = true
    },
    postAddDto() {
      _addDto(this.row).then(res => {
        this.pagerSerach()
      })
    },
    postEditDto() {
      _editDto(this.row).then(res => {
        this.dialogAddOrEdit = false
        this.pagerSerach()
      })
    }
  }
}
</script>
